Es gab in letzter Zeit ein paar virale Tweets dazu, einer von Adam Argyle und einer von Mathias Bynes. Das ist eine schöne Neuerung, die CSS etwas übersichtlicher macht. Zuvor benötigte jede einzelne Farbfunktion tatsächlich zwei Funktionen, eine für Transparenz und eine ohne, dies eliminiert diese Notwendigkeit und bringt die Syntax mehr im Einklang mit der CSS-Grammatik insgesamt.
Ich mache hier die Code-Blöcke aus Mathiases Tweet neu
/* Old Syntax */
rgb(0, 128, 255)
rgba(0, 128, 255, 0.5)
hsl(198, 38% 50%)
hsla(198, 28%, 50%, 0.5)/* New Syntax */
rgb(0 128 255)
rgb(0 128 255 / 50%)
hsl(198deg 28% 50%)
hsl(198deg 28% 50% / 50%)
lab(56.29% -10.93 16.58 / 50%)
lch(56.29% 19.86 236.62 / 50%)
color(sRGB 0 0.50 1 / 50%)Gedankenparty
- Die Browserunterstützung ist ziemlich gut: alles außer IE 11.
- Wenn Sie IE 11-Unterstützung benötigen, können Sie es vorverarbeiten (oder es nicht verwenden). PostCSSs preset-env macht das, ebenso wie das sehr spezifische Plugin postcss-color-rgb (seltsam, dass es HSL nicht auch macht).
- Wenn es Ihnen nicht gefällt, müssen Sie es buchstäblich nie verwenden. Kein Browser wird jemals die Unterstützung für ein so wichtiges Feature wieder einstellen.
- Der Grund für den Wechsel ist Muskelgedächtnis und konsistent aussehende Codebasen, da neue Farbfunktionen (z. B.
lab,lchundcolor) *nur* diese neue Syntax unterstützen werden. - Es gibt ein seltsames Hybrid zwischen alt und neu. Sie können einen Opazitätswert an
rgb()übergeben, und es funktioniert immer noch wiergb(255, 0, 0, 0.5);. - Wenn Sie es in Sass benötigen (was anscheinend eine Qual ist zu unterstützen), gibt es einen seltsamen Workaround. Ich vermute, Sass wird es irgendwann unterstützen. Wenn sie es nicht können, ist dies die Art von Kritik, die Leute von Projekten wegtreibt.
- Prettier, das sich mit der Bereinigung Ihres Codes in Bezug auf Abstände und Syntax beschäftigt, *könnte* hier eingreifen und die Syntax konvertieren, aber es wird nicht passieren (die Haltung von Prettier ist, das AST nicht zu ändern).
- Ich stelle mir vor, dass DevTools Farben in diesem Format anzeigen wird, was die Akzeptanz fördern wird.
- Denken Sie daran, dass selbst Hex-Code-Farben ein schickes neues Format haben.
Ich mag die neue Syntax wirklich.
Ich verwende sie mit post-css-env.
Es ist schade, dass Sass mit neuen CSS-Syntaxen immer schwieriger zu verwenden ist.
Genauso wie bei CSS-Variablen verwende ich die Escape-Methode.
Anstelle der seltsamen Fall-Lösung.
CSS-Selektor-Verschachtelung kommt und sie wird SASS obsolet machen. Es fühlt sich an, als wäre es eine Falle, heutzutage in SASS zu investieren.
Internet Explorer 11 unterstützt die Syntax ohne Kommas nicht, und IE11 unterstützt auch nicht die neuen Farbräume. Ich habe alte Android-Geräte nicht getestet.
Der Punkt ist, wenn Ihr Publikum (oder das Publikum Ihres Kunden) IE11 überhaupt unterstützt, behalten Sie die Kommas bei der RGB-Syntax bei. Gehen Sie nicht den Aufwand ein, Ihr CSS oder Ihre Präprozessoren für die von IE11 unterstützten Farbräume (nur RGB?) neu zu schreiben.
Verlassen Sie sich stattdessen auf progressive Verbesserung, um RGB-Werte mit Kommas zu setzen, die Sie dann mit Lab oder HSL ohne Kommas oder was auch immer *überschreiben* können.
Diese neue Formatierung ärgert mich.
Sie ist überhaupt nicht klarer.
Noch eine unnötige Änderung, die Chaos, Depretionen, Verwirrung und unnötiges Hinzufügen/Entfernen von Kommas beim Kopieren mit sich bringt.
Es gibt keinen Grund, warum das neue Format besser ist. Einfach eine weitere Generation, die eine Änderung am falschen Ort wollte.
Ruhig, Freund. Alles ist gut. Niemand zwingt dich, die neue Syntax zu verwenden, und die anderen werden weiterhin unterstützt. Bleib ruhig und coloriere weiter!
Das vereinfacht die Dinge erheblich. Kein Bedarf, ein zusätzliches, überflüssiges 'a' zu einer Farbfunktion hinzuzufügen. Ich möchte darauf hinweisen, dass bei hsl der erste Parameter in Grad ist, daher sollte das erste Beispiel "hsl(198deg 38% 50%)" lauten. Warum ist das wichtig? Es zeigt, welche gültigen Werte hier erwartet werden (0-360), genauso wie das "%" einen Wert von 0-100 anzeigt.