목차
이 게시물에서는 CSS 재설정 프로세스를 최적화하기 위해 CSS 캐스케이딩 이라는 기술을 소개합니다 . 브라우저 기본 스타일을 제거하여 브라우저 간에 일관된 모양을 보장하는 CSS 재설정의 개념을 설명합니다 . 그런 다음 스타일 계층 구조와 우선 순위를 더 잘 제어할 수 있는 CSS 계단식 기술을 소개합니다.
이 기사에서는 CSS 계단식 기술의 사용법과 이점에 대해 자세히 설명합니다. 스태킹 순서, z축 위치 지정 및 스태킹 컨텍스트를 비롯한 몇 가지 주요 개념을 소개합니다 . 또한 독자가 CSS 캐스케이딩을 사용하여 더 나은 스타일 제어 및 관리를 이해하는 데 도움이 되는 실용적인 예제와 코드 스니펫을 제공합니다.
또한 이 문서에서는 CSS 계단식 기술을 사용할 때 발생할 수 있는 몇 가지 문제와 고려 사항에 대해서도 언급합니다. 스타일 충돌과 일관되지 않은 렌더링을 피하기 위해 CSS 계단식을 사용할 때 계단식 순서와 우선 순위를 신중하게 처리할 것을 권장합니다.
아래는 본문~~
저는 항상 CSS 재설정에 대해 보다 공격적인 접근 방식을 선호하는 사람이었습니다. 이러한 메서드는 브라우저에서 대부분의 기본 스타일을 지웁니다. 예를 들어 일반적으로 글꼴 크기와 두께가 더 큰 요소 <h1>에서<h6> 기본 제목 스타일을 제거합니다 .
그러나 Normalize CSS가 Shadow DOM 요소를 처리하는 방식 도 마음에 듭니다 . 이는 CSS 재설정 방법 에는 없는 것입니다 .
그러나 저는 Normalize CSS가 Shadow DOM 요소를 처리하는 방식도 마음에 듭니다. 이는 CSS 재설정 방법에는 없는 것입니다. 그래서 저는 항상 두 가지를 결합하는 방법을 찾고 있습니다. 그럼에도 불구하고 몇 가지 CSS 우선 순위 문제가 발생하여 해결 방법을 찾아야 합니다.
오늘날 모든 브라우저는 이제 CSS 레이어를 지원합니다. 그래서 Appwrite의 오픈 소스 디자인 시스템인 Pink Design을 개발할 때 우리는 이 문제를 더 잘 처리하는 방법을 재고하기 시작했습니다.
시작하기 전에 CSS 재설정 방법에 대해 조금 이야기해 봅시다.
CSS 재설정 방법
수년 동안 어떤 CSS 재설정 방법이 더 나은지에 대한 "논쟁"이 있었습니다.
이 대회를 위해 우리는 두 가지 친숙한 접근 방식을 취했습니다.
-
<h1>**CSS 정규화** — 제목 요소 와 같은 HTML 요소의 기본 스타일을 유지하면서 브라우저 간의 차이점을 수정하는 부드러운 방법입니다<h2>.
이전에 언급했듯이 Normalize CSS는 다른 브라우저에서 다르게 나타날 수 있는 Shadow DOM 요소를 처리하는 역할도 담당합니다.
Normalize CSS 에서 Shadow DOM 요소를 처리하는 데모:
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
-
CSS 재설정 - CSS 재설정은 종종 브라우저의 "사용자 에이전트 스타일 시트" 기본 스타일을 무시하는 보다 공격적인 접근 방식입니다.
CSS 재설정 데모:
이 코드는 <h1> 특수 font-size , font-weight and 를 margin 실행 취소하여 요소 로 변환합니다 . <h6>
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
방법의 조합
CSS 정규화 및 CSS 재설정 방법을 결합하면 두 방법의 이점을 모두 누릴 수 있습니다.
이렇게 하면 내부 섀도우 DOM 요소가 처리되고 "사용자 에이전트 스타일 시트"에서 상속된 쓸모없는 스타일이 무시됩니다. 이를 달성하는 가장 쉬운 방법은 두 가지를 동시에 로드하는 것입니다. 다음은 Sass 전처리기에서 구현되는 방법에 대한 데모입니다.
/* CSS Resets */
@use 'normalize';
@use 'reset';
Normalize CSS를 먼저 로드 한 다음 CSS Reset을 로드하면 CSS Reset 이 더 구체적이 될 것이라고 생각할 수 있습니다 . 정답은 아닙니다. 그것에 대해 조금 이야기해 봅시다.
병합 방법의 문제점
Appwrite Pink에서는 Normalize CSS를 사용하는데 , 이 역시 "신규 CSS 재설정 방법"과 함께 사용됩니다. "새로운 CSS 재설정 방법"은 새로운 기본 CSS 재설정 기능을 활용하여 CSS를 재설정하는 새로운 방법입니다.
"CSS 정규화" 및 "새 CSS 재설정" 프로젝트 모두 에 대해 우리는 (NPM에서) 있는 그대로 사용합니다. CSS 재설정<h1> 시 제거될 다른 스타일의 요소를 수정하는 등 CSS 정규화의 불필요한 부분도 포함됩니다. .
"CSS 정규화"의 헤더 스타일 <h1> :
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
일반 제거 스타일
"The New CSS Reset"에서 일반적으로 스타일이 제거됩니다(요소 포함).
/*
Remove all the styles of the "User-Agent-Stylesheet",
except for the 'display' property.
- The "symbol *" part is to solve Firefox SVG sprite bug
*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
하지만 여기서 일이 잘못되기 시작합니다. 이러한 문제를 이해하기 위해 스타일을 정의하는 기본 CSS에 대해 이야기해 보겠습니다.
주문 문제
CSS 선택자의 순서가 중요합니다. 이는 일반적으로 최신 스타일이 이전 스타일보다 강력하기 때문입니다. 우리의 경우 CSS 재설정 파일의 순서가 정확했습니다.
먼저, 서로 다른 브라우저 간의 차이를 정규화하는 "CSS 표준화"를 로드한 다음 CSS 재설정을 사용하여 필요하지 않은 것을 제거하려고 합니다. 이 경우에는 "새 CSS 재설정"을 사용하고 있습니다.
Scss 가져오기의 예:
/* CSS Resets files order */
@use 'normalize'; /* 1 */
@use 'reset'; /* 2 */
/* In general, last code is stronger in CSS */
CSS 우선순위
CSS 선택기(요소, 클래스 이름 및 ID 이름)의 강도에 따라 선택기의 우선 순위를 정의합니다. 가장 약한 선택자부터 가장 강한 선택자 순으로 요소 선택자, 클래스 선택자 및 ID 선택자입니다.
이 예에서 ID 선택자는 클래스 이름 선택자 또는 요소 선택자보다 강력하기 때문에 "CSS 특이성 전쟁"에서 이길 것입니다.
이는 <h1> 요소의 색상이 분홍색임을 의미합니다.
<h1 class="title" id="mainTitle">some content</h1>
#mainTitle { color:pink; } /* 1 (ID), 0 (Classes), 0(element) */
.title { color:yellow; } /* 0 (ID), 1 (Classes), 0(element) */
h1 { color:red; } /* 0 (ID), 0 (Classes), 1(element) */
CSS 특이성 충돌
<h1> 요소에 대한 정규화 CSS 선택기를 보면 요소의 기능이 있습니다.
/* 0 (ID), 0 (Classes), 1 (element) */
h1 {...}
이것은 상대적으로 강도가 낮은 선택기입니다.
"The New CSS Reset"에서 주요 CSS 재설정 선택기를 살펴보겠습니다.
/* 0 (ID), 0 (Classes), 0 (element) */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {...}
특이성을 최대한 줄이기 위해 :where() 유사 선택자를 사용합니다. :where() 의사 선택기의 주요 아이디어 중 하나는 선택기에 의해 생성된 CSS 특정성을 제거하는 것입니다.
그러나 여기서 충돌이 발생합니다 .<h1> 스타일이 CSS 재설정 스타일보다 더 강력하여 문제가 됩니다.
이 충돌을 해결하는 한 가지 방법은 Normalize CSS 의 불필요한 부분을 제거하는 것입니다. 즉, Shadow DOM 의 일부가 아닌 모든 스타일을 제거하는 것입니다. 그러나 NPM 패키지에서 프로젝트를 자동 로드하면 유지 관리가 어려워 문제가 될 수 있습니다.
구조에 대한 CSS 레이어
CSS 레이어는 특정 레이어가 다른 레이어보다 더 중요하다고 브라우저에 알리고 다른 레이어의 CSS 우선 순위를 무시하려는 문제를 해결하기 위해 발명되었습니다.
이를 위해 @layer레이어를 정의하는 규칙이 있습니다. 부분 스타일을 래핑하고 레이어의 섹션을 정의하며 레이어 자체 내에서 CSS 우선 순위를 적용합니다.
이 접근 방식만으로도 문제를 해결할 수 있습니다.
레이어의 순서를 보다 정확하게 정의하기 위해 @layer코드를 표시할 순서를 결정하는 를 추가할 수 있습니다.
@layer normalize {
/* CSS Normalize Here */
}
@layer the-new-css-reset {
/* CSS Reset here */
}
이것은 그 자체로 우리의 문제를 해결할 것입니다. 레이어의 순서를 보다 정확하게 정의하기 위해 코드를 표시할 순서를 지정하는 "레이어 문"을 추가할 수 있습니다.
예:
/* layer statement - define the order,
even if the order of the code will not be in the same way */
@layer normalize, the-new-css-reset;
@layer normalize {
/* CSS Normalize Here */
}
@layer the-new-css-reset {
/* CSS Reset here */
}
Sass 전처리기 지원
@use 'sass:meta';
@layer normalize, the-new-css-reset;
@layer normalize {
@include meta.load-css('normalize');
}
@layer the-new-css-reset {
@include meta.load-css('the-new-css-reset');
}
이렇게 하면 CSS 레이어를 별도의 파일에 보관하고 코드를 깔끔하게 유지하면서 마지막 레이어가 스타일 우선 순위 전투에서 승리하도록 할 수 있습니다.
브라우저 지원
꽤 오랫동안 모든 주요 브라우저에서 CSS 레이어가 구현되었습니다.
요약하다
이 기사는 주로 CSS 우선 순위 문제, 특히 CSS 재설정 수준 문제를 해결하는 방법에 대해 설명합니다.
2023년 말에 접어들면서 CSS 계층을 사용하여 CSS 충돌을 해결하는 이 방법은 사용자가 브라우저를 업그레이드함에 따라 더 보편화될 것입니다.
Pink Design을 구축하면서 우리는 일반적으로 정기적으로 브라우저를 업데이트하는 유형의 사용자인 개발자에게 서비스를 제공할 수 있는 특권을 누렸습니다. 따라서 우리는 CSS 레이어로 개발하는 이 새로운 접근 방식을 채택하기로 결정했습니다.