html5-boilerplate中文翻译 - CSS篇
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
- 调整某些元素的默认对齐方式(比如:
img
、video
、fieldset
、textarea
) - 为提示(提示用户正在使用过时的浏览器)设计样式
你应该根据项目需要修改或添加样式到这些基本样式。
常见助手类
除了基本样式,我们还提供一些常用的助手类。
.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)
)
打印样式
最后,我们提供一些有用的打印样式,以优化打印过程,并使打印页面更容易阅读。
在打印时,这些样式将:
删除所有背景颜色,将字体颜色更改为黑色,并删除
text-shadow
—— 节省打印机墨水并加快打印过程添加下划线并展开链接以包含完整URL —— 允许用户知道在哪里引用
(例外是:链接是片段标识符或使用了javascript:
伪协议)扩展缩写,以包括完整的描述 —— 允许用户知道缩写代表什么
提供关于浏览器如何在寡行和孤行将内容分页的说明,即我们指示支持的浏览器应该:
- 确保表头(
<thead>
)打印在每个页面的表上 - 防止块引用,预格式化的文本,图像和表格行分割进两个不同的页面
- 确保标题不会出现在与它们相关联的文本不同的页面上
- 确保寡行和孤行不出现在打印纸上
- 确保表头(
打印样式与其它css
一起包含,以避免而外的HTTP请求。此外,它们应该始终包含在最后,以便其它样式可以被覆盖。