지금 바로 사용할 수 있는 가치 있고 강력하며 안정적인 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-typescroll-snap-alignscroll-snap-stopoverscroll-behavior3. 그리드 쌓기
단일 셀 CSS 그리드에서는 절대 위치를 사용하지 않습니다. 서로 위에 쌓이면 양쪽 맞춤 및 정렬 속성을 사용하여 속성을 배치합니다.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid4. 빠른 원
CSS에서 원을 만드는 방법은 많지만 가장 간단한 방법입니다.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio5. @layer로 대안 제어
계단식 레이어는 나중에 발견되거나 생성된 변형의 원래 집합과 함께 계단식의 적절한 위치에 변형을 삽입하는 데 도움이 될 수 있습니다.
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
그런 다음 다른 임의의 시간에 로드되는 완전히 다른 파일에서 새 변형을 버튼 레이어에 추가합니다. 이렇게 하면 이번에 나머지 변형이 나머지 변형과 함께 있는 것처럼 버튼 레이어에 새 변형을 추가합니다.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer6. 논리적인 속성으로 간결하게 기억하고 더 많은 고객에게 도달
이 하나의 새로운 박스 모델을 외우면 됩니다. 국제 쓰기 모드와 문서 경로의 왼쪽 및 오른쪽 패딩이나 여백 변경을 걱정할 필요가 없습니다.
스타일을 물리적 속성에서 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;
}