なんか流行っているみたいなのでデフォルトCSSを公開してみる
昔つくったものを見つけましたので、せっかくだから公開します。
公開する際に恥ずかしくないようにValidatorにかけたり、表示テストを行ったりしたのですが、やっぱりIEはダメだなぁ、と思いました。以下八つ当たり。
- abbr要素を認識しない
- これは本当にどうかと思う
- 擬似要素が作用しない
- beforeとかafterとか
- focusとかどうにかなんないもんですかね
- label要素のfor属性とか面倒
- Firefoxとかは囲めばいいのにね。
IE7に期待…できるかなぁ…。
@charset "utf-8"; /* global */ * { margin: 0; padding: 0; font-style: normal; font-weight: normal; line-height: 140%; } html { width: 100%; } body { width: 90%; margin: auto; background-color: #fdfdfd; color: #000000; font-size: 100%; font-family: Vardana, Arial, Osaka, sans-serif; } /* block */ h1 { font-weight: bold; font-size: 225%; } h2 { font-weight: bold; font-size: 200%; } h3 { font-weight: bold; font-size: 175%; } h4, h5, h6 { font-weight: bold; font-size: 150%; } address { text-align: center; } blockquote { margin: 1em; padding: 0.5em; border-style: dashed; border-width: 1px; border-color: #c0c0c0; } dl { margin: 1em; } dt { font-weight: bold; } dd { margin: 0.25em 0 0.25em 1em; } ol, ul { margin: 0 0 0 1em; padding: 0.5em 0; } ol li, ul li { margin: 0.25em 0 0.25em 1em; } p { margin: 0.5em; text-indent: 0.75em; } pre { margin: 1em; padding: 0.5em; background-color: #dcdcdc; color: #000000; border-style: solid; border-width: 1px; border-color: #000000; overflow: auto; } /* inline */ a:link { border-style: none none solid none; border-width: 0 0 1px 0; border-color: #000000; text-decoration: none; } a:active { border-style: none none solid none; border-width: 0 0 1px 0; border-color: #000000; text-decoration: none; } a:hover { border-style: none none solid none; border-width: 0 0 1px 0; border-color: #000000; text-decoration: none; } a:visited { background-color: #fdfdfd; color: #808080; text-decoration: none; } abbr { padding: 0 0.25em; background-color: #fff5ee; color: #000000; border-style: none; } acronym { padding: 0 0.25em; background-color: #fff5ee; color: #000000; border-style: none; } cite { padding: 0 0.25em; } cite:before { content: "\""; } cite:after { content: "\""; } code { font-size: 95%; font-family: 'Courier New', sans-serif; } del { padding: 0 0.25em; text-decoration: line-through; } dfn { padding: 0 0.25em; } em { padding: 0 0.25em; font-weight: bold; } ins { border-style: none none dashed none; border-width: 0 0 1px 0; border-color: #dcdcdc; text-decoration: none; } kbd { padding: 0 0.25em; } label { } samp { font-size: 95%; font-family: 'Courier New', sans-serif; } strong { padding: 0 0.25em; font-weight: bold; border-style: none none dashed none; border-width: 0 0 1px 0; border-color: #ff0000; } var { font-size: 95%; font-family: 'Courier New', sans-serif; } input, textarea { background-color: #dcdcdc; color: #000000; } input:focus { background-color: #ffffff; color: #000000; } textarea:focus { background-color: #ffffff; color: #000000; }
で、こいつをインポートしたCSSで肉付けを行う、と。