ブラウザーの差異をなくす - CSS reset手法とCSS resetフレームワーク

2009/08/28 13:19Update
TAGS: CSS | リセット | reset.css | ブラウザー | YUI

同じHTML/CSSなのに、違うでブラウザーでの表示が違いがあるとのことがあります。こうした「ブラウザーごとのCSS解釈の違い」をなくすために「CSSリセット」という手法があります。

「CSSリセット」は、「ブラウザーのデフォルト・スタイル」を明示的に設定することで、各要素の表示スタイルを統一することができます。

例えば、一番関連CSSリセット例:

*{
    padding:0;
    margin:0;
    border:0;
}


CSS Resetフレームワーク



■ YUI library:Reset CSS
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    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;
}


■ Meyer CSS Reset page
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}


■ Maestro reset CSS

■ CSS Tools: Reset CSS

■ Reset CSS 10選「英語」

有关作者
Syboos.jp編集長システム設計や開発、保守運営などを行ってます。オープンソース技術に興味があります。

Sponsored Link


Comments

用户名 (required)

Email (will not be published) (required)

URL

Evaluation