[css] 搞懂 flex-grow, flex-shirk 及 flex-basis 三種屬性

在 CSS3 支援  flexbox 排版以後,相信許多人已經使用了 flexbox,還沒使用過的可以去玩 Flexbox Froggy 學習一下 XD 最近使用 flexbox 製作 RWD 網站時,順便弄清楚了 flex-basis, flex-grow , flex-shrink 在這邊紀錄一下 flex-basis 決定 flexbox 排版的 item 的初始寬/高(取決於 flex-direction 的方向). auto 預設值,根據 item 的內容決定寬/高 <width/height> 指定特定的寬/高,可以是數值也可以是比例. Q: flex-basis 和 width/height 有什麼不一樣? A: 當 flex-direction: row 時,flex-basis 會決定了 width. 當 flex-direction: column 時,flex-basis 會決定了 height.  備註: position: absolute 的 elment 因為不會是 flexbox 排版因此無法透過 […]

Continue reading


[javascript] requestAnimationFrame 與 css3 animation 比較

之前看到了 requestAnimationFrame 的實作改善了原本使用 setTimeout 與 setInterval 所繪製動畫可能造成的效能問題。(相關文章) 於是想說來試著比較看看目前 css3 animation 與 使用 requestAnimationFrame 的 FPS 差異。 我只打算測試看看 chrome 跟 firefox,因為懶惰XD 首先我們先試著打開瀏覽器 dev tool 中的 FPS 監視器。 chrome 的開啟選項如下圖 打開此選項後,我們可以看到目前的 FPS 及使用的記憶體等資訊。 接下來我們嘗試寫一段 requestAnimationFrame 與 css3 animation 的程式碼 我們可以切換上面這段動畫所實作的方式( requestAnimationFrame 或 css3 animation) 我自己實測 Chrome: requestAnimationFrame 的 FPS 大概在 20-25,GPU 記憶體使用量為 7.5 MB css3 animation FPS則維持 60FPS,GPU 記憶體使用量為7.5 MB […]

Continue reading


[CSS] object-fit / object-position 調整置換元素(img..等)的內容

這幾天才看到的一個 css 屬性,以往我都喜歡用 background-image 而不使用 img,很大原因就是 background 提供許多操作圖片縮放的 css object-fit / object-position 透過這兩個屬性,我們可以控制置換元素的內容填入的位置及大小。 PS. 置換元素指的是img、video 及 canvas …等,簡單說就是 tag 的 src 載入內容後,會取代原本元素。 比較可惜的是, IE、edge 並不支援這兩個屬性 object-fit: fill 預設值,預設會強制變形至 css 所定義的元素寬高,不管原檔比例。 contain 增加或減少載入物件的寬度及高度(維持原比例)直到放得進所定義的元素寬高。 cover 填滿元素的寬度及高度(維持原比例),通常會剪掉部分的物件。 none 不做任何大小及比例調整。 scale-down 將會選擇設為 none 或 container 兩者間較小的那個物件。 看看實際的例子吧:   object-position 預設為 center center,通常會跟 object-fit 一起使用,定義物件所顯示的 x/y 位移。(看例子比較容易懂囉) 參考資料: https://css-tricks.com/almanac/properties/o/object-fit/ https://css-tricks.com/almanac/properties/o/object-position/

Continue reading


[CSS] 各種 CSS Pseudo-Class Selector

最近在看一些 CSS 的 pseudo-class selector,有些在瀏覽器支援度已經很普及卻很少看到有人在 CSS 中實際使用,在這紀錄幾個我覺得蠻實用的 selector 提供個總表 :empty :after / :before :enabled / :disabled :first-child/:last-child :first-of-type/:last-of-type :invalid/:valid :lang :only-child :only-of-type :optional/:required :root ::selection :empty 元素中是否有內容(包含空白)。(IE9 以上及其他瀏覽器幾乎都支援)   :after / :before (IE9 以上及其他瀏覽器幾乎都支援) 在元素前/後新增擬元素(通常會使用 content 屬性)。 最簡單的例子,但是這個例子實務上可能不是這麼實際 實務上,我會比較建議把這種擬元素套到 icon 或是一些比較無結構意義的地方,進而讓 html 減少寫無架構性的元素。(程式碼可能比較長,這邊就不寫) 例如: clearfix、block 的垂直置中(方法六) 及 tooltip 常用到的三角形   :enabled / :disabled (IE9 以上及其他瀏覽器幾乎都支援) 被設置 enabled(enabled=”enabled”)、 […]

Continue reading


[CSS] 超連結()的狀態樣式

記錄一下超連結的(<a>)幾個狀態 css selector,相較普通元素多了”未訪問” 與 “已訪問” 的 selector a: 超連結的基本樣式。 a:link 尚未訪問過的超連結樣式。 a:visited 已訪問過的超連結樣式。 a: hover 滑鼠 hover 狀態的樣式。 a:focus 目前 focus 的超連結元素樣式。 a:active 連結被點擊當下的樣式。   參考資料: http://www.w3schools.com/cssref/sel_link.asp

