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

CSS의 전환 및 데이터 보호

Sam Richard

CSS 변수라고도 하는 CSS 맞춤 속성을 사용하면 CSS에서 자체 속성을 정의하고 CSS 전체에서 해당 값을 사용할 수 있습니다. 현재 매우 유용하지만 작업하기 어렵게 만드는 단점이 있습니다. 어떤 값이든 사용할 수 있으므로 예기치 않은 값으로 실수로 재정의될 수 있고, 항상 상위 요소에서 값을 상속하며, 전환할 수 없습니다. Chrome 78에서 사용할 수 있는 Houdini의 CSS 속성 및 값 API 수준 1을 사용하면 이러한 단점을 극복하여 CSS 맞춤 속성을 매우 강력하게 만들 수 있습니다.

Houdini란 무엇인가요?

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

CSS 속성 및 값 API 수준 1

CSS 속성 및 값 API 수준 1 (Houdini 속성 및 값)을 사용하면 맞춤 속성에 구조를 부여할 수 있습니다. 맞춤 속성을 사용할 때의 현재 상황은 다음과 같습니다.

.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 단어를 허용합니다.

Gotchas

Houdini Props and 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는 웹에서 스타일 지정 및 레이아웃의 '마법'을 설명하는 기능을 개발하기 위해 존재하므로, 이 마법 같은 기능을 잘 활용해 보세요.