它改變了 JavaScript 的體系結構——Webpack 5 Module Federation
CSS 規范一直在不斷發展。盡管在 CSS 新功能的實現很復雜,但是 CSS 工作組還是決定要把簡化版作為新元素添加到規范中。然后由瀏覽器來實現這些新元素,瀏覽器自行決定以哪種順序去實現它們,這就是為什么現在對新功能的支持不匹配的原因。雖然這可能會令人討厭,但實際上完成了規范的瀏覽器要好得多。
CSS 工作組的成員來自主要瀏覽器供應商和 Apple 、Adobe等其他技術公司。 Apple 最近推出了新版的 MacOS,并希望能夠在瀏覽器中檢測到新加入的深色模式。為了做到這一點,Apple 推薦了一個新的 5 級媒體查詢規范。
使用這個媒體查詢,可以檢測用戶是否正在使用操作系統的淺色或深色模式。不過目前僅支持 Safari Technology Preview 69 及更高版本,但其他瀏覽器不應落在后面。
為了測試這個功能,你需要升級到 Mojave 10.14(MacOS)并在“系統偏好設置”中選擇“深色”。我們可以通過好幾種方式使用這種新的媒體查詢來實現不同的主題。在將在本教程中將會探討其中的一些內容。
首先,我們需要有一些 HTML 元素來設置樣式,所以先到 CodePen 創建一個新文件并添加一些元素。首先添加一個容器,以便將內容集中起來,然后再添加一些標題和文本。將 CSS 設置為使用 Sass 以便在CSS中使用嵌套。
到目前為止,我們探索過的方法要么會失去對樣式的控制,要么需要大量的維護才能確保所有內容都在深色模式下更新。不過還有一種方法可以解決這個問題:可以用自定義屬性來定義顏色,然后使用媒體查詢覆蓋它們。
為了使用自定義屬性,我們在:root元素內的CSS頂部定義它們。根元素具有與 HTML 相同的范圍,因此可以全局使用。我們需要確定變量名稱并定義它們的值。
自定義屬性使我們可以完全控制選擇自己的顏色和其他屬性。能夠對頁面容器上的邊框陰影進行更新,使其在使用深色模式時不太透明。索引我們需要為頁面陰影創建一個新的自定義屬性。
1:root { 2 … 3 --page-shadow: 0 0 12px 6px rgba 4 (0,0,0,0.05); 5}
現在我們已經獲得了自定義屬性,可以繼續向頁面添加元素,并使用變量為它們設置樣式。讓我們創建一個按鈕類,并在頁面中添加一個按鈕。