CSS의 정규화는 정확히 무엇입니까?

Question

JSFiddle에서 HTML의 정렬되지 않은 목록을 사용하여 코드를 작성하려고 시도했는데 <ul>의 글 머리 기호가 명백한 이유없이 표시되지 않는다는 사실을 알기 위해 짜증을났습니다. 내 코드에서 다른 것을 시도 할 때 마침내 jsfiddle 페이지에서 'normalized css'옵션의 선택을 취소해야한다는 것을 알게되었습니다.

그 후 나는 그것이 실제로 무엇을 봤고 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을 사용했지만 사용을 중단했습니다. 다시 선언해야하는 스타일이 너무 많이 재설정되어 다시 사용하기 시작했습니다. 그만한 가치는 없었습니다.

REAL 용 스타일 정규화 자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

jsfiddle에서 사용되는 "정규화"는 정리할 CSS 규칙 세트를 적용하는 것을 의미합니다. 더 자주 "CSS 재설정"이라고 불리는이 기술은 논쟁의 여지가있는 기술입니다. 브라우저 기본 설정을 무시할 때 기본 위쪽 및 아래쪽 여백과 ul 요소의 들여 쓰기와 같은 웹의 새벽부터 기본 렌더링을 무시할 수 있다는 점을 인식하는 것이 중요합니다. 기본 목록 표시 자 (글 머리 기호). 이는 특정 "표준화"스타일 시트 사용, 공격성에 달려 있습니다.

언급 된 W3C 페이지에 설명 된 정규화는 이와 관련이 없습니다.그것은 문자의 유니 코드 정규화를 다루는데, 문자 수준에서 발생합니다 (상대적으로 이론적 인 문제).

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 ----*/