Houdini의 새 API를 사용한 더 스마트한 맞춤 속성

CSS의 전환 및 데이터 보호

Sam Richard

CSS 맞춤 속성(CSS 변수라고도 함)을 사용하면 CSS에서 자체 속성을 정의하고 CSS 전체에서 해당 값을 사용할 수 있습니다. 오늘날 매우 유용하지만 다음과 같은 단점이 있어 작업하기 어려울 수 있습니다. 모든 값을 사용할 수 있으므로 예기치 않은 값으로 실수로 재정의될 수 있고, 항상 상위 요소에서 값을 상속받으며, 전환할 수 없습니다. Chrome 78에서 사용할 수 있는 Houdini의 CSS 속성 및 값 API 레벨 1을 사용하면 이러한 단점을 극복하여 CSS 맞춤 속성을 매우 강력하게 만들 수 있습니다.

Houdini란 무엇인가요?

새 API에 대해 이야기하기 전에 Houdini에 대해 간단히 살펴보겠습니다. CSS-TAG Houdini 태스크 포스(CSS Houdini 또는 간단히 Houdini라고도 함)는 '웹에서 스타일 지정 및 레이아웃의 '마법'을 설명하는 기능을 개발'하기 위해 존재합니다. Houdini 사양 모음은 브라우저의 렌더링 엔진의 기능을 개방하여 스타일에 대한 더 깊은 통찰력과 렌더링 엔진을 확장하는 기능을 모두 제공하도록 설계되었습니다. 이를 통해 JavaScript에서 유형이 지정된 CSS 값을 사용하고 성능 저하 없이 새로운 CSS를 폴리필하거나 발명하는 것이 드디어 가능해졌습니다. Houdini는 웹에서 창의력을 강화할 수 있습니다.

CSS 속성 및 값 API 수준 1

CSS 속성 및 값 API 레벨 1 (Houdini Props and 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 and 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 Props 및 Vals에는 두 가지 주의사항이 있습니다. 첫 번째는 정의된 후에는 기존 등록된 속성을 업데이트할 방법이 없다는 것입니다. 속성을 다시 등록하려고 하면 이미 정의되었다는 오류가 발생합니다.

둘째, 등록된 속성은 표준 속성과 달리 파싱될 때 검증되지 않습니다. 계산될 때 검증됩니다. 즉, 요소의 속성을 검사할 때 유효하지 않은 값이 유효하지 않은 것으로 표시되지 않으며 유효한 속성 뒤에 유효하지 않은 속성을 포함해도 유효한 속성으로 대체되지 않습니다. 하지만 유효하지 않은 속성은 등록된 속성의 기본값으로 대체됩니다.

맞춤 속성 애니메이션

등록된 맞춤 속성은 유형 검사 외에도 재미있는 보너스를 제공합니다. 바로 애니메이션을 적용할 수 있다는 점입니다. 기본 애니메이션 예는 다음과 같습니다.

<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의 일부인 맞춤 속성이 애니메이션 처리되어 선형 그라데이션이 애니메이션 처리됩니다. 아래 Codepen에서 전체 코드를 확인하고 직접 사용해 보세요.

결론

Houdini가 브라우저에 도입될 예정이며, 이를 통해 CSS를 사용하고 확장하는 완전히 새로운 방식이 제공됩니다. Paint API가 이미 제공되고 이제 맞춤 속성 및 값이 제공되면서 크리에이티브 도구 상자가 확장되어 유형이 지정된 CSS 속성을 정의하고 이를 사용하여 새롭고 흥미로운 디자인을 만들고 애니메이션을 적용할 수 있습니다. Houdini 문제 대기열에서도 더 많은 정보를 확인할 수 있습니다. 여기에서 의견을 제공하고 Houdini의 다음 단계를 확인할 수 있습니다. Houdini는 웹의 스타일 지정 및 레이아웃의 '마법'을 설명하는 기능을 개발하기 위해 존재합니다. 따라서 이러한 마법 같은 기능을 잘 활용해 보세요.

사진: 마이크 조니에츠(Unsplash 제공)