CSS3의 `attr()` 기능이 주요 브라우저에서 예상대로 작동하지 않는 이유는 무엇입니까?

CSS3의 attr() 기능은 주요 브라우저에서 지원되지 않습니다

HTML 문서에서:

<a class="wbutton tint" data-tint="rgba(255,0,0,.5)" href="#">This should be red, with an opacity of 0.5</a>

그리고 CSS 파일:

.window > .content .wbutton.tint {
    border: solid thin attr(data-tint, color);
    box-shadow: inset 0 0 50px attr(data-tint, color);
}

Firefox는 Firebug의 CSS 오류. W3C 사양에 따르면 attr() 함수는 작동해야 하는데 작동하지 않습니다.

왜 작동하지 않는가

스펙에 명시된 문법 삭제하려면 속성 이름과 사용할 단위 사이에 쉼표가 있어야 합니다.

.window > .content .wbutton.tint {
    border: solid thin attr(data-tint color);
    box-shadow: inset 0 0 50px attr(data-tint color);
}

그러나 올바른 구문을 사용하더라도 attr() 함수는 여전히 작동하지 않습니다. 2020년 현재, 어떤 주요 브라우저에서도 attr()의 레벨 3 버전 구현이 알려진 바가 없습니다

문제 보고 위치

이 기능이 구현되기를 원하는 경우 관련 피드백에서 제안할 수 있습니다. 채널:

• Microsoft Edge 플랫폼(현재 고려 중)

참고: attr() 함수의 기본 레벨 2.1 버전이 완전히 지원됩니다. 모든 주요 브라우저의 최신 버전에서 사용됩니다. 그러나 생성된 콘텐츠의 :before 및 :after 의사 요소에 대한 콘텐츠 속성과 함께 사용됩니다.

위 내용은 CSS3의 `attr()` 기능이 주요 브라우저에서 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!