css全解-什么是 csshack? CSShack原理讲解

2023-09-19 0 4,058 百度已收录

什么是 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+*/

css全解-什么是 csshack?  CSShack原理讲解

-moz-transform:旋转|缩放|倾斜|平移;

/*Webkit内核浏览器:SafariandChrome*/

-webkit-transform:旋转|缩放|倾斜|平移;

/*歌剧*/

-o-transform:旋转|缩放|倾斜|平移;

/*IE9*/

-ms-transform:旋转|缩放|倾斜|平移;

/*W3C标准*/

变换:旋转|缩放|倾斜|平移;

css全解-什么是 csshack?  CSShack原理讲解

目前CSS3标准尚未统一。 每个浏览器都有自己的表达形式。 有些甚至实施它,有些则不实施。 添加一些前缀来表示支持某种

具体浏览器,这也是CSS内部hack的基本原理,但真正的CSShack远不止于此,因为还有IE6及其各种令人震惊的版本。

句型:

选择器{属性:值;}

里面的代码在属性名称之前显示了 hack;

其实还有如下的写法

*背景颜色:绿色;

在属性中添加“*”仅在IE6和7上生效。其他版本的IE和现代浏览器将忽略此指令(无特殊说明,本文所有hacks均参考

(声明DOCTYPE的文件的有效性)

css全解-什么是 csshack?  CSShack原理讲解

-背景颜色:绿色;

属性上有一个“-”,只有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的缩写,意思是大于。

css全解-什么是 csshack?  CSShack原理讲解

gte:是Greaterthanorequalto的缩写,意思是小于或等于。

gt:是Greaterthan的缩写,意思是小于。

!:表示不等于,与JavaScript中的不等于判断符相同。

书写顺序:先通用,后特殊! !

例子:

_背景颜色:红色;

背景颜色:绿色;

用IE6解析时,第一句可以识别,背景设置为白色,第二句所有浏览器都识别,IE6也不例外,背景颜色设置为红色。

所以我们必须反过来写

背景颜色:绿色;

_背景颜色:红色;

所以:首先是普通的,然后是特殊的! !

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 css css全解-什么是 csshack? CSShack原理讲解 http://www.wkzy.net/game/197452.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务