CSS의 전환 및 데이터 보호
CSS 변수라고도 하는 CSS 맞춤 속성을 사용하면 CSS에 자체 속성을 정의하고 CSS 전체에서 그 값을 사용할 수 있습니다. 이러한 모델은 현재 매우 유용하지만 사용하기 어렵게 만드는 단점이 있습니다. 어떤 값이든 사용할 수 있으므로 실수로 예기치 않은 것으로 재정의될 수 있고 항상 상위 요소로부터 값을 상속하며 사용자는 이러한 값을 전환할 수 없습니다. 현재 Chrome 78에서 사용할 수 있는 Houdini의 CSS Properties and Values API 수준 1에서는 이러한 단점이 초월하여 CSS 맞춤 속성이 엄청나게 강력해졌습니다.
Houdini란?
새로운 API에 관해 이야기하기 전에 Houdini에 관해 간단히 알아보겠습니다. CSS Houdini 또는 간단히 Houdini로 더 잘 알려진 CSS-TAG Houdini Task Force는 '웹에서 스타일 지정 및 레이아웃의 '마법'을 설명하는 기능을 개발"하기 위해 존재합니다. Houdini 사양 컬렉션은 브라우저의 렌더링 엔진이 자유롭게 사용할 수 있도록 설계되었으므로, 스타일에 대한 자세한 정보를 제공하고 렌더링 엔진을 확장할 수 있습니다. 이를 통해 JavaScript에 입력된 CSS 값을 폴리필하거나 성능 저하 없이 새 CSS를 개발할 수 있습니다. Houdini는 웹에서 창의력을 펼칠 수 있는 잠재력을 지니고 있습니다.
CSS 속성 및 값 API 수준 1
CSS Properties and Values API 수준 1 (Houdini Props 및 Vals)을 사용하면 맞춤 속성에 구조를 부여할 수 있습니다. 맞춤 속성을 사용하는 경우의 현재 상황은 다음과 같습니다.
.thing {
--my-color: green;
}
맞춤 속성에는 유형이 없으므로 예기치 않은 방식으로 재정의될 수 있습니다. 예를 들어 URL로 --my-color를 정의하면 어떻게 되는지 생각해 보세요.
.thing {
--my-color: url('not-a-color');
color: var(--my-color);
}
여기서 --my-color는 유형이 지정되지 않으므로 URL이 유효한 색상 값이 아님을 알 수 없습니다. 이 속성을 사용할 때는 기본값 (color의 경우 검은색, background의 경우 투명)으로 돌아갑니다. Houdini Props 및 Vals를 사용하면 맞춤 속성을 등록하여 브라우저가 속성 지정을 알 수 있습니다.
이제 맞춤 속성 --my-color가 색상으로 등록됩니다. 이렇게 하면 허용되는 값의 종류와 이 속성을 입력하고 처리하는 방법을 브라우저에 알립니다.
등록된 속성 분석
속성을 등록하는 방법은 다음과 같습니다.
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: 'black',
});
지원되는 옵션은 다음과 같습니다.
name: string
맞춤 속성의 이름입니다.
syntax: string
맞춤 속성을 파싱하는 방법 가능한 값의 전체 목록은 CSS 값 및 단위 사양에서 확인할 수 있습니다. 기본값은 *입니다.
inherits: boolean
상위 요소의 값을 상속하는지 여부입니다. 기본값은 true입니다.
initialValue: string
맞춤 속성의 초기 값입니다.
syntax을 자세히 살펴보겠습니다. 숫자부터 색상, <custom-ident> 유형에 이르기까지 여러 가지 유효한 옵션이 있습니다. 다음 값을 사용하여 이러한 구문을 수정할 수도 있습니다.
+를 추가하면 해당 구문의 공백으로 구분된 값 목록이 허용된다는 의미입니다. 예를 들어<length>+는 공백으로 구분된 길이 목록입니다.- 추가는
#가 해당 구문의 쉼표로 구분된 값 목록을 허용함을 의미합니다. 예를 들어<color>#는 쉼표로 구분된 색상 목록입니다. - 구문 또는 식별자 사이에
|를 추가하면 제공된 옵션 중 하나가 유효함을 나타냅니다. 예를 들어<color># | <url> | magic는 쉼표로 구분된 색상 목록, URL 또는magic단어를 허용합니다.
잡음
Houdini 소품과 발스에는 두 가지 단점이 있습니다. 우선, 정의하면 기존 등록된 속성을 업데이트할 방법이 없고 속성을 다시 등록하려고 하면 이미 정의되었다는 오류가 발생합니다.
둘째, 표준 속성과 달리 등록된 속성은 파싱할 때 검증되지 않습니다. 오히려 계산될 때 검증됩니다. 즉, 요소의 속성을 검사할 때 잘못된 값은 유효하지 않은 것으로 표시되지 않으며 유효한 속성 뒤에 잘못된 속성을 포함해도 유효한 속성으로 대체되지 않습니다. 하지만 잘못된 속성은 등록된 속성의 기본값으로 대체됩니다.
맞춤 속성 애니메이션
등록된 맞춤 속성은 유형 확인 외에 재미있는 추가 기능인 애니메이션 처리 기능을 제공합니다. 기본 애니메이션 예는 다음과 같습니다.
<script>
CSS.registerProperty({
name: '--stop-color',
syntax: '<color>',
inherits: false,
initialValue: 'blue',
});
</script>
<style>
button {
--stop-color: red;
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
</style>
버튼 위로 마우스를 가져가면 빨간색에서 녹색으로 애니메이션 처리됩니다. 속성을 등록하지 않으면 한 색상에서 다른 색상으로 이동합니다. 등록되지 않으면 브라우저가 한 값과 다음 값 간에 예상되는 값을 알지 못하므로 값을 전환하는 기능을 보장할 수 없습니다. 이 예에서는 한 단계 더 나아가 CSS 그라데이션에 애니메이션을 적용할 수 있습니다. 다음 CSS는 동일한 등록된 속성을 사용하여 작성할 수 있습니다.
button {
--stop-color: red;
background: linear-gradient(var(--stop-color), black);
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
그러면 linear-gradient의 일부인 맞춤 속성에 애니메이션이 적용되므로 선형 그래디언트에 애니메이션이 적용됩니다. 아래의 Glitch에서 전체 코드를 확인하고
직접 실행해 보세요
결론
Houdini는 브라우저와 함께 CSS를 사용하고 확장하는 완전히 새로운 방법을 출시하고 있습니다. Paint API가 이미 제공되었고 이제 맞춤 Props 및 Vals가 확장됨에 따라 광고 소재 도구 상자가 확장되어 유형이 있는 CSS 속성을 정의하고 이를 사용하여 새롭고 흥미로운 디자인을 만들고 애니메이션으로 만들 수 있습니다. 의견을 제공하고 Houdini의 다음 단계를 확인할 수 있는 Houdini 문제 대기열에서 더 많은 소식도 확인해 보세요. Houdini는 웹에서의 스타일 지정과 레이아웃이라는 '마법'을 설명하는 기능을 개발하기 위해 노력하고 있습니다. 이제 이 마법 같은 기능을 잘 활용해 보세요.