开发商前缀那些事儿

我不是女神ヾ 2022-06-12 02:40 317阅读 0赞

在写css的时候，有时候比较纠结什么属性需要些开发商前缀，什么时候不需要写开发商前缀。在看书的时候弄明白了这个问题，现在来分享一下

**为什么有开发商前缀这个玩意儿**

制定css标准的人，在引入一个新功能的时候。为了能够让这项功能能够比较完美，他们需要听浏览器和开发人员的反馈。但是为了得到这些反馈，必须让浏览器和开发人员实现不够完美的功能。这样就形成了一个反馈和试验的循环，经过多次的修改，最后定案。在此期间，功能的语法和实现都可能发生变化，于是就有可能出现下面的问题，开发人员在使用这些功能的时候，功能的语法和实现如果发生的变化，网站就可能不能够使用。所以为了避免这种风险，浏览器开发商使用一种开发商前缀加在还在开发的css属性上。

**不同开发商前缀属于什么浏览器**

<table> 
 <tbody> 
  <tr> 
   <td>-moz-</td> 
   <td>Firefox</td> 
  </tr> 
  <tr> 
   <td>-webkit-</td> 
   <td>Chrome,Safari和最新的Opera</td> 
  </tr> 
  <tr> 
   <td>-ms-</td> 
   <td>IE</td> 
  </tr> 
  <tr> 
   <td>-o-</td> 
   <td>旧版的Opera</td> 
  </tr> 
 </tbody> 
</table>

**那些地方需要使用开发商前缀**

上面说了对于还是开发的css属性需要加上开发商前缀，可是我怎么知道那些功能是正在开发的。所以这里我们需要使用一个网站来判断http://caniuse.com。打开网址，我们再输入框输入transform，然后我们可以看到下图所示

![Center][]

通过观察我们可以发现其实只有在右上角有一个黄色的小矩形的浏览器需要添加前缀，其他就不需要。

**自动添加开发商前缀**

虽然我们通过查询可以知道那些需要添加开发商前缀，但是还是有些人觉得麻烦。比毕竟对于不清楚的我都去查询，太费时间了。所以有大神就写了一个自动添加前缀的脚本。

prefixfree.min.js。下载链接可以去官网，但是为了给大家更加方便的操作，我把它放在百度云。链接如下：链接: https://pan.baidu.com/s/1jHM2PyI 密码: u7sf。我们只需要在我们在的页面引入就行。

[Center]: /images/20220612/60ae78a7fab445088914b163b6d2e540.png