CSS属性前的 -webkit, -moz,-ms,-o

by admin on 2020年5月3日

Mozilla正在研究一种方式,让Firefox浏览器原生帮助webkit前缀的网址。
览器特定的前缀长时间存在,使开荒职员能够编写制定只在有些浏览器中实践代码。那使他们能力所能达到在一些特定代码成为专门的学业此前,就让特定浏览器能够实行这一个代码。近些日子,那几个浏览器前缀满含针对Firefox的moz前缀,针对Chrome和Safari的webkit前缀,由于基于WebKit的浏览器开始称雄,更加多的开荒商早先使用webkit前缀,Firefox浏览器的moz前缀开端受到冷落。

-moz-对应
Firefox, 
-webkit-对应 Safari and Chrome
-o- for Opera
-ms- for Internet Explorer(microsoft)

原著:CSS的未来:一些试验性CSS属性
译自:The Future Of CSS: Experimental CSS Properties
请珍重版权,转发请注明来源,多谢!

为此,Mozilla初步为Firefox
Nightly版本增添对webkit前缀的援助,在其间加入实验性的WebKit模拟引擎,方今这种支撑是试错性的,不是独具的Firefox版本都扶持webkit前缀。近些日子结果来看,那些实验证实是水到渠成的,在白名单个中的webkit前缀网址都足以很好的在Firefox中显示。Firefox能够很好地读取推行webkit前缀的CSS代码,并自动回退到正式的CSS代码,越来越好地支撑极其针对WebKit浏览器两全的活动网址。

在CSS属品质中,大家日常能看到-webkit-,-moz-之类的前缀,这种就称为浏览器私有前缀,是浏览器对于新CSS属性的八个提早扶持。-webkit-是webkit内核的,-moz-是Firefox
Gecko内核,moz代表的是Firefox的开辟商Mozilla。


澳门新葡亰平台官网 1

何以要有私有前缀呢?因为制订HTML和CSS规范的公司W3C动作是相当的慢的。平常,有w3c协会成员建议三个新属性,比方说圆角border-radius,大家都觉着好,然则w3c不会为那么些天性制订规范,而是要走很复杂的顺序,经过广大审核。而浏览器商不甘于等那么久,他们感觉壹本性能已经够成熟了,就能够在浏览器中参预扶持。不过幸免以往w3c发表标定期有所改动,就能投入七个私家前缀,比方-webkit-border-radius,通过这种方式来提前接济新属性,等到事后w3c发布了正式,border-radius的正统写法确立以往,再让新版的浏览器扶助border-radius这种写法。
比如说,Chrome
10是不认border-radius这种写法的,只好用webkit-border-radius,而Chrome12就能够认了。于是在写CSS的时候,那样写就能够作保Chrome10和Chrome12浏览网页的时候都能够科学展现。

固然今世浏览器已经扶持了广大的CSS3属性,可是大多数设计员和开辟职员貌似依旧在关心于某些很“主流”的品质,如border-radius、box-shadow也许transform等。它们有奇妙的文书档案、很好的测量检验况兼最常用到,所以假诺您近日在规划网站,你很难能脱离它们。

转载自:cnbeta.com

