CSSの正規化は正確に何をしますか？

Question

私はJSFiddleのHTMLで順序付けされていないリストを持つコードを試していましたが、私は死にかけて、<ul>の箇条書きが明白な理由で表示されないことを知りました。私のコードでさまざまなことを試してみると、jsfiddleページの 'normalized css'オプションのチェックを外す必要があることがわかりました。

はその後、私はそれが実際にあったものをGoogleで検索してW3C.orgから thisページをお読みください。このページでは、発音区別記号とアクセントについてのみ説明します。しかし、なぜ正規化されたCSSオプションが表示されて弾丸が表示されないのですか？そのオプションを選択すると、影響を受ける他のものは何ですか？

はに見ていただき、ありがとうございます。

Answer 1

正規化CSSは、HTML要素をレンダリングする際にブラウザ間での違いを均等しようとします。多くのブラウザには「事前設定」があります：pとh - 要素には垂直マージンがあり、リストには余白とパディングもあります。 emおよびstrongタグの太字はフォントの太字です。あなたはすべてのブラウザで一貫性のある作業ベースを持っているように、

すべてこの事前設定は、リセットされます。

JSFiddlesのnormalize.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;} 

、あなたのスタイルシート（良い意味をなすものも含めの事前設定、例えば簡単なのに手動ですべてのスタイルを再宣言する必要があるため、CSSを正規の感覚は、議論の余地がありますブラウザによって等しく扱われるおよびstrongタグのfont-weight）。

私はいくつかの時間のためにEric Meyer's resetを使用し、それが再び再宣言を必要とあまりにも多くのスタイルをリセットするので、それを使用して停止しました。 IMOの価値はありませんでした。

リアルの場合スタイル正規化ツールhttp://html5boilerplate.com/からstyle.cssをご覧ください。

Answer 2

Normalize.cssは、開発のための共通グランドとして設定するブラウザで、いくつかのベーススタイルを整列させるために使用される周知のリセットスタイルシートあります。

一部の開発者は、それが重複しているか、独自のリセットスタイルシートを使用する方が好きかもしれません。多くの既製のリセットスクリプトがあり、その中には有名なEric Mayer's reset.css（BluePrintによって使用される）とYUI2's stylesheetがあります。

はa post here on SO on the best CSS resetも参照してください、とリセットスタイルシートのbest-of-collection。

Answer 3

物事をクリーンアップするために主張されたCSSルールのセットを適用するjsfiddle手段で使用される意味での「正規化」。それはより頻繁に「CSSリセット」と呼ばれ、議論されているテクニックです。ブラウザのデフォルトを上書きする際に重要なことは、既定の上下のマージンや一部のインデント（ul要素）や既定のリストマーカー（箇条書きなど）など、Webの黎明期からの既定のレンダリングをオーバーライドする可能性があることです。 ）。これは、特定の "正規化"スタイルシートの使用、その攻撃性に依存します。

上記のW3Cページで説明した正規化は、これとは関係ありません。これは文字のUnicode正規化を扱います。文字のレベルで起こる（起こったとき）、これは比較的理論的な問題です。

Answer 4

ノーマライズは、ブラウザCSSを休止するために使用されます。それぞれのブラウザはそれぞれのDOM要素ごとに独自のプロパティを持ち、このプロパティはブラウザをブラウザに変更します。 *この* `normalize.css`の

