CSS Houdini는 CSS 렌더링 엔진의 일부를 노출하고 개발자에게 CSS 객체 모델에 대한 액세스 권한을 제공하는 하위 수준 API 집합을 포괄하는 용어입니다. 이는 CSS 생태계에 큰 변화입니다. 개발자가 브라우저 공급업체에서 이러한 기능을 기본적으로 지원할 때까지 기다릴 필요 없이 맞춤 CSS를 읽고 파싱하는 방법을 브라우저에 알릴 수 있기 때문입니다. 기대되네요.
Houdini 범위 내에서 CSS에 추가된 가장 흥미로운 기능 중 하나는 Properties and Values API입니다.
이 API는 CSS 맞춤 속성 (일반적으로 CSS 변수라고도 함)에 시맨틱 의미 (문법으로 정의됨)와 대체 값을 제공하여 한층 강화되어 CSS 테스트를 지원합니다.
Houdini 맞춤 속성 작성
다음은 맞춤 속성 (예: CSS 변수)을 설정하는 예이지만 이제 구문 (유형), 초깃값 (대체 값), 상속 부울 (상위 요소로부터 값을 상속받는지 여부)이 포함됩니다. 현재는 JavaScript의 CSS.registerProperty()를 통해 이를 확인할 수 있지만, 지원되는 브라우저에서는 @property를 사용할 수 있습니다.
CSS.registerProperty({
name: '--colorPrimary',
syntax: '',
initialValue: 'magenta',
inherits: false
});
@property --colorPrimary {
syntax: '';
initial-value: magenta;
inherits: false;
}
이제 다른 CSS 맞춤 속성과 마찬가지로 var(--colorPrimary)를 통해 --colorPrimary에 액세스할 수 있습니다. 하지만 여기서 차이점은 --colorPrimary를 단순히 문자열로 읽지는 않는다는 것입니다. 데이터가 있습니다.
대체 값
다른 맞춤 속성과 마찬가지로 값을 가져오거나 (var 사용) 설정(쓰기/재작성)할 수 있지만 Houdini 맞춤 속성을 사용하면 재정의할 때 잘못된 값을 설정하면 CSS 렌더링 엔진이 줄을 무시하는 대신 초기 값(대체 값)을 전송합니다.
아래 예를 참고하세요. --colorPrimary 변수의 initial-value는 magenta입니다. 그러나 개발자가 잘못된 값인 '23'을
지정했습니다. @property가 없으면 CSS 파서가 잘못된 코드를 무시합니다. 이제 파서가 magenta로 대체됩니다. 이렇게 하면 CSS 내에서 실제 대체 및 테스트가 가능합니다. 간단합니다.
.card {
background-color: var(--colorPrimary); /* magenta */
}
.highlight-card {
--colorPrimary: yellow;
background-color: var(--colorPrimary); /* yellow */
}
.another-card {
--colorPrimary: 23;
background-color: var(--colorPrimary); /* magenta */
}
문법
이제 구문 기능을 사용하여 유형을 지정하여 시맨틱 CSS를 작성할 수 있습니다. 현재 허용되는 유형은 다음과 같습니다.
lengthnumberpercentagelength-percentagecolorimageurlintegerangletimeresolutiontransform-listtransform-functioncustom-ident(커스텀 식별자 문자열)
구문을 설정하면 브라우저에서 맞춤 속성의 유형을 확인할 수 있습니다. 이렇게 하면 많은 이점이 있습니다.
이 점을 설명하기 위해 그라데이션에 애니메이션을 적용하는 방법을 보여드리겠습니다. 현재는 각 그라데이션 선언이 문자열로 파싱되므로 그라데이션 값 간에 부드럽게 애니메이션 처리 (또는 보간)할 수 있는 방법이 없습니다.
이 예에서는 경사 중지 비율이 마우스 오버 상호작용을 통해 시작 값 40% 에서 종료 값 100% 로 애니메이션 처리됩니다. 상단 그라데이션 색상이 아래로 매끄럽게 전환됩니다.
왼쪽 브라우저는 Houdini Properties and Values API를 지원하므로 매끄러운 그라데이션 중지 전환이 가능합니다. 오른쪽의 브라우저는 그렇지 않습니다. 지원되지 않는 브라우저는 이 변경사항을 A 지점에서 B 지점으로 가는 문자열로만 이해할 수 있습니다. 이 값을 보간할 기회가 없으므로 원활한 전환이 이루어지지 않습니다.
그러나 맞춤 속성을 작성할 때 구문 유형을 선언한 다음 이러한 맞춤 속성을 사용하여 애니메이션을 사용 설정하면 전환이 표시됩니다. 다음과 같이 맞춤 속성 --gradPoint를 인스턴스화할 수 있습니다.
/* Check for Houdini support & register property */
@supports (background: paint(something)) {
@property --gradPoint {
syntax: '<percentage>';
inherits: false;
initial-value: 40%;
}
}
그런 다음 애니메이션을 적용할 때 초기 40%에서 100%로 값을 업데이트할 수 있습니다.
@supports (background: paint(something)) {
.post:hover,
.post:focus {
--gradPoint: 100%;
}
}
이렇게 하면 부드러운 그라데이션 전환이 가능합니다.
결론
@property 규칙을 사용하면 CSS 자체 내에서 의미론적으로 유의미한 CSS를 작성할 수 있어 흥미로운 기술에 더욱 쉽게 액세스할 수 있습니다. CSS Houdini와 Properties and Values API에 관한 자세한 내용은 다음 리소스를 참고하세요.
사진: 크리스티안 에스코바르, Unsplash