동질적인 개발을 위해 Normalize.css 사용

브라우저 호환성은 웹에서의 접근성의 큰 부분입니다. 개발자는 지원이 필요한 잠재 고객 및 브라우저 버전의 차이. CSS 재설정이 옵션이지만, 대부분의 개발자는 모든 최신 웹 브라우저에서 단순함과 상호 호환성을 위해 Normalize.css를 선호합니다..

이 글에서 다루겠습니다 Normalize의 기본 사항 및 일반적인 CSS 재설정과의 비교 방법. 이것은 복잡한 도서관이 아니며 이해하는 데 몇 시간 이상 걸리지 않습니다. 그러나 Normalize의 핵심은 학습입니다. 방법 적절하고 적절하게 구현.

브라우저 재설정 및 정상화

몇 년 동안 저는 Eric Meyer의 CSS 재설정 버전을 사용자 정의했습니다. 이것들은 대부분의 프로젝트에 충분했고 큰 문제는 발생하지 않았습니다. 그러나 Normalize는 CSS 재설정과 다르게 작동하므로 재설정에 대한 내보기를 변경했습니다. 차이점을 이해하는 것이 중요합니다..

노멀라이징은 모든 브라우저에 일관되게 적용되는 의복, 생각하고 열 핵폭발로서의 CSS 리셋 모든 브라우저에서.

머리말, 단락, blockquotes 및 공통 요소를 스타일 및 형식으로 정규화 동일하게 보이거나 충분히 가까워진다. 지원되는 모든 브라우저에서. CSS가 슬레이트를 완전히 닦아 재설정합니다. 기본값 없음 아무것도.

CSS를 재설정하면 표제는 단락과 동일하게 보일 수 있습니다. 요소에는 여백, 여백 또는 모든 종류의 공백이 없습니다. CSS 재설정 새 코드를 제공해야합니다. 스타일을 향상시킵니다. Normalize를 사용하면 미리 디자인 된 스타일 지어 질 수있는.

이 중 하나가 다른 것보다 낫습니까? 그것은 논쟁의 한 지점이 Normalize 호환성 향상 및 파일 크기 축소.

“정상화가 재설정하는 것보다 낫다고 주장해야합니다. 유선을 통해 전송되는 CSS가 줄어들고 UA 기본값이 더 잘 사용되며 요소가 어떻게 사용되는지 더 잘 이해할 수 있습니다. 의미심장 한 표시.”

Normalize와 사랑에 빠지 든 일반적인 리셋을 선호하든 관계없이 적어도 양면을 이해하고 가장 잘 맞는 것을 선택하는 것이 중요합니다. 아주 소수의 개발자가 처음부터 코딩을 시작하므로 표준화 또는 CSS 리셋이 현대 프론트 엔드 개발에 거의 필요합니다..

CSS 리셋을 시도하려면 다음과 같은 인기있는 옵션을 사용하십시오.

Eric Meyer의 리셋
HTML5 재설정
HTML5Doctor 재설정

구성 정상화

Nicolas Gallagher를 표준화 한 작성자는 다음 문장으로 구성된 소개 게시물을 작성했습니다.

“Normalize.css는 HTML 요소의 기본 스타일링에서 브라우저 간 일관성이 향상된 작은 CSS 파일입니다. 전통적인 CSS 재설정 대신 현대적인 HTML5 준비가되어 있습니다..”

수년 동안 전세계 개발자들이 사용하는 신뢰할 수있는 라이브러리로 성장했습니다. Normalize는 심지어 Bootstrap 및 Pure CSS에서도 어느 정도 사용되었습니다.

프로젝트에서 Normalize를 사용하는 두 가지 방법이 있습니다. 소스를 편집하여 자신의 Normalize 스타일 시트를 사용자 정의하거나 기본으로 사용하고 위에 스타일을 추가하십시오.

전자는 Normalize.css 파일을 거쳐 사용자 지정 스타일 시트를 만들 필요가없는 것을 삭제하는 선택 및 선택 전략입니다. 이것은 파일 크기를 줄이기 위해 프로젝트별로 가장 좋습니다.

또는 일부 개발자는 전체 Normalize.css 파일을 포함하고 그 위에 고유 한 스타일 시트를 작성합니다. 정규화 된 전체 스타일 시트는 압축되지 않은 ~ 6.8KB에 해당하는 420 개 라인의 코드에 걸쳐 있습니다..

두 방법 모두 다른 것보다 낫지 않으며 각 프로젝트 나 선호하는 워크 플로우에 가장 적합한 방법을 따르는 것이 좋습니다..

시작하려면 GitHub에서 Normalize 사본을 다운로드하거나 외부 CDN에서 호스트하십시오. 다음과 같이 NPM에서 Normalize의 최신 버전을 가져올 수도 있습니다.

npm install --save normalize.css

파일을 다운로드하지 않으려면 버튼을 클릭하여 Normalize를 추가 할 수있는 새 CodePen 프로젝트를 만들 수도 있습니다.

Normalize는 모듈 형이므로 섹션을 임시로 제거하거나 사용자 정의 빌드를 Normalize로 만들 수도 있습니다. 그런 다음 HTML5 표시 요소와 같이 일부만 선택하여 포함 된 콘텐츠의 스타일을 제거하면서 각 프로젝트를 시작할 수 있습니다..

각 Normalize 룰에는 해당 CSS 설명과 해당 버그 / 문제점을 설명하는 CSS 설명이 있습니다. 어떤 것은 설정과 같이 명백합니다. 표시 : 블록 최신 HTML5 요소.

Internet Explorer에서 오버 플로우를 숨기는 SVG 코드와 같은 다른 것들은 덜 분명합니다.

svg : not (: root) overflow : hidden;

스타일 시트를 스키밍하여 정확히 어떻게 작동하는지 확인하고 Normalize가 프로젝트에 적합한지를 확인하는 것이 좋습니다..

웹 디자인에서 Normalize.css

Normalize v4.0의 최신 버전은 광범위한 브라우저 지원을 제공합니다..

Chrome (마지막 2 개)
가장자리 (마지막 2 개)
파이어 폭스 (마지막 2 개)
Firefox ESR
Internet Explorer 8+
오페라 (지난 2 년)
사파리 6+

내가 알 수 있듯이, 노멀 라이즈는 파이어 폭스와 같이 지속적으로 업데이트되는 브라우저의 구 버전을 지원할 수 있습니다. 하지만 “공무원” 지원에는 Chrome / Edge / FF / Opera의 최신 버전 2 개만 포함됩니다..

또한 Normalize v1에서는 IE6 + 및 Safari 4+가 지원되지만 해당 버전은 더 이상 업데이트되지 않습니다..

Google 웹 로그 분석과 같은 도구로 브라우저 버전을 확인하는 것이 중요합니다. Normalize가 현대 웹 디자인 작업에 유용한 도구가 될 수 있는지 여부를 알려줍니다..

추가 리소스

Normalize에 관해 구체적으로 가르쳐야 할 것은 많지 않으므로 대부분의 학습은.

그리고 사실 스타일 시트를 읽고 필요에 따라 코드를 복사 / 변경함으로써 픽업 할 수 없다고 설명 할 부분은 많지 않습니다. 그러나 다른 관련 정보를 찾고 있다면 아래 링크를 추가했습니다..

소개 동영상