'새로운 CSS 재설정'에 대한 Elad Shechter와의 인터뷰

이 인터뷰는 Elad Shechter의 혁신적인 CSS 재설정 프로젝트 인 "The-New-CSS-Reset"을 탐색합니다. 우리는 단순히 코드를 제시하는 대신, 그 창조 뒤에 왜 기능의 복잡성을 탐구합니다.

전체 재설정 코드는 다음과 같습니다.

 /*** 새로운 CSS 재설정 - 버전 1.2.0 (마지막 업데이트 23.7.2021) ***/

/ * '디스플레이'를 제외한 모든 스타일을 제거하십시오 */
*: 여기서 (: not (iframe, canvas, img, svg, video) : not (svg *)) {
  모두 : Unset;
  디스플레이 : 되돌아갑니다.
}

/ * 선호하는 박스 크기 */
*,,
*::전에,
*::후에 {
  박스 사이징 : 국경 박스;
}

/ * 목록 스타일 제거 */
ol, ul {
  목록 스타일 : 없음;
}

/ * 이미지가 컨테이너를 초과하는 것을 방지 */
img {
  최대 전역 : 100%;
}

/ * 붕괴 테이블 경계 */
테이블 {
  국경-콜라스 : 붕괴;
}

/ * Safari Textareas의 'White-Space'를 되돌립니다 */
Textarea {
  흰색 공간 : 되돌아갑니다.
}

Elad는 기존 리셋이 이전 CSS 기능에 의존한다는 것을 강조하면서 새로운 재설정의 필요성을 설명합니다. 그의 접근 방식은보다 효율적이고 유효한 재설정을 위해 새로운 기능을 활용합니다. 그는 자신의 접근 방식을 Normalize.css (브라우저 불일치 수정에 중점을 둔 부드러운 접근법)와 Eric Meyer의 CSS 재설정 (대부분의 기본 스타일을 제거하는보다 공격적인 접근)과 대조합니다. Elad는 Tormalize.css와 하드 리셋을 사용하여 강점을 결합하여 옹호합니다.

새 재설정의 핵심은 all: unset; . 이 강력한 속성은 모든 상속 된 속성을 inherit 및 비인화 된 속성에 initial 에 재설정하여 기본 브라우저 스타일을 효과적으로 제거합니다. 그러나 display 예외입니다. all: unset; 바람직하지 않은 inline 으로 display 세트합니다. 따라서 display: revert; 각 요소에 대한 브라우저의 기본 display 값을 복원하여 적절한 레이아웃을 보장하는 데 사용됩니다. revert 버드 키워드는 사용 가능한 경우 사용자 에이전트 스타일 스타일의 기본 display 값을 지능적으로 검색합니다. 그렇지 않으면 unset 동작으로 돌아갑니다.

선택기 *:where(:not(iframe, canvas, img, svg, video):not(svg *)) 거의 모든 요소를 ​​제외하고 (:<iframe></iframe> ,,,<canvas></canvas> CSS 재설정보다는 속성을 통해 크기가 가장 잘 제어되는 차원 등의 의도하지 않은 결과를 방지합니다. :where() 의사 클래스는 프로젝트 별 스타일과의 충돌을 피하면서 특이성을 최소화합니다. 별도 :not(svg *) 배제는 SVG 요소의 무결성을 보호합니다.

재설정에는 box-sizing: border-box 와 같은 의견 스타일도 포함되어 있으며 브라우저 불일치는 아니지만 모범 사례로 널리 채택됩니다. 목록 스타일 ( list-style: none; )의 제거는 의미 론적 영향에도 불구하고 마커가 불필요한 내비게이션 목록의 일반적인 사용에 의해 정당화됩니다.

Elad는 그의 프로젝트에서 반복적 인 요구에 의해 주도되는 향후 잠재적 인 추가 사항에 대해 논의합니다. max-width: 100%; 이미지 규칙은 후보로 제시됩니다. 그는 또한 다가오는 캐스케이드 레이어 모듈의 영향에 대해 추측하여 :where() 같은 특이성 감소 기술의 필요성을 제거 할 수 있다고 제안합니다. 이를 통해 프로젝트 별 스타일에서 재설정 스타일을 더 깨끗하게 분리 할 수 ​​있습니다.

위 내용은 '새로운 CSS 재설정'에 대한 Elad Shechter와의 인터뷰의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!