Heim > Web-Frontend > CSS-Tutorial > Warum schlägt die Funktion „attr()' von CSS3 in modernen Browsern fehl?

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

DDD
Freigeben: 2024-12-12 12:40:19
Original
616 Leute haben es durchsucht

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

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);
}
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage