최근에, 우리는 Elad Shechter의 새로운 CSS 재설정에 대해 논의했으며, 주제에 대한 Josh Comeau의 통찰력있는 블로그 게시물이 이어졌습니다. 이것은 CSS 재설정 환경의 변화를 나타냅니다. 과거의 중요한 브라우저 스타일 차이는 덜 널리 퍼져 있으며, 프로젝트 스타일이 진행될 때마다 많은 기본 스타일이 무시됩니다. 따라서 "현대"CSS 재설정은 새로운 프로젝트에 실질적인 이점을 제공하는 선별 된 기본 스타일 컬렉션으로 발전하고 있습니다.
Josh의 접근 방식을 살펴보면, 본질적으로 설계 중심이 아닌 스타일의 편집은 일반적으로 원하는 프로젝트 기능을 제공하여 설계를 지원합니다. 논평으로 그의 선택을 분석합시다.
*, *:: 이전, *:: 이후 { 박스 사이징 : 국경 박스; }
널리 받아 들여지는 연습. 그리드 및 Flexbox 레이아웃의 사용이 증가함에 따라 유틸리티가 약간 감소 할 수 있지만 일관된 크기에 대한 선호되는 접근 방식으로 남아 있습니다. 이상적으로는 CSS 재설정은 부품 레벨에서 더 쉽게 재정의되도록 상속을 활용해야합니다.
* { 여백 : 0; }
기본 마진을 제거하는 간결한 방법. 일부 상황에서는 잠재적으로 손을 대고 있지만 명백한 마진 선언을 강화하여 명확성을 향상시킵니다. 이것을 padding: 0;
기본 목록 항목 패딩을 처리합니다.
html, body { 높이 : 100%; }
백분율 기반 높이가 올바르게 작동하도록하는 유용한 전략으로 예기치 않은 배경 동작을 방지합니다. body { height: 100vh; }
충분 해 보일 수 있으며 iOS 사파리 퀴크로 인해 동일한 신뢰성이 부족합니다.
몸 { 라인 높이 : 1.5; -webkit-font-smoothing : antialiased; }
-webkit-font-smoothing
속성은 지나치게 얇은 타이포그래피로 이어질 수 있습니다. 귀중한 도구이지만 글로벌 애플리케이션이 항상 이상적인 것은 아닙니다. html
선택기를 통한 글로벌 타이포 그래피 크기 관리 미디어 쿼리로 루트 글꼴 크기를 조정하면 더 많은 제어 기능이 제공됩니다. 1.5의 라인 높이는 합리적인 기본값이지만 일부는 1.4에 가까운 값이 선호 될 수 있습니다. 그러나 제목 조정이 자주 필요합니다. 조쉬의 영리한 대안 :
* { 라인 높이 : calc (1em 0.5rem); }
이는 글꼴 크기에 따라 선 높이를 동적으로 조정하여 확장 가능한 솔루션을 제공합니다. 최적의 라인 높이 계산에 대한 Jesús Ricarte의 작업에서 영감을 얻은이 기술은 탐구 할 가치가 있습니다.
IMG, 사진, 비디오, 캔버스, SVG { 디스플레이 : 블록; 최대 전역 : 100%; }
견고한 포함. display: block;
라인 높이 문제를 제거하고 max-width: 100%;
미디어 요소가 컨테이너가 넘치지 않도록합니다. 포함하는 동안<picture></picture>
논쟁의 여지가 있습니다<iframe></iframe>
그리고<object></object>
완전성을 향상시킬 것입니다.
P, H1, H2, H3, H4, H5, H6 { 오버 플로우 랩 : 브레이크 워드; }
긴 단어 (URL과 같은)가 레이아웃을 방해하는 것을 방지하는 데 필수적입니다. .text-content
와 같은 더 넓은 선택기에이를 적용하면 계단식이 허용되지만 특정 요소를 타겟팅 할 수 있습니다. 추가 고려하십시오<li>
,,,<dl></dl>
,,,<dt></dt>
, 그리고<blockquote></blockquote>
포괄적 인 라인 포장. 라인 포기 특성의 최적 조합은 지속적인 논의의 주제로 남아 있습니다.
#Root, #__next { 격리 : 분리; }
이 반응/next.js 특정 스 니펫은 스태킹 컨텍스트를 만듭니다. 정확한 이점은 즉시 명백하지는 않지만 명백한 문제를 일으키지는 않습니다.
전반적으로 Josh의 재설정은 잘 고려 된 접근 방식입니다. 다른 CSS 재설정 전략을 조사하고 비교하는 것이 항상 유익합니다.
위 내용은 Josh Comeau의 사용자 정의 CSS 재설정에 대한 메모의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!