모든 프런트엔드 개발자가 2023년에 알아야 할 6가지 CSS 스니펫

지금 바로 사용할 수 있는 강력하고 안정적인 CSS로, 툴벨트에 추가할 만한 가치가 있습니다.

모든 프런트엔드 개발자는 컨테이너 쿼리를 사용하고, 스크롤 스냅 환경을 만들고, 그리드를 사용하여 position: absolute를 피하고, 원형을 빠르게 처리하고, 계단식 레이어를 사용하고, 논리적 속성을 통해 더 적은 수로 더 많은 도달범위를 확보하는 방법을 알아야 합니다. 다음은 각 기대치에 대한 간략한 개요입니다

10년 연속 가장 많이 요청된 CSS 기능이 이제 모든 브라우저에서 안정적으로 작동하며 2023년에는 너비 쿼리에 사용할 수 있습니다.

.panel {
 
container: layers-panel / inline-size;
}

.card {
 
padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
 
.card {
   
padding: 2rem;
 
}
}
@container

브라우저 지원

  • Chrome: 105
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16

소스

container

브라우저 지원

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16

소스

2. 스크롤 스냅

잘 구성된 스크롤 환경은 다른 환경과 차별화되는 환경을 제공합니다. 스크롤 스냅은 시스템 스크롤 UX와 일치하면서 의미 있는 중지점을 제공하는 완벽한 방법입니다.

.snaps {
 
overflow-x: scroll;
 
scroll-snap-type: x mandatory;
 
overscroll-behavior-x: contain;
}

.snap-target {
 
scroll-snap-align: center;
}

.snap-force-stop {
 
scroll-snap-stop: always;
}

25개 정도의 데모가 포함된 대규모의 멋진 Codepen 컬렉션에서 이 CSS 기능의 잠재력을 자세히 알아보세요.

scroll-snap-type

브라우저 지원

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 99.
  • Safari: 11.

소스

scroll-snap-align

브라우저 지원

  • Chrome: 69
  • Edge: 79
  • Firefox: 68
  • Safari: 11.

소스

scroll-snap-stop

브라우저 지원

  • Chrome: 75.
  • Edge: 79
  • Firefox: 103
  • Safari: 15

소스

overscroll-behavior

브라우저 지원

  • Chrome: 63
  • Edge: 18.
  • Firefox: 59.
  • Safari: 16.

소스

3. 격자 쌓기

단일 셀 CSS 그리드로 position absolute를 사용하지 마세요. 서로 쌓인 상태가 되면 justify 및 align 속성을 사용하여 위치를 지정합니다.

.pile {
 
display: grid;
 
place-content: center;
}

.pile > * {
 
grid-area: 1/1;
}
grid

브라우저 지원

  • Chrome: 57
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1

소스

4. 빠른 원

CSS에서 원을 만드는 방법은 많지만 이 방법이 가장 간단합니다.

.circle {
 
inline-size: 25ch;
 
aspect-ratio: 1;
 
border-radius: 50%;
}
aspect-ratio

브라우저 지원

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 89
  • Safari: 15.

소스

5. @layer로 변형 제어

캐스케이드 레이어를 사용하면 나중에 발견되거나 생성된 대안을 원래 대안 세트와 함께 캐스케이드의 올바른 위치에 삽입하는 데 도움이 됩니다.

/* file buttons.css */
@layer components.buttons {
 
.btn.primary {
   

 
}
}

그런 다음 다른 임의의 시점에 로드된 완전히 다른 파일에서 마치 그동안 나머지 버튼과 함께 있었던 것처럼 새 버튼을 버튼 레이어에 추가합니다.

/* file video-player.css */
@layer components.buttons {
 
.btn.player-icon {
   

 
}
}
@layer

브라우저 지원

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97.
  • Safari: 15.4

소스

6. 논리적 속성을 사용하여 더 적게 기억하고 더 많은 도달범위 달성

새로운 박스 모델 하나를 기억하면 국제 쓰기 모드문서 안내의 왼쪽과 오른쪽 패딩이나 여백 변경에 관해 다시 걱정할 필요가 없습니다. 스타일을 실제 속성에서 padding-inline, margin-inline, inset-inline와 같은 논리적 속성으로 조정하면 브라우저에서 조정 작업을 실행합니다.

button {
 
padding-inline: 2ch;
 
padding-block: 1ch;
}

article
> p {
 
text-align: start;
 
margin-block: 2ch;
}

.something::before {
 
inset-inline: auto 0;
}
padding-inline

브라우저 지원

  • Chrome: 87
  • Edge: 87.
  • Firefox: 66.
  • Safari: 14.1

소스

margin-block

브라우저 지원

  • Chrome: 87
  • Edge: 87.
  • Firefox: 66.
  • Safari: 14.1

소스

inset-inline

브라우저 지원

  • Chrome: 87
  • Edge: 87.
  • Firefox: 63.
  • Safari: 14.1

소스