이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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 Properties and Values API Level 1

CSS 속성 및 값 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 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의 일부인 맞춤 속성에 애니메이션이 적용되어 선형 그라데이션에 애니메이션이 적용됩니다. 아래 Glitch에서 전체 코드를 실행하는 모습을 확인하고 직접 사용해 보세요.

결론

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

사진: 마이크 조니츠, Unsplash