Normalize vs Reset

2. Normalize vs Reset
2.3 css reset 및 normalize.css는 어떤 차이가 있습니까?
2.3.1 normalizz를 창조한다.css의 몇 가지 목적

브라우저의 기본 스타일을 완전히 제거하지 않고 보호합니다

일반화된 스타일: 대부분의 HTML 요소에 제공

브라우저 자체의 버그를 복구하고 각 브라우저의 일치성을 확보한다

CSS 가용성 최적화: 몇 가지 팁

설명 코드: 주석과 상세한 문서로

2.3.2 Normalize vs Reset

Normalize.css는 가치 있는 기본값 Reset을 보호합니다. 거의 모든 요소에 기본 스타일을 적용하여 요소에 똑같은 시각적 효과를 강제로 적용합니다.비교해 보면Normalize.css는 많은 기본 브라우저 스타일을 유지합니다.이것은 모든 공공 레이아웃 요소에 스타일을 다시 설정할 필요가 없다는 것을 의미한다.원소가 서로 다른 브라우저에서 기본값이 다를 때Normalize.css는 이러한 양식이 일치하고 가능한 한 현대 표준과 부합되도록 노력할 것이다.

Normalize.css는 브라우저의 버그를 복구합니다. 흔히 볼 수 있는 데스크톱과 모바일 브라우저의 버그를 복구합니다.Reset이 수행할 수 있는 범위를 벗어나는 경우가 많습니다.이 점에 관해Normalize.css에서 복구한 문제는 HTML5 요소의 디스플레이 설정, 미리 포맷된 문자의 font-size 문제, IE9에서 SVG의 넘침, 각 브라우저와 운영체제에 나타나는 폼과 관련된 버그를 포함한다.다음 예에서 HTML5에 새로 등장한 input 타입 검색,Normalize를 보십시오.css는 어떻게 크로스 브라우저의 일치성을 확보합니까?

/**
*1.  Addresses appearance set to searchfield in S5, Chrome
* 2.  Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
*/

input[type='search'] {
  -webkit-appearance: textfield; //1
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; //2
  box-sizing: content-box;
}
/**
  *Removes inner padding and search cancel button in S5, Chrome on OS X
 */
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

Normalize.css는 당신의 디버그 도구를 난잡하게 만들지 않습니다. Reset을 사용하면 가장 곤란한 점은 브라우저 디버그 도구의 대부분 계승 체인입니다. 아래 그림과 같습니다.Normalize에 있습니다.css에서는 이러한 문제가 없을 것입니다. 왜냐하면 우리의 준칙에서 다중 선택기의 사용을 매우 신중하게 하기 때문에 우리는 목표 요소에 대한 스타일만 목적지에서 설정할 수 있습니다.

Normalize.css는 모듈화된 이 항목은 여러 개의 관련되고 독립된 부분으로 나누어져 있어 어떤 요소가 특정한 값으로 설정되었는지 쉽게 알 수 있다.따라서 이것은 당신이 영원히 사용되지 않는 부분을 선택적으로 제거할 수 있다. (예를 들어 표의 일반화)

Normalize.css는 상세한 문서를 가지고 있습니다. Normalize.css의 코드는 상세하고 전면적인 크로스 브라우저 연구와 테스트를 바탕으로 한다.이 파일에는 자세한 코드 설명이 있으며 Github Wiki에 추가 설명이 있습니다.이것은 줄마다 코드가 어떤 작업을 완성했는지, 왜 이 코드를 썼는지, 브라우저 간의 차이를 찾을 수 있고, 자신의 테스트를 더욱 쉽게 할 수 있다는 것을 의미한다.

이 프로젝트의 목표는 사람들이 브라우저가 기본적으로 어떻게 요소를 렌더링하는지 이해하도록 도와주는 동시에 브라우저의 렌더링을 개선하는 방법을 쉽게 이해하도록 하는 것이다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

【Grunt】 복수의 CSS, JavaScript 파일을 minfy한다

여러 CSS, JavaScript 파일을 Grunt를 사용하여 단번에 각각 하나의 파일로 minfy합니다. ① Gruntfile 작성 ② package.json 쓰기 ④ html CSS, JavaScript 지정 부...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Normalize vs Reset

좋은 웹페이지 즐겨찾기