首頁 > web前端 > css教學 > 關於喬什·科莫(Josh Comeau)的註釋

關於喬什·科莫(Josh Comeau)的註釋

尊渡假赌尊渡假赌尊渡假赌
發布: 2025-03-16 09:22:10
原創
491 人瀏覽過

關於喬什·科莫(Josh Comeau)自定義CSS重置的註釋

最近,我們討論了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中文網其他相關文章!

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