v_k's 非科學日誌

2012年2月27日

[CSS] 適用於 Webkit 瀏覽器的 CSS hack

採用Webkit核心的瀏覽器 (常見的如Chrome, Safari...) 如果需要CSS hack的時候，可使用以下寫法：

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* 括號內的CSS只有Webkit瀏覽器讀的到 */
   p {color:#333;} 
   img {border:1px solid #ddd;} 
}

這邊有使用Webkit的瀏覽器列表：
http://trac.webkit.org/wiki/Applications%20using%20WebKit

2012年2月25日

[CSS] Chrome中文版最小字型的限制

在Chrome中文版的預設值中，小於12px的文字一律以12px顯示，這有時候會造成設計上的困擾，因為連英文字也跟著受到限制 (尤其這設定還藏在進階選項的第二層中，也不可能要求使用者為了單一網站而去修改)
P.S. Chrome英文版的最小字型預設值是6px..所以沒有這個問題

解決方法是在CSS中增加以下規則：
-webkit-text-size-adjust:none;

這樣瀏覽器就不會插手干預字體的大小，此規則也適用其他webkit核心的瀏覽器(如Safari等)，
但缺點是以瀏覽器的縮放功能(Ctrl+ 跟 Ctrl-)縮放頁面時，文字大小也不會跟著改變，因此請斟酌使用(影響網站使用性)。

詳細語法請參考此處說明：
http://css-infos.net/property/-webkit-text-size-adjust

2012年2月23日

[jQuery] 用animate改變寬度時若動畫不太順暢..

前陣子發現的小問題，用animate改變寬度或高度時，例如：
$(this).animate({width:"0px"}, 300);

如果作用的元素有padding或margin時，動畫會有點不順暢的跳格感 (特別是旁邊有相鄰並排的元素時)
解決方法是將padding與margin也同時加入animate中，例如：

//jQuery snippet:

.animate({
   width:"0px",
   marginRight:"0px",
   paddingRight:"0px",
   paddingLeft:"0px"
}, 300);

這樣就ok了 ^o^ 如果是改變高度的話也依此類推

不過要注意括號中的CSS屬性不能用縮寫，必須要用全名
padding → paddingLeft, paddingTop etc.
margin → marginLeft, marginTop etc

P.S. 因為在box model中，content的寬高, padding, border, margin 是分開計算的，可參考以下W3C的說明與範例：
http://www.w3.org/TR/CSS2/box.html
http://www.w3schools.com/css/css_boxmodel.asp

2012年2月22日

[jQuery] 上下左右居中的layout

有時候layout會需要做上下左右居中，在高度未知的情況下，純CSS的方法可能會蠻麻煩的..
(用display:table-cell;可行嗎?)，改用jQuery來計算會簡單許多

HTML

<div id="wpr">任意高度的內文區塊</div>

CSS

body {height:100%; position:relative;}
#wpr {width:70%; position:absolute; left:50%; margin-left:-35%;}
/* 
若內文區塊的高度固定且已知的話，到此為止即可，不需要下面的jQuery，
以高500px為例，只要再加上以下CSS：
html {height:100%;}
#wpr {top:50%; height:500px; margin-top:-250px;}
*/

jQuery

$(window).resize(function(){
   var bodyHeight = $(this).height();  //瀏覽器視窗高度
   var wprHeight = $("#wpr").height();  //內文區塊高度

   $("#wpr").css({
      "top" : bodyHeight / 2 +"px",
      "marginTop" : - wprHeight / 2 +"px"
   });
}).trigger("resize");  //觸發resize事件

實際執行的範例：
http://jsfiddle.net/wD8uT/

[CSS] 用 CSS hack 或分離 IE-only 的樣式表

1. 直接使用CSS hack：
CSS hack for IE6 - IE9，請參考以下語法及順序：
p.sample {color:#000;}
p.sample {color:#de00ff \9;} /* for IE8&9 */
p.sample {color:#0080ff \0/;} /* for IE9 */
p.sample {*color:#00ff1e;} /* for IE7 前面加星號 */
p.sample {_color:#ffb400;} /* for IE6 前面加底線 */
P.S. 請留意 \9 及 \0/ 前的空格不要省略

for IE9 的另一種寫法：
:root p.sample {color:#0080ff \0/;}
這種寫法的CSS優先度較高，可放在 \9 行之前，不過前面要多一個無意義的 :root。

2. 將IE-only的CSS與正常CSS分離：
另一種方式是將IE-only的CSS與正常CSS分離為不同檔案，由於在IE-only的css檔中也可搭配上述的CSS hack，且可保持正常CSS檔的整潔，因此特別推薦使用! (載入額外的CSS檔會增加HTTP Request次數，如果很在意此點就另當別論)
寫法如下，在<head>中增加條件判斷式：

for IE9以上


for IE8以下


說明：
gt: greater than (版本號大於)
lt: less than (版本號小於)
gte: greater than or equal to (版本號大於等於)
lte: less than or equal to (版本號小於等於)
詳細的使用範例請參考：
How To Create an IE-Only Stylesheet
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

延伸閱讀：
In defense of CSS hacks — introducing “safe CSS hacks”
http://mathiasbynens.be/notes/safe-css-hacks

[CSS] Pseudo-classes (擬類型) 的作用對象

Pseudo-classes (擬類型，例如 :hover) 有時候會被誤以為只能作用在<a>上 (IE對很多擬類選擇器的支援不佳)，其實它們對所有的元素都是有效的，可參考以下說明：
http://www.w3.org/TR/CSS2/selector.html#pseudo-elements
http://reference.sitepoint.com/css/pseudoclasses

P.S. 超連結擬類的定義要按照以下順序，可以用 love, hate 這兩字來幫助記憶：
a:link { /*尚未瀏覽的連結*/ }
a:visited { /*已瀏覽過的連結*/ }
a:hover { /*滑鼠移到連結上時*/ }
a:active { /*滑鼠點擊連結時*/ }

另外，這是IE的CSS相容性列表：
http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx
其中 :first-child、:nth-child 跟 :last-child 的使用率都蠻高的，可以用jQuery來為IE加工一下，例如：


//jQuery snippet:
if ( $.browser.msie ) {
   $("ul li:last-child").addClass("last");
}

這樣就可以在CSS中設定

<li class="last"></li>

的樣式了

[CSS] 關於 margin top / bottom 無效的情況

在CSS 2.1規範中，margin top / bottom 對於 non-replaced inline 元素 (例如<span>) 是無效的，這可能會被誤認為是bug，請參考此處說明：
http://www.w3.org/TR/CSS21/box.html#margin-properties

關於replaced elements (例如<img>) 的說明如下：
http://www.w3.org/TR/CSS21/conform.html#replaced-element
http://reference.sitepoint.com/css/replacedelements