Google IO 2022에서 발표된 현재와 미래의 웹 스타일 지정 기능 및 몇 가지 추가 기능
2022년은 기능 출시와 협조적 브라우저 기능 출시를 통해 CSS가 가장 많이 한 해 중 하나로 14가지 기능을 구현한다는 공동의 목표를 달성할 것입니다.
개요
이 게시물은 Google IO 2022에서 제공된 강연의 문서 형식입니다. 각 기능에 대한 자세한 가이드가 아니라, 관심을 끌기 위한 소개와 간단한 개요로서 심도보다는 폭넓게 설명합니다. 관심이 생기면 섹션 끝부분에서 자세한 정보로 연결되는 리소스 링크를 확인하세요.
목차
관심 있는 주제로 이동하려면 아래 목록을 사용하세요.
브라우저 호환성
많은 CSS 기능이 공동으로 출시되도록 설정된 주된 이유는 Interop 2022의 노력 때문입니다. Interop과 관련한 노력을 살펴보기 전에 Compat 2021의 내용을 살펴보는 것이 중요합니다.
2021년 호환성
설문조사를 통해 개발자 의견을 바탕으로 한 2021년의 목표는 현재 기능을 안정화하고, 테스트 모음을 개선하며, 다음과 같은 5가지 기능의 브라우저 통과 점수를 높이는 것이었습니다.
sticky포지셔닝aspect-ratio크기 조정flex레이아웃grid레이아웃transform위치 지정 및 애니메이션
테스트 점수가 전반적으로 상승하여 안정성과 신뢰성이 업그레이드됨을 입증했습니다. 이 자리에 함께해 주신 팀 여러분께 축하의 말씀을 전합니다.
상호 운용성 2022
올해 여러 브라우저들이 모여 함께 노력할 기능과 우선순위를 논의했으며, 이를 통합했습니다. 이들은 개발자를 위해 다음과 같은 웹 기능을 제공할 계획이었습니다.
@layer- 색상 공간 및 함수
- 억제
<dialog>- 양식 호환성
- 스크롤
- 서브 그리드
- 서체
- 표시 영역 단위
- 웹 호환성
앞으로 펼쳐질 흥미진진한 야심 찬 목록이 될 것입니다.
2022년 신규 콘텐츠
당연하게도 CSS 2022의 상태는 Interop 2022 작업의 영향을 크게 받습니다.
레이어 캐스케이드
@layer 이전에는 마지막으로 로드된 스타일이 이전에 로드된 스타일을 덮어쓸 수 있으므로 로드된 스타일시트의 검색 순서가 매우 중요했습니다. 그 결과, 항목 스타일시트가 정교하게 관리되어 개발자가 덜 중요한 스타일을 먼저 로드하고 더 중요한 스타일을 나중에 로드해야 했습니다. 개발자가 이러한 중요도를 관리하는 데 도움이 되는 ITCSS와 같은 전체 방법론이 존재합니다.
@layer를 사용하면 항목 파일이 레이어와 레이어의 순서를 미리 정의할 수 있습니다. 그러면 스타일이 로드될 때 로드되거나 정의될 때 레이어 내에 배치하여 스타일 재정의 중요도를 유지할 수 있지만 세심하게 관리된 로드 조정 없이도 스타일이 유지됩니다.
이 동영상은 정의된 캐스케이드 레이어를 사용하여 필요에 따라 캐스케이드를 유지하면서 더 자유로운 프리스타일 제작 및 로드 프로세스를 어떻게 지원하는지 보여줍니다.
Chrome DevTools는 어떤 스타일이 어떤 레이어에서 비롯되는지 시각화하는 데 유용합니다.
자료
- CSS Cascade 5 사양
- 캐스케이드 레이어 설명
- MDN의 계단식 레이어
- Una Kravets: 캐스케이드 레이어
- 아마드 셰이드: Hello, CSS Cascade Layers
서브 그리드
subgrid 이전에는 다른 그리드 내부의 그리드가 상위 셀 또는 그리드 선에 맞게 자체 정렬할 수 없었습니다. 각 그리드 레이아웃은 고유했습니다. 많은 디자이너가 전체 디자인 위에 단일 그리드를 배치하고 그 안에 있는 항목을 지속적으로 정렬합니다. 이러한 방식은 CSS에서는 할 수 없습니다.
subgrid 후에 그리드의 하위 요소는 상위 요소의 열이나 행을 자체 열이나 행을 채택하고 자체 또는 하위 요소를 이에 정렬할 수 있습니다.
다음 데모에서 body 요소는 세 개의 열로 구성된 기본 그리드를 만듭니다. 가운데 열은 main이라고 하고 왼쪽 열과 오른쪽 열은 선의 이름을 fullbleed로 지정합니다. 그런 다음 본문의 각 요소 <nav> 및 <main>는 grid-template-columns: subgrid를 설정하여 본문에서 이름이 지정된 줄을 채택합니다.
body {
display: grid;
grid-template-columns:
[fullbleed-start]
auto [main-start] min(90%, 60ch) [main-end] auto
[fullbleed-end]
;
}
body > * {
display: grid;
grid-template-columns: subgrid;
}
마지막으로 <nav> 또는 <main>의 하위 요소는 fullbleed 및 main 열과 선을 사용하여 자체를 정렬하거나 크기를 조정할 수 있습니다.
.main-content {
grid-column: main;
}
.fullbleed {
grid-column: fullbleed;
}
Devtools를 사용하면 줄과 하위 그리드를 볼 수 있습니다 (현재 Firefox에만 해당). 다음 이미지에서는 상위 그리드와 하위 그리드가 오버레이되었습니다. 이제 디자이너가 레이아웃을 고려한 방식과 유사합니다.
devtools의 'elements' 패널에서는 어떤 요소가 그리드와 하위 그리드인지 확인할 수 있으며, 이는 레이아웃 디버깅 또는 검증에 매우 유용합니다.
자료
컨테이너 쿼리
@container 이전에는 웹페이지 요소가 전체 표시 영역의 크기에만 반응할 수 있었습니다. 이는 매크로 레이아웃에는 적합하지만 외부 컨테이너가 전체 표시 영역이 아닌 마이크로 레이아웃의 경우 그에 따라 레이아웃을 조정할 수 없습니다.
@container 이후 요소는 상위 컨테이너 크기나 스타일에 응답할 수 있습니다.
유일한 주의사항은 컨테이너가 가능한 쿼리 대상으로 자신을 선언해야 한다는 것입니다. 이는 큰 이점을 제공하기 위한 작은 요구사항입니다.
/* establish a container */
.day {
container-type: inline-size;
container-name: calendar-day;
}
이러한 스타일은 다음 동영상의 Mon, Tues, Wed, Thurs, Fri 열을 이벤트 요소에서 쿼리할 수 있게 해 줍니다.
다음은 calendar-day 컨테이너에 크기를 쿼리한 다음 레이아웃 및 글꼴 크기를 조정하는 CSS입니다.
@container calendar-day (max-width: 200px) {
.date {
display: block;
}
.date-num {
font-size: 2.5rem;
display: block;
}
}
또 다른 예를 들자면 한 도서 구성요소는 드래그되는 열에서 사용 가능한 공간에 맞춰 자체적으로 조정됩니다.
우나가 상황을 새 응답이라고 평가하면 정확합니다. @container를 사용할 때는 흥미롭고 의미 있는 디자인 결정을 많이 내릴 수 있습니다.
자료
- 컨테이너 쿼리 사양
- 컨테이너 쿼리 설명
- MDN의 컨테이너 쿼리
- web.dev의 새로운 반응형
- Una의 캘린더 데모
- 유용한 컨테이너 쿼리 컬렉션
- web.dev에서 Designcember를 빌드한 방법
- Ahmad Shadeed: Say Hello To CSS 컨테이너 쿼리
accent-color
accent-color 이전에는 브랜드 일치 색상이 있는 양식을 원하는 경우 시간이 지남에 따라 관리하기 어려운 복잡한 라이브러리나 CSS 솔루션이 생길 수 있었습니다. 이러한 도구는 모든 옵션을 제공하고 접근성이 좋으면 좋겠지만 내장 구성요소를 사용하거나 자체 구성요소를 채택할 선택은 계속 지루하게 됩니다.
accent-color 다음에 한 줄의 CSS가 기본 제공 구성요소에 브랜드 색상을 가져옵니다. 색조 외에도 브라우저는 구성요소의 보조 부분에 적절한 대비 색상을 지능적으로 선택하고 시스템 색 구성표 (밝거나 어두움)에 맞게 조정됩니다.
/* tint everything */
:root {
accent-color: hotpink;
}
/* tint one element */
progress {
accent-color: indigo;
}
accent-color에 관한 자세한 내용은 web.dev의 게시물을 확인하세요. 이 유용한 CSS 속성의 더 많은 측면을 살펴보세요.
자료
색상 수준 4 및 5
지난 수십 년간 웹은 sRGB의 대부분을 차지했지만, 확장되는 고화질 디스플레이와 OLED 또는 QLED 화면이 사전 장착된 휴대기기의 디지털 세계에서 sRGB로는 충분하지 않습니다. 또한 사용자 환경설정에 맞게 조정되는 동적 페이지가 예상되며 색 관리는 디자이너, 디자인 시스템, 코드 유지관리자에게 점점 더 많은 관심사가 되어 왔습니다.
하지만 2022년은 아닙니다. CSS에 다음과 같은 여러 색상 기능과 공간이 새롭게 추가되었습니다. - 디스플레이의 HD 색상 기능에 도달할 수 있는 색상 - 인지 균일성과 같이 인텐트와 일치하는 색상 공간 - 보간 결과가 크게 달라지는 그라데이션의 색상 공간 - 색상 함수: 혼합 및 대비를 사용하고 작업을 수행할 공간을 선택하는 데 도움이 됩니다.
이러한 모든 색상 기능이 도입되기 전에 디자인 시스템은 적절한 대비 색상을 미리 계산하고 적절하게 선명한 팔레트를 보장해야 했으며 이 과정에서 어려운 작업은 전처리기 또는 JavaScript에서 처리했습니다.
이러한 모든 색상 기능 이후에 브라우저와 CSS는 모든 작업을 적시에 동적으로 실행할 수 있습니다. 테마 설정 및 데이터 시각화 색상을 사용 설정하기 위해 사용자에게 CSS 및 JavaScript에 대한 많은 KB를 전송하는 대신 CSS에서 조정 및 계산을 수행할 수 있습니다. 또한 CSS는 사용 전에 지원을 확인하거나 대체를 적절하게 처리하는 데 더 적합합니다.
@media (dynamic-range: high) {
.neon-pink {
--neon-glow: color(display-p3 1 0 1);
}
}
@supports (color: lab(0% 0 0)) {
.neon-pink {
--neon-glow: lab(150% 160 0);
}
}
hwb()
HWB는 색조, 백색, 검은색을 의미합니다. 인간과 흡사한 색을 표현할 수 있는 하나의 색조, 밝거나 어둡게 하기 위한 흰색 또는 검은색의 양이 많기 때문입니다. 흰색 또는 검은색과 색상을 혼합하는 아티스트는 이러한 색상 구문 추가에 만족할 것입니다.
이 색 함수를 사용하면 HSL 및 RGB와 동일한 sRGB 색공간에서 색상이 생성됩니다. 새로운 2022년도 새로운 색깔은 아니지만 문법과 멘탈 모델에 관심이 있다면 더 쉽게 작업할 수 있을 것입니다.
자료
색상 공간
색상은 색공간을 사용하여 표현됩니다. 각 색상 공간은 다양한 기능과 색상 작업 시 절충점을 제공합니다. 어떤 색깔은 모든 밝은 색을 한데 섞기도 하고, 어떤 색깔은 밝기에 따라 먼저 배열될 수도 있습니다.
2022년 CSS는 디자이너와 개발자가 색상을 표시, 선택, 혼합할 수 있도록 고유한 기능을 각각 갖춘 10가지 새로운 색상 공간을 제공할 예정입니다. 이전에는 sRGB가 색상을 사용하기 위한 유일한 옵션이지만 이제 CSS는 새로운 잠재력과 새로운 기본 색공간인 LCH를 제공합니다.
color-mix()
color-mix() 이전에는 개발자와 디자이너가 브라우저에서 인식하기 전에 색상을 혼합할 Sass와 같은 전처리기가 필요했습니다.
또한 대부분의 색상 혼합 함수는 믹싱을 실행할 색공간을 지정하는 옵션을 제공하지 않았으며, 가끔 혼동되는 결과가 발생했습니다.
color-mix() 이후 개발자와 디자이너는 빌드 프로세스를 실행하거나 자바스크립트를 포함하지 않고도 다른 모든 스타일과 함께 브라우저에서 색상을 혼합할 수 있습니다. 또한 믹싱을 실행할 색상 공간을 지정하거나 LCH의 기본 믹싱 색상 공간을 사용할 수 있습니다.
종종 브랜드 색상이 기본으로 사용되며, 이를 기반으로 대안이 생성됩니다(예: 마우스 오버 스타일의 밝은 색상 또는 더 어두운 색상). color-mix()를 사용하면 다음과 같이 표시됩니다.
.color-mix-example {
--brand: #0af;
--darker: color-mix(var(--brand) 25%, black);
--lighter: color-mix(var(--brand) 25%, white);
}
srgb와 같은 다른 색상 공간에서 이러한 색상을 혼합하려면 다음과 같이 변경합니다.
.color-mix-example {
--brand: #0af;
--darker: color-mix(in srgb, var(--brand) 25%, black);
--lighter: color-mix(in srgb, var(--brand) 25%, white);
}
다음은 color-mix()를 사용한 테마 설정 데모입니다. 브랜드 색상을 변경해 보고 테마 업데이트를 확인하세요.
2022년에는 스타일시트에서 다양한 색상 공간의 색상을 조합해 보세요.
자료
color-contrast()
color-contrast() 이전에는 스타일시트 작성자가 액세스 가능한 색상을 미리 알아야 했습니다. 팔레트는 색상 견본에 검은색 또는 흰색 텍스트를 표시하여 색상 시스템의 사용자에게 견본과 적절하게 대비하는 데 필요한 텍스트 색상을 나타내는 경우가 많습니다.
color-contrast() 후에 스타일시트 작성자는 작업을 브라우저로 완전히 오프로드할 수 있습니다. 브라우저를 사용하여 검은색 또는 흰색을 자동으로 선택할 수 있을 뿐만 아니라
디자인 시스템에 적절한 색상 목록을 제공하고 가장 먼저 원하는 대비율을
선택하도록 할 수 있습니다.
다음은 브라우저에서 견본 색상에 따라 텍스트 색상이 자동으로 선택되는 HWB 색상 팔레트 세트 데모 스크린샷입니다.
구문의 기본 사항은 다음과 같습니다. 여기서 회색이 함수에 전달되고 브라우저에서 검은색과 흰색의 대비가 가장 높은지 확인합니다.
color: color-contrast(gray);
이 함수는 색상 목록으로 맞춤설정할 수도 있으며, 선택 항목 중에서 대비가 가장 높은 색상을 선택합니다.
color: color-contrast(gray vs indigo, rebeccapurple, hotpink);
마지막으로, 목록에서 가장 높은 대비 색상을 선택하지 않는 것이 좋은 경우 타겟 대비율을 제공할 수 있으며 이를 통과할 첫 번째 색상이 선택됩니다.
color: color-contrast(
var(--bg-blue-1)
vs
var(--text-lightest), var(--text-light), var(--text-subdued)
to AA /* 4.5 could also be passed */
);
이 함수는 주요 사용 사례가 될 것으로 예상되지만 텍스트 색상 외에도 많은 용도로 사용될 수 있습니다. CSS 언어 자체에 적절한 대비 색상을 선택할 수 있게 되면 접근성과 가독성이 높은 인터페이스를 얼마나 더 쉽게 제공할 수 있을지 생각해 보세요.
자료
상대 색상 문법
상대 색상 구문 이전에는 색상을 계산하고 조정하려면 색상 채널을 맞춤 속성에 개별적으로 배치해야 했습니다. 이러한 제한사항으로 인해 HSL은 색상 조작의 기본 색상 함수로 지정되기도 했습니다. 색조, 채도, 밝기를 모두 calc()로 간단하게 조정할 수 있기 때문입니다.
상대 색상 구문 다음에 공간의 모든 색상을 CSS 한 줄로 해체하고 수정하고 색상으로 반환할 수 있습니다. 더 이상 HSL에 대한 제한이 없습니다. 원하는 색상 공간에서 조작이 가능하며, 조작을 용이하게 하기 위해 훨씬 적은 맞춤 속성을 만들 필요가 없습니다.
다음 구문 예에서는 기본 16진수가 제공되고 이를 기준으로 두 개의 새로운 색상이 생성됩니다. 첫 번째 색상 --absolute-change은 기본 색상에서 LCH로 새 색상을 만든 다음 크로마 (c)와 색조 (h)를 유지하면서 기본 색상의 밝기를 75%로 바꿉니다. 두 번째 색상 --relative-change는 기본 색상에서 LCH로 새 색상을 만들지만 이번에는 크로마 (c)를 20% 줄입니다.
.relative-color-syntax {
--color: #0af;
--absolute-change: lch(from var(--color) 75% c h);
--relative-change: lch(from var(--color) l calc(c-20%) h);
}
색상을 혼합하는 것과 비슷하지만 믹싱하기보다는 변경과 더 비슷합니다. 다른 색상에서 색상을 변환하여 사용된 색상 함수에서 이름이 지정된 3개의 채널 값에 액세스하고 이러한 채널을 조정할 수 있습니다. 이 색상 구문은 대체로 매우 멋지고 강력한 색상 구문입니다.
다음 데모에서는 상대 색상 구문을 사용하여 기본 색상의 더 밝은 변형과 어두운 변형을 만들고 color-contrast()를 사용하여 라벨의 대비가 적절한지 확인했습니다.
이 함수는 색상 팔레트 생성에도 사용할 수 있습니다. 다음은 제공된 기본 색상을 바탕으로 전체 팔레트가 생성되는 데모입니다. 이 단일 CSS 집합은 모든 다양한 팔레트를 구동하며, 각 팔레트는 단순히 다른 기반을 제공합니다. 보너스로 LCH를 사용했으니 이 색상 공간 덕분에 팔레트가 얼마나 가시적으로도 핫스팟이나 죽은 곳이 보이지 않는지 살펴보세요.
:root {
--_color-base: #339af0;
--color-0: lch(from var(--_color-base) 98% 10 h);
--color-1: lch(from var(--_color-base) 93% 20 h);
--color-2: lch(from var(--_color-base) 85% 40 h);
--color-3: lch(from var(--_color-base) 75% 46 h);
--color-4: lch(from var(--_color-base) 66% 51 h);
--color-5: lch(from var(--_color-base) 61% 52 h);
--color-6: lch(from var(--_color-base) 55% 57 h);
--color-7: lch(from var(--_color-base) 49% 58 h);
--color-8: lch(from var(--_color-base) 43% 55 h);
--color-9: lch(from var(--_color-base) 39% 52 h);
--color-10: lch(from var(--_color-base) 32% 48 h);
--color-11: lch(from var(--_color-base) 25% 45 h);
--color-12: lch(from var(--_color-base) 17% 40 h);
--color-13: lch(from var(--_color-base) 10% 30 h);
--color-14: lch(from var(--_color-base) 5% 20 h);
--color-15: lch(from var(--_color-base) 1% 5 h);
}
지금쯤이면 색상 공간과 다양한 색상 함수가 강점과 약점에 따라 다양한 용도로 어떻게 사용될 수 있는지 알 수 있을 것입니다.
자료
그라데이션 색상 공간
그라데이션 색 공간 이전에는 sRGB가 사용된 기본 색공간이었습니다. sRGB는 일반적으로 안정적이지만 회색 사각지대와 같은 몇 가지 약점이 있습니다.
그라데이션 색상 공간 다음에 색상 보간에 사용할 색 공간을 브라우저에 알립니다. 이렇게 하면 개발자와 디자이너가 선호하는 그라데이션을 선택할 수 있습니다. 기본 색상 공간도 sRGB가 아닌 LCH로 변경됩니다.
구문 추가는 그라데이션 방향 뒤에 이루어지고 새로운 in 구문을 사용하며 선택사항입니다.
background-image: linear-gradient(
to right in hsl,
black, white
);
background-image: linear-gradient(
to right in lch,
black, white
);
다음은 검은색에서 흰색으로의 기본적이고 필수적인 그라데이션입니다. 각 색공간에서 결과의 범위를 살펴보세요. 일부는 다른 것보다 더 빨리 짙은 검은색에 도달하고, 일부는 너무 늦게 흰색으로 희미해집니다.
다음 예에서는 검은색이 파란색으로 전환되었습니다. 그라데이션의 알려진 문제 공간이기 때문입니다. 대부분의 색상 공간은 색상 보간 중에 보라색으로 바뀝니다. 즉, 색상이 A 지점에서 B 지점으로 색상 공간 안으로 이동할 때 보라색으로 바뀝니다. 그라데이션은 A 지점에서 B 지점까지 직선을 따르므로 색상 공간의 모양에 따라 경로가 거치는 경유지가 크게 달라집니다.
더 자세한 탐색 분석, 예시, 의견은 이 Twitter 대화목록을 참고하세요.
자료
inert
inert 전에는 즉각적인 주의가 필요한 페이지 또는 앱의 영역으로 사용자의 초점을 안내하는 것이 좋았습니다. 이 안내 포커스 전략은 포커스 트래핑으로 알려졌습니다. 개발자가 대화형 공간에 포커스를 배치하고 포커스 변경 이벤트를 수신 대기하고 포커스가 대화형 공간을 벗어나면 다시 강제로 진입했기 때문입니다. 키보드 또는 스크린 리더 사용자는 대화형 공간으로 돌아가 계속 진행하기 전에 작업이 완료되었는지 확인할 수 있습니다.
inert 후에는 페이지 또는 앱의 전체 섹션을 고정하거나 보호할 수 있으므로 트래핑이 필요하지 않습니다. 문서의 해당 부분이 비활성 상태인 동안에는 클릭 및 포커스 변경 시도만 사용할 수 없습니다. 이를 함정이 아닌 경비원과 같이 생각할 수도 있습니다. 이 경우 inert는 사용자가 다른 장소를 이용하지 못하게 하는 대신 어딘가에 머무르게 하는 데 관심이 없습니다.
이에 관한 좋은 예는 JavaScript alert() 함수입니다.
이전 동영상에서 alert()가 호출될 때까지 페이지에 마우스와 키보드로 액세스할 수 있었던 방법을 살펴보세요. 알림 대화상자 팝업이 표시되면 페이지의 나머지 부분이 고정(inert)되었습니다. 사용자의 포커스가 알림 대화상자 내에 배치되고 다른 곳은 없습니다. 사용자가 알림 기능 요청을 상호작용하고 완료하면 페이지가 다시 대화형이 됩니다. inert를 사용하면 개발자가 이와 같이 안내된 포커스 환경을 쉽게 달성할 수 있습니다.
다음은 작동 방식을 보여주는 간단한 코드 샘플입니다.
<body>
<div class="modal">
<h2>Modal Title</h2>
<p>...<p>
<button>Save</button>
<button>Discard</button>
</div>
<main inert>
<!-- cannot be keyboard focused or clicked -->
</main>
</body>
대화상자는 좋은 예이지만 inert는 슬라이드 아웃 사이드 메뉴 사용자 환경과 같은 작업에도 유용합니다. 사용자가 사이드 메뉴를 슬라이드 아웃할 때 마우스나 키보드가 그 뒤에 있는 페이지와 상호작용하도록 해서는 안 됩니다. 이는 사용자에게 약간 까다롭습니다. 대신 사이드 메뉴가 표시될 때 페이지를 무효화합니다. 그러면 사용자가 사이드 메뉴 내에서 닫거나 탐색해야 하며, 열려 있는 메뉴를 사용하여 페이지의 다른 위치에서 길을 잃지 않습니다.
자료
COLRv1 글꼴
COLRv1 글꼴 이전에는 웹에 그라데이션 및 기본 색상 및 효과가 포함된 개방형 형식인 OT-SVG 글꼴이 있었습니다. 이러한 파일은 매우 커질 수 있으며 텍스트 수정은 허용하지만 맞춤설정의 범위가 많지 않았습니다.
COLRv1 글꼴 이후에는 웹에 더 작은 공간, 벡터 확장 가능, 재배치 가능, 그라데이션 피처링, 혼합 모드 지원 글꼴이 있으며 사용 사례별로 글꼴을 맞춤설정하거나 브랜드와 일치시키기 위한 매개변수를 허용합니다.
다음은 그림 이모티콘에 관한 Chrome 개발자 블로그 게시물의 예입니다. 그림 이모티콘의 글꼴 크기를 확대하면 선명하게 유지되지 않는다는 것을 눈치채셨을 수도 있습니다. 이미지이며 벡터 아트가 아닙니다. 애플리케이션에서 그림 이모티콘을 사용할 때 더 높은 품질의 애셋으로 대체되는 경우가 많습니다. COLRv1 글꼴을 사용하면 그림 이모티콘이 벡터이며 아름답습니다.
아이콘 글꼴은 맞춤 듀오톤 색상 팔레트 등을 제공하는 등 놀라운 기능을 제공합니다. COLRv1 글꼴을 로드하는 것은 다른 글꼴 파일과 같습니다.
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
COLRv1 글꼴 맞춤설정은 나중에 참조할 수 있도록 맞춤설정 옵션 집합을 번들로 그룹화하고 이름을 지정하는 데 사용되는 특별한 CSS 규칙인 @font-palette-values를 사용하여 실행됩니다. --로 시작하는 맞춤 이름을 맞춤 속성과 마찬가지로 지정하는 방법을 확인하세요.
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --colorized {
font-family: "Bungee Spice";
base-palette: 0;
override-colors: 0 hotpink, 1 cyan, 2 white;
}
--colorized를 맞춤설정의 별칭으로 사용하는 경우 마지막 단계는 색상 글꼴 모음을 사용하는 요소에 팔레트를 적용하는 것입니다.
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --colorized {
font-family: "Bungee Spice";
base-palette: 0;
override-colors: 0 hotpink, 1 cyan, 2 white;
}
.spicy {
font-family: "Bungee Spice";
font-palette: --colorized;
}
다양한 글꼴과 색상 글꼴을 사용할 수 있게 됨에 따라 웹 서체는 풍부한 맞춤설정과 창의적 표현으로 이어지는 대단한 길이 되고 있습니다.
자료
표시 영역 단위
새로운 표시 영역 변형이 출시되기 전에는 웹에서 표시 영역을 조정하는 데 도움이 되는 물리적 단위를 제공했습니다. 높이, 너비, 가장 작은 크기 (vmin), 가장 큰 면 (vmax)에 관한 하나가 있었습니다. 이러한 방법들은 여러 가지 측면에서 효과가 있었지만 모바일 브라우저의 경우 복잡성이 생겨났습니다.
모바일에서 페이지를 로드할 때 URL이 포함된 상태 표시줄이 표시되고 이 표시줄이 일부 표시 영역 공간을 사용합니다. 몇 초 동안 상호작용하고 나면 상태 표시줄이 사라져 사용자에게 더 큰 표시 영역 환경을 제공할 수 있습니다. 그러나 막대가 슬라이드 아웃되면 표시 영역 높이가 변경되고 타겟 크기가 변경되면 모든 vh 단위가 이동하고 크기가 조절됩니다.
몇 년 후에는 vh 단위는 특히 두 개의 표시 영역 크기 중 어느 것을 사용할 것인지 결정해야 했습니다. 이 때문에 휴대기기에서 시각적 레이아웃 문제가 발생할 수 있기 때문입니다. vh는 항상 가장 큰 표시 영역을 나타내는 것으로 확인되었습니다.
.original-viewport-units {
height: 100vh;
width: 100vw;
--size: 100vmin;
--size: 100vmax;
}
새로운 표시 영역 변형이 끝나면 작은, 큰, 동적 표시 영역 단위를 사용할 수 있게 되고 물리적 표시 단위에 논리적 등가 항목이 추가됩니다. 개발자와 디자이너는 주어진 시나리오에 사용할 단위를 선택할 수 있는 기능을 제공합니다. 상태 표시줄이 사라질 때 약간 거슬리는 레이아웃 변경은 문제가 되지 않을 수 있습니다. 그러면 dvh (동적 표시 영역 높이)를 걱정 없이 사용할 수 있습니다.
다음은 새로운 표시 영역 변형에서 사용할 수 있는 모든 새로운 표시 영역 단위 옵션의 전체 목록입니다.
.new-height-viewport-units {
height: 100vh;
height: 100dvh;
height: 100svh;
height: 100lvh;
block-size: 100vb;
block-size: 100dvb;
block-size: 100svb;
block-size: 100lvb;
}
.new-width-viewport-units {
width: 100vw;
width: 100dvw;
width: 100svw;
width: 100lvw;
inline-size: 100vi;
inline-size: 100dvi;
inline-size: 100svi;
inline-size: 100lvi;
}
.new-min-viewport-units {
--size: 100vmin;
--size: 100dvmin;
--size: 100svmin;
--size: 100lvmin;
}
.new-max-viewport-units {
--size: 100vmax;
--size: 100dvmax;
--size: 100svmax;
--size: 100lvmax;
}
이를 통해 개발자와 디자이너가 표시 영역 반응형 디자인을 구현하는 데 필요한 유연성을 확보할 수 있기를 바랍니다.
자료
:has()
:has() 전에는 선택기의 제목이 항상 맨 끝에 있었습니다. 예를 들어 이 선택기의 제목은 목록 항목입니다(ul > li). 유사 선택기는 선택기를 변경할 수 있지만 제목(ul > li:hover 또는 ul >
li:not(.selected))은 변경하지 않습니다.
:has() 후에는 요소 트리에서 더 높은 주체가 하위 요소에 관한 쿼리를 제공하는 동시에 주체로 유지될 수 있습니다(ul:has(> li)). 이 경우 선택기의 대상이 상위 요소이므로 :has()에 '상위 선택기'라는 일반적인 이름이 어떻게 사용되는지 쉽게 이해할 수 있습니다.
다음은 .parent 클래스가 제목으로 유지되지만 하위 요소에 .child 클래스가 있는 경우에만 선택된 기본 문법의 예입니다.
.parent:has(.child) {...}
다음은 <section> 요소가 주체이지만 하위 요소 중 하나에 :focus-visible가 있는 경우에만 선택기가 일치하는 예입니다.
section:has(*:focus-visible) {...}
:has() 선택기는 실용적인 사용 사례가 더 많아지면 멋진 유틸리티가 되기 시작합니다. 예를 들어 현재는 이미지를 래핑할 때 <a> 태그를 선택할 수 없으므로 이 사용 사례에서 스타일을 변경하는 방법을 앵커 태그에 교육하기가 어렵습니다. 하지만 :has()를 사용하면 가능합니다.
a:has(> img) {...}
모두 :has()가 상위 선택기처럼 보이는 예였습니다.
<figure> 요소 내부에 이미지를 사용하고 그림에 <figcaption>가 있다면 이미지의 스타일을 조정하는 사용 사례를 고려하세요. 다음 예에서는 ll이 있는 그림이 선택된 후 해당 컨텍스트 내의 이미지가 선택됩니다. 타겟팅하는 대상이 그림이 아니라 이미지이므로 :has()가 사용되며 주제를 변경하지 않습니다.
figure:has(figcaption) img {...}
조합은 끝이 없어 보입니다. :has()를 수량 쿼리와 결합하고 하위 요소 수에 따라 CSS 그리드 레이아웃을 조정합니다. :has()를 대화형 유사 클래스 상태와 결합하여 새롭고 창의적인 방식으로 응답하는 애플리케이션을 만듭니다.
지원 여부 확인은 @supports 및 selector() 함수를 사용하여 간단하게 확인할 수 있습니다. 이 함수는 브라우저를 사용하기 전에 브라우저가 구문을 이해하는지 테스트합니다.
@supports (selector(:has(works))) {
/* safe to use :has() */
}
자료
2022년 이후
2022년에도 이 모든 놀라운 기능이 출시된 후에도 어려운 일들이 많습니다. 다음 섹션에서는 남아 있는 몇 가지 문제와 이를 해결하기 위해 활발하게 개발되고 있는 솔루션을 살펴봅니다. 이러한 솔루션은 실험용이며 브라우저에서 플래그로 지정되거나 사용 가능할 수 있습니다.
다음 섹션의 결론은 나열된 문제에 대해 많은 회사들이 해결을 원하는 사람들이 있다는 것이 아니라 이러한 솔루션이 2023년에 출시된다는 것이 아닙니다.
느슨하게 입력한 맞춤 속성
CSS 맞춤 속성은 훌륭합니다. 이름이 지정된 변수 내에 모든 종류의 항목을 저장할 수 있으며, 변수를 확장, 계산, 공유 등의 작업을 수행할 수 있습니다. 사실 너무 유연해서 유연하지 않은 부분이 있으면 좋겠죠.
box-shadow가 값에 맞춤 속성을 사용하는 시나리오를 생각해 보세요.
box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);
이 모든 작업은 속성 중 하나가 CSS가 허용하지 않는 값(예: --x: red)으로 변경될 때까지 원활하게 작동합니다. 중첩된 변수 중 하나가 누락되었거나 잘못된 값 유형으로 설정된 경우 전체 그림자가 깨집니다.
여기서 @property가 사용됩니다. --x는 유형이 지정된 맞춤 속성이 될 수 있고, 더 이상 느슨하고 유연하지 않지만 일부 정의된 경계를 통해 안전합니다.
@property --x {
syntax: '<length>';
initial-value: 0px;
inherits: false;
}
이제 box-shadow에서 var(--x)를 사용하고 이후 --x: red가 시도될 때 <length>가 아니므로 red가 무시됩니다. 즉, 맞춤 속성 중 하나에 잘못된 값이 지정되더라도 그림자는 계속 작동합니다.
실패하는 대신 initial-value의 0px로 되돌아갑니다.
애니메이션
유형 안전성 외에도 애니메이션의 많은 가능성을 열어줍니다. CSS 구문의 유연성으로 인해 그라데이션과 같은 일부 작업을 불가능하게 만들 수 있습니다. 여기서 @property가 도움이 됩니다. 유형이 지정된 CSS 속성이 지나치게 복잡한 보간 내부에서 개발자의 의도를 브라우저에 알릴 수 있기 때문입니다. 브라우저가 이전에는 불가능했던 스타일의 요소에 애니메이션을 적용할 수 있도록 기본적으로 가능성 범위를 제한합니다.
이 데모 예에서는 방사형 그래디언트를 사용하여 오버레이의 일부를 만들어 스포트라이트 포커스 효과를 만듭니다. JavaScript는 Alt/opt 키를 누를 때 마우스 x와 y를 설정한 다음 초점 크기를 더 작은 값(예: 25%)으로 변경하여 마우스 위치에 스포트라이트 포커스 원을 만듭니다.
.focus-effect {
--focal-size: 100%;
--mouse-x: center;
--mouse-y: center;
mask-image: radial-gradient(
circle at var(--mouse-x) var(--mouse-y),
transparent 0%,
transparent var(--focal-size),
black 0%
);
}
하지만 그래디언트에는 애니메이션을 적용할 수 없습니다. 브라우저가 원하는 애니메이션 방식을 '추출'하기에는 너무 유연하고 너무 복잡합니다. 그러나 @property를 사용하면 한 속성을 개별적으로 입력하고 애니메이션 처리할 수 있으므로 브라우저가 인텐트를 쉽게 이해할 수 있습니다.
이 포커스 효과를 사용하는 비디오 게임은 항상 큰 원에서 아주 작은 원까지 원을 애니메이션합니다. 브라우저에서 그래디언트 마스크에 애니메이션을 적용할 수 있도록 데모와 함께 @property를 사용하는 방법은 다음과 같습니다.
@property --focal-size {
syntax: '<length-percentage>';
initial-value: 100%;
inherits: false;
}
.focus-effect {
--focal-size: 100%;
--mouse-x: center;
--mouse-y: center;
mask-image: radial-gradient(
circle at var(--mouse-x) var(--mouse-y),
transparent 0%,
transparent var(--focal-size),
black 0%
);
transition: --focal-size .3s ease;
}
이제 브라우저에서 그래디언트 크기에 애니메이션을 적용할 수 있습니다. 브라우저에서 지능적으로 길이를 보간할 수 있도록 수정의 표면 영역을 단 하나의 속성으로 줄이고 값을 입력했기 때문입니다.
@property로 훨씬 더 많은 작업을 할 수 있지만 이러한 작은 기능을 통해 큰 효과를 거둘 수 있습니다.
자료
min-width 또는 max-width에 있었음
미디어 쿼리 범위 전에 CSS 미디어 쿼리는 min-width 및 max-width를 사용하여 조건을 표현합니다. 다음과 같이 표시될 수 있습니다.
@media (min-width: 320px) {
…
}
미디어 쿼리 범위를 지정한 후에는 동일한 미디어 쿼리가 다음과 같이 표시될 수 있습니다.
@media (width >= 320px) {
…
}
min-width 및 max-width를 모두 사용하는 CSS 미디어 쿼리는 다음과 같습니다.
@media (min-width: 320px) and (max-width: 1280px) {
…
}
미디어 쿼리 범위를 지정한 후에는 동일한 미디어 쿼리가 다음과 같이 표시될 수 있습니다.
@media (320px <= width <= 1280px) {
…
}
코딩 배경에 따라 둘 중 하나가 다른 것보다 훨씬 읽기 쉽습니다. 사양 추가 기능 덕분에 개발자는 원하는 것을 선택하거나 서로 바꿔서 사용할 수 있습니다.
자료
미디어 쿼리 변수 없음
@custom-media 이전에는 미디어 쿼리가 계속해서 반복되거나 전처리기를 사용하여 빌드 시간 동안 정적 변수를 기반으로 적절한 출력을 생성해야 했습니다.
@custom-media 이후 CSS는 맞춤 속성과 마찬가지로 미디어 쿼리의 별칭 지정 및 참조를 허용합니다.
이름을 지정하는 것은 매우 중요합니다. 용도를 구문에 일치시켜 더 쉽게 공유하고 팀에서 사용할 수 있습니다. 다음은 프로젝트 간에 따라가는 몇 가지 맞춤 미디어 쿼리입니다.
@custom-media --OSdark (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);
@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse (hover) and (pointer: fine);
@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);
이제 정의되었으므로 다음과 같이 그 중 하나를 사용할 수 있습니다.
@media (--OSdark) {
:root {
…
}
}
CSS 맞춤 속성 라이브러리 Open Props 내에서 사용하는 맞춤 미디어 쿼리의 전체 목록을 찾습니다.
자료
중첩 선택기가 매우 유용함
@nest 전에는 스타일시트가 많이 반복되었습니다. 선택기가 길고 각각이 작은 차이를 타겟팅하면 특히 관리가 힘들어졌습니다. 중첩의 편의성은 전처리기를 채택하는 가장 일반적인 이유 중 하나입니다.
@nest 후에는 반복이 사라집니다. 전처리기 지원 중첩의 거의 모든 기능을 CSS에서 기본적으로 사용할 수 있습니다.
article {
color: darkgray;
}
article > a {
color: var(--link-color);
}
/* with @nest becomes */
article {
color: darkgray;
& > a {
color: var(--link-color);
}
}
중첩 선택기에서 article를 반복하지 않는 것 외에 가장 중요한 점은 스타일 지정 컨텍스트가 하나의 스타일 블록 내에 유지된다는 점입니다.
한 선택기와 그 스타일에서 스타일이 있는 다른 선택기 (예 1)로 이동하는 대신 독자는 기사의 컨텍스트 내에 머무르며 기사 내부의 링크를 소유하고 있는 것을 확인할 수 있습니다. 관계와 스타일 인텐트는 함께 번들로 묶여 있으므로 article가 자체 스타일을 소유하는 것처럼 보입니다.
소유권은 중앙 집중화라고 볼 수도 있습니다. 스타일시트에서 관련 스타일을 찾는 대신 컨텍스트 내에 모두 중첩된 스타일을 찾을 수 있습니다. 이는 상위 대 하위 관계뿐만 아니라 하위 요소 간 관계에서도 작동합니다.
스타일을 소유하고 하위 요소를 변경하는 상위 요소가 아닌 다른 상위 컨텍스트에서 자체적으로 조정하려는 구성요소 하위 요소를 생각해 보세요.
/* parent owns this, adjusting children */
section:focus-within > article {
border: 1px solid hotpink;
}
/* with @nest becomes */
/* article owns this, adjusting itself when inside a section:focus-within */
article {
@nest section:focus-within > & {
border: 1px solid hotpink;
}
}
@nest는 보다 건강한 스타일의 구성, 중앙 집중화, 소유권으로 전반적으로 도움을 줍니다. 구성요소는 다른 스타일 블록에 분산하는 대신 자체 스타일을 그룹화하고 소유할 수 있습니다. 이 예에서는 작게 보일 수 있지만 편의성과 가독성 측면에서 매우 큰 영향을 미칠 수 있습니다.
자료
스타일 범위 지정은 정말 어렵습니다.
브라우저 지원
- 118
- 118
- x
- 17.4
@scope 이전에는 CSS의 스타일이 하위로 전파되고 상속되며 기본적으로 전역적으로 범위가 지정되었기 때문에 다양한 전략이 있었습니다. CSS의 이러한 기능은 여러 가지 측면에서 매우 편리하지만, 잠재적으로 다양한 구성요소 스타일을 가진 복잡한 사이트와 애플리케이션의 경우 캐스케이드의 전역 공간과 특성으로 인해 스타일이 새는 것처럼 느껴질 수 있습니다.
@scope 후에는 클래스와 같은 컨텍스트 내에서만 스타일 범위를 지정할 수 있을 뿐만 아니라 스타일이 끝나는 위치를 설명할 수 있고 계속해서 하위로 전파되거나 상속되지 않습니다.
다음 예에서는 BEM 이름 지정 규칙 범위를 실제 인텐트로 바꿀 수 있습니다. BEM 선택기는 이름 지정 규칙을 사용하여 header 요소의 색상 범위를 .card 컨테이너로 지정하려고 합니다. 헤더에 이 클래스 이름이 있어야 목표를 완료할 수 있습니다. @scope를 사용하면 헤더 요소를 마크업하지 않고 동일한 목표를 완료하기 위해 이름 지정 규칙이 필요하지 않습니다.
.card__header {
color: var(--text);
}
/* with @scope becomes */
@scope (.card) {
header {
color: var(--text);
}
}
다음은 CSS의 전역 범위 특성에 관한 또 다른 예입니다. 스타일 시트 내에 어두운 테마와 밝은 테마가 공존해야 하며, 최적의 스타일을 결정하는 데 순서가 중요합니다. 일반적으로 이는 어두운 테마 스타일이 밝은 테마 뒤에 온다는 것을 의미합니다. 이렇게 하면 밝은 테마가 기본값으로 설정되고 어두운 테마가 선택적 스타일로 설정됩니다. @scope를 사용하여 순서 지정 및 범위 경합을 피합니다.
@scope (.light-theme) {
a { color: purple; }
}
@scope (.dark-theme) {
a { color: plum; }
}
여기서 스토리를 완성하기 위해 @scope는 스타일 범위가 끝나는 위치 설정도 허용합니다. 이 작업은 이름 지정 규칙이나 전처리기로 실행할 수 없습니다. 이는 브라우저에 내장된 CSS만이 할 수 있는 특별한 작업입니다. 다음 예에서 img 및 .content 스타일은 .media-block의 하위 요소가 .content의 형제 또는 상위 요소일 때 배타적으로 적용됩니다.
@scope (.media-block) to (.content) {
img {
border-radius: 50%;
}
.content {
padding: 1em;
}
}
자료
석조물 레이아웃에 CSS 방법이 없음
그리드를 사용한 CSS 석조물 이전에는 열이나 Flexbox가 있는 CSS 메서드가 콘텐츠 순서를 잘못 나타내므로 JavaScript가 석조 레이아웃을 달성하는 데 가장 좋은 방법이었습니다.
그리드를 사용한 CSS 석조 후에는 JavaScript 라이브러리가 필요하지 않으며 콘텐츠 순서가 올바릅니다.
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/
앞의 데모는 다음 CSS를 사용하여 구현합니다.
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
이 기능이 레이아웃 전략으로 레이더에 오르고 있다는 점을 믿고 안심할 수 있으며 지금 Firefox에서 사용해 볼 수도 있습니다.
자료
CSS는 사용자의 데이터 감소를 도울 수 없습니다
prefers-reduced-data 미디어 쿼리 전에는 자바스크립트와 서버가 사용자의 운영체제 또는 브라우저의 '데이터 절약 모드' 옵션에 따라 동작을 변경할 수 있었지만 CSS는 그렇게 할 수 없었습니다.
prefers-reduced-data 미디어 쿼리 후 CSS는 사용자 환경 향상에 조인하고 데이터 저장에 중요한 역할을 할 수 있습니다.
@media (prefers-reduced-data: reduce) {
picture, video {
display: none;
}
}
위의 CSS는 이 미디어 스크롤 구성요소에서 사용되며 크게 절약할 수 있습니다. 방문하는 표시 영역의 크기에 따라 페이지 로드 시 더 많은 비용을 절약할 수 있습니다. 저장은 사용자가 미디어 스크롤러와 상호작용할 때 계속됩니다. 이미지에는 모두 loading="lazy" 속성이 있으며, 요소를 완전히 숨기는 CSS와 함께 이미지에 대한 네트워크 요청이 발생하지 않습니다.
제 테스트에서는 중간 크기의 표시 영역에서 초기 요청 40개와 리소스 700KB를 로드했습니다. 사용자가 미디어 선택을 스크롤하면 더 많은 요청과 리소스가 로드됩니다. CSS와 줄어든 데이터 미디어 쿼리를 사용하면 10개의 요청과 172kb의 리소스가 로드됩니다. 0.5MB가 절약되며 사용자는 미디어를 스크롤조차 하지 않은 것이며, 이 시점에는 추가 요청이 발생하지 않습니다.
이렇게 줄어든 데이터 환경에서는 단순히 데이터를 절약할 수 있는 것보다 더 많은 장점이 있습니다. 더 많은 제목을 볼 수 있으며 주의를 산만하게 하는 표지 이미지가 표시되지 않습니다. 많은 사용자가 데이터 절약 모드로 탐색합니다. 데이터 1MB당 비용을 지불하기 때문입니다. CSS에서 도움을 드릴 수 있다는 점은 정말 반가운 일입니다.
자료
- prefers-reduced-data 사양
- MDN의prefers-reduced-data
- GUI 챌린지에서prefers-reduced-data
- Smashing Magazine: 코어 웹 바이탈 개선, 스매싱 잡지 사례 연구
스크롤 맞추기 기능이 너무 제한적입니다.
스크롤 맞추기 제안을 하기 전에는 모든 관찰자와 상태 관리를 통해 자체 JavaScript를 작성하여 캐러셀, 슬라이더 또는 갤러리를 관리하기가 급격히 복잡해질 수 있었습니다. 또한 주의하지 않으면 자연스러운 스크롤 속도가 스크립트에 의해 정규화될 수 있으므로 사용자 상호작용이 약간 부자연스럽고 투박하게 느껴질 수 있습니다.
새로운 API
snapChanging()
브라우저에서 스냅 하위 요소를 해제하는 즉시 이 이벤트가 실행됩니다. 이렇게 하면 맞추기 하위 요소가 없고 스크롤러의 확정되지 않은 맞추기 상태를 UI에서 반영할 수 있습니다. 스크롤러가 현재 사용되고 있고 새로운 위치에 배치되기 때문입니다.
document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
console.log('Snap is changing', event.snappedTargetsList);
});
snapChanged()
브라우저가 새 하위 요소에 맞춰지고 스크롤러가 정지되는 즉시 이 이벤트가 실행됩니다. 이렇게 하면 맞춰진 하위 요소에 종속된 모든 UI가 업데이트되고 연결을 반영합니다.
document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
console.log('Snap changed', event.snappedTargetsList);
});
scroll-start
스크롤이 맨 처음에 시작되는 것은 아닙니다. 왼쪽이나 오른쪽으로 스와이프하면 다른 이벤트가 트리거되는 스와이프 가능한 구성요소나 페이지 로드 시 맨 위로 스크롤할 때까지 처음에는 검색창이 숨겨져 있는 것도 고려해 보세요. 이 CSS 속성을 통해 개발자는 스크롤러가 특정 지점에서 시작되도록 지정할 수 있습니다.
:root { --nav-height: 100px }
.snap-scroll-y {
scroll-start-y: var(--nav-height);
}
:snap-target
이 CSS 선택자는 현재 브라우저에 의해 맞춰진 스크롤 맞추기 컨테이너의 요소와 일치시킵니다.
.card {
--shadow-distance: 5px;
box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
transition: box-shadow 350ms ease;
}
.card:snapped {
--shadow-distance: 30px;
}
이러한 스크롤 맞추기 제안 후에는 브라우저에서 작업의 편의성을 제공하므로 관찰자 및 스크롤 조정 코드를 없애고 내장 API를 사용하므로 슬라이더, 캐러셀 또는 갤러리를 훨씬 쉽게 만들 수 있습니다.
이러한 CSS 및 JS 기능은 아직 초기 단계이지만 조만간 채택 및 테스트에 도움이 될 수 있는 polyfill을 기대해 주세요.
자료
알려진 상태 간 순환
toggle() 전에는 브라우저에 내장된 상태만 스타일 지정과 상호작용에 이미 활용할 수 있었습니다. 예를 들어 체크박스 입력에는 CSS가 요소를 시각적으로 변경하는 데 사용할 수 있는 입력의 내부 관리 브라우저 상태인 :checked가 있습니다.
toggle() 후에는 CSS의 모든 요소에서 맞춤 상태를 만들어 변경하고 스타일 지정에 사용할 수 있습니다. 그룹, 자전거 타기, 방향 전환 등의 기능을 사용할 수 있습니다.
다음 예에서는 완료 시 목록 항목 취소선과 동일한 효과를 적용하지만 체크박스 요소는 없습니다.
<ul class='ingredients'>
<li>1 banana
<li>1 cup blueberries
...
</ul>
관련 CSS toggle() 스타일:
li {
toggle-root: check self;
}
li:toggle(check) {
text-decoration: line-through;
}
상태 머신에 익숙하다면 toggle()와의 크로스오버가 얼마나 되는지 알 수 있습니다. 이 기능을 통해 개발자는 더 많은 상태를 CSS에 빌드할 수 있으므로 상호작용과 상태를 조정하는 더 명확하고 의미 있는 방법이 될 수 있습니다.
자료
select 요소 맞춤설정
<selectmenu> 이전에는 CSS에 풍부한 HTML을 사용하여 <option> 요소를 맞춤설정하거나 옵션 목록 표시와 관련하여 많은 부분을 변경하는 기능이 없었습니다.
이로 인해 개발자는 <select>의 기능 대부분을 다시 만든 외부 라이브러리를 로드하게 되었고, 결국 많은 작업이 필요했습니다.
<selectmenu> 이후 개발자는 접근성 요구사항을 충족하고 시맨틱 HTML을 제공하는 동시에 옵션 요소에 리치 HTML을 제공하고 필요한 만큼 스타일을 지정할 수 있습니다.
<selectmenu> 설명 페이지에서 가져온 다음 예에서는 몇 가지 기본 옵션과 함께 새로운 선택 메뉴가 생성됩니다.
<selectmenu>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</selectmenu>
CSS는 요소의 일부분을 타겟팅하고 스타일을 지정할 수 있습니다.
.my-select-menu::part(button) {
color: white;
background-color: red;
padding: 5px;
border-radius: 5px;
}
.my-select-menu::part(listbox) {
padding: 10px;
margin-top: 5px;
border: 1px solid red;
border-radius: 5px;
}
웹 실험 플래그를 사용 설정한 상태로 Canary의 Chromium에서 <selectmenu> 요소를 사용해 볼 수 있습니다. 2023년 이후부터 맞춤설정 가능한 선택 메뉴 요소에 주목하세요.
자료
요소를 다른 요소에 고정
anchor() 이전에는 절대 위치 및 상대 위치가 개발자에게 상위 요소 내에서 하위 요소가 이동하도록 제공하는 위치 전략이었습니다.
anchor() 후에는 개발자가 하위 요소인지 여부와 관계없이 요소를 다른 요소에 배치할 수 있습니다. 또한 개발자는 배치할 가장자리와 요소 간 위치 관계를 만들기 위한 기타 기능을 지정할 수 있습니다.
자세히 알아보고 싶다면 이 설명에서 몇 가지 훌륭한 예와 코드 샘플을 제공합니다.