Goggle IO 2022 - State Of CSS , CSS의 미래를 알려드림. feat. 구글 I/O 영상을 참고하여 작성한 글입니다.
Cascade layer 를 선언하는데 사용되는 CSS at-rule.
MDN @layer
@layer layer-name {rules};
@layer layer-name;
@layer layer-name, layer-name, layer-name;
@layer {rules};
CSS 는 cascade 특성을 가지기 때문에, 한 프로젝트에서 같은 css selector 를 사용해 스타일을 지정할 경우 제일 마지막에 작성된 스타일이 적용된다.
따라서 작성한 스타일이 이후에 작성된 스타일에 의해 덮어씌워지는 것(cascade conflit)을 방지하기 위해 selector 의 우선순위를 높게 설정해주거나, 단일 클래스 사용, BEM 기반의 className 규칙과 같은 여러 방법론이 생겨났다.
selector 우선순위 규칙은 다음과 같다.
Specificity = (해당하는 id의 개수) * 100 + (해당하는 class의 개수) * 10 + (해당하는 tag의 개수) * 1
하지만 이처럼 className과 selector 우선순위를 관리하는 것은 CSS 를 명확하지 않고 어렵게 만든다.
그래서 등장한 것이 @layer
인데, 이는 css specificity 에 의존하지 않고 스타일의 우선 순위를 완전히 제어할 수 있도록 해준다.
여러 Cascade layer 간 우선순위를 지정해야하는 경우에도 사용된다.
@layer theme, layout, utilities;
<div class="item">
I am displayed in color: rebeccapurple
</div>
@layer base, special; // 우선순위 base < special
@layer special {
.item {
color: rebeccapurple; // 적용됨
}
}
@layer base {
.item {
color: green; // 적용 안됨
font-size: 1.3em; // 적용됨
}
}
이미 존재하고 있는 스타일 시트를 import 하여 cascade layer 생성해서 그룹화 시키고 순서를 지정해줄 수도 있다.
// index.css
// libraries
@import "library-1.css";
@import "library-2.css";
@import "library-3.css";
// base
@import "vars.css";
@import "reset.css";
@import "normalize.css";
// layouts
@import "scaffolding.css";
@import "layouts.css";
// components
@import "component-1.css";
@import "component-2.css";
@import "component-3.css";
@layer libraries, base, layouts, components;
@import url("library-1.css") layer(libraries);
@import url("vars.css") layer(base);
@import url("component-1.css") layer(components);
@import url("layouts.css") layer(layouts);
@import url("library-2.css") layer(libraries);
커스터마이징이 어려웠던 HTML 요소의 내장 색상을 변경할 수 있다. (ex. 체크박스, 라디오 그룹 등..)
MDN accect-color
:root {
accent-color: red;
}
포커스/클릭 등 요소에 대한 모든 사용자 입력의 이벤트를 모두 무시하게 만들어 비활성화시킬 수 있다.
MDN inert
<div>
<label for="button1">Button 1</label>
<button id="button1">I am not inert</button>
</div>
<div inert> // 사용자 입력 이벤트가 모두 무시된다. 클릭 불가!
<label for="button2">Button 2</label>
<button id="button2">I am inert</button>
</div>
[inert] > * {
// inert attribute 를 가지고 있는 HTML 요소의 opacity 를 0.5 로 변경한다.
opacity: .5;
}
부모 요소에 특정 자식이 있는지 여부에 따라 부모 요소의 스타일을 할 수 있다.
MDN :has()
css selector 에서 자손 compinator (" ")
, 자식 combinator (">")
는 있지만 부모는 선택할 수 없다. 따라서 자식이 부모 안에 있을때만 자식을 스타일링할 수 있었기 때문에 특정 자식이 부모 안에 있을 때 부모의 스타일을 변경하는 것은 불가능했다.
:has()
는 위 문제를 해결해준다.
form > button {
// form 안의 자식인 button 만 스타일링 가능
}
form:has(button) {
// form 안에 button 이 있을 때만 부모인 form 의 style 변경
}
<dialog>
HTML
<dialog>
요소는 닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타낸다.
MDN<dialog>
::backdrop
의사 요소를 사용하여, HTMLDialogElement.showModal()
메서드를 사용해 활성화한 <dialog>
요소의 뒤에 스타일을 적용할 수 있다. 예를 들어, 모달 상자가 활성화되어 있는 동안 접근할 수 없는 뒤쪽 요소를 어둡게 만들 때 사용할 수 있다.