不过,隐藏在浏览器的大宝库中是一些尖端的、被严重低估的属性,可是它们并未有赢得太多的关切。也许它们中的一些应当如此(被冷酷卡塔尔(قطر‎,不过别的的习性应该赢得越多的确认。最宏大的财物隐讳在Webkit的上面,而且在黑莓、苹果平板和Android
apps的一世,起初通晓它们会灰常常有用。就连Firefox等选用的Gecko引擎,也提供了部分非同小可的性质。在本文中,大家将看一下不为人知的CSS
2.1和CSS3属性甚至它们在今世浏览器中的支持意况。

澳门新葡亰平台官网 2

证实: 对于各类属性,大家这里规定:”WebKit”
即指代使用Webkit内核的浏览器(Safari、Chrome、Nokia、GALAXY Tab、Android等State of Qatar,”Gecko“指代选用Gecko内核的浏览器(Firefox等卡塔尔。然后有的属性是合法CSS
2.1. 正经的一有的,那代表越来越多的浏览器还是有个别古老的浏览器也会帮助它们。最后,叁个CSS3 的标签表明固守那些正式,被风行的浏览器版本——比方Firefox
4、Chrome 10、Safari 5、Opera 11.10以至IE9扶助的天性。

Web基特特有品质

-webkit-mask

以此天性是一对一强盛的,所以详细的牵线超过了本文的框框,它不行值得浓烈钻研,因为它能够在事实上行使中为您省掉非常多时间。

-webkit-mask让为贰个要素加多蒙板成为恐怕,进而你能够创制大肆形状的花头。蒙板能够是CSS3渐变或然半晶莹剔透的PNG图片。蒙板成分的阿尔法值为0的时候会覆盖下面包车型客车成分,为1的时候会全盘展现下边包车型大巴内容。相关的性格有-webkit-mask-clip、
-webkit-mask-position
和-webkit-mask-repeat等,严重正视来自于background中的语法。更加多音信请查看webkit的博客和下部的链接。

澳门新葡亰平台官网 3

示例

图片蒙板:

.element{ background: url(img/image.jpg) repeat; -webkit-mask: url(img/mask.png); }

澳门新葡亰平台官网,示例

潜濡默化蒙板:

.element2 { background: url(img/image.jpg) repeat; -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); }

扩张阅读: Safari Developer Library

-webkit-text-stroke

CSS边框的叁个欠缺便是只有矩形的要素技术接纳。-webkit-text-stroke可感到文字增加边框。它不仅仅能够设置文字边框的宽度,也能安装其颜色。况兼,同盟使用color:
transparent属性,你还是能创设镂空的书体!

示例

为持有的<h1>题目设定八个2px宽的中绿边框:

h1 {-webkit-text-stroke: 2px blue}

另三个风味是,通过设定1px的透明边框,能够让文字变得平平整整:

h2 {-webkit-text-stroke: 1px transparent} 

创设浅青镂空字体:

h3 { color: transparent; -webkit-text-stroke: 4px red; }

澳门新葡亰平台官网 4

增添阅读: Safari Developer Library

-webkit-nbsp-mode

换行一时是很吃力的职业:不经常你期望文字在适当的地点断行(实际不是折行卡塔尔国,有的时候你又不想这么。八个能说了算这几个的属性正是-webkit-nbsp-mode,它令你能够修正 空白符的作为,免强文字在它被用到的地点断行。通过设置值为space就能够完毕。

扩展阅读: Safari Developer Library

-webkit-tap-highlight-color

以此天性只用于iOS
(摩托罗拉和苹果平板State of Qatar。当您点击三个链接也许经过Javascript定义的可点击成分的时候,它就能冒出二个半晶莹剔透的玛瑙红背景。要重设这厮展览馆现,你可以安装-webkit-tap-highlight-color为别的颜色。

想要禁止使用这一个高亮,设置颜色的阿尔法值为0就可以。

示例

设置高亮色为二分之一晶莹剔透的铁红:

-webkit-tap-highlight-color: rgba(255,0,0,0.5); 

浏览器援助: 唯有iOS(Motorola和三星平板卡塔尔(قطر‎.

扩大阅读: Safari Developer Library

zoom: reset

不足为奇来讲,zoom是一个IE专项使用的习性。然而webkit也开头接济它了,并且使用值reset,webkit能够完毕科学的效用(有意思的是,IE不帮忙那个值卡塔尔国。它令你重设掉浏览器中常常的缩放行为——即便有个别元素被声称了zoom:reset,页面上的别的成分在顾客推广页面包车型地铁时候都会跟着放大。

注:其实,大家常用来禁止使用chrome免强字体大小的时候利用的-webkit-text-size-adjust:none;也是足以达成相符的效能,分歧的是,设置该属性的要素内的文字不会被加大/裁减,但是页面上的别的成分则会扭转——神飞

扩大阅读: Safari Developer Library

-webkit-margin-collapse

以此天性归于约束级的,可是它依旧不行值得关怀。常常,多个相邻的因素的margin会折叠起来(collapse卡塔尔。那意味第一个元素的最底层的边距和第四个因素的底部边距会被合并到协同。

最广大的事例就是三个相邻的<p>成分会分享他们的margin值。想要调整这厮展览现,大家得以使用-webkit-margin-collapse及其分拆后的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等天性。暗许值是collapse,值separate则停止分享margin值,也正是说,第一个成分的最底层边距和第二个因素的底部边距会符合规律叠合。

澳门新葡亰平台官网 5

推而广之阅读: Safari Developer Library

-webkit-box-reflect

您还记得大概各样网址都把他们的网址logo或许底部的文字做成倒影的不胜时代吗?依心像意,那多少个时代已经过去了,可是借使您要在局地按钮、导航、或然其余UI成分上更加好的应用那么些手艺,-webkit-box-reflect是越来越好的挑选。

本条天性接纳above、below、left和right多个首要词,它们设置倒影的趋势,它们和四个装置成分和它的倒影建的离开的数字一齐使用。同时,蒙板图片也是相符支撑的(看上边的-webkit-mask部分,不要搞混了哈卡塔尔(قطر‎。倒影会自动生成并对布局尚未影响。下边的因素只用了CSS,首个按键用了-webkit-box-reflect属性。

澳门新葡亰平台官网 6

示例

这些倒影会出今后它的父成分的上边并有5px的间距:

-webkit-box-reflect: below 5px;

那一个倒影会投射到成分的右臂,未有间距。然后,二个蒙板将会被使用(url(mask.png卡塔尔State of Qatar:

-webkit-box-reflect: right 0 url(mask.png); 

增加阅读: Safari Developer Library

-webkit-marquee

另八个属性让我们回到美好的过去:那么些到处marquee(跑马灯卡塔尔的时代。风趣的是其一早已被撇下的竹签反而在到现在变的很有用,例如大家在非常的小的无绳话机显示器上切换内容,假使不断行的话文字将无法完全呈现。

ozPDA创造的这么些天气的行使很好的行使了它。
(假使您木有看见转换的文字,能够尝尝换八个城市来心得。要求动用WebKit内核浏览器卡塔尔

示例

.marquee { white-space: nowrap; overflow:-webkit-marquee; width: 70px; -webkit-marquee-direction: forwards; -webkit-marquee-speed: slow; -webkit-marquee-style: alternate; }

要让marquee职业索要有个别前提条件。首先,white-space必得安装为nowrap,那样工夫让文字不自行换行,其次,overflow必需设置为-webkit-marquee,宽度也要安装为比文字实际尺寸小的数值。

剩余的品质确定保障文字从左侧滚动到左臂(-webkit-marquee-direction卡塔尔、来回移动(-webkit-marquee-style卡塔尔(قطر‎以至以非常低的快慢移动(-webkit-marquee-speedState of Qatar。此外的习性有-webkit-marquee-repetition,用来定义marquee重复的次数,-webkit-marquee-increment,
定义每一回依次增加的快慢变化。

注:就算HTML的marquee标签在XHTML中被屏弃了,不过各浏览器依然援救的,然而有三个难题即便,marquee标签大概会占领超级大的cpu,大猫对其张开了深切的钻研,结论是marquee的进度无法太快,而webkit用-webkit-marquee属性是最好的——神飞。

扩充阅读: Safari Developer Library

Gecko特有总体性

font-size-adjust

本条有效的CSS3属性近年来独有Firefox帮衬。我们得以用它来设定内定成分的文字大小(font-size卡塔尔国应该相对于小写字母的冲天(x-height卡塔尔实际不是大写字母的万丈(cap
height卡塔尔(قطر‎。举例,Verdana比同型号的Times字体更清晰,它装有越来越矮的x-height。为了弥补这一个毛病,我们能够用font-size-adjust属性来改革前面一个。

该属性在装有不一样的x-height的书体上优异管用。纵然你在当心的运用中号字体,在标题现身时font-size-adjust也能提供施工方案。

示例

设要是因为某种原因客户的微电脑上从未有过设置Verdana,那么Arial就会被订正,进而和Verdana有同样的长度宽度比(0.58卡塔尔国。

p { font-family:Verdana, Arial, sans-serif; font-size: 12px; font-size-adjust: 0.58; }

澳门新葡亰平台官网 7

浏览器援助: Gecko.

扩充阅读: Mozilla Developer Network

image-rendering

n年前,图片并不会被遵照其原本大小呈现,而是被设计师给缩放掉。决议于缩放的分寸和上下文,图片恐怕会在浏览器中显现的不太好或许索性正是错掉了的。今后,浏览器有了越来越好的算法来展示缩放的图纸,可是,在你的图形被缩放后完全的主宰其表现也是件相当的赞的职业。

万一您的图样有相比较锐的线条并期望他们在缩放后保持它,这么些Gecko私有总体性就显得特别有用。相关的值是-moz-crisp-edges。相近的算法也用在optimizeSpeed,而auto
和optimizeQuality 定义为标准行事(用卓有作用的最棒质量来缩放成分State of Qatar。
image-rendering 属性相近能够用来<video>
和<canvas>成分,和用于背景图片同样。那是个CSS3
规范属性,不过当前独有Firefox协助。

澳门新葡亰平台官网 8

值得注意的是,-ms-interpolation-mode:
bicubic,固然它是个IE专有属性。可是,它让Internet Explorer 7
在缩放图片后将其渲染为比较高的质感。由于这一个浏览器暗中同意管理的很烂,所以那个天性可能会很有用。

浏览器接济: Gecko.

扩大阅读: Mozilla Developer Network

-moz-border-top-colors

那些天性能够分类为’亮眼’。它让您能够在border宽度大于1px的时候为其安装不一样的边框颜色。当然-moz-border-bottom-colors,
-moz-border-left-colors 和-moz-border-right-colors也是可用的。

不适的是,未有八个简写的-moz-border-colors
缩写,所以每一种边框都要抽离设置。同时,border-width要和给到的颜料的数额保持一致,不然,最后的不行颜色值会填充到剩余的肥瘦。

示例

本条例子中,成分的左右两左侧框会是正统的葱青,上下则有种恍若渐变的颜色——红马蔺花三色。

div { border: 3px solid orange; -moz-border-top-colors: red yellow blue; -moz-border-bottom-colors: red yellow blue; }

澳门新葡亰平台官网 9

浏览器帮助: Gecko.

壮大阅读: Mozilla Developer Network

混合属性

-webkit-user-select 和 -moz-user-select

唯恐你时不时不希望顾客在你的网址上采撷文本,无论是还是不是是出于版权的缘故。平时大家会有js来贯彻,另三个方案正是,将-webkit-user-select
和-moz-user-select 的值设为none。

请小心使用那个天性:因为好些个客户是来查阅音讯的,他们能够复制并蕴藏下来以备以后之用,所以这种措施既无用也行不通。倘诺你禁止使用了复制粘贴成效,客户依然得以经过查看源文件来取获得他俩想要的从头到尾的经过。搞不懂那一个特性为啥会被webkit和gecko扶持。

浏览器援助: WebKit, Gecko.

扩展阅读: Safari Developer Library, Mozilla Developer Network

-webkit-appearance 和 -moz-appearance

你早就想过将一张图片伪装成单选开关么?恐怕,二个输入框看起来像二个复选框?那么以往appearance
现身了。纵然你并不想要让一个链接看起来总是像个按键,下边那些事例也得以让您询问到,只要您愿意就能够达成的:

示例

a { -webkit-appearance: button; -moz-appearance: button; }

浏览器扶助: WebKit, Gecko.

扩张阅读: Safari Developer Library, Mozilla Developer Network, Mozilla
Developer Network,CSS3 appearance简单介绍

text-align: -moz-center/-webkit-center

那是叁本品质(恐怕纯粹来讲,是个“属性值”)的留存很让人欢娱啊。要让四个块级成分居中,我们平淡无奇将其设置为margin:0
auto。不过,今后你也能够将元素的容器的text-align属性设置为-moz-center 和
-webkit-center。相应的,你也足以透过安装-moz-left、-webkit-left或-moz-right、-webkit-right将元素居左大概居右。

浏览器扶助: WebKit, Gecko.

强大阅读: Safari Developer Library

CSS 2.1属性

counter-increment

您是不是平时希望您可以让五个上行下效列表大概一篇作品的具备标题自动编号?不幸的是,近来从未有CSS3属性帮衬。可是在CSS
2.1中,counter-increment
提供了二个缓慢解决方案。那就象征它已经现身好些年了,並且在IE第88中学就已经支撑了。

相当:before 伪成分和content
属性,counter-increment可以为富有的HTML标签增加自动的号码。即正是嵌套的编码也是支撑的。

示例

要给标题编码,先将总结珍视设一下:

body {counter-reset: thecounter} 

下面包车型地铁体制让每四个<h1>标题都有一个”Section”的前缀,然后其前边的数字自动的星罗棋布1(那是私下认可的,能够省略掉卡塔尔(قطر‎,这里thecounter是总结器的名称:

.counter h1:before { counter-increment: thecounter 1; content:"Section"counter(thecounter)":"; }

示例

对此二个嵌套编码的列表,重陈设数器,然后关掉<ol>的自动编码,因为它是无嵌套的:

ol { counter-reset: section; list-style-type: none; }

然后,每一种<li>设置为机关编号,分割符是叁个点(.State of Qatar,前边跟着三个空格

li:before { counter-increment: section; content: counters(section,".")""; 

HTML代码:

<ol>  <li>item</li> <!-- 1 -->  <li>item <!-- 2 -->   <ol>    <li>item</li> <!-- 1.1 -->    <li>item</li> <!-- 1.2 -->   </ol>  </li>  <li>item</li> <!-- 3 --> <ol>

浏览器辅助: CSS 2.1.,全数的今世浏览器,IE 7+.

强大阅读: W3C,CSS content, counter-increment 和 counter-reset详明

quotes

您会因为您的CMS不驾驭怎么正确调换援引符号而纠葛么?那么开首接受quotes属性吧。那样您即可自定义任何标识了。然后您就足以用:before和:after伪成分为此外希望的成分钦点引号了,悲催的是,webkit浏览器不援助那性子情——经测量检验,chrome
11早就早先支持这一个天性了(此前的本子未有测量检验)。

示例

日前的五个记号决定首先级引用内容的引号,前边的八个用于二级援用,就这样推算:

q { quotes: '«' '»' "‹" "›"; }

上面两行用于为选定成分钦点引号:

q:before {content: open-quote} q:after {content: close-quote} 

那样,<p><q>This is a very <q>nice</q>
quote.</q></p>看起来将会是酱紫的:

«This is a very ‹nice› quote.»

浏览器扶持: CSS 2.1.,除了WebKit,IE
7和IE6的具备现代浏览器。然则chrome是支撑的。。。

扩展阅读: W3C

难题:要直接的充分符号,CSS文书档案必定要设置为UTF-8吗?那是三个很纠缠的标题。可惜的是,笔者无法交到三个鲜明的答案。笔者的经历是,不供给设置哪些特定的字符集,然后utf-8字符集或者会出错,因为它展现错掉的字符(比如”»”State of Qatar。而是用iso-8859-1
字符集,一切就都以常规的。

W3C这样描述:”由于上个例子中由’quotes’定义的引号方便的原则性在微处理器键盘上,高质量的字符则供给不一样的10646字符集。”

你可能听别人说过不过并未有记住的CSS3属性

好像尾声,让我们重申一些不太流行的甚至不像border-radius和box-shadow这样被大规模须要的CSS3属性。

text-overflow

只怕你会有的时候蒙受那么些标题:有个别容器对于其内的文字来说太小了,然后您不能不用javascript来截断字符串并累计”…”符号以免止文字溢出。

忘却它吧!采纳CSS3和text-overflow:
ellipsis,假如文字比它的器皿的小幅要长的话,你就足避防强文字以”…”结束它。独一的须要是安装overflow:hidden。不幸的是,Firefox不协理那一个天性,可是日常在近日的版本上校会提供协助。

示例

div { width: 100px; text-overflow: ellipsis; }

澳门新葡亰平台官网 10

浏览器援救: CSS
3,全数浏览器的摩登版本,除了Firefox,IE从IE6起初扶植,据悉Firefox到6.0也会提供支撑的——希望那样吗。

扩大阅读: W3C

word-wrap

当文字在四个相比较窄的容器中时,它的某部部分也许会因为太长而不能够正确的换行。比方链接就平日引起难题。假诺你不想用overflow:
hidden掩瞒溢出的文字,那么你就足以设置 word-wrap
为break-word,它可以让字符串在达到容器的宽窄约束时换行。

示例

div { width: 50px; word-wrap: break-word; }

澳门新葡亰平台官网 11

浏览器扶植: CSS 3,全体今世浏览器。

扩充阅读: W3C

resize

只要您在应用Firefox或Chrome,那么您一定注意到了文本框的右下角默许有个小的手柄,它能够让您调治它们的轻重。这些职业的行事由CSS3
属性 resize: both完毕。

不过它并不只有限于textarea。它能够用来全数的HTML成分。horizontal 和
vertical 值用于调整调治水平方向还是垂直方向。

请留意:对于display:block成分,纵然设置了overflow:visible,resize属性将会没有抓住关键(这点原稿描述不详——by
神飞卡塔尔国。

澳门新葡亰平台官网 12

浏览器援救: CSS3, 除了Opera和IE感觉的别的最新的浏览器。

增添阅读: Safari Developer Library

background-attachment

当您为三个装置了overflow:auto的要素内定背景图片的时候,当内容太多而现身滚动条后,拖动滚动条就能够发觉背景图片的地点是原则性的,并非随着滚动条移动。借让你想要背景图片随着剧情而滚动,能够设置background-attachment:local。

澳门新葡亰平台官网 13

浏览器帮助: CSS
3,除了Firefox以外的享有今世浏览器,Firefox是支撑background-attachment属性的,只是不协理local值.

扩充阅读: W3C

text-rendering

乘势愈来愈多的网址开头用@font-face来渲染文字,易读性最初被关心了。大号字体上,文字会更便于现身。由于这几天还尚无CSS属性调整呈现在线字体的微妙细节,你可以接纳text-rendering来启用kerning 和 ligatures。

Gecko 和WebKit浏览器管理这么些脾气的不二诀窍很分歧等。前面叁个暗中认可启用那么些特点,而后人,你必要将其设置为optimizeLegibility。

澳门新葡亰平台官网 14

浏览器帮衬: CSS3, 全体WebKit 和Firefox浏览器.

扩充阅读: W3C

transform: rotateX/transform: rotateY

比如你已经开首利用CSS3,那么您或者会比较熟稔transform:
rotate(卡塔尔,这一个在z轴上旋转成分的习性。

不过你是还是不是也理解,它也能够更浓郁的转动的(比方,围绕x轴和y轴卡塔尔?
这几个变形构成-webkit-backface-visibility: hidden会更切合。

示例

假定你鼠标经过那几个成分,它将会旋转180°,倒转过来:

div:hover { transform: rotateY(180deg); }

澳门新葡亰平台官网 15

小技能:假诺只是映射多少个成分,你可以设置transform为rotateX(180deg卡塔尔国(对应rotateY卡塔尔(قطر‎也许安装transform 为scaleX(-1卡塔尔 (对应scaleY卡塔尔国.

浏览器补助: CSS3, WebKit、firefox、Opera以至IE9

扩大阅读: W3C,你必要驾驭的CSS3 动漫本事

结语

正如您愿意看到的,还应该有不菲茫然的很有用的性情。他们中的比超多依然处在试验性阶段并且只怕直接这样以至最后或然会被浏览器屏弃。而略带有恐怕在持续版本中被全体的浏览器扶植。

然而,很难决断判定他们中的一些是好是坏,WebKit特有的天性随着iOS和Android的中标呈现更加的主要。当然,一些CSS3属性多多少少已经足以行使了。

譬喻你不赏识个人属性,你能够将它们便是实验直到能够在代码中完毕以加强顾客体验。同有时间,W3C的CSS
validator 雷同支撑个体属性,它会回去警告并不是漏洞非常多。

祝你体验欢愉!

PS:本文提到了相当多风味,可是只是个大概浏览,其实基本上每一个属性都足以深深研究下的,假如你有乐趣,招待深刻钻探并共享之,感谢——神飞。


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图