CSS hack
由于不同厂商的流览器或某浏览器的不同版本对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack。
浏览器兼容的思路
- 要不要做
- 产品的角度(产品受众、受众的浏览器比例,效果优先还是基本功能优先等)
- 成本的角度(有无必要去实现某个需求)
- 做到什么程度
——让浏览器支持哪些效果 - 该怎么做
- 根据兼容需求选择技术框架/库(jQuery)
- 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
- post CSS(自动根据浏览器加前缀)
- 条件注释、CSS Hack、JS能力检测 做一些修补
渐进增强和优雅降级
- 渐进增强(progressive enhancement):针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级(graceful degradation):一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
浏览器兼容的写法
- 合适的框架
框架 | 支持版本 |
---|---|
Bootstrap | ≥ IE8 |
jQuery 1._ | ≥IE6 |
jQuery 2._ | ≥IE9 |
Vue | ≥IE9 |
- 条件注释
条件注释(conditional comment)是于HTML源码中被IE有条件解释的语句。可被用来向IE提供及隐藏代码。
使用了条件注释的页面在IE9中可正常工作,但在IE10中就不行了。IE10不再支持条件注释。
项目 | 支持版本 | 说明 |
---|---|---|
! |
[if !IE] |
非IE |
lt |
[if lt IE5.5] |
(less than)小于IE5.5 |
lte |
[if lte IE6] |
(less than or equal)小于等于IE6 |
gt |
[if gt IE5] |
(great than)大于IE5 |
gte |
[if gte IE7 |
(great than or equal)大于等于IE7 |
竖线 |
[if (IE6)竖线(IE7)] |
IE6或IE7 |
PS:“非IE”的注释比较特殊一些
<!-- [if !IE]><!-- >_____________<!-- <![end if]-->
-
属性前缀(即内部Hack)
IE6能识别 _ 和 *
IE7能识别 *
IE6~IE10都能认 " \q "
但是以上,FireFox都不认识。 -
选择器前缀
比如IE6能识别html .class{ }
,IE7能识别+html .class{ }
或者*:first-child+html .class{ }
。 -
合适的工具
-
html5shiv.js
-
respond.js
-
css reset
-
normalize.css
-
Modernizr
一些常见的属性和写法
- 常见写法
.box {
color: red;
_color: blue; /* IE6 */
*color: pink; /* IE6、7 */
color: yellow\9; /* IE/Edge 6-8 */
}
<!-- [if IE7] >
<link rel="stylesheet" href="IE7.css" type="text/css" />
<!-- [end if] -->
- 常见属性
属性 | 兼容情况 |
---|---|
inline-block | ≥IE8 |
min-width / min-height | ≥IE8 |
:before / :after | ≥IE8 |
div:hover | ≥IE7 |
background-size | ≥IE9 |
圆角 | ≥IE9 |
阴影 | ≥IE9 |
动画 / 渐变 | IE10 |
名词(工具)解释
- 条件注释
这是基于HTML源码中被IE(IE≥9)有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。 - IE Hack
针对IE浏览器编写不同的CSS(属性前缀法、选择器前缀法、IE条件注释法)使得页面效果在不同版本的IE浏览器中达到效果一致。 - js 能力检测
浏览器的能力检测目标不是检测特定的浏览器,而是检测浏览器的能力。这样,只需要检测浏览器是否支持特定的能力,就可以给出特定的解决方案。 - 优先检测达到目的最常用的特性
- 检测实际用到的属性
- html5shiv.js
针对不支持HTML5标签的浏览器,创建并模拟HTML5的标签的效果并使相应的CSS生效。 - respond.js
让 IE6-8 也能实现 CSS3 中的 Media Query(媒体查询)功能,实现响应式设计。 - CSS Reset
- CSS Reset 简单地说就是重置浏览器的 CSS 默认属性。
- 因为浏览器的品种很多,每个浏览器的默认样式也是不同的,比如 标签,在 IE 浏览器、Firefox 浏览器以及 Safari 浏览器中的样式都是不同的,所以,通过重置 button 标签的 CSS 属性,然后再将它统一定义,就可以产生相同的显示效果。
- CSS Reset 内容方法不同,但功能大同小异,都是起到重置的作用,所以说 CSS Reset 是根据个人需求不同可以按需自定义的
- Normalize.css
一个很小的CSS文件,让不同浏览器在渲染浏览器时形式更加统一,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。是一种CSS reset的替代方案。 - 保护有用的浏览器默认样式:而不是完全去掉它们
- 一般化的样式:为大部分HTML元素提供
- 修复浏览器自身的bug:并保证各浏览器的一致性
- 优化CSS可用性:用一些小技巧
- 解释代码:注释和详细的文档
- Modernizr
Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS,无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
Modernizr 会在页面加载后立即检测特性;然后创建一个包含检测结果的 JavaScript 对象,同时在 html 元素加入方便你调整 CSS 的 class 名。 - PostCSS
PostCSS是一个使用 JavaScript 插件来转换CSS的工具,通过PostCSS这个平台,我们自己也能够开发一些插件,来处理CSS。
网友评论