지금 바로 사용할 수 있는 강력하고 안정적인 CSS로, 툴벨트에 추가할 만한 가치가 있습니다.
모든 프런트엔드 개발자는 컨테이너 쿼리를 사용하고, 스크롤 스냅 환경을 만들고, 그리드를 사용하여 position: absolute
를 피하고, 원형을 빠르게 처리하고, 계단식 레이어를 사용하고, 논리적 속성을 통해 더 적은 수로 더 많은 도달범위를 확보하는 방법을 알아야 합니다. 다음은 각 기대치에 대한
간략한 개요입니다
1. 컨테이너 쿼리
10년 연속 가장 많이 요청된 CSS 기능이 이제 모든 브라우저에서 안정적으로 작동하며 2023년에는 너비 쿼리에 사용할 수 있습니다.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
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
scroll-snap-align
scroll-snap-stop
overscroll-behavior
3. 격자 쌓기
단일 셀 CSS 그리드로 position absolute를 사용하지 마세요. 서로 쌓인 상태가 되면 justify 및 align 속성을 사용하여 위치를 지정합니다.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid
4. 빠른 원
CSS에서 원을 만드는 방법은 많지만 이 방법이 가장 간단합니다.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio
5. @layer로 변형 제어
캐스케이드 레이어를 사용하면 나중에 발견되거나 생성된 대안을 원래 대안 세트와 함께 캐스케이드의 올바른 위치에 삽입하는 데 도움이 됩니다.
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
그런 다음 다른 임의의 시점에 로드된 완전히 다른 파일에서 마치 그동안 나머지 버튼과 함께 있었던 것처럼 새 버튼을 버튼 레이어에 추가합니다.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer
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;
}