首頁 > web前端 > css教學 > 與Elad Shechter的採訪有關'新CSS重置”

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

Christopher Nolan
發布: 2025-03-18 11:17:22
原創
904 人瀏覽過

對Elad Shechter的採訪

這次採訪探討了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;設置displayinline ,這是不可取的。因此, 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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板