html { 
    -ms-text-size-adjust: 100%; 
    /* 2 */ 
    -webkit-text-size-adjust: 100%; 
    /* 2 */ 
} 
a, 
abbr, 
acronym, 
address, 
applet, 
article, 
aside, 
audio, 
b, 
big, 
blockquote, 
body, 
canvas, 
caption, 
center, 
cite, 
code, 
dd, 
del, 
details, 
dfn, 
dialog, 
div, 
dl, 
dt, 
em, 
embed, 
fieldset, 
figcaption, 
figure, 
font, 
footer, 
form, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
header, 
hgroup, 
html, 
i, 
iframe, 
img, 
ins, 
kbd, 
label, 
legend, 
li, 
mark, 
menu, 
meter, 
nav, 
object, 
ol, 
output, 
p, 
pre, 
progress, 
q, 
rp, 
rt, 
ruby, 
s, 
samp, 
section, 
small, 
span, 
strike, 
strong, 
sub, 
summary, 
sup, 
table, 
tbody, 
td, 
tfoot, 
th, 
thead, 
time, 
tr, 
tt, 
u, 
ul, 
var, 
video, 
xmp { 
    border: 0; 
    margin: 0; 
    padding: 0; 
    font-size: 100%; 
} 
article, 
aside, 
details, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
menu, 
nav, 
section { 
    display: block; 
} 
b, 
strong { 
    font-weight: bold; 
} 
img { 
    color: transparent; 
    font-size: 0; 
    vertical-align: middle; 
    -ms-interpolation-mode: bicubic; 
} 
ol, 
ul { 
    list-style: none; 
} 
ol li, 
ul li { 
    display: list-item; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
html, 
body { 
    height: 100%; 
} 
form { 
    height: 100%; 
} 
/*************************************************************************************** 
* GENERAL STARTS 
***************************************************************************************/ 
body { 
    font-size: 12px; 
    line-height: 18px; 
    color: #444444; 
    padding: 0; 
    margin: 0; 
    font-family: Arial, Helvetica, sans-serif; 
} 
a { 
    color: #3a7da3; 
    text-decoration: underline; 
} 
a:hover { 
    text-decoration: none; 
    color: #444444; 
    outline: none !important; 
} 
a:focus { 
    color: #444444; 
    outline: none !important; 
    text-decoration: none; 
} 
a.active { 
    color: #444444; 
    text-decoration: none; 
} 
a.btn:hover, 
a.btn:focus { 
    text-decoration: none; 
} 
a .normal-link { 
    color: #444; 
    text-decoration: none; 
} 
a .normal-link:hover { 
    text-decoration: underline; 
} 
p { 
    font-size: 12px; 
    margin-bottom: 15px; 
    line-height: 20px; 
} 
.silent-text, 
.silent { 
    color: #a1a1a1; 
    display: inline-block; 
} 
small, 
.small { 
    font-size: 11px; 
} 
/*************************************************************************************** 
* HEADINGS STARTS 
***************************************************************************************/ 
/* All Headings */ 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    font-weight: normal; 
    line-height: 1.2; 
} 
h1, 
.title { 
    font-size: 36px; 
    font-family: Arial, Helvetica, sans-serif; 
} 
h2, 
.sub-title { 
    font-size: 30px; 
    font-family: Arial, Helvetica, sans-serif; 
} 
h3, 
.title { 
    font-size: 24px; 
} 
h4 { 
    font-size: 18px; 
} 
h5 { 
    font-size: 16px; 
} 
h6 { 
    font-size: 14px; 
} 
/*************************************************************************************** 
* COMMON CSS STARTS 
***************************************************************************************/ 
input[type=text]::-ms-clear { 
    display: none; 
} 
.form-control { 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    background: #f9f9f9; 
    border: 1px solid #ddd; 
    color: #444; 
    padding: 6px 8px; 
} 
.form-control:focus, 
.form-control.active { 
    background: #ffffff; 
    border-color: #cccccc; 
    box-shadow: none; 
    transition: border .2s linear; 
    -webkit-transition: border .2s linear; 
} 
.form-control:focus { 
    outline: none; 
    box-shadow: none; 
} 
.form-control-sm { 
    padding: 3px 8px; 
    height: auto; 
} 
.form-control[disabled], 
fieldset[disabled] .form-control { 
    cursor: not-allowed !important; 
} 
.form-control.active::-webkit-input-placeholder { 
    /* Chrome/Opera/Safari */ 
    color: #444444; 
    opacity: 1; 
} 
.form-control.active::-moz-placeholder { 
    /* Firefox 19+ */ 
    color: #444444; 
    opacity: 1; 
} 
.form-control.active:-ms-input-placeholder { 
    /* IE 10+ */ 
    color: #444444; 
    opacity: 1; 
} 
.form-control.active:-moz-placeholder { 
    /* Firefox 18- */ 
    color: #444444; 
    opacity: 1; 
} 
.form-control::-webkit-input-placeholder { 
    /* Chrome/Opera/Safari */ 
    color: #BDBDBD; 
    opacity: 1; 
} 
.form-control::-moz-placeholder { 
    /* Firefox 19+ */ 
    color: #BDBDBD; 
    opacity: 1; 
} 
.form-control:-ms-input-placeholder { 
    /* IE 10+ */ 
    color: #BDBDBD; 
    opacity: 1; 
} 
.form-control:-moz-placeholder { 
    /* Firefox 18- */ 
    color: #BDBDBD; 
    opacity: 1; 
} 
.has-error, 
.form-control.has-error, 
.form-control-validation { 
    border-color: #cc0000; 
} 
.has-warning, 
.form-control.has-warning { 
    border-color: #f0ad4e; 
} 
.has-success, 
.form-control.has-success { 
    border-color: #5cb85c; 
} 
.has-error-text, 
.form-group .has-error-text { 
    color: #cc0000; 
} 
.has-error-text, 
.form-group .has-error-text { 
    font-style: normal; 
    font-size: 11px; 
    margin-left: 8px; 
    line-height: 14px; 
} 
.has-warning-text { 
    color: #f0ad4e; 
    font-style: normal; 
    font-size: 11px; 
} 
.has-success-text { 
    color: #5cb85c; 
    font-style: normal; 
    font-size: 11px; 
} 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
    select.form-control { 
    padding-left: 6px; 
} 
} 
@supports (-ms-ime-align:auto) { 
    select.form-control { 
    padding-left: 7px; 
} 
} 
/************************ 
Margin/Padding 
*************************/ 
.m-t-xl { 
    margin-top: 30px; 
} 
.m-t-lg { 
    margin-top: 20px; 
} 
.m-t-md { 
    margin-top: 15px; 
} 
.m-t-sm { 
    margin-top: 10px; 
} 
.m-t-xs { 
    margin-top: 5px; 
} 
.m-t-0 { 
    margin-top: 0; 
} 
.m-b-lg { 
    margin-bottom: 20px; 
} 
.m-b-xlg { 
    margin-bottom: 50px; 
} 
.m-b-md { 
    margin-bottom: 15px; 
} 
.m-b-sm { 
    margin-bottom: 10px; 
} 
.m-b-xs { 
    margin-bottom: 5px; 
} 
.m-b-0 { 
    margin-bottom: 0; 
} 
.m-l-lg { 
    margin-left: 20px; 
} 
.m-l-md { 
    margin-left: 15px; 
} 
.m-l-sm { 
    margin-left: 10px; 
} 
.m-l-xs { 
    margin-left: 5px; 
} 
.m-l-0 { 
    margin-left: 0; 
} 
.m-r-lg { 
    margin-right: 20px; 
} 
.m-r-md { 
    margin-right: 15px; 
} 
.m-r-sm { 
    margin-right: 10px; 
} 
.m-r-xs { 
    margin-right: 5px; 
} 
.m-r-0 { 
    margin-right: 0; 
} 
.p-t-lg { 
    padding-top: 20px; 
} 
.p-t-md { 
    padding-top: 15px; 
} 
.p-t-sm { 
    padding-top: 10px; 
} 
.p-t-xs { 
    padding-top: 5px; 
} 
.p-b-lg { 
    padding-bottom: 20px; 
} 
.p-b-md { 
    padding-bottom: 15px; 
} 
.p-b-sm { 
    padding-bottom: 10px; 
} 
.p-b-0 { 
    padding-bottom: 0; 
} 
.p-b-xs { 
    padding-bottom: 5px; 
} 
.p-l-lg { 
    padding-left: 20px; 
} 
.p-l-md { 
    padding-left: 15px; 
} 
.p-l-sm { 
    padding-left: 10px; 
} 
.p-l-xs { 
    padding-left: 5px; 
} 
.p-r-lg { 
    padding-right: 20px; 
} 
.p-r-md { 
    padding-right: 15px; 
} 
.p-r-sm { 
    padding-right: 10px; 
} 
.p-r-xs { 
    padding-right: 5px; 
} 
.no-mar { 
    margin: 0 !important; 
} 
.no-pad { 
    padding: 0 !important; 
} 
.p-l-n { 
    padding-left: 0; 
} 
.p-r-n { 
    padding-right: 0; 
} 
.p-t-n { 
    padding-top: 0; 
} 
.ptb-20 { 
    padding-top: 20px; 
    padding-bottom: 20px; 
} 
.font-md { 
    font-size: 14px; 
} 
.font-lg { 
    font-size: 16px; 
} 
img.img-responsive { 
    display: inline-block; 
    max-width: 100%; 
} 
.v-table { 
    display: table; 
} 
.v-table-cell { 
    display: table-cell; 
    vertical-align: middle; 
} 
.relative { 
    position: relative; 
} 
.float-none { 
    float: none; 
} 
.d-i-b { 
    display: inline-block !important; 
} 
.data-container { 
    border: 1px solid #eeeeee; 
    min-height: 600px; 
} 
.d-b { 
    display: block !important; 
} 
.cursor-pointer { 
    cursor: pointer; 
} 
.font-size-xs { 
    font-size: 15px; 
} 
.text-left-xs { 
    text-align: left !important; 
} 
.text-right-xs { 
    text-align: right !important; 
} 
p.text-wrapping, 
.text-wrapping { 
    margin: 0; 
    width: 100%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
/*----- Text ellipes CSS end ----*/