web端 css hack（一）

逢10月小长假，几天不敲键盘，浑身难受。也是有时间分享一下自己遇到的css问题。先说一下什么css hack

 

简单介绍一下css hack：

定义：

　　一般都是利用各浏览器的支持CSS的能力和BUG来进行的，可以分为能力选择和怪癖选择(BUG)。

　　能力通常是指浏览器对CSS特性的支持程度，而怪癖是指浏览器特有的一些BUG。

　　总结：这里定义的很清晰哦：第一浏览器的对  css  支持程度 不一样，第二，不同的浏览器携带自身特有的属性。

提醒：

　　尽量找到通用方法而减少对CSS Hack的使用，大规模使用CSS Hack会带来维护成本的提高以及浏览器版本变化而带来类似Hack失效等系列问题

　　总结：这里指出，不是hack 写的越多越好，考虑到 每种浏览器各个版本之间还存在差异，时间花费，也不一定就有好的成效。

书写方法：

　　CSS hack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面。稍后回有例子。

 

 

本次主要说明   浏览器的对  css  支持程度

 

 

三种书写方法：

　　一：条件Hack    ( IE )

　　<!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]-->

　　if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本

是否：

指定是否IE或IE某个版本。关键字：空

大于：

选择大于指定版本的IE版本。关键字：gt（greater than）

大于或等于：

选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）

小于：

选择小于指定版本的IE版本。关键字：lt（less than）

小于或等于：

选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）

非指定版本：

选择除指定版本外的所有IE版本。关键字：!

特别强调 IE10以后没有条件hack了。

举例子：

　　<!--[if IE 8]>   //这是格式

　　　　//这里是code区域，不仅可以是css  也可以使html标签    （HTML代码块 ）

　　　　<style>
　　　　　　div{position:relative;}     
　　　　</style>

　　<![endif]-->

　　二：属性Hack    ( 了解，官方说明：需谨慎使用 )

　　　　selector{<hack>?property:value<hack>?;}

　　　　就简单举个例子，就不做详细的说明了

　　　　　

　　　如想同一段文字在IE6,7,8显示为不同颜色，可这样写：

　　.test {
　　	color: #090\9; /* For IE8+ */
	*color: #f00;  /* For IE7 and earlier */
	_color: #ff0;  /* For IE6 and earlier */
　　}

　　　三：选择符级Hack    ( 了解，官方说明：需谨慎使用 )

　　　　这个就是我们常用的css选择器。只要多注意一些css语法的兼容性，一般不建议使用hack。

　　　　* html .test { color: #090; }       /* For IE6 and earlier */
　　　　* + html .test { color: #ff0; }     /* For IE7 */
　　　　.test:lang(zh-cmn-Hans) { color: #f00; }  /* For IE8+ and not IE */
　　　　.test:nth-child(1) { color: #0ff; } /* For IE9+ and not IE */


总结一下：
　　　　这里简单介绍一下css hack的说明。关于兼容浏览器的hack，尽量少使用。
　　原因：
　　　　1 开发项目 不仅考虑 浏览器之前的版本，更要注意 浏览器的后续发展，不能已解决现在的问题，就是完全解决问题。

　　　　　　　　一方面：这样敲代码，用一位前辈的话来说： Inhumanity，不人道的，后面接手的兄弟（或者妹子）完全抓狂

　　　　　　　　另外一点：多考虑，有利于今后解决问题的多思路，对于今后的代码容错有非常大的帮助。

　　　　2 浏览器的兼容，需要说明兼容的版本，以及理由，这也是我们程序员的应该要考虑的。
　　　　　　 
　　　　　　　　作为一个面向大学生消费群体的应用，去兼容IE67 这样的需求，完全可以拍回去。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有