> 웹 프론트엔드 > CSS 튜토리얼 > '새로운 CSS 재설정'에 대한 Elad Shechter와의 인터뷰

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

Christopher Nolan
풀어 주다: 2025-03-18 11:17:22
원래의
907명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