[譯] CSS 容器查詢單位

幾天前(2021-09-18)我看到 Miriam Suzanne 的一則關於 CSS Query 單位支援的 Tweet 。這個功能最一開始是由 Una Kravets 建議提案。我忍不住試試看它們,看看我們可以從這個功能中得到什麼好處。

本文會嘗試解釋每個單位的運作和我們該如何使用它們,尤其是元件該如何因應父元素的寬。如果您還不知道什麼是 CSS 容器查詢。這裡有一些範例介紹關於容器查詢如何影響我們的實作,如果您還沒有任何概念強烈建議您先閱讀該文章。

繼續閱讀

[譯] CSS 容器查詢 (CSS Container Query)

作為前端開發人員,在過去六年中,我沒有像現在這樣對 CSS 的新功能感到興奮。容器查詢(Container Query)現在已經可以通過在 Chrome 設定參數啟動支援。感謝那些像是 Miriam Suzanne 的人的努力。

我記得看過很多關於支援 CSS 容器查詢的笑話,但最終它成為現實。這篇文章試著了解為什麼我們會需要容器查詢,以及我們如何使用它們簡化開發,更重要的是您可以實現更強大的元件和佈局。

CSS Media Query 的問題

一個網頁通常由不同的區塊和元件組成,然後我們利用 CSS Media Query 讓它們支援 RWD。這機制沒有什麼問題,但有一些限制。例如我們可以使用 Media Query 在行動裝置呈現元件最小化的版本。

很多時候,RWD 並不是由 Viewport 或螢幕大小來決定的,而應該是由容器的大小來決定。試想下面的範例:

繼續閱讀

CSS Transitions, Animations 與 Vue

關於 transitions

要理解 Vue 轉場與動畫的運作,首先我們需要具備 CSS transitions 和 animations 的基本知識。
這邊我們不會完整交代所有的教學,而是重點式的節錄。

讓我們先從 transitions 開始,transitions 中文我們可以稱為轉場,其主要的意思定義 CSS 樣式產生變化時,兩者之間的轉換效果,所謂的轉換效果指的是變化的長度時間,延遲時間,時間控制函式(timing-function)。
舉例來說:

繼續閱讀

[譯] 學習 CSS clip-path 屬性

整體來說網頁主要是由矩形所構成的,另一方面印刷品則具備相對多樣性。造成這樣差異的原因有很多,不過其中一個即是缺少合適的工具。
這篇文章主要會介紹 clip-path 這個 css 的樣式規則可以讓我們遮掉元素的局部,就是不顯示出來。達成這項功能背後的原理就是我們可以透過它去定義可視區,類似於遮色片的概念。我們將從基礎開始然後涵蓋語法,進一步理解進階的概念。

繼續閱讀

[譯] 美化無法載入的圖片 <img>

當網頁中無法載入圖片(通常是圖片連結失效或錯誤)時,瀏覽器預設會幫我們顯示一個小小的圖示告知我們連結失效了。

這些預設圖片每一個瀏覽器都不太一樣,通常也不太好看。這篇文章主要介紹的內容就是我們可以透過 css 來美化這個預設行為。

繼續閱讀

CSS Grid 介紹

當我們要建置複雜的網站時 Grids 是非常重要的。其重要性我們可以從大量的 CSS 框架中窺知ㄧ二,因為幾乎所有的框架都有提供網格(Grids)系統來加速開發。
隨著 CSS Grid 規範的出現,將來我們將不需要額外的樣式就可以使用網格。另外的好處就是我們將不需要再依賴 inlinefloat 來完成那些佈局需求
在這篇文章我們將要介紹一些網格基本的用法,然後透過實作一個基本的部落格佈局來理解其用法。

繼續閱讀

[譯] Houdini: 你還沒聽說!這可能是 CSS 開發中最令人興奮的事!

其實…我想說這可能是最令我感到興奮..但又害怕頭痛的功能… - 原文連結

你曾經想要使用某個 CSS 的新功能,但是最後卻因為這個功能瀏覽器還未全面支援而放棄了嗎?甚至更糟糕的狀況,瀏覽器已經支援了但卻充滿問題。我敢打賭這些情況你肯定遇過了。如果上面這種情形你曾經遇過,那麼你是應該關心一下 Houdini

繼續閱讀

line-height 問題筆記

line-height 歸納

  • line-height 有五種屬性可用,預設是 normal 他會拿 font-size * 1.2
    • normal
    • number ex: 1.2, 1.8 => 倍數
    • unit ex: 18px, 2em, 3rem, etc…
    • percentage ex: 90%
    • inherit => line-height from parent
繼續閱讀

深入 css z-index 屬性

說來汗顏,一直以來對於 css 常常是不求勝解。直到自己需要打造自己的輪子才發現對 z-index 完全不熟悉。
關於 z-index 的問題其實非常少人完全明白它到底是怎麼運作的。事實上這並不複雜,不過如果你不曾花些時間閱讀規範可能你不曾察覺一些重要的觀念。

繼續閱讀