CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享
在我寫(xiě)“你未必知道的JavaScript和CSS交互的5種方法”一文時(shí)，人們對(duì)于JavaScript和CSS是如何重疊的感到驚訝。今天，我將重點(diǎn)強(qiáng)調(diào)你能用CSS完成的7種工作——不需要通過(guò)JavaScript或圖片。
CSS@supports
在使用一些瀏覽器可能沒(méi)有的特性時(shí)，每一個(gè)優(yōu)秀的前端開(kāi)發(fā)者都需要進(jìn)行特性測(cè)試。特性測(cè)試一直以來(lái)都是由JavaScript來(lái)做的，許多人使用Modernizr，一個(gè)由許多測(cè)試良好的案例構(gòu)成的優(yōu)秀實(shí)用工具，來(lái)做特性測(cè)試。一個(gè)新API：@supports，不管怎樣，已經(jīng)出現(xiàn)在開(kāi)發(fā)人員面前，它能讓你用CSS來(lái)做特性測(cè)試。以下是一些@supports如何工作的簡(jiǎn)單例子：
/* basic usage */
@supports(prop:value) {
/* more styles */
}
/* real usage */
@supports (display: flex) {
div { display: flex; }
}
/* testing prefixes too */
@supports (display: -webkit-flex) or
(display: -moz-flex) or
(display: flex) {
section {
display: -webkit-flex;
display: -moz-flex;
display: flex;
float: none;
}
}
這個(gè)新的@supports特性，同樣有一個(gè)對(duì)應(yīng)的JavaScript版本，但已經(jīng)過(guò)期了，我們期待著早點(diǎn)使用它！
CSS濾鏡
寫(xiě)一個(gè)服務(wù)來(lái)修改圖片的色調(diào)，然后你可以以數(shù)十億美元把它賣(mài)給Facebook。當(dāng)然，那是一件很簡(jiǎn)單的事，但是寫(xiě)圖像濾鏡并不是一門(mén)科學(xué)。我到Mozilla 的第一個(gè)星期寫(xiě)的一個(gè)小程序（得了獎(jiǎng)，額，我只是隨便說(shuō)說(shuō)而已）用了一些基于JS的數(shù)學(xué)用canvas來(lái)創(chuàng)建圖像濾鏡，但現(xiàn)在我們用CSS就能創(chuàng)建圖像濾鏡了。
/* simple filter */
.myElement {
-webkit-filter: blur(2px);
}
/* advanced filter */
.myElement {
-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}
這個(gè)類型的濾鏡只是改變了下圖像的原來(lái)樣子而已，保存或?qū)С鰣D像時(shí)并沒(méi)有用所說(shuō)的濾鏡，但當(dāng)你需要給照片美化或處理海報(bào)時(shí)這很好用。
Pointr Events和 Bricking Clicks
CSS的Pointr Events屬性提供了一個(gè)方法來(lái)有效的禁用一個(gè)元素，正因?yàn)槿绱?，通過(guò)JavaScript，點(diǎn)擊一個(gè)鏈接不會(huì)觸發(fā)一個(gè)單擊事件：
/* do nothing when clicked or activated */
.disabled { pointer-events: none; }/* this will _not_ fire because of the pointer-events: none application */
document.getElementById("disabled-element").addEventListener("click", function(e) {
alert("Clicked!");
});
在上面的例子中，由于CSS pointer-events值的原因，單擊事件將不會(huì)觸發(fā)。我發(fā)現(xiàn)了它的巨大作用，你不需要每處都檢查className或?qū)傩詠?lái)確保一些元素是否已經(jīng)禁用了。
折疊、展開(kāi)菜單
CSS讓我們可以創(chuàng)建過(guò)渡效果和動(dòng)畫(huà)，但是很多時(shí)候我們需要JavaScript庫(kù)來(lái)幫助我們修改一些東西和控制動(dòng)畫(huà)。一個(gè)很流行的動(dòng)畫(huà)就是折疊、展開(kāi)菜單效果，很多人都不知道只用CSS就可以實(shí)現(xiàn)！
/* slider in open state */
.slider {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
/* close it with the "closed" class */
.slider.closed {
max-height: 0;
}
Max-height的一個(gè)巧妙使用能讓元素按想要的效果來(lái)折疊和展開(kāi)。
CSS計(jì)數(shù)器
“計(jì)數(shù)器”這個(gè)術(shù)語(yǔ)在網(wǎng)絡(luò)上表示的意思經(jīng)常讓我們傻笑，但CSS 計(jì)數(shù)器是另一件更讓我們傻笑的事。CSS計(jì)數(shù)器允許開(kāi)發(fā)人員在指定的元素上用:before和:after來(lái)增加一個(gè)計(jì)數(shù)器：
/* initialize the counter */
ol.slides {
counter-reset: slideNum;
}
/* increment the counter */
ol.slides > li {
counter-increment: slideNum;
}
/* display the counter value */
ol.slides li:after {
content: "[" counter(slideNum) "]";
}
你經(jīng)常見(jiàn)到CSS計(jì)數(shù)器被用在幻燈片效果上，和像表單內(nèi)容的列表上。
Unicode CSS樣式名
有許多CSS最好的實(shí)踐文檔，它們都是由如何給CSS樣式命名開(kāi)始的。你永遠(yuǎn)不會(huì)見(jiàn)到有個(gè)文檔說(shuō)的的用unicode符號(hào)來(lái)命名你的樣式：
.ಠ_ಠ {
border: 1px solid #f00;
background: pink;
}
.❤ {
background: lightgreen;
border: 1px solid green;
}
請(qǐng)別用這些符號(hào)。除非你能行！
CSS圓
CSS三角形是一個(gè)技術(shù)活，CSS圓也同樣如此。通過(guò)濫用CSS border-radius，你能創(chuàng)建很完美的圓！
circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* width and height can be anything, as long as they're equal */
}
你可以給你的圓增加漸變，你甚至可以使用CSS動(dòng)畫(huà)來(lái)讓你的圓動(dòng)起來(lái)！CSS即將有更多統(tǒng)一的API提供給這些圖形，但現(xiàn)在你可以用這種方法來(lái)創(chuàng)建圓了。
你看到了，7件你能用CSS做的事讓你很驚訝，其中一些是很有用的，一些可以在工作中用不到。請(qǐng)告訴我，我是否遺漏了一些在工作你經(jīng)常使用優(yōu)秀CSS方法。
相關(guān)文章
IE7已經(jīng)支持position:fixed了，而我們的IE6呢？還繼續(xù)使用js事件？消耗資源，破壞結(jié)構(gòu)，畫(huà)面閃耀。2008-09-09
html工作中表格<tbody>標(biāo)簽的使用技巧
公司大部分的項(xiàng)目都是基于BS結(jié)構(gòu)，UI設(shè)計(jì)階段做WEB原型頁(yè)面時(shí)要把各種交互效果實(shí)現(xiàn)出來(lái)，與真正的后臺(tái)編程不同，就用JS前臺(tái)編程來(lái)實(shí)現(xiàn)，讓程序員編程前知道要做成什么樣的效果就行了。2008-09-09
使用有趣的自定義標(biāo)記布局頁(yè)面...2006-11-11
今天要講的內(nèi)容是如何實(shí)現(xiàn)“首字下沉”，，第一個(gè)字是很大的紅色楷體，陷于一段文字之首。這種做法在雜志中常見(jiàn)，但是在網(wǎng)頁(yè)中不那么常見(jiàn)。那么如何實(shí)現(xiàn)呢？其實(shí)很簡(jiǎn)單，只有一句CSS就可以了。2008-07-07
Zen Coding 快速編寫(xiě)HTML/CSS代碼的實(shí)現(xiàn)
在本文中我們將展示一種新的使用仿CSS選擇器的語(yǔ)法來(lái)快速開(kāi)發(fā)HTML和CSS的方法。它由Sergey Chikuyonok開(kāi)發(fā)。2011-01-01
CSS2實(shí)現(xiàn)的隔行換色...2007-05-05
純CSS實(shí)現(xiàn)標(biāo)簽導(dǎo)航制作
2008-01-01
讓IE ff Opera同時(shí)支持Alpha透明的方法
圖片的透明效果是網(wǎng)頁(yè)中需要用到的一種特殊形式，雖然不是非常的常用，但是遇到這樣的需求往往有點(diǎn)措手不及。2008-09-09
Div CSS absolute與relative的區(qū)別小結(jié)
Div + CSS 進(jìn)行網(wǎng)頁(yè)布局，適當(dāng)?shù)剡\(yùn)用 absolute 與 relative，能給布局帶來(lái)意想不到的效果和方便，達(dá)到事半功倍…本文介紹了關(guān)于 absolute 與 relative 的運(yùn)用。2007-12-12
XHTML下css+div布局總結(jié) 超強(qiáng)推薦
XHTML下css+div布局總結(jié) 超強(qiáng)推薦...2006-12-12