CSS Houdini는 CSS 렌더링 엔진의 일부를 노출하고 개발자가 CSS 객체 모델에 액세스할 수 있도록 하는 하위 수준 API 집합을 포괄하는 포괄적인 용어입니다. 이는 CSS 생태계에 큰 변화입니다. 개발자가 브라우저 공급업체가 이러한 기능을 기본적으로 지원할 때까지 기다리지 않고도 맞춤 CSS를 읽고 파싱하는 방법을 브라우저에 알릴 수 있기 때문입니다. 정말 흥미진진하네요.
Houdini 범위 내에서 CSS에 가장 흥미로운 추가 기능 중 하나는 속성 및 값 API입니다.
이 API는 CSS 맞춤 속성(일반적으로 CSS 변수라고도 함)에 시맨틱 의미(구문으로 정의됨)와 대체 값까지 부여하여 CSS 테스트를 가능하게 함으로써 CSS 맞춤 속성을 강화합니다.
Houdini 맞춤 속성 작성
다음은 맞춤 속성 (예: CSS 변수)을 설정하는 예입니다. 이제 문법 (유형), 초기 값 (대체), 상속 불리언 (상위 요소에서 값을 상속할지 여부)이 포함되어 있습니다. 현재 방법은 JavaScript의 CSS.registerProperty()
를 사용하는 것이지만 지원되는 브라우저에서는 @property
를 사용할 수 있습니다.
CSS.registerProperty({
name: '--colorPrimary',
syntax: '<color>',
initialValue: 'magenta',
inherits: false
});
@property --colorPrimary {
syntax: '<color>';
initial-value: magenta;
inherits: false;
}
이제 var(--colorPrimary)
를 통해 다른 CSS 맞춤 속성과 마찬가지로 --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를 작성할 수 있습니다. 현재 허용되는 유형은 다음과 같습니다.
length
number
percentage
length-percentage
color
image
url
integer
angle
time
resolution
transform-list
transform-function
custom-ident
(맞춤 식별자 문자열)
문법을 설정하면 브라우저에서 맞춤 속성의 유형을 검사할 수 있습니다. 여기에는 여러 가지 이점이 있습니다.
이를 설명하기 위해 그라데이션에 애니메이션을 적용하는 방법을 보여드리겠습니다. 현재 각 그라데이션 선언이 문자열로 파싱되므로 그라데이션 값 간에 원활하게 애니메이션(또는 보간)할 방법이 없습니다.
이 예에서는 마우스 오버 상호작용을 통해 경사 중지 비율이 시작 값 40% 에서 종료 값 100% 로 애니메이션으로 표시됩니다. 상단 그라디언트 색상이 아래쪽으로 부드럽게 전환되는 것을 볼 수 있습니다.
왼쪽 브라우저는 Houdini Properties and Values API를 지원하므로 그라데이션 중단 전환이 원활하게 이루어집니다. 오른쪽 브라우저는 그렇지 않습니다. 지원되지 않는 브라우저는 이 변경사항을 A 지점에서 B 지점으로 이동하는 문자열로만 이해할 수 있습니다. 값을 보간할 기회가 없으므로 원활한 전환이 표시되지 않습니다.
그러나 맞춤 속성을 작성할 때 문법 유형을 선언한 다음 이러한 맞춤 속성을 사용하여 애니메이션을 사용 설정하면 전환이 표시됩니다. 다음과 같이 맞춤 속성 --gradPoint
를 인스턴스화할 수 있습니다.
@property --gradPoint {
syntax: '<percentage>';
inherits: false;
initial-value: 40%;
}
그런 다음 애니메이션을 적용할 때 값을 초기 40%
에서 100%
로 업데이트할 수 있습니다.
.post:hover,
.post:focus {
--gradPoint: 100%;
}
이렇게 하면 부드러운 그라데이션 전환이 가능합니다.
결론
@property
규칙을 사용하면 CSS 자체 내에서 의미론적으로 의미 있는 CSS를 작성할 수 있으므로 흥미로운 기술을 더욱 쉽게 사용할 수 있습니다. CSS Houdini 및 Properties and Values API에 대해 자세히 알아보려면 다음 리소스를 확인하세요.
사진: 크리스티안 에스코바르(Unsplash)