首页 >web前端 >css教程 >关于乔什·科莫(Josh Comeau)的注释

关于乔什·科莫(Josh Comeau)的注释

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌原创
2025-03-16 09:22:10491浏览

关于乔什·科莫(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