What’s new in 2023 CSS

2023 새롭게 추가된 CSS에서 알고 있으면 유용하게 사용할 수 있는 기술 몇 가지를 가져와보았습니다.
이미 알고 계신 분들 있으시겠지만 많은 분께 도움이 되었으면 좋겠습니다.

text-wrap: balance

<div>
    <div class="balanced">
        동해 물과 백두산이 마르고 닳도록
        하느님이 보우하사 우리나라 만세
        무궁화 삼천리 화려강산
        대한 사람 대한으로 길이 보전하세
        남산 위에 저 소나무 철갑을 두른 듯
        바람 서리 불변함은 우리 기상일세
    </div>
    <div class="unbalanced">
        동해 물과 백두산이 마르고 닳도록
        하느님이 보우하사 우리나라 만세
        무궁화 삼천리 화려강산
        대한 사람 대한으로 길이 보전하세
        남산 위에 저 소나무 철갑을 두른 듯
        바람 서리 불변함은 우리 기상일세
    </div>
</div>

.unbalanced,
.balanced {
    font-size: 20px;
    margin: 50px;
    width: 70%;
    background-color: lightgray;
}
.balanced {
    text-wrap: balance;
}

See the Pen text-wrap: balance by pmirnc (@pmirnc) on CodePen.

효과적인 줄바꿈에 사용하시면 좋을 속성입니다. 기존 한글자씩 줄바꿈이 되었지만
새로 추가된 balance 속성으로 브라우저가 자동으로 단어의 수를 계산하여 균등하게 줄을 나누어줍니다.

주의사항

현재 최대 4줄의 텍스트까지만 작동하므로 제목과 헤드라인에는 적합하지만 긴 텍스트에는 적합하지 않을 수 있습니다.
아직까지 지원하지 않는 브라우저, 버전이 많아 아래 지원 브라우저 확인링크에서 확인하시고 사용해주세요.

:has

<div>
    <p>
        <span>span</span>
    </p>
    <p>
        <strong>div</<strong>
    </p>
</div>
<div>
    <h1>h1</h1>
    <p>p</p>
    <h1>h1</h1>
</div>
<div class="section1">
    <h2>h2</h2>
</div>
<div class="section1">
    <h3>h3</h3>
</div>
<div class="section1">
    <h4>h4</h4>
</div>

    p:has(> span) {
        color: red;
    }

    h1:has(+ p) {
        color: aqua;
    }

    div.section1:not(:has(h4)) {
        color: red;
    }

    div.section1:has(:not(h3, h4)) {
        color: blue;
    }

See the Pen :has by pmirnc (@pmirnc) on CodePen.

:has를 사용하면 CSS에서 마치 if else를 사용하는 듯한 느낌이듭니다.
has 말 그대로 가지고 있다면이라고 생각하며 코드를 보면 편하실겁니다. not 과 같이 사용하면 더욱 사용성이 늘어납니다.

1. p:has(> span)
   p 태그의 자식 노드 중 span태그가 있다면
2. h1:has(+ p)
   h1 태그의 바로 인접한 노드 중 p태그가 있다면
3. div.section1:not(:has(h4))
   div에 section1을 클래스 속성으로 하는 노드 중 h4태그를 가지고 있지 않다면
4. div.section1:has(:not(h3, h4))
   div에 section1을 클래스 속성으로 하는 노드 중 h3, h4 태그를 가지고 있지 않다면

주의사항

대규모 DOM 트리에서 렌더링 성능 저하를 방지하려면 이 선택기의 범위를 최대한 가깝게 지정하는 것이 좋습니다.
지원 브라우저 확인링크에서 확인하시고 사용해주세요.

Dynamic viewport units

늘 CSS를 하다보며 부딪혔던 문제 중 하나가 바로 vh였습니다.
vh를 사용하면 모바일 기기에서 간혹 위아래 주소창 또는 네비게이션으로 인해 스크롤이 생기는 경우가 있습니다.
이를 해결하기 위해 새로운 단위 값이 나왔습니다.

1. dvh - 주소 표시줄이 스크롤을 통해 축소가 되건 노출이 되고 있건 상관 없이
   현재 보여지는 뷰포트 높이를 동적으로 가져온다.
2. svh - 사용자 화면 기준으로 가장 짧은 뷰포트 값을 가져온다.
   주소 표시줄이 없어져도 기존 주소표시줄의 높이 값을 뺀 나머지 값을 가져온다.
3. lvh - svh와는 반대로 사용자 화면 기준으로 가장 긴 뷰표트 값을 가져온다.
   주소 표시줄이 있더라도 주소 표시줄이 없을 때의 총 화면의 길이를 가져온다.

Container Query

<div class="container-1">
    <h4 class="title">container query</h4>
</div>
<div class="container-2">
    <h4 class="title-2">media query</h4>
</div>

    .container-1,
    .container-2 {
        container-type: inline-size;
        width: 50%;
        border: 1px solid red;
        padding: 20px;
        transition: all 1s;
    }
    .container-1 {
        container-name: container-1;
    }
    .title,
    .title-2 {
        font-size: 30px;
        transition: all 0.5s;
    }
    @media screen and (max-width: 600px) {
        .title-2 {
            font-size: 15px;
            color: gray;
        }
    }
    @container container-1 (max-width: 600px) {
        .title {
            font-size: 15px;
            color: gray;
        }
    }

See the Pen container query by pmirnc (@pmirnc) on CodePen.

기존 @media 쿼리를 완전히 대체 할 수 있지않을까라는 생각이 들었던 기능입니다.
기존 @media 쿼리는 화면의 사이즈에 따라 반응형으로 코드를 짜야했지만
@container를 사용하면 각각의 하나의 노드의 사이즈에 따라 반응형 CSS 디자인이 가능합니다.

간단 사용법

1. 부모 태그에 container-name, container-type을 지정해줍니다.
2. @container container-1 (max-width: 600px) 쿼리에서 1에서 지정한 container-name을 넣고 기준이 되는 width를 입력합니다.
3. 자식노드 중의 반응형으로 변경을 원하는 요소와 속성을 설정합니다.

끝 마치며..

소홀했던 CSS를 이번 기회에 찾아보니 정말 많은 것들을 배울 수 있었습니다.
다른건 모르겠고 무조건 예쁘게 화면을 만들어야지가 주 목적이었던 열정이 있던 지난 날과 현재 모습을 반성하는 포스팅 시간이었습니다.
감사합니다.

지원 브라우저 확인

https://caniuse.com/

더 많은 기능들…

https://developer.chrome.com/blog/whats-new-css-ui-2023/#nth-of-syntax

참고 자료

• https://developer.chrome.com/blog/whats-new-css-ui-2023/#nth-of-syntax
• https://abcdqbbq.tistory.com/104