[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


[css] 讓過長的內容省略為….,text-overflow的用法與說明

在網頁的許多地方可能會出現較長的段落,當文字過長時可能會影響排版及 UI。 我們可以利用 css 的 text-overflow 去做一個客製化的隱藏多餘文字。 這個屬性要記得搭配 overflow: hidden; (oveflow時隱藏)與 white-space: nowrap;(瀏覽器不換行) text-overflow clip  預設值,直接將字切斷 ellipsis 將過長的地方取代為 … 例: 上面例子 <span> 標籤多了 display:inline-block;,是因為 <span> 是行內(inline)元素,並不能設定寬度,因此必須改為 display: inline-block;。 參考資料: https://developer.mozilla.org/zh-TW/docs/Web/CSS/text-overflow

Continue reading


[css] word-break、word-wrap(overflow-wrap) 及 white-space 的差別與用法

剛開始常分不清楚 CSS 中的 word-break、word-wrap 及 white-space 利用這篇釐清這幾個的用法與差別 word-break:決定如何斷行單詞。 normal 瀏覽器預設的單詞斷行,可以看到英文會以詞斷行(不會將原詞切斷),中文則是以字斷行。 break-all 讓非CJK(Chinese、Japanese、Korean)語言的文字,任意斷行(以字斷行)。 keep-all 用詞斷行。 例: word-wrap:當詞斷行後的結果 overflow時,要如何處理 normal 保持在同一行 break-word 切斷詞並換行。 PS. 設定 word-break: break-all; 就不會 overflow,因此 word-wrap 並不會起作用。 例: white-space:決定如何處理元素中的空白字元及斷行。 normal 預設連續空白時瀏覽器會忽略空白(還會省略開頭多餘的空白),只會視為一個,若 overflow 則自動換行。 nowrap 直到遇到 <br /> 之前都不換行,就算你再設定 word-wrap: break-word; 也不會換行。 pre 依原空白字元及排版顯示,overflow 仍不換行。 pre-wrap 保留原排版及空白字元,在 overflow時會自動換行 pre-line 保留原排版,會合併多餘的空白,overflow 自動換行。 PS. 詳細請看參考資料之網址 例: 參考資料: http://abgne.tw/css/css3-lab/css3-word-break.html […]

Continue reading