與Elad Shechter的採訪有關'新CSS重置”

這次採訪探討了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中文網其他相關文章！