CSS의 전환 및 데이터 보호
CSS 맞춤 속성(CSS라고도 함) 변수, CSS에서 자체 속성을 정의하고 그 값을 CSS 오늘날에는 대단히 유용하지만, 몇 가지 단점도 있습니다. 어떤 값이든 받을 수 있기 때문에 우연히 예기치 않은 무언가로 재정의되면 항상 전환할 수 없습니다 Houdini의 CSS 속성과 Values API 수준 1, Chrome 78에서 사용할 수 있게 되었지만 이러한 단점이 초과되어 CSS는 커스텀 속성은 놀라울 정도로 강력합니다.
Houdini란 무엇인가요?
새 API에 관해 이야기하기 전에 Houdini에 관해 간단히 알아보겠습니다. CSS-TAG CSS Houdini 또는 간단히 Houdini로 잘 알려진 Houdini 태스크 포스는 "AI의 '마법'을 설명하는 기능 개발 유용한 정보를 얻을 수 있습니다. Houdini 사양 모음은 브라우저의 렌더링 엔진의 성능을 높이도록 설계되어 스타일에 대한 심층적인 통찰력과 렌더링 엔진 확장 기능을 제공합니다. 이를 통해 JavaScript로 CSS 값을 입력하고 폴리필을 사용하거나 새 CSS를 만들어 냅니다. 드디어 가능해집니다. Houdini에는 창의력을 마음껏 펼칠 수 있게 해 줍니다.
CSS 속성 및 값 API 레벨 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와 Val을 사용하면 맞춤 속성을
등록해야 합니다. 그러면 브라우저에서 알 수 있도록 등록해야 합니다.
이제 맞춤 속성 --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와 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의 일부인 맞춤 속성에 애니메이션이 적용되어
선형 그래디언트를 애니메이션으로 보여줍니다. 아래의 글리치에서 전체 코드를 확인하세요.
직접 실행해 보는 것입니다.
결론
Houdini는 브라우저로 이동 중이며, 그와 함께 완전히 새로운 방식으로 CSS를 사용하고 확장할 수 있습니다. 페인트 API가 이미 제공됨 맞춤 Props와 Vals가 확장되면서 소재 도구 상자가 확장되면서 유형이 지정된 CSS 속성을 정의하고 이 속성을 사용하여 새롭고 흥미로운 애니메이션 효과를 있습니다. Houdini 이슈 대기열에서 Houdini의 다음 단계를 확인해 보세요 Houdini는 특성 개발을 위해 존재합니다 Kubernetes의 '마법'을 스타일 및 레이아웃에 대해 많이 알아보고 있으므로, 마법 같은 기능을 잘 활용해 보세요.