State of CSS 2022

State of CSS 내용의 대표적인 4개의 브라우저

Edge
파이어폭스
크롬
사파리

2021년에는 4개의 브라우저가 호환성을 올렸다.

sticky Positioning
aspect-ratio
Flexbox
Grid
Transforms

2022 년 말까지 4개의 브라우저에서 지원가능하게 추가될 기능들을 알아보자

@layer

개발자는 CSS를 작성할 때 명시도(Specificity) 와 작성 순서(Order of Appearance) 를 신중하게 고려해야합니다. 만약 적절한 코드 구성 계획이 없으면 아래와 같이 Cascade가 불리하게 작용할 수 있습니다.

선택자를 과다하게 사용할 경우, 코드의 일부 속성을 재정의할 때 더 무거운 선택자의 사용이나 !important의 사용으로 이어지며 이는 나중에 더 큰 문제를 야기할 수 있습니다.
선택자를 적게 사용할 경우, 나중에 사용하는 명령문으로 너무 쉽게 덮어쓸 수 있습니다.

개발자가 이러한 딜레마를 쉽게 제어할 수 있도록 CSS Cascade 알고리즘에 Cascade Layers라는 새로운 개념이 도입됩니다.

Layers의 진정한 힘은 명시도(Specificity)와 작성 순서(Order Of Appearance)보다 더 높은 기준에 있다는 점에서 나옵니다.
Layers는 보다 상위 등급의 기준이므로, Layers 기준 내에서 스타일의 우선권이 정해지면 Cascade는 해당 스타일에 대한 명시도와 작성 순서를 더이상 체크하지 않습니다.
그 때문에 우리는 다른 Layers에서 사용되는 CSS의 명시도와 작성 순서에 대해 걱정할 필요가 없습니다.
또한 개발자는 Cascade Layers를 사용하여 CSS를 여러 레이어로 분할할 수 있습니다. 그리고 적용할 레이어 순서를 정할 수 있습니다. 그렇기 때문에 이 Layers가 CSS를 로드하는 순서에 대해 전혀 걱정할 필요가 없습니다.

/* Cascade Layers 선언 예시 코드 */
/* 레이어 순서 정의 - 1. reset, 2. base, 3. theme */
@layer reset, base, theme;

 /* 첫번째 레이어 “reset” */
@layer reset { … }

/* 2번째 레이어 “base” */
@layer base { … }

/* 3번째 레이어 “theme” */
@layer theme { … }

https://developer.mozilla.org/en-US/docs/Web/CSS/@layer#examples

Subgrid

Subgrid 는 다른 블로그에 설명이 잘나와있어서 해당 내용을 참고해보자
(https://mong-blog.tistory.com/entry/CSS-subgrid-일정한-간격으로-배치하는-법feat-호환-대체법)

@Container

지금 현재 반응형 웹을 만들때 있어서 사용할수있는 방법은 미디어 쿼리를 사용하여 전체 페이지 넓이 변경에서의 대응이었다. 그래서 스크린이 작아지면 요소들을 재배치 하곤 했었다.

그런데 이제 @Container를 사용하면 device width가 아니라 부모요소에 따라 스타일을 줄수가 있다.

example

사용법

/* establish a container */
.day {
  container-type: inline-size;
  container-name: calendar-day;
}

@container calendar-day (max-width: 200px) {
  .date {
    display: block;
  }

  .date-num {
    font-size: 2.5rem;
    display: block;
  }
}

예제 코드

이 속성이 나옴으로 인하여 좀더 마이크로한 반응형 개발이 가능하게 될것 이다.

응용

Accent Color

input checkbox
input radio
range-slider
progress element

위에 4개의 엘리먼트는 브라우저가 기본적으로 Element 를 만들어서 제공을 해준다.

그렇기 때문에 Accent Color 를 쓰기 전에는 개발자가 일일이 배경색 테두리 색상 hover 를 다 하나하나 전부다 바꿧어야됬다.

그런데 이제 accent-color를 쓰면 기본으로 브라우저가 제공해 주던 색상을 바꿔줄수 있게 됨으로 커스터마이징이 너무나 어려웠던 HTML 요소의 색상을 쉽게 바꿀수 있다.

예제 코드

Inert

웹 개발을 하다 보면 사용자의 클릭 및 이벤트를 막아야 하는 경우가 생긴다

사용자가 버튼을 한번 누를때 중복적인 이벤트를 실행하지 못하게 막을때
모달이나 dialog 가 나왔을때 뒤에 있는 요소들을 클릭하지 못하게 할때
폼으로 양식을 전송중일때 유저가 다른곳을 클릭 하지 않도록 하려면

우리는 이걸 하기 위해 dim 을 씌운다던가 UI/UX 적으로 처리 할수있는 무언가를 개발을 하였었다.
inert는 css 가 아니라 html 속성이다.
그리고 inert 는 페이지의 섹션을 고정(freeze) 시킬수 있다.
inert가 있는 html 요소는 클릭,포커스를 사용하지 못하게 막을것이다.
inert의 가장 좋은 예시는 window.alert 이다.

예제 코드

응용

Viewport units

지금까지는 2가지 유명한 Viewport 유닛이 있다. vw, vh
1
2
vw = viewport width
vh = viewport height

viewport 는 웹사이트를 볼 수 있는 영역 또는 윈도우를 말한다.

그런데 모바일 환경에서 페이지가 로딩이 되면 상태 창 이 보이게 된다.
그리고 화면을 스크롤 하다 보면 상태창 및 사라짐으로써 viewport height 가 바뀌게 되는 현상이 발생한다.
그래서 예를 들어 모바일에 full 로 하게 하는 모달을 만들고 100vh 를 height 로 지정을 하게 되면 
상태창이 잇을때와 없을때 height 가 달라짐으로써 full 하지 않게 될수 있다.

그런데 이번에 viewport units 가 추가가 되면서 이런문제를 해결할수 있게 되었다.
- svh (smallest viewport height)
- lvh (largest viewport height)
- dvh (dynamic viewport height)

이 3가지가 추가됨으로써 viewport 반응형 개발을 좀더 편하게 할수있게 되었다.

:has()

has 선택자가 나오기 전에는 무조건 자식요소에 대한 스타일링이 가능했다.

ul > li:hover 
ul > li:not(.selected).

그런데 만약에 ul 이 li 를 가지고 있다면 어떠한 스타일링을 주고 싶을때 기존에는 JS로 처리를 하거나 클래스를 다르게 줌으로써 처리를 하였다.
그리고 이제 has 가 나왔다.
:has 는 부모요소에서 밑에 자식요소가 어떤게 있을때만 스타일링을 가능하게 해준다.

.parent:has(.child) {...}

출처

CascadeLayers (https://wit.nts-corp.com/2022/05/24/6528)