최신 CSS로 할 수 있는 것들

최신 CSS 문법들은 여러 가지 들을 제공합니다.

물론, 하위 버전의 지원이 어느정도 되어야 하기 때문에 fallback으로 사용하거나, can I use 사이트에서 확인 후에 사용하는 것도 좋은 방법일 것입니다.

최근에는 media query로 체크해서 실용적으로 사용할 수 있는 여러 대안들도 나왔습니다.

따라서 ecma script의 최신 문법에 babel이 존재하듯이, css도 최신 문법에 따라서 작성할 수 있는 환경을 만들어서 더 좋은 아이디어를 낼 수 있는 방법을 모색하는 것 또한, 프론트엔드 개발자의 몫입니다.

 

:is 선택자

기존에 다음과 같이 작성하던 코드를 개선 할 수 있습니다.

/* 기존 */
.main_contents h1,
.main_contents h2,
.main_contents h3 {
    line-height: 2;
}

.main_contents img,
.main_contents video {
    max-width: 100%;
}


/* 개선 */
.main_contents :is(h1, h2, h3) {
    line-height: 2;
}

.main_contents :is(img, video) {
    max-width: 100%;
}

너무 좋은 기능 같네요. 지원율도 매우 높습니다.

https://caniuse.com/css-matches-pseudo

not과 first-child와 같은 가상 선택자들과 조합하여서 더 다양한 것들을 할 수 있습니다.

.main_contents :is(h1, h2, h3):not(:first-of-type) {
  font-size: 2rem;
}

Clamp

clamp()는 여러번 언급했었는데요.

2021.10.25 - [CSS] - css clamp를 사용해보자

2020.10.11 - [CSS] - clamp() 사용하기

갈수록 지원율이 높아지고 있어서, 한번 더 언급해봅니다.

/* clamp(최소값, 현재값, 최대값) */
width: clamp(100px, 30%,  500px);

/* calc 사용 */
width: clamp(min(10px, 20em), 200px, max(40vw, 35rem));
width: clamp(150px, calc(20% / 3rem), 1200px);

해당 기능을 통해서, 반응형 레이아웃을 만들 때 매우 편하게 만들 수 있을 것 같습니다.

https://caniuse.com/css-math-functions

CSS math functions min(), max() and clamp() | Can I use... Support tables for HTML5, CSS3, etc

 

ch, ex(폰트 단위)

폰트 단위로 ch가 있는데요.

지원율도 높고, ie만 제외하면 대부분 사용할 수 있습니다.

가독성을 조금 더 보충하기 위해서 나왔고, ch는 "0"문자의 너비를 기준으로 사이즈를 지정할 수 있습니다.

https://caniuse.com/ch-unit

ch (character) unit | Can I use... Support tables for HTML5, CSS3, etc

ex같은 경우는, 현재 폰트의 소문자 "x"의 높이 값을 말합니다.

폰트의 중간 지점을 알아내기 위한 용도로 사용합니다.

Text Decoration

text-decoration 관련 속성들도 많이 생겼습니다.

text-decoration: underline;
text-decoration-color: #38d8e8;
text-decoration-thickness: 1rem;
text-underline-offset: -3ex;
text-decoration-skip-ink: none;

Scroll-margin-top

이 속성 또한 유용하게 사용할 수 있을 것 같네요.

지원율도 높습니다.

https://caniuse.com/mdn-css_properties_scroll-margin

CSS property: scroll-margin | Can I use... Support tables for HTML5, CSS3, etc

See the Pen Scroll margin demo by YoungMinKim (@oinochoe) on CodePen.

해당 기능은 수치를 변화시켜서 직접 테스트를 해보세요.

Aspect Ratio

정사각형의 비율을 유지하고 싶다면 어떻게 하면 될까요?

16:9의 유튜브 영상 비율로 유지하고 싶다면 어떻게 하면 될까요?

.normal {
  aspect-ratio: 1/1;
}

.youtube {
  aspect-ratio: 16/9;
}

지원율도 좋습니다.

https://caniuse.com/mdn-css_properties_aspect-ratio

CSS property: aspect-ratio | Can I use... Support tables for HTML5, CSS3, etc

Contain-intrinsic-size

브라우저는 단일 요소를 렌더링하기 위해 모든 것을 계산해야 합니다. 

크고 복잡한 페이지가 있는 경우 렌더링 및 페인트 시간이 상당히 느려질 수 있습니다.

이를 해결해줄 수 있는 속성입니다.

content-visibility: auto 속성을 사용하게 되면, 브라우저에게 화면 밖에 있는 콘텐츠에 대해서 렌더링 하는 것에 대해서 걱정하지 말라고 알려주는 것과 같습니다.

처음에 화면이 렌더링 될 때 브라우저에서 렌더링 하는 박스의 높이가 자유자재로 움직이는 것을 볼 수 있습니다.

그럴 때 contain-intrinsic-size 속성을 어떤 박스의 높이에 대한 힌트 값으로 주게 되면, 브라우저는 초기 렌더링을 건너뛰고, 레이지 로딩하듯, 해당 힌트 값의 높이의 박스를 점점 채워갑니다.

지원율도 좋기 때문에 얼마든지 사용해도 좋습니다.

Masonry Layout

Masonry 레이아웃은 jquery 라이브러리부터 시작해서 사용을 했던 기억이 있습니다.

pinterest를 떠올리면 되는 레이아웃입니다.

https://masonry.desandro.com/

Masonry

 

css 속성에서 multi-column layout을 사용해도 분명히 완성 가능한 부분이 있지만, 탭 기반으로 포커스시에 문제가 될 수 있고, 그렇게 되면 시각적 레이아웃과 탭 인덱스의 연결고리가 끊어지게 되기 때문에, 접근성에 있어서도 매우 좋지 않은 레이아웃이 되게 됩니다.

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  grid-template-rows: masonry;
  grid-gap: 1rem;
}

위와 같이 작성하면 간단하게 masonry를 만들 수 있습니다.

하지만, grid-template-rows: masonry 경우에는 firefox에서만 옵션에서 활성화를 해주어야 보일 정도로 아직 미비한 상태입니다.

https://caniuse.com/mdn-css_properties_grid-template-rows_masonry

CSS property: grid-template-rows: `masonry` | Can I use... Support tables for HTML5, CSS3, etc

조금 더 가까운 미래에 빨리 적용될 수 있도록 널리 홍보가 되면 좋겠습니다.

css 중첩 기능

SCSS와 같은 Pre-Processor를 통한 css 전처리 후에 사용자는 해당 *.scss 파일을 다시 빌드하여 css 파일로 만들게 됩니다.

이제는 그럴 필요가 없습니다.

css 자체로도 상속과 비슷한 기능이 제공되게 됩니다.

.parent {
    background: black;
    & div {
        background: blue;
    }
}

빠르게 w3c 표준화 제정 단계를 거치기를 바랍니다.

현재 w3c 공식 문서에서 draft 상태에 있습니다. (아직 사용 불가)

https://drafts.csswg.org/css-nesting-1/

CSS Nesting Module

 

 

 

출처 : https://www.smashingmagazine.com/2021/02/things-you-can-do-with-css-today/