간단하고 작은 CSS 재설정
2854 단어 css
* {
all: unset;
display: revert;
}
먼저 모든 속성의 설정을 해제하지만 표시를 user-agent-stylesheet 기본값으로 되돌려야 합니다. 그렇지 않으면 스타일, 스크립트, 제목 등과 같이 표시할 수 없는 요소를 포함하여 모든 요소가 표시됩니다.
조금 더 나아지기만 하면
* {
all: unset;
display: revert;
box-sizing: border-box;
}
[default-styles] {
all: revert;
}
왜 box-sizing: border-box; ?
내용만 블록으로 생각하는 것보다 테두리가 있는 요소를 블록으로 생각하는 것이 더 쉽다고 생각합니다.
왜 [기본 스타일]입니까?
스타일을 기본값으로 되돌리려는 모든 요소에 이 속성 "
default-styles
"을 추가할 수 있습니다.이는 경우에 따라 유용할 수 있는 기본 스타일이 있는 요소에 유용하지만 대부분의 경우 버튼, 입력, 선택 등과 같이 재정의됩니다.
SVG 문제 수정
all
CSS 속성에는 일부 SVG 속성이 포함되어 있으며 설정을 해제하면 SVG의 대부분을 잃게 되므로 모든 SVG 요소를 제외해야 합니다. 이는 SVG 네임스페이스를 제외하면 쉽게 수행할 수 있습니다.@namespace svg "http://www.w3.org/2000/svg";
:not(svg|*) {
all: unset;
display: revert;
box-sizing: border-box;
}
[default-styles] {
all: revert;
}
사용자 정의 요소 문제
이것은
:host
의 모든 스타일을 재정의하므로 웹 구성 요소로 작업할 때 이 접근 방식을 권장하기 어렵습니다.의견 섹션에서 생각을 공유하십시오, 감사합니다 🙏
Reference
이 문제에 관하여(간단하고 작은 CSS 재설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mendyberger/simple-tiny-css-reset-50f1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)