在网页中使用 CSS3 浏览器私有属性前缀

2023-05-27 0 844

在网页中使用 CSS3 浏览器私有属性前缀

甚么是应用程序专有特性后缀

CSS3的应用程序专有特性后缀是两个应用程序制造商时常采用的一类形式。它暗指该CSS特性或准则仍未正式成为W3C国际标准的一小部分。

下列是三种常见后缀

-webkit–moz–ms–o–khtml-(那时基本上都没用了,被-webkit-替代)

比方说 CSS3 梯形的标识符

-webkit-border-radius: 50%;-o-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;

CSS3 后缀+国际标准标识符的次序

难道CSS3标识符中(暂)须要写上所以多后缀,所以她们的次序是怎样的呢?推论是先写专有的CSS3特性,再写国际标准的CSS3特性。

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/-moz-transform:rotate(-3deg); /*为Firefox*/-ms-transform:rotate(-3deg); /*为IE*/-o-transform:rotate(-3deg); /*为Opera*/transform:rotate(-3deg); /*为nothing*/

拿掉 CSS3 后缀

甚么这时候他们能拿掉两个特性的CSS3后缀呢?标准答案是,当两个特性正式成为国际标准,因此被Firefox、Chrome等应用程序的正式版两极化相容的这时候。

以 border-radius 为例:

-moz-border-radius: 12px; /* FF1-3.6 */-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

FF4、Saf5以及Chrome都支持border-radius特性了,他们就没必要写以上两条了,标识符变成了:

border-radius: 12px;

彻底甩掉 CSS3 后缀

你知道 CSS3 的很多数特性为实验特性,采用她们的这时候得加上各式各样的应用程序后缀。可能你默默忍受了,因为还没到统一的时间。有没想过给自己减下 负,偶然间在网上看到两个js解决方案,正好能解决这个问题。他会帮你自动识别应用程序,生成对应的 CSS3 样式后缀,这样你就能直接当作国际标准特性来采用了。

引用形式

<script src=”http://leaverou.github.com/prefixfree/prefixfree.min.js”></script>

事物总是有两面性,带来方便的同时,也引入了一些问题,因为是基于 JS 的,所以对于一些不支持或者禁用js的应用程序用户是很不友好的,很可能会打乱布局, 而且有这时候会影响你采用 CSS 的一些技巧(比如你只是想针对某个应用程序采用某个 CSS3 特性,由于这个 JavaScript 的作用,所有应用程序都会应用该条特性,明显这不是你想要的结果)

举报/反馈

相关文章

发表评论
暂无评论
官方客服团队

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