Warum schlägt die Funktion „attr()' von CSS3 in modernen Browsern fehl?

Die attr()-Funktion von CSS3 funktioniert in gängigen Browsern nicht richtig

Obwohl die W3C-Spezifikationen etwas anderes behaupten, kann es bei Firefox-Benutzern zu einem Fehler kommen, wenn sie versuchen, sie zu verwenden die Funktion attr().

Syntax Fehler:

Das folgende CSS:

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

Erzeugt einen Syntaxfehler in Firebug.

Grund für den Fehler:

Nach der Untersuchung der CSS-Grammatik wird deutlich, dass zwischen dem Attributnamen und der Einheit ein Komma stehen sollte weggelassen:

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

Allerdings bleibt der Fehler auch bei korrekter Syntax bestehen.

Mangelnde Implementierung:

Leider Stand 2020 gibt es keine bekannten Implementierungen der Level-3-Funktion attr() in den gängigen Browsern. Obwohl die Funktion gefährdet ist, verbleibt sie im Entwurf der CSS-Spezifikation des Herausgebers.

Befürwortung der Implementierung:

Benutzer, die diese Funktion in der implementiert sehen möchten Die Zukunft kann ihre Unterstützung über relevante Feedbackkanäle zum Ausdruck bringen. Zu den aktuellen Vorschlägen gehören:

• Microsoft Edge-Plattform: Derzeit in Erwägung

Hinweis:

Die Basisversion von attr. Level 2.1 () wird weithin unterstützt und mit der Content-Eigenschaft für generierte Inhalte verwendet.

Das obige ist der detaillierte Inhalt vonWarum schlägt die Funktion „attr()' von CSS3 in modernen Browsern fehl?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!