Ist die Funktion „attr()' von CSS3 ein Mythos? Ein Blick auf Browserkompatibilität und -implementierung.

Die attr()-Funktion von CSS3: Eine Fata Morgana in gängigen Browsern

Viele Entwickler sind bei der Verwendung der CSS3-attr()-Funktion auf Schwierigkeiten gestoßen, insbesondere in Firefox. Trotz seiner Aufnahme in die W3C-Spezifikationen bleibt es eine nicht implementierte Funktion.

Syntax und Beispiel

Die Syntax für die Funktion attr() lautet wie folgt:

attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )

Zum Beispiel versucht der folgende CSS-Code, die Rahmenfarbe und den Boxschatten eines Elements basierend auf dem Wert des Datenfarbtons festzulegen attribute:

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

Warum es nicht funktioniert

Obwohl die Anforderungen der Spezifikation erfüllt sind, funktioniert dieser Code nicht, da die Level-3-Version von attr( ), mit dem die Möglichkeit zur Angabe von Typ oder Einheit eingeführt wurde, ist in keinem größeren Browser implementiert.

Aktuelle Implementierung Status

Stand 2020 sind keine Implementierungen der attr()-Funktion der Stufe 3 bekannt. Im neuesten Entwurf der Spezifikation des Herausgebers ist es immer noch gefährdet.

Browser-Unterstützung

Die Level 2.1-Version von attr(), die mit der Content-Eigenschaft verwendet wird für generierte Inhalte wird in allen gängigen Browsern vollständig unterstützt. Die MDN-Browserkompatibilitätstabelle gilt nur für diese Version, nicht für die Level-3-Version.

Call-to-Action

Entwickler, die die Level-3-Funktion attr() sehen möchten implementiert kann Feedback über die folgenden Kanäle geben:

• Microsoft Edge-Plattform: Derzeit in Erwägung gezogen (Danke an Lea Verou!)

Das obige ist der detaillierte Inhalt vonIst die Funktion „attr()' von CSS3 ein Mythos? Ein Blick auf Browserkompatibilität und -implementierung.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!