一、CSS hack介绍

• CSS 代码存在兼容性问题。

• 同一段 CSS 代码，在不同浏览器上的呈现效果不同。

我们可以通过如下图片看到，我们不同的浏览器它的JS引擎不一样，渲染引擎也不一样，因为引擎不一样，所以渲染出来的效果也是不一样的。

• 所以我们要针对不同的浏览器写相应的 CSS 代码

• 那么我们把针对不同的浏览器写相应的 CSS 代码的过程，叫做 CSS hack!

• CSS hack 的目的：就是使你的 CSS 代码兼容不同的浏览器。

二、CSS hack – 属性前缀法

• 例如：user-select 属性可以控制用户能否选中文本（存在兼容性问题）

• 解决方法：给 CSS 属性（user-select），添加浏览器特有的前缀

三、浏览器的CSS属性前缀图

IE浏览器微软开发的，—ms—是微软单词Microsoft的缩写

Chrome谷歌浏览器和Safari苹果浏览器的前缀都是—webkit—

Firefox火狐浏览器的前缀是—moz—是mozilla单词的缩写，其实火狐火狐浏览器的全称是Mozilla Firefox

Opera欧朋浏览器的前缀是—o—是Opera单词的开头字母

四、示例

1.新建一个index.html文件

给带有code类名的p标签添加user-select属性，然后通过不同的浏览器打开测试效果。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css hack</title><style>p {width: 200px;height: 100px;background-color: #0f0;}p.code {/* 禁止用户复制文字 */user-select: none;}</style>
</head>
<body><h1>Hello CSS Hack!!!</h1><p class="code">我是不能复制的文字。</p><p>我是能复制的文字</p>
</body>
</html>
2.发布服务

安装发布服务命令：（npm i serve -g）注：如果之前全局安装了，就不需要安装啦！

发布服务命令：（serve 文件名）

如下图我们发布成功啦！

通过端口号在谷歌浏览器运行，发现带有code类名的p标签不能够选中复制，说明我们添加的user-select属性是兼容谷歌浏览器的，因为它生效啦。

再使用端口号继续再IE浏览器中运行

发现带有code类名的p标签能够选中复制，说明我们添加的user-select属性是不兼容IE浏览器的，因为它没有生效。

那么想要解决该问题，就需要我们给有兼容性问题的新属性添加前缀解决。

这里我们要解决IE浏览器，需要给user-select属性添加—ms—前缀。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css hack</title><style>p {width: 200px;height: 100px;background-color: #0f0;}p.code {/* 禁止用户复制文字 */user-select: none;/* 兼容IE浏览器写法 */-ms-user-select: none;}</style>
</head>
<body><h1>Hello CSS Hack!!!</h1><p class="code">我是不能复制的文字。</p><p>我是能复制的文字</p>
</body>
</html>
当我们给user-select属性添加好—ms—前缀后发现我们再IE浏览器中运行就生效啦！不能复制文字内容啦！

但是我们只是解决了IE浏览器的兼容问题，那么我们想要兼容其他更多的浏览器就需要书写更多的前缀属性去兼容，是不是我们手动去写太麻烦了，而且我们是拿user-select属性举例子，将来我们还有更多的属性都有兼容问题，我们却不知道哪个有兼容问题，还需要通过百度一个个去查询，是不是太麻烦啦。那么好了，不用担心，我们有插件帮我们解决该问题！自动帮我们补全前缀插件！它叫：Autoprefixer 插件。

Autoprefixer（表示：自动前缀的意思）该插件可以将我们书写的一条user-select属性通过该插件自动帮我们添加兼容浏览器的前缀。Autoprefixer 使用http:// caniuse.com 的数据来决定哪些属性需要加前缀。

通过该网站我们搜索user-select属性，发现IE浏览器是支持11版本呀，我们自己现在用的大部分默认是IE11，如果我们不切换，但是为啥这个属性就不生效呢？？

那么我们鼠标放上去，可以看到一个提示信息，它说，我是兼容IE11浏览器，但是你需要加入—ms—前缀，我才能兼容哦！所以你不加肯定是不兼容的啦！

五、Autoprefixer插件示例

1.安装Autoprefixer插件

安装命令：（npm i autoprefixer -D）

2.再main.less中写入一段user-select： none;代码演示

3.再gulpfile.js文件中，引入autoprefixer模块，然后使用管道，然后使用autoprefixer（）方法

这里，我们为了方便观看，后面的压缩和重命名去掉，我们的这个前缀添加，试想下，应该写在less编译以后吧，所以我们写在后面。

4.执行命令（gulp 任务名）

可以看到我们的css文件中已经添加好我们的前缀啦，但是你有没有发现少了—o—，欧朋浏览器的前缀，这是为什么呢？因为欧朋已经兼容该属性啦，不需要添加前缀了。所以插件没有帮我们生成，我们也不需要去手动书写。

（32）Gulp CSS hack 与 Autoprefixer相关推荐

CSS浏览器兼容性的4个解决方案：浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和自动化插件...
前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了(如果全写出来,那真是一箩筐),更让人头疼的是,还要面临各种适配.兼容性问题. 一直以来都是头痛医头脚痛医脚,没有进行系统的梳理,整个 ...
ie10 11 css兼容性问题,学习一下IE10和IE11的CSS Hack
有IE就有hack,看看IE9的css hack,IE8的css hack:上次同事说一个页面IE10下有问题,IE9下测试了一下,也有同样的问题.悲剧了赶紧找IE10的hack. google上翻到 ...
[转]CSS hack大全详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
针对IE6\7\8\9\10浏览器的CSS hack大全详解
目前IE内核浏览器仍然是国内主流浏览器,占据着PC浏览器的大部分市场份额,版本从IE6到IE10,所有前段工作者都必须面对和解决多个IE浏览器对代码的兼容性问题.在很多情况下,我们需要专门针对IE写c ...
对ie6、ie7、ff兼容性的详细css hack介绍
这个毛病把我憋了好久了,最近到底找到了解决滴方式,通过偶测试系完整ok滴,和大伙儿共享. 以下为引佣: 如今偶大多数全是用!important来hack,关于ie6和firefox测试可以正常卖弄,可 ...
【总结】IE6，IE7，IE8，Firefox兼容的css hack 补充!
IE6,IE7,IE8,Firefox兼容的css hack 补充: .color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-co ...
Google Chrome的CSS hack写法
Google自从2010年9月3日推出了浏览器Google Chrome,写前端效果的同志们又得辛苦了,现在就是个浏览器混乱的时代,自从Google混进来之后,就更混乱了. 不过还好Google用的是 ...
常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们 ...
CSS HACK：IE6、IE7、IE8、Firefox兼容性问题解决方案
CSS HACK:IE6.IE7.IE8.Firefox兼容性问题解决方案参考文章: (1)CSS HACK:IE6.IE7.IE8.Firefox兼容性问题解决方案 (2)https://www. ...

（32）Gulp CSS hack 与 Autoprefixer

一、CSS hack介绍

二、CSS hack – 属性前缀法

三、浏览器的CSS属性前缀图

四、示例

1.新建一个index.html文件

2.发布服务

五、Autoprefixer插件示例

1.安装Autoprefixer插件

安装命令：（npm i autoprefixer -D）

2.再main.less中写入一段user-select： none;代码演示

3.再gulpfile.js文件中，引入autoprefixer模块，然后使用管道，然后使用autoprefixer（）方法

4.执行命令（gulp 任务名）

（32）Gulp CSS hack 与 Autoprefixer相关推荐

最新文章

热门文章