Category: css

[css] collapsing margin 是什麼?

不常寫前端的工程師們,時常為了各種的 CSS 行為感到挫折(圖述) 其中一個大概就是 collapsing margin,明明說好的 css box model margin 卻不講武德的變成右邊那樣 Collapsing margin 規格定義 讓我們來看看 CSS3 對於 margin 的規格定義 NOTE: Adjoining margins in block layout can collapse. See CSS2§8.3.1 Collapsing Margins for details. Also, margins adjoining a fragmentation break are sometimes truncated. See CSS Fragmentation 3 § 5.2 Adjoining Margins at Breaks for details. https://www.w3.org/TR/css-box-3/#margins 看起來關於 margin 會 collapse 相關的定義,要參照 CSS2 spec 標準 可以看到 Collapsed margin 相關的規範 […]

[css] position: sticky

今天來介紹 position: sticky,首先來看看這個 CSS 的支援度(97%) 嗯….IE 不支援(沒關係,IE 不是瀏覽器,只是個相容性解決方案 by @tomwarren 來看看 position: sticky 的 MDN 文件 說明 The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left.  https://developer.mozilla.org/en-US/docs/Web/CSS/position 簡單翻譯來說,被設定 sticky 的 element 會根據 […]

[css] isolation

介紹一個不常見的 css 屬性 isolation,可以簡單地幫你建立新的 stacking context 如果你還不知道什麼是 stacking context,可以先參考 這篇 那建立新的 stacking context 可以做什麼呢?可以幫你和其他層的 mix-blend-mode / z-index 等等數值作字面上的意思 “隔離” 主要有兩種值: 目前這個屬性支援度算是相當普及了(96%) 如果看完這個屬性,你還是不知道他可以用來做什麼,那你可以試著玩看看 Stacking Order Challenge 想辦法使用 isolation 達到以下的結果: ⚠️ 先自己嘗試看看,再來看答案唷 😛

[css] 你從未瞭解的 z-index / stacking context

首先,先破題這篇文章部分內容來自 What No One Told You About Z-Index – Philip Walton 的啟發 本來是想紀錄 position: sticky 的用法,但看了一下我過去的在 position 的文章中,其實少紀錄了 z-index 與 stacking context 的概念,因此來補坑一下 XD(謎之音:其實是覺得複雜懶得寫 QQ) 有趣的問題 首先我們來看看一個身為前端工程師應該會遇到的日常,我們有三個 position:absolute 的 div 分別為 Red(z-index)/ Green / Blue 的色塊 程式碼與實際畫面可參考 JSFiddle 範例: 問題:如何在不違反以下條件之下,將三個色塊的顯示順序更改為下圖的結果? ⚠️ 在看程式碼的 CSS 之前,你可以嘗試自己在 JSFiddle 範例 中修改看看 預期結果如下: 解法: 我們只需要在 CSS 中為 div 加上以下程式碼即可 如果對於 […]

[css] 讓 CSS 動畫重新開始

前一陣子在做 CSS 動畫的時候,遇到了特定情況會希望動畫重新開始的狀況 像是每點擊一次按鈕就觸發一次動畫的情境,查了一下相關的做法.記錄在這 舉個例子,我們有個 fade-in 的動畫,希望在點擊文字時重新開始動畫 這時候你可能會很直覺認為再次添加 fade-in class ,像是以下這樣 See the Pen restart css animation by camel2243 (@camel2243) on CodePen. 然後你會發現不 work,於是直覺會想說那先做 remove 再 add XD See the Pen css animation demo1 by camel2243 (@camel2243) on CodePen. 結果發現還是不會動,只好開 setTimeout 大絕 www See the Pen css animation demo3 by camel2243 (@camel2243) on CodePen. 雖然看起來不是很好,但是 […]

[css] initial/inherit/unset 有什麼差別呢?

常寫 CSS 應該都經常遇到樣式被覆蓋後不如預期希望回復為初始值等等的問題 常見的場景可能是使用 bootstrap, semantic 等等的 css framework 時,可能是 display, color 等等的屬性值被繼承或更改,希望回復為預設值或繼承至 parent. 另外在專門做網頁第三方元件,像是 disqus 這種必須放在百百種網頁上的元件,在技術規劃初期就將所有 CSS 做上 all: initial 更是一種選項! 以下就讓我們看看 initial/inhreit/unset 三者的差別吧 ~ initial將此屬性值恢復為 css property 的預設值,至於是什麼值可以參考 css 2.1 spec 或者是 css3 spec。 備註:所有 browser 的 tag ,比如 <a> 都有自己的一套預設樣式(user agent stylesheet),就像 input 在 各 browser 都長不一樣 是相同的道理,但不等同於 initial 的預設值。 inherit繼承 parent […]

用 CSS 實現 Tracking

最近看到幾個使用 CSS 做追蹤的小技巧,在這也記錄一下 XD 使用者滑鼠移動到特定元素時 使用者點擊特定連結時 特定 browser 偵測(e.g. chrome) 字體支援度偵測 (e.g. 如果不支援 Calibri 字體) checkbox 被選取時 以上是幾個可能比較常用的追蹤時機,比較適用在特定環境偵測的情境下. 實務上通常是配上一個 unique 的使用者識別代號,相較於普遍使用的 js 追蹤技術還是有些地方需要修改及調整 XD 參考資料: https://github.com/jbtronics/CrookedStyleSheets

[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 排版因此無法透過 […]

[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 […]