2022년에 기대되는 새로운 CSS 기능
게시 됨: 2022-07-07잘 알려지지 않은 스크롤 스냅 속성부터 놀라운 새 색상 팔레트에 이르기까지 놓치지 말아야 할 몇 가지 CSS 스타일 시트 업데이트가 있습니다.
CSS(Cascading Style Sheets)는 1996년에 데뷔했으며 여전히 웹 개발 스택의 중요하고 진화하는 구성 요소입니다. CSS는 다른 살아있는 언어와 마찬가지로 실제 관행에 따라 항상 새로운 기능을 추가하고 있습니다. 급속한 발전으로 인해 헌신적인 개발자라도 새로운 기능을 놓칠 수 있습니다. 가까운 장래에 CSS에 제공될 가장 유용한 기능을 확인하십시오.
서브 그리드
CSS는 처음부터 수많은 심각한 결함으로 인해 비판을 받아 왔습니다. CSS에서 무언가를 중앙에 배치하는 것과 같은 몇 가지 간단한 작업은 지나치게 복잡한 해결 방법과 finagling을 필요로 합니다.
또 다른 중요한 문제는 적어도 CSS 그리드 레이아웃 모듈이 개입할 때까지 합리적인 그리드 레이아웃을 달성하는 것이었습니다.
그리드 레이아웃은 display: grid 선언으로 표시되며 2차원에서 그리드를 제어하면서 직사각형 레이아웃을 정의할 수 있다는 점에서 Flexbox와 유사합니다.
연구에 따르면 대부분의 CSS 개발자는 그리드 레이아웃을 알고 있으며 우리 중 많은 사람들이 사용합니다. (아직 안해보셨다면 잊지마세요!)
Subgrid는 Grid Layout 모듈을 위한 새롭고 매우 유용한 기능입니다. 하위 격자 기능을 사용하면 상위 격자의 레이아웃을 상속할 하위 격자를 생성할 수 있습니다.
그리드 디스플레이를 다른 그리드 디스플레이에 중첩하는 것과 달리 자식 그리드는 자체 차원과 간격을 정의합니다. 부모의 레이아웃은 하위 격자를 사용할 때 하위 격자에 적용되지만 필요한 경우 하위 격자는 여전히 레이아웃의 측면을 재정의할 수 있습니다.
Subgrid는 현재 Firefox 71 이상에서만 사용할 수 있지만 Safari WebKit, Google Chrome 및 Microsoft Edge용으로 계획되어 있습니다. Subgrid는 미래에 매우 유용한 레이아웃 기능이 될 것입니다.
액센트 컬러
인기에도 불구하고 일부 디스플레이 요소는 스타일 지정이 어렵기로 악명이 높습니다. 예를 들어 체크박스와 라디오 버튼은 브라우저의 구현을 숨기면서 동작을 모방하는 맞춤형 위젯으로 자주 대체됩니다. 새로운 CSS 액센트 색상 옵션을 사용하여 이러한 요소를 대상으로 지정할 수 있습니다.
예를 들어, 목록 1에 표시된 것처럼 페이지의 모든 라디오 버튼에 마젠타 색상을 적용할 수 있습니다(이 라이브 예제 참조).
목록 1: 라디오 버튼에 대한 CSS 색상 제어
<style> input[type="radio"] { accent-color: magenta; } </style> <form action="/foo.bar" > <p> Select your favorite outdoor adventure type </p> <input type="radio" name="type" value="mountain" > <label for="mountain" > Mountain </label><br> <input type="radio" name="type" value="ocean" > <label for="ocean" > Ocean </label><br> <input type="radio" name="type" value="desert" > <label for="desert" > Desert </label> </form>스크롤 스냅
CSS는 웹 브라우저에서 스크롤 스냅 동작을 제어하기 위한 편리한 속성 세트를 제공합니다. 이러한 기능 중 상당수는 이미 최신 브라우저 버전에서 사용할 수 있으며 다른 기능은 아직 출시되고 있습니다.
CSS 사용자의 3분의 1 이상이 여전히 스크롤 스냅을 인식하지 못한다는 점은 주목할 가치가 있습니다.
scroll-snap-* 속성 명령은 컨테이너에서 스크롤 위치가 작동하는 방식을 미세 조정하기 위한 여러 옵션을 제공합니다. 개발자는 향상된 정밀도의 이점을 누리고 최종 사용자는 보다 부드럽고 제어된 사용자 경험의 이점을 누릴 수 있습니다.
목록 2는 div에서 스크롤 스냅을 제어하는 방법에 대한 간단한 예를 보여줍니다(이 라이브 예도 참조).
Listing 2는 간단한 스크롤 스냅의 예이다.
<style> .scroll-container, .scroll-area { max-width: 850px; height: 300px; font-size: 60px; } .scroll-container { overflow: auto ; scroll-snap-type: y mandatory; height: 500px; } .scroll-area { scroll-snap-align: start; } .scroll-container, .scroll-area { margin: 0 auto ; } .scroll-area { display: flex; align-items: center; justify-content: center; color: white; } .scroll-area:nth-of-type(1) { background: IndianRed ; } .scroll-area:nth-of-type(2) { background: Moccasin ; } .scroll-area:nth-of-type(3) { background: thistle; } .scroll-area:nth-of-type(4) { background: seagreen; } </style> <div class="scroll-container" > <div class="scroll-area" > 1 </div> <div class="scroll-area" > 2 </div> <div class="scroll-area" > 3 </div> <div class="scroll-area" > 4 </div> </div>목록 3의 y 스크롤 위치는 스크롤 이동을 놓는 위치에 관계없이 자동으로 자식 요소로 이동합니다. 이는 스크롤 컨테이너의 scroll-snap-type 속성이 y로 설정되고 자식 요소에 scroll-snap-align: start 선언이 있기 때문입니다.
이 동작도 변경할 수 있습니다. 예를 들어 scroll-snap-type 속성을 y 근접도로 설정할 수 있습니다. 스크롤이 요소에 가까울 때만 스냅되며 예상대로 작동합니다.
또한 관련 overscroll-behavior 속성은 중첩 스크롤 컨테이너의 동작 방식을 제어합니다.
논리적 CSS 속성
컨테이너 테두리를 왼쪽과 오른쪽 또는 아래쪽 및 맨 위. 문제는 변경하고 싶지 않은 테두리에 영향을 주지 않고 바로 가기 속성을 사용할 수 있는 방법이 없다는 것입니다. 패딩 및 여백과 같은 요소의 경우에도 마찬가지입니다.
CSS 논리적 속성 모듈을 사용하면 인라인 및 블록 키워드를 사용하여 추상적인 방식으로 사물을 참조할 수 있습니다. 왼쪽과 오른쪽을 참조할 때는 인라인을 사용하십시오. 상하를 언급할 때는 block을 사용한다. 예를 들어, div의 왼쪽과 오른쪽에 테두리를 추가하려면 목록 3의 코드를 사용하십시오(여기에서 라이브 예제도 참조).
목록 3: 인라인 로직이 있는 왼쪽 및 오른쪽 패딩
div { border- inline : 10px dashed seagreen; }이것들은 테두리에 대한 유용한 단축키이지만 인라인 및 블록 논리 키워드는 다른 다양한 속성에서도 찾을 수 있습니다.
대부분의 개발자는 이러한 단축키를 사용하여 텍스트 방향 및 쓰기 모드 문제를 처리합니다. 이러한 경우 padding-inline-end와 같은 속성을 사용하면 텍스트 방향에 관계없이 후행 패딩을 대상으로 지정할 수 있습니다.
기본적으로 인라인 및 블록에 대한 추상화를 통해 다양한 상황에 적용할 수 있는 일반화된 스타일을 만들 수 있습니다. 자세한 내용은 CSS 논리적 속성 및 값에서 찾을 수 있습니다.
컨테이너 검색
컨테이너 쿼리는 아직 CSS에서 완전히 안정적이지 않지만 곧 안정화될 것입니다. 반응형 디자인에 대해 생각하는 방식에 상당한 영향을 미칠 것입니다. 기본 아이디어는 뷰포트와 미디어가 아닌 상위 컨테이너의 크기를 기반으로 중단점을 설정할 수 있다는 것입니다.
구문에 대한 명확한 정의는 없지만 Listing 4와 비슷할 것입니다.
@container 목록 4.
@container (max-width: 650px){ … }UI의 중첩된 레이어 전체에 나타나는 다양한 컨테이너의 크기를 기반으로 레이아웃을 미세 조정하는 것이 얼마나 강력한지 고려하십시오. 이것은 인터페이스 혁신의 물결을 일으키게 될 상당히 중요한 변화입니다.
세 가지 새로운 색 구성표
CSS 실무자는 태곳적부터 RGB, HEX 및 명명된 색상을 사용하여 장치 디스플레이를 아름답게 하고 활기를 불어넣었습니다. HSL 스타일의 색상 선언이 최근에 도입되었습니다. CSS 사양은 이제 hwb, lab 및 lch와 같은 새로운 색상 설명자를 도입합니다.
HWB는 Hue, Whiteness, Blackness의 약자입니다. 사람의 가독성이 돋보이는 멋진 터치입니다. 색상을 선택한 다음 흰색과 검은색을 추가하면 됩니다. 최신 버전의 Chrome, Firefox 및 Safari와 호환됩니다. (Microsoft Edge 기능 참조는 이 주제에 대해 이상할 정도로 귀가 먹먹할 정도로 조용합니다.) HWB에 대해 자세히 알아보려면 hwb()를 참조하세요. - a color notation for human? RGB 및 HWL과 마찬가지로 투명도를 위한 알파 채널이 있습니다.
밝기, 채도 및 색조를 나타내는 LCH는 사용 가능한 색상 팔레트를 확장하는 것으로 유명합니다. CSS에서 LCH 색상은 무엇을, 왜, 어떻게 사용합니까? 이것은 CSS의 색상 이론에 대한 놀라운 토론을 포함하는 좋은 개요입니다. 현재 Safari만 LCH를 지원합니다.
새로운 색 공간 중 가장 이론적인 것은 CIE LAB 색 이론에서 파생된 LAB입니다. 실험실 색상 설명자는 인간이 인지할 수 있는 색상의 전체 스펙트럼을 포함한다고 주장하며 이는 대담한 주장입니다. LCH와 마찬가지로 현재 Safari에서만 지원됩니다. LAB for CSS에 대한 자세한 내용은 Mozilla CSS 설명서에서 찾을 수 있습니다.