浏览器私有属性前缀及去除方法

dontes dontes     2022-09-04     537

关键词:

什么是浏览器私有属性前缀

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代码中(暂时)需要写上这么多前缀,那么他们的顺序是如何的呢?

一篇文章中详细分析了代码顺序:ordering css3 properties

结论:是先写私有的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项目地址为http://leaverou.github.com/prefixfree/。 事物总是有两面性,带来方便的同时,也引入了一些问题,因为是基于js的,所以对于一些不支持或者禁用js的浏览器用户是很不友好的,很可能会打乱布局, 而且有时候会影响你使用Css的一些技巧(比如你只是想针对某个浏览器使用某个Css3属性,由于这个js的作用,所有浏览器都会应用该条属性,明显这不 是你想要的结果)

主流浏览器的内核私有属性css前缀

主流浏览器内核私有属性css前缀:mozilla内核(firefox,flock等)    -moz                     &nbs 查看详情

html5学习之浏览器的私有前缀

浏览器的私有前缀是为了兼容老版本的写法比较新版本的浏览器无需添加1.私有前缀-moz-:代表firefox(火狐)浏览器的私有属性-ms-:代表IE浏览器的私有属性-webkit-:代表safarichrome私有属性-o-:代表opera(欧朋)浏览器私有属性2.提倡写法一... 查看详情

html5浏览器内核私有前缀

 浏览器内核私有前缀浏览器webkit-webkit-chrome、safari、安卓、iostrident-ms-IEgecko-moz-firefoxpresto-o-opera1h1{2text-stroke:1pxred;/*保证此属性纳入标准后能正常使用*/3text-fill-color:blue;4-webkit-text-stroke:1pxred;/*保证此属性纳入标准 查看详情

css(面试第4天)_写出主流浏览器内核私有属性的css前缀

mozilla内核(firefox,flock等)              -mozwebkit内核(safari, chrome等)       -webkitopera内核( 查看详情

属性和方法名称的下划线前缀仅仅是一种约定吗?

...avaScript中的下划线前缀是否只是一种约定,例如Python中的私有类方法是?来自2.7Python文档:“私有”实例变量只能从内部访问Python中不存在对象。但是,有一个约定是 查看详情

封装继承及接口

...组织在一起,封装的两个特点:信息的集合,信息的隐藏私有属性加getset方法和公有属性的区别私有属性不能直接访问,只能通过set方法进行属性的设置,通过get方法进行属性的访问,所以可以通过删除set方法或get方法,将属性... 查看详情

css3中-webkit-,-moz-,-o-,-ms-这些私有前缀的含义和兼容

...现语言,增加了很多新的属性,但是部分css3属性在一些浏览器上还处于试验阶段,所以为了有效的显示css3的样式,对应不同的浏览器内核需要不同的前缀声明,例如:-moz-:Firefox,GEcko引擎-webkit-:Safari和Chrome,Webkit引擎-o-:Ope... 查看详情

琐碎知识点(代码片段)

1、CSS3中-MS-,-MOZ-,-WEBKIT-,-O-浏览器私有前缀详解(1)-moz-:代表FireFox浏览器私有属性(2)-ms-:代表IE浏览器私有属性(3)-webkit-:代表safari、chrome浏览器私有属性(4)-o-:代表opera浏览器私有属性2、Less的预处理思想Less的预处理思想是程序... 查看详情

浏览器前缀

...前缀不一样 Gecko内核   css前缀为"-moz-"  火狐浏览器 WebKit内核  css前缀为"-webkit-"  ComodoDrangon(科摩多龙),苹果,搜狗高速浏览器3,快快浏览器,枫树浏览器,云游浏览器,360极速浏览器,世界之窗极速... 查看详情

移动端知识补充(代码片段)

浏览器私有前缀-moz-:代表firefox浏览器私有属性-ms-:代表ie浏览器私有属性-webkit-:代表Safari,chrome私有属性-o-:代表Opera私有属性meta视口标签布局详解流式布局(百分比布局)rem布局rem基础rem相对于html元素,字体大小来说的em相对于... 查看详情

移动端知识补充(代码片段)

浏览器私有前缀-moz-:代表firefox浏览器私有属性-ms-:代表ie浏览器私有属性-webkit-:代表Safari,chrome私有属性-o-:代表Opera私有属性meta视口标签布局详解流式布局(百分比布局)rem布局rem基础rem相对于html元素,字体大小来说的em相对于... 查看详情

第20条:为私有方法名加前缀

  本条要点:(作者总结) 给私有方法的名称加上前缀,这样可以很容易地将其同公共方法区分开。不要单用一个下划线做私有方法的前缀,因为这样做法是预留给苹果公司用的。   一个类所做的事情通常都要比从... 查看详情

3.5私有属性和私有方法(代码片段)

私有属性和私有方法01.应用场景及定义方式应用场景在实际开发中,对象的某些属性或方法可能只希望在对象的内部被使用,而不希望在外部被访问到私有属性就是对象不希望公开的属性私有方法就是对象不希望公开的方法定义... 查看详情

私有属性和私有方法(代码片段)

... 在对象的内部被使用,而 不希望在外部被访问到私有属性 就是 对象 不希望公开的 属性私有方法 就是 对象 不希望公开的 方法定义方式在 定义属性或方法时,在 属性名或者方法名... 查看详情

css3兼容各浏览器前缀

在编写CSS3样式时,不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。前缀 ... 查看详情

css3

在编写CSS3样式时,不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。前缀浏... 查看详情

java-利用反射访问类的私有(private)属性及方法&private的意义

...有的,这就是java反射带来的便利。利用反射访问类的私有属性及方法如下:/***@Description:反射*@author:Mr_VanGogh*@date:2019/2/20下午2:52*/publicclassReflectprivateStringname;privateintage;privateReflect(intage)this.age=age;privatevoidspeak(St... 查看详情

当一个css属性在测试中的时候,是用不同浏览器的识别码做前缀的。

...果【safari】//-o代表欧朋【opera】在标准还未确定时,部分浏览器已经根据最初草案实现了部分功能,为了与之后确定下来的标准进行兼容,所以每种浏览器使用了自己的私有前缀与标准进行区分,当标准确立后,各大浏览器将逐... 查看详情