홈페이지 » 코딩 » 동질적인 개발을 위해 Normalize.css 사용

    동질적인 개발을 위해 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에 관해 구체적으로 가르쳐야 할 것은 많지 않으므로 대부분의 학습은.

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

    관련 기사

    • Nicolas Gallagher : Normalize.css 정보
    • HTML5 상용구 소개
    • Normalize.css 대 Reset.css : 어느 것을 사용할 것인가??

    소개 동영상

    • CSS 정규화 사용
    • Envato에 의한 재설정 및 정규화
    • Nicolas Gallagher - 확장 가능한 CSS를 넘어서 생각하기