• 减少加载多张图片的 HTTP 请求数(一张雪碧图只需要一个请求)。但是对于
HTTP2 而言,加载多张图片不再是问题。
• 提前加载资源,防止在需要时才在开始下载引发的问题,比如只出现在:hover伪类
中的图片,不会出现闪烁。
参考资料:
• https://css-tricks.com/css-sprites/
如何解决不同浏览器的样式兼容性问题?
• 在确定问题原因和有问题的浏览器后,使用单独的样式表,仅供出现问题的浏览器加
载。这种方法需要使用服务器端渲染。
• 使用已经处理好此类问题的库,比如 Bootstrap。
• 使用 autoprefixer 自动生成 CSS 属性前缀。
• 使用 Reset CSS 或 Normalize.css。
如何为功能受限的浏览器提供页面? 使用什么样的技术和流程?
• 优雅的降级:为现代浏览器构建应用,同时确保它在旧版浏览器中正常运行。
• Progressive enhancement - The practice of building an application for a base level of
user experience, but adding functional enhancements when a browser supports it.
• 渐进式增强:构建基于用户体验的应用,但在浏览器支持时添加新增功能。
• 利用 caniuse.com 检查特性支持。
• 使用 autoprefixer 自动生成 CSS 属性前缀。
• 使用 Modernizr进行特性检测。
有什么不同的方式可以隐藏内容(使其仅适用于屏幕阅读器)?
这些方法与可访问性(a11y)有关。
• visibility: hidden:元素仍然在页面流中,并占用空间。
• width: 0; height: 0:使元素不占用屏幕上的任何空间,导致不显示它。
• position: absolute; left: -99999px: 将它置于屏幕之外。
• text-indent: -9999px:这只适用于block元素中的文本。
• Metadata: 例如通过使用 Schema.org,RDF 和 JSON-LD。
• WAI-ARIA:如何增加网页可访问性的 W3C 技术规范。
即使 WAI-ARIA
是理想的解决方案,我也会采用绝对定位方法,因为它具有最少的注意事项,适用于大多
数元素,而且使用起来非常简单。
参考资料:
• https://www.w3.org/TR/wai-aria-1.1/