지금 바로 사용할 수 있는 가치 있고 강력하며 안정적인 CSS입니다.
저는 모든 프런트엔드 개발자는 :has()가 '상위 선택기', subgrid의 방법과 이유, 기본 제공 CSS 문법으로 중첩하는 방법, 브라우저에서 광고 제목 텍스트 줄바꿈의 균형을 맞추는 방법, 컨테이너 쿼리 단위를 사용하는 방법 등을 알고 있어야 한다고 생각합니다.
이 게시물은 모든 프런트엔드 개발자가 2023년에 알아야 할 작년의 6가지 CSS 스니펫의 연장선입니다.
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
:has()는 2023년 말에 모든 주요 브라우저에서 출시되었습니다. 이 새로운 선택기는 작고 별거 없는 것 같지만 게임, 반응형, 콘텐츠 인식 레이아웃, 스마트 구성요소 등 Jhey가 이 문서에서 자세히 살펴본 훨씬 더 많은 사용 사례를 통해 놀랄 것입니다.
다음은 :has()를 상위 선택기로 사용하는 몇 가지 예입니다. 이 이름이 지정된 이유는 일반적으로 선택기의 대상이 끝부분에 있기 때문입니다(예: ul li). 여기서 li는 제목이며 스타일을 가져옵니다. :has()를 사용하면 선택기의 시작 부분에 있는 요소가 대상이 될 수 있습니다. 다음 예에서는 .icon 클래스를 가진 요소가 내부에 있으면 버튼에 간격이 있습니다. 이미지가 들어 있으면 카드 방향이 변경됩니다.
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
오래 바람직한 선택기는 항목 수에 따라 레이아웃을 변경하는 것입니다. 이제 :has()를 사용하면 하위 요소 수를 쿼리하는 동안 컨테이너를 주체로 유지할 수 있습니다.
main:has(> :nth-child(5)) {…}
또 다른 상위 수준의 예는 페이지의 특정 체크박스가 사용 설정된 경우 전체 문서에 설정된 스타일을 변경합니다.
html:has(#dark-mode:checked) {…}
다음은 선택기의 주제를 변경하지 않는 간단한 사용 사례입니다. 이 예시만 보면 :has()가 상위 선택기로 제한된다고 생각할 수 있습니다. 다음 예를 살펴보세요. 공통된 상위 항목을 기반으로 하는 항목이 있는지 확인한 다음 선택자를 페이지 더 깊은 곳에 있는 하위 항목으로 피벗합니다.
다음은 입력이 잘못된 경우 양식 오류 요소를 보여줍니다.
form:has(:user-invalid) .error {
display: block;
}
이는 사이드 탐색에 .--is-open 클래스가 있을 때 기본 콘텐츠 영역을 슬라이드합니다.
html:has(#sidenav.--is-open) main {
translate: -320px;
}
다음은 :has()를 상위 선택기로 사용하고 :has()를 수량 쿼리로 사용하며 컨테이너 쿼리를 사용하여 1~12개 요소를 세로 또는 가로 방향으로 멋지게 표시할 수 있는 그리드 레이아웃을 만드는 재미있는 데모입니다.
하위 그리드 만들기
subgrid
수년 동안 프런트엔드 웹 커뮤니티는 대단히 인기 있고 강력한 CSS 그리드 레이아웃 엔진을 완성하고 완성하는 데 도움이 되는 서브그리드를 요청했습니다. 이제 세 가지 주요 엔진에서 모두 사용할 수 있습니다.
개요를 알아보려면 여기에서 하위 그리드에 대해 자세히 알아보세요.
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
CSS 방식으로 중첩
nesting
기본 제공 CSS 중첩은 2023년에 모든 주요 브라우저에서 사용할 수 있습니다. 웹사이트를 업데이트하여 중첩되는 빌드 프로세스를 제거했습니다. 이제 더 작은 스타일시트를 제공합니다. 네, 중첩이 있는 스타일시트는 더 작으며, 모든 브라우저 devtools는 이를 표시할 준비가 되었습니다.
자세한 내용은 CSS 중첩 구문의 개요를 참조하세요. 다음 코드 예는 문법 예를 보여줍니다.
.you {
.can-totally-ship-this {
&.if-you-wanted {
/* it's VERY MUCH like SCSS */
&:is(:hover, :focus-visible) {
/* put a bird on it */
}
}
}
}
.for-theming {
@media (prefers-color-scheme: dark) {
/* you can nest media queries */
}
}
/* or for theming with [data-theme="dark"] */
.button {
background: black;
color: white;
/* nest and do more than just append, flip it and reverse it */
[data-theme="dark"] & {
background: white;
color: black;
}
}
브라우저에서 광고 제목의 균형 유지
balance
pretty
text-wrap: balance가 없으면 개발자와 카피 작성자가 <wbr> 요소 또는 ­와 같은 줄바꿈 힌트를 얻게 됩니다. 콘텐츠가 어떤 식으로든 번역, 확대/축소 또는 수정되자마자 이러한 래핑 힌트가 콘텐츠의 새로운 프레젠테이션에 적합한 위치에 있다는 보장이 없으므로 대체로 패배입니다.
균형 잡힌 텍스트 줄바꿈을 사용하면 이 작업을 브라우저에 맡길 수 있습니다. 다음 Codepen에서 비교를 확인할 수 있습니다.
컨테이너 쿼리 단위 사용
cqw
작년 게시물에서는 모든 프런트엔드 개발자가 컨테이너 쿼리 작성 방법을 알아야 한다고 제안했습니다. 아직 배우지 못했다면 2024년을 투자할 해로 만들고 컨테이너 쿼리 단위도 확인해 보세요 요약하자면, 2021년에 Ahmad Shadeed가 컨테이너 쿼리 단위에 대한 유용한 문서를 작성했습니다.
다음과 같은 6개의 새로운 컨테이너 리터리 단위가 제공됩니다.
- 인라인 변형
cqi. - 너비 변형
cqw. - 블록 변형
cqb - 높이 변형
cqh. - 어느 길이든 더 짧은
cqmin의 변형입니다. - 어느 길이든 더 큰
cqmax의 변형입니다.
컨테이너에 대한 상대적 및 고유 애니메이션에 대한 시나리오를 생각해 보세요. 100cqi(컨테이너 인라인 크기의 100%)를 사용하여 컨테이너에서 완전히 슬라이드아웃되는 하위 요소입니다.
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
다음은 컨테이너 반응형 서체가 포함된 카드와 컨테이너의 방향에 맞게 조정되어 방향이 가로 모드일 때 크기가 절반이 되는 이미지입니다.
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
이러한 단원을 처음 접하는 경우 2024년에 제공되는 모든 단원을 검토하는 것이 좋습니다.