사용자가 작업을 실행하기 전에 작업 미리보기를 제공하는 것이 좋습니다. 관심 호출자는 관심 소스 (예: 버튼 또는 링크)와 관심 타겟 간의 관심 관계를 선언적으로 생성하는 방법을 제공하는 실험용 웹 플랫폼 기능입니다. 선언적 관계가 설정되면 개발자는 CSS와 JavaScript를 모두 사용하여 관심 및 관심 상실에 따라 다양한 방법으로 응답할 수 있습니다. 이 사용 사례에서는 interest 및 loseinterest 이벤트를 활용하여 관심 타겟에 대한 다양한 효과를 미리 볼 수 있습니다.
구현 방법
관심분야 관계는 버튼 또는 링크 (즉, 관심분야 소스)에 interestfor 속성을 설정하여 생성됩니다. 이 속성은 다른 요소 (즉, 관심 타겟)에 대한 ID 참조를 사용합니다. 관심분야 호출자 또는 소스에는 관심분야 타겟이 하나만 있을 수 있지만 관심분야 타겟에는 관심분야 호출자가 여러 개 있을 수 있습니다.
<!-- MANDATORY: interest relationships must be established with the `interestfor` attribute on a button or a link -->
<button interestfor="interestingElement" data-effect="A">Some effect</button>
<button interestfor="interestingElement" data-effect="B">Some other effect</button>
<div id="interestingElement">Something interesting</div>
이 사용 사례에서는 interest 및 loseinterest 이벤트를 활용하여 관심 타겟에 대한 다양한 효과를 미리 볼 수 있습니다. 두 이벤트 모두 InterestEvent이며, 관심의 소스 (즉, interestfor 속성이 있는 요소)인 source 속성이 있습니다.
interestingElement.addEventListener("interest", event => {
// Apply the preview based on `event.source`
event.target.dataset.preview = event.source.dataset.effect;
});
interestingElement.addEventListener("loseinterest", event => {
// Unapply the preview
delete event.target.dataset.preview;
});
활성 관심 소스와 타겟은 각각 :interest-source 및 :interest-target 의사 선택자를 사용하여 CSS로 선택할 수 있습니다.
/* Styles to apply when the effect is being previewed */
:interest-source {}
:interest-target {}
관심 호출자 (즉, interestfor 속성이 있는 요소)의 시작 및 종료 지연은 interest-delay-start 및 interest-delay-end CSS 속성 또는 약식 interest-delay 속성으로 설정할 수 있습니다.
[interestfor] {
interest-delay-start: 0.2s;
interest-delay-end: 0.1s;
}
대체 전략
관심 인보커의 대체 및 브라우저 지원
관심 요소 호출자는 NPM의 interestfor 폴리필 패키지를 사용하여 조건부로 폴리필해야 합니다. CDN을 사용하는 것보다 폴리필을 번들로 묶는 것이 좋습니다.
필수: HTMLButtonElement.prototype에서 interestForElement 속성을 확인하여 기능을 감지하고 네이티브 지원이 누락된 경우에만 폴리필을 로드합니다.
<script type="module">
if (!HTMLButtonElement.prototype.hasOwnProperty("interestForElement")) {
// CDN link only used for example, prefer bundling.
await import("https://unpkg.com/interestfor@latest");
}
</script>
CSS 폴리필 주의사항
폴리필을 사용할 때는 네이티브 의사 클래스 및 속성 지원 부족을 고려하여 CSS API가 약간 변경됩니다.
- 의사 클래스: 폴리필은 실제
:interest-source및:interest-target의사 클래스를 정의할 수 없으므로 대신.interest-source및.interest-target클래스를 적용합니다. 필수::is()와 결합하여 네이티브 상태와 폴리필 상태를 모두 지원합니다.
/* Styles to apply when the effect is being previewed */
:is(:interest-source, .interest-source) { /* ... */ }
:is(:interest-target, .interest-target) { /* ... */ }
- CSS 속성:
interest-delay,interest-delay-start,interest-delay-end의 경우 폴리필은 모든 브라우저에서 맞춤 속성을 직접 읽을 수 없으므로 CSS 변수를 사용해야 합니다.
/* Adjust the start and end delay for interest invokers */
[interestfor] {
--interest-delay-start: 0.2s;
interest-delay-start: var(--interest-delay-start);
--interest-delay-end: 0.1s;
interest-delay-end: var(--interest-delay-end);
}