這次採訪探討了Elad Shechter創新的CSS重置項目“ New-CSS-Reset”,這是一種利用尖端CSS功能的現代方法。我們不簡單地介紹代碼,而是深入研究其創建背後的原因及其功能的複雜性。
完整的重置代碼是:
/***新的CSS重置 - 版本1.2.0(最後更新23.7.2021)***/ / *刪除除“顯示”以外的所有樣式 */ *:where(:iframe,canvas,img,svg,視頻):不(svg *)){ 全部:不設置; 顯示:還原; } / *首選盒子尺寸 */ *,, *::前, *::後 { 盒子大小:邊框框; } / *刪除列表樣式 */ ol,ul { 列表風格:無; } / *防止圖像超過容器 */ img { 最大寬度:100%; } / *倒塌的桌子邊界 */ 桌子 { 邊界爆發:崩潰; } / * safari textareas的“白空間” */ textarea { 白空間:還原; }
Elad解釋了需要進行新的重置的需求,強調現有重置依賴於較舊的CSS功能。他的方法利用了更新的功能來進行更高效,更有效的重置。他將方法與歸一化的方法進行了對比。 Elad倡導使用標準化。CSS和硬重置,結合其優勢。
新重置的核心all: unset;
。此功能強大的屬性將所有繼承的屬性重置為inherit
和非屬性屬性,以有效地刪除initial
瀏覽器樣式。但是, display
是一個例外。 all: unset;
設置display
到inline
,這是不可取的。因此, display: revert;
用於還原每個元素的瀏覽器的默認display
值,以確保正確佈局。 revert
關鍵字可以智能檢索用戶代理樣式表的默認display
值(如果有),否則會落後於unset
行為。
選擇器*:where(:not(iframe, canvas, img, svg, video):not(svg *))
幾乎針對所有元素,不包括這些元素(例如<iframe></iframe>
,,,,<canvas></canvas>
)。 :where()
偽級可最大程度地減少特異性,從而避免與特定於項目的樣式發生衝突。單獨的:not(svg *)
排除保護SVG元素的完整性。
重置還包括諸如box-sizing: border-box
之類的自以為是的樣式,雖然不是瀏覽器不一致,但被廣泛用作最佳實踐。刪除列表樣式( list-style: none;
)是通過對標記不必要的導航列表的共同用途來證明的,儘管有語義含義。
埃拉德(Elad)討論了未來的潛在增加,這是由於他的項目反復出現的需求。 max-width: 100%;
圖像規則被視為可能的候選人。他還推測了即將到來的喀斯喀特層模塊的影響,這表明它可以消除對降低特異性技術的需求,例如:where()
通過提供層次的式方法來覆蓋。這將允許將重置樣式與特定於項目的樣式進行清潔分開。
以上是與Elad Shechter的採訪有關'新CSS重置”的詳細內容。更多資訊請關注PHP中文網其他相關文章!