html5-boilerplate中文翻译 - CSS篇steemCreated with Sketch.

in cn •  11 months ago

HTML5 Boilerplate 主页 | 目录

CSS

HTML5 Boilerplate的CSS 包括:

  • Normalize.css
  • 有用的默认值
  • 常见助手类
  • 媒体查询
  • 打印样式

这个起始CSS不依赖于条件类名称条件样式表Modernizr的存在,并且无论你的开发偏好如何,都可以马上使用它。

Normalize.css

为了让浏览器更加一致地渲染所有元素,符合现代标准,我们包含了Normalize.css - 一个现代化的,替代CSS resets的css库。

不同于CSS resets,Normalize.css:

  • 只针对需要规范化的样式
  • 保留有用的浏览器默认值,而不是删除它们
  • 修复bugs和常见的浏览器表现不一致
  • 通过细微的改进提高可用性
  • 不会混乱调试工具
  • 更好的文档

有关Normalize.css的更多信息,请参考它的项目页面。以及博客文章

有用的默认值

Normalize.css中包含的几种基本样式:

  • 提供基本的排版设置,提高文本的可读性
  • 在文本突出显示期间防止不需要的text-shadow
  • 调整某些元素的默认对齐方式(比如:imgvideofieldsettextarea
  • 为提示(提示用户正在使用过时的浏览器)设计样式

你应该根据项目需要修改或添加样式到这些基本样式。

常见助手类

除了基本样式,我们还提供一些常用的助手类。

.hidden

hidden类可以被添加到你想要从屏幕上隐藏的任何元素上,它可以是稍后填充和显示的元素,或者使用JavaScript隐藏的元素。

.visuallyhidden

visuallyhidden类可以被添加到你想要隐藏的任何元素上,而屏幕阅读器仍然可以访问其内容(该元素仍然存在布局空间中,只是不显示)。

更多信息:

注意 对于使用高对比度模式的用户,visuallyhidden类可能是一个无障碍问题。

当图像被禁用时,使用JavaScript检测,并删除CSS的视觉隐藏以显示替代文本状态。当启用视窗高对比度模式时,使用JavaScript检测,并删除CSS的视觉隐藏以显示替代文本状态。

.invisible

invisible类可以被添加到你想要从屏幕上隐藏的任何元素上,但不影响布局。

相对于高效地从布局中删除元素的hidden类,invisible类只是简单地使元素不可见,同时保持在流中,并且不影响周围内容的定位。

注意 尽量远离,并且不要对关键字堆砌使用上面指定的类别,因为这将损害你的网站排名。

.clearfix

clearfix类可以被添加到任何元素上,以确保它始终完全包含其浮动的子元素。

多年来,已经有很多变种的clearfix hack,但目前,我们使用micro clearfix

媒体查询

HTML5 Boilerplate可以让你轻松地开始使用移动优先响应式网页设计 的开发方法。但值得记住的是,这里没有银弹去解决一切问题。

我们包括占位符媒体查询,以帮助你针对更宽视口和高分辨率的显示器建立移动样式。建议你根据站点内容调整这些媒体查询,而不是写死特定设备的固定尺寸。

如果你不想采用移动优先的方法,则可以简单地编辑或删除这些占位符媒体查询。一种可能性是在宽视口下工作,使用max-width媒体查血代替(比如:@media only screen and (max-width: 480px)

打印样式

最后,我们提供一些有用的打印样式,以优化打印过程,并使打印页面更容易阅读。

在打印时,这些样式将:

打印样式与其它css一起包含,以避免而外的HTTP请求。此外,它们应该始终包含在最后,以便其它样式可以被覆盖。

注:翻译中的链接现在还是原文中的链接(链接内容还是英文文档),当翻译到相关文章时,会进行相应替换。最后全部翻译完成时,就不会再有这种情况发生,到时大家可以到github上查看完整文档,现在还请大家多多谅解。

What you want, Go after It.


https://steemit.com 首发。感谢阅读。

欢迎Follow, Upvote, Reply, Resteem (repost)激励我创作更多更好的内容。

@syt

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!