Warum funktioniert die Funktion „attr()' von CSS3 in gängigen Browsern nicht wie erwartet?

CSS3s attr()-Funktion wird in gängigen Browsern nicht unterstützt

In einem HTML-Dokument:

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

Und in die CSS-Datei:

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

Firefox zeigt einen CSS-Fehler in Firebug an. Gemäß den W3C-Spezifikationen sollte die Funktion attr() funktionieren, aber das funktioniert nicht.

Warum es nicht funktioniert

Die in der Spezifikation angegebene Grammatik erfordert, dass das Komma zwischen dem Attributnamen und der zu verwendenden Einheit weggelassen wird:

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

Aber auch bei korrekter Syntax ist die Die Funktion attr() funktioniert immer noch nicht. Stand 2020: Es sind keine Implementierungen der Level-3-Version von attr() bekannt in irgendeinem gängigen Browser.

Wo man Probleme meldet

Wenn Sie die Implementierung dieser Funktion wünschen, können Sie dies im entsprechenden Feedback vorschlagen Kanäle:

• Microsoft Edge Platform (derzeit in Erwägung)

Hinweis: Die Basisversion der attr()-Funktion der Stufe 2.1 wird vollständig unterstützt in den neuesten Versionen aller gängigen Browser. Es wird jedoch mit der Content-Eigenschaft für die Pseudoelemente :before und :after für generierte Inhalte verwendet.

Das obige ist der detaillierte Inhalt vonWarum funktioniert die Funktion „attr()' von CSS3 in gängigen Browsern nicht wie erwartet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!