2022-12-03 分類(lèi): 網(wǎng)站建設(shè)
盡管現(xiàn)代瀏覽器已經(jīng)支持了眾多的CSS3屬性,但是大部分設(shè)計(jì)師和開(kāi)發(fā)人員貌似依然在關(guān)注于一些很“主流”的屬性,如border-radius、box-shadow或者transform等。它們有良好的文檔、很好的測(cè)試并且最常用到,所以如果你最近在設(shè)計(jì)網(wǎng)站,你很難能脫離它們。
但是,隱藏在瀏覽器的大寶庫(kù)中是一些高級(jí)的、被嚴(yán)重低估的屬性,但是它們并沒(méi)有得到太多的關(guān)注。或許它們中的一些應(yīng)該這樣(被無(wú)視),但是其它的屬性應(yīng)該得到更多的認(rèn)可。最偉大的財(cái)富隱藏在Webkit的下面,而且在iPhone、iPad和Android apps的時(shí)代,開(kāi)始了解它們會(huì)灰常有用。就連Firefox等使用的Gecko引擎,也提供了一些獨(dú)特的屬性。在本文中,我們將看一下鮮為人知的CSS 2.1和CSS3屬性以及它們?cè)诂F(xiàn)代瀏覽器中的支持情況。
說(shuō)明:對(duì)于每個(gè)屬性,我們這里規(guī)定:”WebKit” 即指代使用Webkit內(nèi)核的瀏覽器(Safari、Chrome、iPhone、iPad、Android等),”Gecko“指代采用Gecko內(nèi)核的瀏覽器(Firefox等)。然后有的屬性是官方CSS 2.1.規(guī)范的一部分,這意味著更多的瀏覽器甚至一些古老的瀏覽器也會(huì)支持它們。最后,一個(gè)CSS3的標(biāo)簽標(biāo)明遵守這個(gè)標(biāo)準(zhǔn),被最新的瀏覽器版本——比如Firefox 4、Chrome 10、Safari 5、Opera 11.10以及IE9支持的屬性。
WebKit特有屬性
-webkit-mask
這個(gè)屬性是相當(dāng)強(qiáng)大的,所以詳細(xì)的介紹超出了本文的范疇,它非常值得深入研究,因?yàn)樗梢栽趯?shí)際應(yīng)用中為你省掉很多時(shí)間。
-webkit-mask讓為一個(gè)元素添加蒙板成為可能,從而你可以創(chuàng)建任意形狀的花樣。蒙板可以是CSS3漸變或者半透明的PNG圖片。蒙板元素的alpha值為0的時(shí)候會(huì)覆蓋下面的元素,為1的時(shí)候會(huì)完全顯示下面的內(nèi)容。相關(guān)的屬性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等,嚴(yán)重依賴(lài)來(lái)自于background中的語(yǔ)法。更多信息請(qǐng)查看webkit的博客和下面的鏈接。
示例
圖片蒙板:
示例
漸變蒙板:
CSS邊框的一個(gè)不足就是只有矩形的元素才能使用。-webkit-text-stroke可以為文字添加邊框。它不但可以設(shè)置文字邊框的寬度,也能設(shè)置其顏色。而且,配合使用color: transparent屬性,你還可以創(chuàng)建鏤空的字體!
示例
為所有的標(biāo)題設(shè)定一個(gè)2px寬的藍(lán)色邊框:
另一個(gè)特性是,通過(guò)設(shè)定1px的透明邊框,可以讓文字變得平滑:
創(chuàng)建紅色鏤空字體:
換行有時(shí)是很棘手的事情:有時(shí)你希望文字在適當(dāng)?shù)牡胤綌嘈?而不是折行),有時(shí)你又不想這樣。一個(gè)能控制這個(gè)的屬性就是-webkit-nbsp-mode,它讓你可以改變 空白符的行為,強(qiáng)制文字在它被用到的地方斷行。通過(guò)設(shè)置值為space即可實(shí)現(xiàn)。
-webkit-tap-highlight-color這個(gè)屬性只用于iOS (iPhone和iPad)。當(dāng)你點(diǎn)擊一個(gè)鏈接或者通過(guò)Javascript定義的可點(diǎn)擊元素的時(shí)候,它就會(huì)出現(xiàn)一個(gè)半透明的灰色背景。要重設(shè)這個(gè)表現(xiàn),你可以設(shè)置-webkit-tap-highlight-color為任何顏色。
想要禁用這個(gè)高亮,設(shè)置顏色的alpha值為0即可。
示例
設(shè)置高亮色為50%透明的紅色:
瀏覽器支持: 只有iOS(iPhone和iPad).
zoom: reset通常來(lái)說(shuō),zoom是一個(gè)IE專(zhuān)用的屬性。但是webkit也開(kāi)始支持它了,而且使用值reset,webkit可以實(shí)現(xiàn)不錯(cuò)的效果(有趣的是,IE不支持這個(gè)值)。它讓你重設(shè)掉瀏覽器中正常的縮放行為——如果某個(gè)元素被聲明了zoom:reset,頁(yè)面上的其它元素在用戶(hù)放大頁(yè)面的時(shí)候都會(huì)跟著放大。
注:其實(shí),我們常用來(lái)禁用chrome強(qiáng)制字體大小的時(shí)候用到的-webkit-text-size-adjust:none;也是可以實(shí)現(xiàn)類(lèi)似的效果,不同的是,設(shè)置該屬性的元素內(nèi)的文字不會(huì)被放大/縮小,但是頁(yè)面上的其它元素則會(huì)變化——神飛
-webkit-margin-collapse這個(gè)屬性屬于限制級(jí)的,但是它還是非常值得關(guān)注。通常,兩個(gè)相鄰的元素的margin會(huì)折疊起來(lái)(collapse)。這意味著第一個(gè)元素的底部的邊距和第二個(gè)元素的頭部邊距會(huì)被合并到一起。
最常見(jiàn)的例子就是兩個(gè)相鄰的
元素會(huì)共享他們的margin值。想要控制這個(gè)表現(xiàn),我們可以使用-webkit-margin-collapse及其分拆后的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等屬性。默認(rèn)值是collapse,值separate則停止共享margin值,也就是說(shuō),第一個(gè)元素的底部邊距和第二個(gè)元素的頭部邊距會(huì)正常疊加。
-webkit-box-reflect你還記得幾乎每個(gè)網(wǎng)站都把他們的網(wǎng)站logo或者頭部的文字做成倒影的那個(gè)年代嗎?謝天謝地,那個(gè)年代已經(jīng)過(guò)去了,但是如果你要在一些按鈕、導(dǎo)航、或者其他UI元素上更好的使用這個(gè)技術(shù),-webkit-box-reflect是更好的選擇。
這個(gè)屬性接受above、below、left和right四個(gè)關(guān)鍵詞,它們?cè)O(shè)置倒影的方向,它們和一個(gè)設(shè)置元素和它的倒影建的距離的數(shù)字一起使用。同時(shí),蒙板圖片也是同樣支持的(看上面的-webkit-mask部分,不要搞混了哈)。倒影會(huì)自動(dòng)生成并對(duì)布局沒(méi)有影響。下面的元素只用了CSS,第二個(gè)按鈕用了-webkit-box-reflect屬性。
示例
這個(gè)倒影會(huì)出現(xiàn)在它的父元素的下面并有5px的間距:
這個(gè)倒影會(huì)投射到元素src="/upload/pic19/)):
另一個(gè)屬性讓我們回到美好的從前:那個(gè)遍地marquee(跑馬燈)的年代。有趣的是這個(gè)已經(jīng)被遺棄的標(biāo)簽反而在現(xiàn)在變的很有用,比如我們?cè)诒容^小的手機(jī)屏幕上切換內(nèi)容,如果不斷行的話文字將不能完全顯示。
ozPDA創(chuàng)建的這個(gè)天氣的應(yīng)用很好的使用了它。 (如果你木有看到變換的文字,可以嘗試換一個(gè)城市來(lái)體驗(yàn)。需要使用WebKit內(nèi)核瀏覽器)
示例
要讓marquee工作需要一些前提條件。首先,white-space必須設(shè)置為nowrap,這樣才能讓文字不自動(dòng)換行,其次,overflow必須設(shè)置為-webkit-marquee,寬度也要設(shè)置為比文字實(shí)際長(zhǎng)度小的數(shù)值。
剩下的屬性確保文字從左邊滾動(dòng)到右邊(-webkit-marquee-direction)、來(lái)回移動(dòng)(-webkit-marquee-style)以及以比較低的速度移動(dòng)(-webkit-marquee-speed)。其它的屬性有-webkit-marquee-repetition,用來(lái)定義marquee重復(fù)的次數(shù),-webkit-marquee-increment, 定義每次遞增的速度變化。
注:雖然HTML的marquee標(biāo)簽在XHTML中被拋棄了,但是各瀏覽器還是支持的,但是有一個(gè)問(wèn)題就是,marquee標(biāo)簽可能會(huì)占用比較大的cpu,大貓對(duì)其進(jìn)行了深入的研究,結(jié)論是marquee的速度不能太快,而webkit用-webkit-marquee屬性是好的——神飛。
Gecko特有屬性
font-size-adjust這個(gè)有用的CSS3屬性目前只有Firefox支持。我們可以用它來(lái)設(shè)定指定元素的文字大小(font-size)應(yīng)該相對(duì)于小寫(xiě)字母的高度(x-height)而不是大寫(xiě)字母的高度(cap height)。比如,Verdana比同型號(hào)的Times字體更清晰,它有著更矮的x-height。為了彌補(bǔ)這個(gè)缺陷,我們可以用font-size-adjust屬性來(lái)糾正后者。
該屬性在擁有不同的x-height的字體上非常有用。即便你在小心的使用小號(hào)字體,在問(wèn)題出現(xiàn)時(shí)font-size-adjust也能提供解決方案。
示例
如果由于某種原因用戶(hù)的電腦上沒(méi)有安裝Verdana,那么Arial就會(huì)被修正,從而和Verdana有相同的長(zhǎng)寬比(0.58)。
瀏覽器支持: Gecko.
image-renderingn年前,圖片并不會(huì)被按照其原始大小顯示,而是被設(shè)計(jì)師給縮放掉。取決于縮放的大小和上下文,圖片可能會(huì)在瀏覽器中展現(xiàn)的不太好或者干脆就是錯(cuò)掉了的。現(xiàn)在,瀏覽器有了更好的算法來(lái)顯示縮放的圖片,不過(guò),在你的圖片被縮放后完全的控制其表現(xiàn)也是件很贊的事情。
如果你的圖片有比較銳的線條并希望他們?cè)诳s放后保持它,這個(gè)Gecko私有屬性就顯得特別有用。相關(guān)的值是-moz-crisp-edges。同樣的算法也用在optimizeSpeed,而auto 和optimizeQuality 定義為標(biāo)準(zhǔn)行為(用可行的好質(zhì)量來(lái)縮放元素)。 image-rendering 屬性同樣可以用于 和元素,和用于背景圖片一樣。這是個(gè)CSS3 標(biāo)準(zhǔn)屬性,但是目前只有Firefox支持。
值得注意的是,-ms-interpolation-mode: bicubic,盡管它是個(gè)IE專(zhuān)有屬性。然而,它讓Internet Explorer 7 在縮放圖片后將其渲染為比較高的質(zhì)量。由于這個(gè)瀏覽器默認(rèn)處理的很爛,所以這個(gè)屬性可能會(huì)很有用。
瀏覽器支持: Gecko.
-moz-border-top-colors這個(gè)屬性可以歸類(lèi)為’養(yǎng)眼’。它讓你可以在border寬度大于1px的時(shí)候?yàn)槠湓O(shè)置不同的邊框顏色。當(dāng)然-moz-border-bottom-colors, -moz-border-left-colors 和-moz-border-right-colors也是可用的。
不爽的是,沒(méi)有一個(gè)簡(jiǎn)寫(xiě)的-moz-border-colors 縮寫(xiě),所以每個(gè)邊框都要分開(kāi)設(shè)置。同時(shí),border-width要和給到的顏色的數(shù)量保持一致,否則,最后的那個(gè)顏色值會(huì)填充到剩下的寬度。
示例
這個(gè)例子中,元素的左右兩邊邊框會(huì)是標(biāo)準(zhǔn)的橙色,上下則有種類(lèi)似漸變的顏色——紅黃藍(lán)三色。
瀏覽器支持: Gecko.
混合屬性
-webkit-user-select 和 -moz-user-select或許你常常不希望用戶(hù)在你的網(wǎng)站上選擇文本,無(wú)論是否是出于版權(quán)的原因。通常大家會(huì)有js來(lái)實(shí)現(xiàn),另一個(gè)方案就是,將-webkit-user-select 和-moz-user-select 的值設(shè)為none。
請(qǐng)謹(jǐn)慎使用這個(gè)屬性:因?yàn)榇蟛糠钟脩?hù)是來(lái)查看信息的,他們可以復(fù)制并存儲(chǔ)下來(lái)以備將來(lái)之用,所以這種方法既無(wú)用也無(wú)效。如果你禁用了復(fù)制粘貼功能,用戶(hù)還是可以通過(guò)查看源文件來(lái)獲取到他們想要的內(nèi)容。搞不懂這個(gè)屬性為什么會(huì)被webkit和gecko支持。
瀏覽器支持: WebKit, Gecko.
-webkit-appearance 和 -moz-appearance你曾經(jīng)想過(guò)將一張圖片偽裝成單選按鈕么?或者,一個(gè)輸入框看起來(lái)像一個(gè)復(fù)選框?那么現(xiàn)在appearance 出現(xiàn)了。即便你并不想要讓一個(gè)鏈接看起來(lái)總是像個(gè)按鈕,下面這個(gè)例子也可以讓你了解到,只要你愿意就可以做到的:
示例
瀏覽器支持: WebKit, Gecko.
擴(kuò)展閱讀: Safari Developer Library, Mozilla Developer Network, Mozilla Developer Network,CSS3 appearance簡(jiǎn)介
text-align: -moz-center/-webkit-center這是一個(gè)屬性(或者精確來(lái)說(shuō),是個(gè)“屬性值”)的存在很讓人驚喜啊。要讓一個(gè)塊級(jí)元素居中,大家通常將其設(shè)置為margin:0 auto。但是,現(xiàn)在你也可以將元素的容器的text-align屬性設(shè)置為-moz-center 和 -webkit-center。相應(yīng)的,你也可以通過(guò)設(shè)置-moz-left、-webkit-left或-moz-right、-webkit-right將元素居左或者居右。
瀏覽器支持: WebKit, Gecko.
CSS 2.1屬性
counter-increment你是否經(jīng)常希望你可以讓一個(gè)有序列表或者一篇文章的所有標(biāo)題自動(dòng)編號(hào)?不幸的是,目前尚未有CSS3屬性支持。但是在CSS 2.1中,counter-increment 提供了一個(gè)解決方案。這就意味著它已經(jīng)出現(xiàn)好些年了,而且在IE8中就已經(jīng)支持了。
配合:before 偽元素和content 屬性,counter-increment可以為所有的HTML標(biāo)簽添加自動(dòng)的編號(hào)。即便是嵌套的編碼也是支持的。
示例
要給標(biāo)題編碼,先將計(jì)算器重設(shè)一下:
下面的樣式讓每一個(gè)標(biāo)題都有一個(gè)”Section”的前綴,然后其后面的數(shù)字自動(dòng)的遞增1(這是默認(rèn)的,可以省略掉),這里thecounter是計(jì)算器的名稱(chēng):
示例
對(duì)于一個(gè)嵌套編碼的列表,重設(shè)計(jì)數(shù)器,然后關(guān)掉的自動(dòng)編碼,因?yàn)樗菬o(wú)嵌套的:
然后,每個(gè)設(shè)置為自動(dòng)編號(hào),分割符是一個(gè)點(diǎn)(.),后面跟著一個(gè)空格
HTML代碼:
瀏覽器支持: CSS 2.1.,所有的現(xiàn)代瀏覽器,IE 7+.
quotes你會(huì)因?yàn)槟愕腃MS不知道如何正確轉(zhuǎn)換引用符號(hào)而糾結(jié)么?那么開(kāi)始使用quotes屬性吧。這樣你就可以自定義任何符號(hào)了。然后你就可以用:before和:after偽元素為任何期望的元素指定引號(hào)了,悲催的是,webkit瀏覽器不支持這個(gè)屬性——經(jīng)測(cè)試,chrome 11已經(jīng)開(kāi)始支持這個(gè)屬性了(之前的版本沒(méi)有測(cè)試)。
示例
前面的兩個(gè)符號(hào)決定第一級(jí)引用內(nèi)容的引號(hào),后面的兩個(gè)用于二級(jí)引用,以此類(lèi)推:
下面兩行用于為選定元素指定引號(hào):
這樣,
This is a very nice quote.
看起來(lái)將會(huì)是醬紫的:瀏覽器支持: CSS 2.1.,除了WebKit,IE 7和IE6的所有現(xiàn)代瀏覽器。不過(guò)chrome是支持的。。。
問(wèn)題:要直接的添加符號(hào),CSS文檔必須要設(shè)置為UTF-8嗎?這是一個(gè)很糾結(jié)的問(wèn)題。遺憾的是,我不能給出一個(gè)明確的答案。我的經(jīng)驗(yàn)是,不必要設(shè)置什么特定的字符集,然后utf-8字符集可能會(huì)出錯(cuò),因?yàn)樗@示錯(cuò)掉的字符(比如”?”)。而是用iso-8859-1 字符集,一切就都是正常的。
W3C這樣描述:”由于上個(gè)例子中由’quotes’定義的引號(hào)方便的定位在電腦鍵盤(pán)上,高質(zhì)量的字符則需要不同的10646字符集?!?/p>
你或許聽(tīng)說(shuō)過(guò)但是沒(méi)有記住的CSS3屬性
接近尾聲,讓我們重溫一些不太流行的以及不像border-radius和box-shadow那樣被廣泛需求的CSS3屬性。
text-overflow或許你會(huì)常常遇到這個(gè)問(wèn)題:某個(gè)容器對(duì)于其內(nèi)的文字來(lái)說(shuō)太小了,然后你不得不用javascript來(lái)截?cái)嘧址⑻砑印薄狈?hào)以避免文字溢出。
忘掉它吧!采用CSS3和text-overflow: ellipsis,如果文字比它的容器的寬度要長(zhǎng)的話,你就可以強(qiáng)制文字以”…”結(jié)束它。唯一的要求是設(shè)置overflow:hidden。不幸的是,F(xiàn)irefox不支持這個(gè)屬性,但是貌似在最近的版本中將會(huì)提供支持。
示例
瀏覽器支持: CSS 3,所有瀏覽器的最新版本,除了Firefox,IE從IE6開(kāi)始支持,據(jù)說(shuō)Firefox到6.0也會(huì)提供支持的——希望如此吧。
word-wrap當(dāng)文字在一個(gè)比較窄的容器中時(shí),它的某個(gè)部分可能會(huì)因?yàn)樘L(zhǎng)而不能正確的換行。比如鏈接就常常引起問(wèn)題。如果你不想用overflow: hidden隱藏溢出的文字,那么你就可以設(shè)置 word-wrap 為break-word,它可以讓字符串在到達(dá)容器的寬度限制時(shí)換行。
示例
瀏覽器支持: CSS 3,所有現(xiàn)代瀏覽器。
resize如果你在使用Firefox或Chrome,那么你肯定注意到了文本框的右下角默認(rèn)有個(gè)小的手柄,它可以讓你調(diào)整它們的大小。這個(gè)標(biāo)準(zhǔn)的行為由CSS3 屬性 resize: both實(shí)現(xiàn)。
但是它并不僅限于textarea。它可以用于所有的HTML元素。horizontal 和 vertical 值用于控制調(diào)整水平方向還是垂直方向。
請(qǐng)注意:對(duì)于display:block元素,如果設(shè)置了overflow:visible,resize屬性將會(huì)無(wú)效(這一點(diǎn)原文描述不詳——by 神飛)。
瀏覽器支持: CSS3, 除了Opera和IE以為的其它最新的瀏覽器。
background-attachment當(dāng)你為一個(gè)設(shè)置了overflow:auto的元素指定背景圖片的時(shí)候,當(dāng)內(nèi)容太多而出現(xiàn)滾動(dòng)條后,拖動(dòng)滾動(dòng)條就會(huì)發(fā)現(xiàn)背景圖片的位置是固定的,而不是隨著滾動(dòng)條移動(dòng)。如果你想要背景圖片隨著內(nèi)容而滾動(dòng),可以設(shè)置background-attachment:local。
瀏覽器支持: CSS 3,除了Firefox以外的所有現(xiàn)代瀏覽器,F(xiàn)irefox是支持background-attachment屬性的,只是不支持local值.
text-rendering隨著越來(lái)越多的網(wǎng)站開(kāi)始用@font-face來(lái)渲染文字,易讀性開(kāi)始被關(guān)注了。小號(hào)字體上,文字會(huì)更容易出現(xiàn)。由于目前還沒(méi)有CSS屬性控制顯示在線字體的微妙細(xì)節(jié),你可以利用text-rendering來(lái)啟用kerning 和 ligatures。
Gecko 和WebKit 瀏覽器處理這個(gè)屬性的方式很不一樣。前者默認(rèn)啟用這個(gè)特性,而后者,你需要將其設(shè)置為optimizeLegibility。
瀏覽器支持: CSS3, 所有WebKit 和Firefox瀏覽器.
transform: rotateX/transform: rotateY如果你已經(jīng)開(kāi)始使用CSS3,那么你可能會(huì)比較熟悉transform: rotate(),這個(gè)在z軸上旋轉(zhuǎn)元素的屬性。
但是你是否也知道,它也可以更深入的旋轉(zhuǎn)的(比如,圍繞x軸和y軸)? 這些變形結(jié)合-webkit-backface-visibility: hidden會(huì)更合適。
示例
如果你鼠標(biāo)經(jīng)過(guò)這個(gè)元素,它將會(huì)旋轉(zhuǎn)180°,倒轉(zhuǎn)過(guò)來(lái):
小技巧:如果只是映射一個(gè)元素,你可以設(shè)置transform為rotateX(180deg) (對(duì)應(yīng)rotateY)或者設(shè)置transform 為scaleX(-1) (對(duì)應(yīng)scaleY).
瀏覽器支持: CSS3, WebKit、firefox、Opera以及IE9
結(jié)語(yǔ)
正如你希望見(jiàn)到的,還有很多未知的很有用的屬性。他們中的很多仍然處于試驗(yàn)性階段并且可能一直這樣甚至最終可能會(huì)被瀏覽器擯棄。而有些有望在后續(xù)版本中被所有的瀏覽器支持。
然而,很難判斷判斷他們中的一些是好是壞,WebKit特有的屬性隨著iOS和Android的成功顯得越來(lái)越重要。當(dāng)然,一些CSS3屬性多多少少已經(jīng)可以使用了。
如果你不喜歡私有屬性,你可以將它們視為實(shí)驗(yàn)直到可以在代碼中實(shí)現(xiàn)以增強(qiáng)用戶(hù)體驗(yàn)。同時(shí),W3C的CSS validator 同樣支持私有屬性,它會(huì)返回警告而不是錯(cuò)誤。
祝你體驗(yàn)快樂(lè)!
PS:本文提到了很多特性,但是只是個(gè)概覽,其實(shí)基本上每個(gè)屬性都可以深入研究下的,如果你有興趣,歡迎深入研究并分享之,謝謝——神飛。
新聞標(biāo)題:CSS的未來(lái):一些試驗(yàn)性CSS屬性
瀏覽地址:http://jinyejixie.com/news/218851.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站排名、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站制作、網(wǎng)站營(yíng)銷(xiāo)、品牌網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容