Dulcie @ 2021 By : Template Sell.

Category: css

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

[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/

[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”)、 […]