最近,我們討論了Elad Shechter的新CSS重置,緊隨其後的是Josh Comeau關於該主題的洞察力博客文章。這標誌著CSS重置景觀的轉變。過去的顯著瀏覽器樣式差異不太普遍,而且通常,在項目的樣式正在進行時,無論如何,許多默認樣式被覆蓋了。因此,“ Modern” CSS重置正在演變為精心策劃的默認樣式集合,為新項目提供實際好處。
研究喬什的方法,似乎恰恰是:樣式的彙編不是固有的,而不是通過提供常見所需的項目功能來支持設計。讓我們通過一些評論來分析他的選擇。
*, *, *::之前, *:: after { 盒子大小:邊框框; }
廣泛接受的做法。儘管使用網格和Flexbox佈局的使用可能會略微降低其實用性,但它仍然是一致尺寸的首選方法。理想情況下,CSS重置應利用繼承,以便在組件級別更容易覆蓋。
* { 保證金:0; }
消除默認利潤的簡潔方法。儘管在某些情況下有潛在的副手,但它可以實施明確的保證金聲明,從而提高了清晰度。將此與padding: 0;
將解決默認列表項目填充。
html,身體{ 身高:100%; }
確保基於百分比的高度正確功能的有用策略,以防止意外的背景行為。而body { height: 100vh; }
似乎足夠了,它缺乏相同的可靠性,這可能是由於iOS Safari怪癖所致。
身體 { 線高:1.5; -webkit-font-smoothing:抗血症; }
-webkit-font-smoothing
屬性會導致過度薄的版式。雖然是有價值的工具,但全球應用程序並不總是理想的。通過html
選擇器管理全局印刷尺寸,並通過媒體查詢調整根字體大小,可提供更多的控制。線路高1.5是合理的默認值,儘管某些值可能會優選接近1.4的值。但是,經常需要進行標題調整。喬什的聰明替代方案:
* { 線高:計算(1EM 0.5REM); }
這是根據字體尺寸動態調整線路高度的,提供了可擴展的解決方案。這項技術受到JesúsRicarte在最佳線路高度計算方面的工作的啟發,值得探索。
IMG,圖片,視頻,畫布,SVG { 顯示:塊; 最大寬度:100%; }
固體包容性。 display: block;
消除線路高問題, max-width: 100%;
防止媒體元素溢出容器。而包括<picture></picture>
是有爭議的,補充<iframe></iframe>
和<object></object>
將增強完整性。
P,H1,H2,H3,H4,H5,H6 { 溢流包:break-word; }
防止長詞(如URL)破壞佈局至關重要。將其應用於.text-content
這樣的更廣泛的選擇器允許級聯,但是針對特定元素是可以接受的。考慮添加<li>
,,,,<dl></dl>
,,,,<dt></dt>
, 和<blockquote></blockquote>
用於全面的線條包裝。線路包裹屬性的最佳組合仍然是正在進行的討論的主題。
#root,#__next { 隔離:分離; }
此react/next.js特定片段會創建一個堆疊上下文。儘管其確切的好處並不明顯,但並未引入明顯的問題。
總體而言,喬什的重置是一種經過深思熟慮的方法。檢查和比較不同的CSS重置策略總是有益的。
以上是關於喬什·科莫(Josh Comeau)的註釋的詳細內容。更多資訊請關注PHP中文網其他相關文章!