Continue reading


[CSS] flexbox 解析,解決傳統排版的複雜問題

CSS3 的新排版方式,flexbox (目前在IE上好像還是有不少 bug….) 利用 flexbox 可以解決我們傳統排版方式遇到的許多問題。 在這篇文章中,我就不介紹 flexbox 的用法與屬性了(flexbox教學的文章網路上很多,google後應該一堆) 但我還蠻推薦這個網站: http://flexboxfroggy.com/ 花不到一個小時就可以很快上手 flexbox 排版囉! 接下來,我會簡單比較幾個複雜的案例,使用 flexbox 排版與傳統排版的差異 還記得以前在不同情況時的各種置中方法嗎? 在 flexbox 版面配置中一切都變得很容易,只要利用 justify-content 與 align-items 就可以輕易達成 選單的導覽列,我們時常使用 inline-block 去做選單的每個選項,針對選項的數量去制定寬度如( 33%、25%等),這樣日後增加選項時我們還需要去更改 CSS 的寬度設定 但在 flexbox 版面時,我們可以讓裡面的 item 自動分配寬度 如: 在寫多欄式的版面時,可能每欄的高度不同,若要使所有欄與最高欄的對齊。我們需要用一些 overflow: hidden; padding-bottom: 9999px; margin-bottom: 9999px; 這類的 CSS hack。(不乾淨的寫法。 在 flexbox,可以透過簡單 flex-grow 就可以做到相同的效果 雙邊側欄 + 中間主內容隨螢幕改變大小。 如: […]

Continue reading


[css] float 屬性,什麼是 clearfix?

有寫過 CSS 的應該都知道有一個屬性為 float,例如我們常常使用 float 去做一些導覽列的應用: 例: 當然也可以使用 display: inline-block,達到類似的效果。 不過在以上這個例子,如果你仔細看了一下 HTML 與 CSS的程式碼,你應該可以發現 原本應該是 div > ul > li 的結構,而且 div 應該要有 #CCC地的背景顏色,但卻似乎沒出現。 若你再仔細一點按下 F12檢查元素,會發現 div 的高度竟然是 0 ? 這其實也就是元素並不會計算到有 float 屬性的元素高度,因此可能導致高度的值有誤 在目前新的瀏覽器中,我們可以在底下增加元素並賦予 clear: both 這個屬性來解決這個問題。(稱為 clearfix) 或是在 div 增加 overflow: auto; 的屬性: 我個人覺得更好的解法是利用 css 的擬元素

Continue reading


[css] position 屬性relative、absolute、static 及 fixed 解析

css 的 position 屬性,許多剛入門的人不深入了解,容易不清楚究竟是以哪個父元素做定位,造成不良的HTML編排架構。(最差的狀況就是用了一堆 fixed…..) 這篇整理幾個範例,說明每個屬性的用法。   static: 預設定位,無法定義 top、left、bottom 與 right。 relative: 元素與 static 位置相同,可定義 top、left、bottom 與 right。(注意: 元素實際位置還是在 static的位置,非偏移過後的位置) absolute: 以上層非 static(預設定位)的父元素為定位基準。(重要: 若上層所有父元素都是預設的 static 定位,則會根據 body 定位) PS. 可以看到藍色區塊會以祖父元素(position: relative;)來做定位。 fixed: 以目前瀏覽器視窗定位,固定在瀏覽視窗的固定位置,不隨滾動捲軸拉動。 也就是很多廣告或彈出視窗的作法。 PS. 非不得已不要用,這等同於強制覆蓋住所有其他的元素及畫面。  

Continue reading


[CSS] 水平置中與垂直置中(傳統作法)

想說把之前報過的幾個簡報整理為文章記錄一下好了XD 在 CSS 中,大家時常為了水平置中與垂直置中的問題而困擾,這篇文章整理幾個傳統解決置中的做法。 不過現在 CSS3 有 flexbox 排版與 grid 排版,幫助我們解決排版的問題,只不過還不夠普及就是了。(flexbox 在IE上還有許多bug….) 首先必須知道在 HTML 的每個元素都有預設的一個 display 屬性,詳情請查文件 如: inline: <span>、<a>、<b>、<i>…等。 inline 元素預設依據內容多寡決定寬度並可以多個並排在一行,無法設定 width、height、margin-top、margin-bottom、padding-top 及 padding-bottom。 block: <div>、<nav>、<section>、<p>、<h1>…等。 block 元素預設會佔滿父元素的100%並且換行, inline-block: 可以多個並排在一行,且可以設定 block 的所有 CSS 屬性。(引述以下 Vexed Blog:就是外面是 inline ,裡面是 block 。) flex: CSS3 的一種排版方式,請見此文章。 其他: 剩下的其他屬性相比較不常見,有用到再自己看囉! 接下來,我就以 inline 與 block 的水平置中及垂直置中方法來介紹(inline-block 的方法就與 inline 一樣)~ 水平置中 […]

Continue reading