什么是 csshack
由于不同的浏览器,甚至同一浏览器的不同版本,对CSS解析的理解不同,导致生成的页面效果不一致,所以为不同的浏览器编写CSS代码称为CSShack(为不同的浏览器编写不同的csscode)css全解,其过程就是csshackcss全解,也叫写csshack)
csshack可以翻译为:浏览器兼容性、兼容性解决方案、简单的浏览器兼容性。
常用的 CSShacks 有三种形式:
CSS 内部 hack、选择器 hack 和 HTML 反向引用,其中第一个是最常用的。
CSShack原理
1、利用浏览器自身的bug来实现特定浏览器的样式;
2.利用浏览器对CSS的支持,例如对个别CSS规则或句型的支持。 原理和我们今天经常使用的-wekit-等属性类似。
1. CSS 内部 hack
像这样的一些常见的写法在CSS3中很常见:
/*Mozilla内核浏览器:firefox3.5+*/
-moz-transform:旋转|缩放|倾斜|平移;
/*Webkit内核浏览器:SafariandChrome*/
-webkit-transform:旋转|缩放|倾斜|平移;
/*歌剧*/
-o-transform:旋转|缩放|倾斜|平移;
/*IE9*/
-ms-transform:旋转|缩放|倾斜|平移;
/*W3C标准*/
变换:旋转|缩放|倾斜|平移;
目前CSS3标准尚未统一。 每个浏览器都有自己的表达形式。 有些甚至实施它,有些则不实施。 添加一些前缀来表示支持某种
具体浏览器,这也是CSS内部hack的基本原理,但真正的CSShack远不止于此,因为还有IE6及其各种令人震惊的版本。
句型:
选择器{属性:值;}
里面的代码在属性名称之前显示了 hack;
其实还有如下的写法:
*背景颜色:绿色;
在属性中添加“*”仅在IE6和7上生效。其他版本的IE和现代浏览器将忽略此指令(无特殊说明,本文所有hacks均参考
(声明DOCTYPE的文件的有效性)
-背景颜色:绿色;
属性上有一个“-”,只有IE6识别,前面有一些hack。
背景颜色:绿色!重要;
这样,在属性值前面添加“!important”,仅IE6无法识别,但其他版本的IE和现代浏览器都可以识别,还有“+”、“”、“9” “, ETC。
如果只是想在IE访问时添加红色背景,可以这样写
背景颜色:绿色9;
2. 选择器黑客
选择器hanck主要针对IE浏览器,不常用。
句子模式:selector{sRules}
IE9 的 hack 可以这样写:
:root.test{
背景颜色:绿色;
3.HTML反向引用
HTML 腹引号很特殊。 它们类似于程序语句。 它们只能在 HTML 文件中使用,不能在 CSS 文件中使用,并且只能在 IE 浏览器下执行。 这段代码在非IE浏览器下不会执行。 条件定义,但被视为注释并被忽略。
注:以 开始,以 结束。
解释:
lte:是Lessthanorequalto的缩写,意思是大于或等于。
lt:是Lessthan的缩写,意思是大于。
gte:是Greaterthanorequalto的缩写,意思是小于或等于。
gt:是Greaterthan的缩写,意思是小于。
!:表示不等于,与JavaScript中的不等于判断符相同。
书写顺序:先通用,后特殊! !
例子:
_背景颜色:红色;
背景颜色:绿色;
用IE6解析时,第一句可以识别,背景设置为白色,第二句所有浏览器都识别,IE6也不例外,背景颜色设置为红色。
所以我们必须反过来写
背景颜色:绿色;
_背景颜色:红色;
所以:首先是普通的,然后是特殊的! !