CSS 冷知識

前幾天參加了Happy designer + RGBA的活動，這次不僅僅是兩個社群的合作，還是以CSS為主題作為介紹。這次活動不只介紹了CSS架構，還介紹了許多CSS的奇妙解法，想到很久以前也寫過類似的文章(CSS 冷知識)，個人認為這類冷僻解法相當有趣…，有機會應該定期發表CSS冷知識。

隨著視窗縮放的背景圖

CSS背景圖相當的實用，但是有個問題就是無法等比例縮放，這個奇妙解法可以解決視窗縮放的問題(關鍵字：padding-bottom)。

首先還是必須要知道圖片的比例，這次範例直接使用Fireapp的宣傳圖…(Blog內這張最適合QQ)，經過計算可以知道圖片的寬高比為100:42，那麼就寫出下面這樣的sass code，寬為100%，padding-bottom為42%。

.img-responsive-fire
	background-size: contain
	backgroubd-repeat: no-repeat
	padding-bottom: 42%

將Class套用至圖內並加入style="background-image: url(/path/img.jpg)"，這樣背景圖就可以隨視窗縮放了

<div class="img-responsive-fire" style="background-image: url(/images/20130917fireapp.jpg)"></div>
<em>CSS background</em>
<br>
<img src="/images/20130917fireapp.jpg" class="img-responsive" alt="">
<em>HTML img</em>

只靠Class增加CSS權重

http://www.w3.org/TR/CSS2/cascade.html#specificity

CSS權重一直是網頁設計中常遇到的問題，就以Bootstrap來說，Bootstrap大量使用.class > .class這種方式去製作Component，如果是不熟悉的開發者，在overwrite時就會加上!important以確保自己得樣式會呈現。而這個範例解法，可以避免使用!important 或 id來增加CSS的權重。

這邊先寫一個簡單的範例，一個是單純的.green，另一個是.demo > .green.blue，就以優先度來說，後者大勝前者，所以當標籤套用class="blue green"必定為藍色。

.green
	color: green
.demo > .green.blue
	color: blue

如果此時要覆蓋CSS，就是不斷的增加Class的權重如下…。

.red.red.red.red.red.red.red.red.red.red.red.red
	color: red

就算是.demo > .green.blue也不過區區 3分 的權重，而.red*12 有高達 12分 的權重，雖然這樣做好像看起來怪怪的…，不過確實也是可行。

@Supports() 判斷瀏覽器的核心

@Suports 可以用來判斷瀏覽器是否支援特定CSS語法，所以再加上CSS前啜詞就能判斷目前的瀏覽器核心。就以下列範例來說-webkit-transition，就可以判斷使用者的瀏覽器是否支援-webkit-transition，然後在執行其內容CSS。

@supports (-webkit-transition: all)
	.supports
		color: red
		&:after
			content: "-webkit-"
@supports (-moz-transition: all)
	.supports
		color: blue
		&:after
			content: "-moz-"

這範例就只支援-webkit-與-moz-相容的瀏覽器，Chrome、Safari、Opera 應該會顯示紅色，Firefox會顯示藍色。

結語

如果看完這篇，還有想到什麼CSS冷知識，拜託…，跟我分享…。