최신 CSS의 몇 가지 흥미로운 기능을 소개합니다.
현재 CSS에는 많은 흥미로운 일들이 일어나고 있습니다. 그 중 다수는 이미 오늘날의 브라우저에서 지원됩니다. CDS 2019의 강연을 시청하실 수 있습니다. 관심을 가질 만한 몇 가지 새로운 기능 및 출시 예정 기능을 소개합니다.
이 게시물에서는 지금 바로 사용할 수 있는 기능인 그러니 이 동영상에서 다룬 에서 Houdini와 같은 출시 예정 기능에 관해 자세히 알아보세요. 또한 CSS@CDS 페이지
목차
스크롤 스냅
스크롤 맞추기를 사용하면 사용자가 콘텐츠를 세로, 가로 또는 둘 다로 스크롤할 때 맞추기 지점을 정의할 수 있습니다. 스크롤 관성 및 감속이 내장되어 있으며 터치가 지원됩니다.
이 샘플 코드는 하위 <picture> 요소의 왼쪽에 정렬된 맞추기 포인트가 있는 <section> 요소에서 가로 스크롤을 설정합니다.
section {
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
}
section > picture {
scroll-snap-align: start;
}
방법은 다음과 같습니다.
- 상위
<section>요소에서 <ph type="x-smartling-placeholder">- </ph>
- 가로 스크롤을 허용하도록
overflow-x를auto로 설정합니다. overscroll-behavior-x를contain로 설정하여 사용자가<section>요소의 스크롤 영역 경계에 도달할 때 상위 요소가 스크롤되는 것을 방지합니다. 맞추기에 반드시 필요한 것은 아니지만 일반적으로 사용하면 좋습니다.- 가로 맞추기의 경우
scroll-snap-type를x로 설정하고(가로 맞추기의 경우)mandatory로 설정하여 표시 영역이 항상 가장 가까운 맞추기 지점에 맞춰지도록 합니다.
- 가로 스크롤을 허용하도록
- 하위
<picture>요소에서scroll-snap-align는 시작으로 설정되어 각 사진의 왼쪽에 맞추기 지점을 설정합니다 (direction가ltr로 설정되었다고 가정).
다음은 라이브 데모입니다.
<ph type="x-smartling-placeholder">세로 스크롤 스냅 및 매트릭 스크롤 스냅의 데모도 살펴볼 수 있습니다.
:focus-within
:focus-within는 오래된 접근성 문제를 해결합니다. 보조 기술 사용자가 UI에 액세스할 수 있도록 하위 요소에 포커스를 맞추면 상위 요소의 표시에 영향을 주어야 하는 경우가 많습니다.
예를 들어 여러 항목이 포함된 드롭다운 메뉴가 있는 경우 모든 항목에 포커스가 있는 동안 메뉴가 계속 표시되어야 합니다. 그렇지 않으면 키보드 사용자에게 메뉴가 사라집니다.
:focus-within는 포커스가 지정된 요소의 하위 요소에 있을 때 스타일을 적용하도록 브라우저에 지시합니다. 메뉴 예시로 돌아가면 메뉴 요소에 :focus-within를 설정하여 메뉴 항목에 포커스가 있을 때 메뉴가 계속 표시되도록 할 수 있습니다.
.menu:focus-within {
display: block;
opacity: 1;
visibility: visible;
}
아래 데모에서 포커스 가능한 요소를 탭으로 이동해 보세요. 메뉴 항목에 포커스를 맞추어도 메뉴는 계속 표시됩니다.
<ph type="x-smartling-placeholder">미디어 쿼리 수준 5
새 미디어 쿼리는 사용자의 기기 환경설정에 따라 앱의 사용자 환경을 조정할 수 있는 강력한 방법을 제공합니다. 기본적으로 브라우저는 prefers-* 그룹의 미디어 쿼리를 사용하여 CSS에서 응답할 수 있는 시스템 수준 환경설정의 프록시 역할을 합니다.
다음은 개발자가 가장 관심을 가질 만한 새로운 쿼리입니다.
이러한 쿼리는 접근성 측면에서 큰 도움이 됩니다. 이전에는 사용자가 OS를 고대비 모드로 설정했다는 것을 알 수 있는 방법이 없었습니다. 브랜드에 충실한 웹 앱을 위해 고대비 모드를 제공하려면 사용자에게 앱 내의 UI에서 해당 모드를 선택하도록 요청해야 했습니다. 이제 prefers-contrast를 사용하여 OS에서 고대비 설정을 감지할 수 있습니다.
이러한 미디어 쿼리의 흥미로운 의미 중 하나는 다양한 사용자 환경설정과 접근성 요구사항을 수용하기 위해 시스템 수준 사용자 환경설정의 여러 조합을 설계할 수 있다는 것입니다. 사용자가 어두운 환경에서 고대비 어두운 모드를 원하는 경우 그렇게 할 수 있습니다.
Adam에게는 '작은 움직임을 선호'한다는 점이 중요합니다. '모션 없음'으로 구현되지 않습니다. 사용자는 애니메이션이 필요하지 않고 더 적은 움직임을 선호한다고 말합니다. 그는 감소된 움직임이 움직임이 없다고 어설션합니다. 다음은 사용자가 모션 감소를 원할 때 크로스페이드 애니메이션을 사용하는 예입니다.
<ph type="x-smartling-placeholder">논리적 속성
논리적 속성은 더 많은 개발자가 국제화에 도전함에 따라 드러나는 문제를 해결합니다. margin 및 padding와 같은 많은 레이아웃 속성은 위에서 아래로, 왼쪽에서 오른쪽으로 읽는 언어를 가정합니다.
다양한 쓰기 모드를 사용하는 여러 언어로 페이지를 디자인할 때 개발자는 여러 요소에 걸쳐 이러한 모든 속성을 개별적으로 조정해야 했습니다. 이는 곧 유지관리의 악몽이 됩니다.
논리적 속성을 사용하면 변환 및 쓰기 모드에서 레이아웃 무결성을 유지할 수 있습니다. 공간적 배열이 아닌 콘텐츠의 의미 체계 순서에 따라 동적으로 업데이트됩니다. 논리 속성을 사용하면 각 요소에는 다음과 같은 두 개의 차원이 있습니다.
- 블록 크기는 선의 텍스트 흐름과 수직을 이룹니다. (영어에서
block-size는height와 동일합니다.) - 인라인 크기는 선 내 텍스트의 흐름과 평행을 이룹니다. (영어에서
inline-size는width와 동일합니다.)
이러한 측정기준 이름은 모든 논리 레이아웃 속성에 적용됩니다. 예를 들어 영어에서 block-start는 top와 같고 inline-end는 right와 동일합니다.
논리 속성을 사용하면 개별 요소에서 수십 개의 레이아웃 속성을 업데이트하는 대신 페이지의 writing-mode 및 direction 속성만 변경하면 다른 언어의 레이아웃을 자동으로 업데이트할 수 있습니다.
<body> 요소의 writing-mode 속성을 다른 값으로 설정하여 아래 데모에서 논리 속성이 작동하는 방식을 확인할 수 있습니다.
position: sticky
position: sticky가 있는 요소는 화면에서 벗어나기 시작할 때까지 블록 흐름에 유지됩니다.
이때 페이지의 나머지 부분과 함께
요소의 top 값으로 지정된 위치를 유지합니다.
해당 요소에 할당된 공간은 흐름에 남아 있지만,
그리고 사용자가 다시 위로 스크롤하면 요소가 그 요소로 돌아옵니다.
고정 위치를 사용하면 이전에는 JavaScript가 필요했던 여러 유용한 효과를 만들 수 있습니다. 몇 가지 가능성을 보여드리기 위해 몇 가지 데모를 만들었습니다. 각 데모는 대체로 동일한 CSS를 사용하며 HTML 마크업을 약간만 조정하여 각 효과를 생성합니다.
고정 스택
이 데모에서 모든 고정 요소는 동일한 컨테이너를 공유합니다. 즉, 사용자가 아래로 스크롤하면 각 고정 요소가 이전 고정 요소 위로 슬라이드됩니다. 고정 요소는 동일한 고정 위치를 공유합니다.
고정 슬라이드
여기서 고정 요소는 사촌입니다. 즉, 부모는 형제자매입니다. 고정 요소가 컨테이너의 하단 경계에 도달하면 고정 요소가 컨테이너를 따라 위로 이동하여 낮은 고정 요소가 높은 고정 요소를 위로 밀어내는 것처럼 보입니다. 다시 말해, 광고가 중단된 위치를 두고 경쟁하는 것처럼 보입니다.
스티키 데스페라도
고정 슬라이드와 마찬가지로 이 데모의 고정 요소는 사촌입니다. 그러나 2열 그리드 레이아웃으로 설정된 컨테이너에 배치되었습니다.
backdrop-filter
backdrop-filter 속성을 사용하면 요소 자체가 아닌 요소 뒤에 있는 영역에 그래픽 효과를 적용할 수 있습니다. 이를 통해 이전에는 한 줄의 CSS로 수행할 수 있었던 복잡한 CSS 및 JavaScript 해킹을 통해서만 달성할 수 있었던 멋진 효과를 많이 만들어낼 수 있습니다.
예를 들어 이 데모에서는 backdrop-filter를 사용하여 OS 스타일의 블러를 구현합니다.
이미 backdrop-filter에 관한 유용한 게시물이 있으므로 거기로 이동하여 자세한 내용을 확인하세요.
:is()
:is() 의사 클래스는 실제로 10년이 넘었지만 여전히 필요한 만큼 많이 사용되지는 않습니다. 이 함수는 쉼표로 구분된 선택자 목록을 인수로 취하여 해당 목록에 있는 모든 선택자와 일치시킵니다. 이러한 유연성은 매우 편리하며 배송하는 CSS의 양을 크게 줄일 수 있습니다.
간단한 예 보기:
button.focus,
button:focus {
…
}
article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
…
}
/* selects the same elements as the code above */
button:is(.focus, :focus) {
…
}
article > :is(h1,h2,h3,h4,h5,h6) {
…
}
gap
한동안 CSS 그리드 레이아웃에 gap (이전의 grid-gap)가 사용되었습니다. gap는 하위 요소 주위의 간격 대신 포함된 요소의 내부 간격을 지정하여 여러 일반적인 레이아웃 문제를 해결합니다. 예를 들어 간격이 있는 경우 하위 요소의 여백으로 인해 포함된 요소의 가장자리 주위에 원치 않는 공백이 발생하는 것을 걱정할 필요가 없습니다.
더 좋은 소식은 gap가 Flexbox로 출시되어 그리드와 동일한 간격 혜택을 제공합니다.
- 공백 선언은 여러 개가 아니라 하나만 있습니다.
- 프로젝트에 간격이 필요한 하위 요소에 대한 규칙을 설정할 필요는 없습니다. 대신 포함된 요소가 간격을 소유합니다.
- 코드는 입체부엉이와 같은 오래된 전략보다 더 쉽게 이해할 수 있습니다.
다음 동영상은 두 요소(그리드 레이아웃과 플렉스 레이아웃)에 단일 gap 속성을 사용하는 이점을 보여줍니다.
현재 FireFox만 Flex 레이아웃에서 gap를 지원하지만 다음 데모를 통해 어떻게 작동하는지 확인해 보세요.
CSS 후디니
Houdini는 맞춤 CSS를 해석하는 방법을 브라우저에 알려줄 수 있는 브라우저 렌더링 엔진용 하위 수준 API 집합입니다. 즉, CSS 객체 모델에 액세스하여 JavaScript를 통해 CSS를 확장할 수 있습니다. 이렇게 하면 다음과 같은 몇 가지 장점이 있습니다.
- 이 도구를 사용하면 훨씬 더 강력한 기능으로 맞춤 CSS 기능을 만들 수 있습니다.
- 렌더링 문제를 애플리케이션 로직과 분리하는 것이 더 쉽습니다.
- 브라우저가 더 이상 스크립트를 파싱할 필요가 없고 두 번째 렌더링 주기를 수행할 필요가 없으므로 현재 JavaScript로 수행하는 CSS 폴리필보다 성능이 우수합니다. Houdini 코드는 첫 번째 렌더링 주기에서 파싱됩니다.
Houdini는 여러 API를 포괄하는 이름입니다. 판매자 및 기업의 현재 상태에 대해 자세히 알아보려면 Is Houdini Ready 아직?을 살펴보세요. 이번 강연에서는 Properties and Values API, Paint API, Animation Worklet에 관해 다뤘습니다. 현재 가장 지원되기 때문입니다. 각각의 흥미로운 API에 대한 전체 게시물을 쉽게 다룰 수 있겠지만, 지금은 개요와 API로 할 수 있는 작업을 이해하는 데 도움이 되는 멋진 데모를 확인해 보세요.
오버플로
머지않아 논의하고자 했던 것들이 조금 더 많아졌지만 심도 있게 다룰 시간이 없어 빠르게 살펴보았습니다. 해당 기능에 대해 아직 모르셨다면 강연의 마지막 부분을 꼭 확인해 보세요. ⚡
size: 높이와 너비를 동시에 설정할 수 있는 속성aspect-ratio: 본질적으로 가로세로 비율이 없는 요소의 가로세로 비율을 설정하는 속성min(),max(),clamp(): 너비와 높이뿐만 아니라 모든 CSS 속성에 숫자 제약 조건을 설정할 수 있는 함수입니다.list-style-type: 기존 속성이지만 곧 그림 이모티콘과 SVG를 포함한 더 광범위한 값을 지원할 예정입니다.display: outer inner: 곧display속성에 두 개의 매개변수가 허용되므로inline-flex와 같은 복합 키워드를 사용하는 대신 외부 및 내부 레이아웃을 명시적으로 지정할 수 있습니다.- CSS 영역: 콘텐츠가 정사각형이 아닌 지정된 영역을 채울 수 있도록 합니다.
- CSS 모듈: JavaScript는 CSS 모듈을 요청하고 사이트에서 작업을 쉽게 수행할 수 있는 풍부한 객체를 다시 가져올 수 있습니다.