（32）Gulp CSS hack 与 Autoprefixer

最新推荐文章于 2023-03-30 23:09:16 发布

泽哥ins

最新推荐文章于 2023-03-30 23:09:16 发布

阅读量1.2k

点赞数

分类专栏： Node.js 文章标签： css gulp 前端

本文链接：https://blog.csdn.net/qq_36213140/article/details/122470180

版权

Node.js 专栏收录该内容

51 篇文章 5 订阅

订阅专栏

一、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—，欧朋浏览器的前缀，这是为什么呢？因为欧朋已经兼容该属性啦，不需要添加前缀了。所以插件没有帮我们生成，我们也不需要去手动书写。

泽哥ins

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
（32）Gulp CSS hack 与 Autoprefixer

一、CSS hack介绍• CSS 代码存在兼容性问题。• 同一段 CSS 代码，在不同浏览器上的呈现效果不同。我们可以通过如下图片看到，我们不同的浏览器它的JS引擎不一样，渲染引擎也不一样，因为引擎不一样，所以渲染出来的效果也是不一样的。• 所以我们要针对不同的浏览器写相应的 CSS 代码• 那么我们把针对不同的浏览器写相应的 CSS 代码的过程，叫做 CSS hack!• CSS hack 的目的：就是使你的 CSS 代码兼容不同的浏览器。二、CSS hack – 属性前
复制链接

扫一扫