2690

reset.css、clearfixを見直す

reset.css、clearfixを見直す

2012.1.24

仕事でのコーディングでもう3年以上、古いreset.cssとclearfixを使い続けていたため、内容を見直す事にしました。基本的には先人の知恵を引用した形ですｗ

reset.css

自分は「YUI Reset CSS」派なので、素直にそちらを使います。

@charset "utf-8";
/*
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}

clearfix

「[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix | コリス」の記事にあったclearfixを使う事にしました。対応ブラウザはFirefox3.5+、Safari4+、Chrome、Opera9+、IE6+です。

ちなみにこのコードは.clearfixという言い方から.cfと省略されています。両方記述しておきましたので、お好みでどうぞ。

.cfと省略したタイプ

/* For modern browsers */
.cf:before,.cf:after { content:""; display:table; }
.cf:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }

.clearfixのタイプ

/* For modern browsers */
.clearfix:before,.cf:after { content:""; display:table; }
.clearfix:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.clearfix { zoom:1; }

参考