>웹 프론트엔드 >CSS 튜토리얼 >최신 브라우저에서 CSS3의 `attr()` 기능이 실패하는 이유는 무엇입니까?

최신 브라우저에서 CSS3의 `attr()` 기능이 실패하는 이유는 무엇입니까?

DDD
DDD원래의
2024-12-12 12:40:19633검색

Why Does CSS3's `attr()` Function Fail in Modern Browsers?

주요 브라우저에서 CSS3의 attr() 기능 오작동

W3C 사양에서는 달리 주장하고 있음에도 불구하고 Firefox 사용자는 사용하려고 할 때 오류가 발생할 수 있습니다. attr() 함수.

구문 오류:

다음 CSS:

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

Firebug에서 구문 오류를 생성합니다.

실패 이유:

CSS 문법을 살펴보면 속성 이름과 단위 사이에 쉼표가 있어야 한다는 것이 분명해졌습니다. 생략됨:

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

그러나 올바른 구문을 사용해도 오류가 지속됩니다.

구현 부족:

안타깝게도 2020년 기준 , 주요 브라우저에는 레벨 3 attr() 함수의 알려진 구현이 없습니다. 위험에도 불구하고 이 기능은 편집자의 CSS 사양 초안에 남아 있습니다.

구현 옹호:

이 기능이 미래는 관련 피드백 채널을 통해 지지를 표명할 수 있습니다. 현재 제안 사항은 다음과 같습니다.

  • Microsoft Edge 플랫폼: 현재 고려 중

참고:

attr의 기본 레벨 2.1 버전 ()는 생성된 콘텐츠에 대한 콘텐츠 속성과 함께 널리 지원되고 사용됩니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.