Ich bin kürzlich auf einen seltsamen Fehler gestoßen, bei dem ein Selektor nach der Verkleinerung nicht mehr funktionierte (mit csswring 3.0.7). Der fragliche Selektor stimmt mit Elementen überein, bei denen eine Dateneigenschaft einen Bindestrich enthält. Es funktionierte in der Entwicklung, scheiterte jedoch an der Produktion aller getesteten Browser (Chrome, Firefox, IE11, Edge).
Nachdem ich das minimierte Stylesheet durchgesehen habe, habe ich festgestellt, dass der Selektor von etwas wie [data-attr*="-"] in [data-attr*=-] umgewandelt wurde. Zitate wurden entfernt und dies wird von den Browsern abgelehnt.
Die Sache ist, ich kann keine Quelle finden, die besagt, dass ein einzelner Bindestrich Zitate erfordert. Offensichtlich haben die Minifier-Autoren die gleichen Quellen gefunden, die ich habe.
Diese Seite beschreibt die relevanten Teile der Spezifikation.
Also ist ein gültiger, nicht mit einem Anführungszeichen versehener Attributwert in CSS eine Textzeichenfolge, die nicht die leere Zeichenfolge ist, aus Escapezeichen und / oder Zeichen mit
/[-_\u00A0-\u10FFFF]/besteht und nicht mit einer Ziffer oder zwei Bindestrichen oder beginnt ein Bindestrich gefolgt von einer Ziffer.
Ein einzelner Bindestrich scheint in diesem Fall vollkommen gültig zu sein.
Vermisse ich etwas? Sollte dies kein gültiger Selektor sein?
Hier ist der genaue Text aus der CSS2.1-Spezifikation selbst, auf den der Artikel verweist:
In CSS können Bezeichner (einschließlich Elementnamen, Klassen und IDs in Selektoren) nur die Zeichen [a-zA-Z0-9] und ISO 10646 Zeichen U + 00A0 und höher enthalten. Plus der Bindestrich (-) und der Unterstrich (_); Sie können nicht mit einer Ziffer, zwei Bindestrichen oder einem Bindestrich gefolgt von einer Ziffer beginnen.
Wie Sie sehen, scheint dies den Fall bezüglich eines einzelnen Bindestrichs nicht zu berücksichtigen.
Wenn wir jedoch die Grammatik in Abschnitt 4.1.1 betrachten, finden wir die folgende Tokenisierung für eine ident:
%Vor% {nmstart} wird durch [_a-z]|{nonascii}|{escape} repräsentiert und ist obligatorisch in einem ident. Der vorangestellte Bindestrich ist optional, aber da der Bindestrich nicht in {nmstart} erscheint, würde dies bedeuten, dass ein einzelner Bindestrich keine gültige CSS-Kennung ist.
Daher ist der Selektor [data-attr*=-] tatsächlich ungültig und ein einzelner Bindestrich muss in Anführungszeichen gesetzt werden, um stattdessen als String behandelt zu werden.
Tags und Links css css-selectors