CSS – LARRY的午茶時光

首頁 > 文章列表 > 前端工程 > CSS

Bootstrap 5.3 主要更新深色模式 Dark mode 調色盤色票 Color Palette Link 樣式

CSS 前端工程 2023 年 6 月 28 日2023 年 7 月 2 日作者: Larry

Bootstrap 5.3 主要更新：深色模式 Dark mode，自訂 color mode，翻新調色盤色票，新的連結樣式

Bootstrap 5.3 主要是新增了深色模式 Dark mode，開發者也可以客製自己的 color mode。另外也翻新了調色盤色票 Color Palette，新增了好幾個色票。連結樣式及文件也大幅度翻新了。

閱讀全文

Interop 2023 瀏覽器相容性 Chrome Edge Safari Firefox CSS

CSS 前端工程網路科技 2023 年 3 月 19 日2023 年 6 月 3 日作者: Larry

Interop 2023，四大瀏覽器繼續合作，解決瀏覽器相容性的問題並推動新技術

從 Interop 2022 開始，四大瀏覽器 (Chrome, Edge, Safari, Firefox) 一起合作解決瀏覽器相容性的問題，已經有了明確的成果。Interop 2023 四大瀏覽器繼續合作，推動 Web 技術的進步，與降低瀏覽器相容性的問題。

閱讀全文

CSS Viewport Units large small dynamic 手機瀏覽器

CSS 前端工程 2022 年 12 月 13 日2022 年 12 月 14 日作者: Larry

新的 CSS Viewport Units (large/small/dynamic)，目前四大瀏覽器已全部支援！

最近 Chrome 108 版宣布開始支援新的 Viewport Units：lvh, svh, dvh。這也是 Interop 2022 的第 9 個工作項目。Chrome 開始支援後，目前四大瀏覽器都已支援新的 Viewport 單位。

閱讀全文

CSS 前端工程 2022 年 7 月 29 日2023 年 6 月 25 日作者: Larry

Bootstrap 5.2 主要更新：幾乎全部元件都用 CSS 變數實作，新的 CSS build sequence

Bootstrap 5.2 沒有大的架構更新，就是多了一些 CSS helper class。CSS 變數的使用幾乎遍及所有元件，所以 CSS 變數的使用越來越重要。以及調整了 Bootstrap CSS build sequence。

閱讀全文

Interop 2022 Chrome Safari Edge Firefox 瀏覽器相容性

CSS 前端工程網路科技 2022 年 4 月 18 日2023 年 3 月 18 日作者: Larry

從 Compat 2021 到 Interop 2022，史上第一次所有的主流瀏覽器，合作解決相容性的問題

史上第一次所有主流的瀏覽器廠商 (包含 Google Chrome, Apple Safari, Microsoft Edge, Mozilla Firefox) 聯合起來，一起解決瀏覽器相容性的問題，一起成立了一個 Interop 2022 專案。

閱讀全文

CSS 前端工程 2022 年 2 月 6 日2022 年 8 月 16 日作者: Larry

CSS Cascade Layers (@layer)，解決長期以來 CSS 競爭權重 (Specificity) 的問題

稍微有點規模的專案，都有著複雜的 HTML 結構。你在開發某一頁時，根本不會知道你寫的這一個 CSS，跟已存在的 CSS 到底誰的權重重。如果已存在的 CSS 權重重，就暴力覆寫，大概會是這樣的情況。

閱讀全文

CSS 前端工程 2021 年 8 月 24 日2022 年 8 月 11 日作者: Larry

Bootstrap 5.1 主要更新：開始使用 CSS Grid 實作 grid system，新的元件，更多的 CSS 變數 (custom property)

很多專家認為 CSS Grid 是繼 Flexbox 後，近代 CSS 的另一個里程碑。Bootstrap 4 開始使用 Flexbox 實作 grid system，Bootstrap 5.1 開始可以切換為 CSS Grid 實作。

閱讀全文

CSS 前端工程 2021 年 3 月 23 日2024 年 11 月 11 日作者: Larry

CSS Comparison Functions：min(), max(), and clamp()

隨著回應式網頁的普及，各大瀏覽器都已經支援 CSS min(), max(), clamp()。使用這三個 function 除了可以簡化 CSS 程式碼，更因為可以內嵌運算式，加上 CSS 目前是朝原生參數化的方向在走，在實際使用上可以有更多的想像和寫法。

閱讀全文

CSS 前端工程 2020 年 12 月 11 日2023 年 3 月 18 日作者: Larry

Bootstrap 5 主要更新：不再相依 jQuery，新增 Utilities API，使用 CSS custom properties

本篇會走一遍 Bootstrap 5 的主要更新，懂前端工程的讀者，可以看看有沒有東西是值得拿來使用，或進一步再去研讀的。以下大致是從 Bootstrap 5 比較重要的部分，往比較 minor 的部分排序。

閱讀全文

CSS 前端工程 2018 年 4 月 19 日2023 年 6 月 25 日作者: Larry

Bootstrap 4 Flex

Flex 是 CSS3 很重要的一種佈局方式，Bootstrap 4 也出了很多 help class, 建議對前端有興趣的朋友要使用。有很多排列組合，尤其是對齊方面，但不用糾結在其中，一切還是以設計和實務需求來做驅動。

閱讀全文

CSS 前端工程 2017 年 8 月 17 日2022 年 7 月 25 日作者: Larry

Bootstrap 4 主要更新：Grid System、CSS

Bootstrap 4 beta 在日前發佈了，本篇文章記錄了 v4 的主要的更動。如果是同為開發者的朋友，可以想想為什麼 bootstrap v4 要採納這些更動，有什麼技術是值得我們進一步去研讀的。

閱讀全文

CSS 前端工程 2015 年 11 月 8 日2021 年 3 月 23 日作者: Larry

CSS transform

在研究 CSS transform 之前我們可以先理解一下 Graphics pipeline. Graphics pipeline 基本上就是 model -> view -> project -> viewport (與一般我們說的 MVC 等 modeling 概念無關)，這 pipeline 其實就是矩陣相乘。

閱讀全文

CSS 前端工程 2015 年 6 月 13 日2023 年 9 月 6 日作者: Larry

CSS object-fit

CSS object-fit 是在 CSS Images Module Level 3, Level 4 都有定義。定義在 “module” 裡代表它是 CSS3 開始的，而且 CSS Images Module Level 3, Level 4 有各自的文件狀態。

閱讀全文

CSS 前端工程 2015 年 3 月 20 日2023 年 3 月 18 日作者: Larry

CSS 的演變歷程，Mask & Clip

與 CSS 2 不同，CSS 3 不是用一大張文件來定義所有的規格，而是將不同的功能用不同文件定義，每個文件稱之為 “module” (所以 CSS 3 是由很多 module 所組成)。還記得 W3C 的四個文件狀態 (WD，CR，PR，REC)， CSS 3 的每個 module 有自己的文件狀態。

閱讀全文