CSS ist in letzter Zeit auf einem Höhenflug. Wieder einmal habe ich von einer brandneuen Sache gehört, die ich noch nie zuvor gesehen habe, und wieder einmal über Miriam: CSS-Bedingungen.
🎉 CSSWG hat gerade beschlossen, den @when/else-Vorschlag von @tabatkins in die nächste Stufe der CSS-Bedingungen zu übernehmen. Hier ist der Vorschlag: https://#/IXEOK7xKcL
— Mia, on Bass (@TerribleMia) 15. September 2021
Es gibt bereits so etwas wie Logik in Media Queries. Tatsächlich ist eine Media Query bereits Logik.
@media (min-width: 600px) {
/* WHEN this media query is true, do these styles. */
}Und wenn Sie Stile haben möchten, die sich gegenseitig zu den obigen ausschließen, würden Sie zwei Media Queries schreiben
@media (min-width: 600px) {
/* ... */
}
@media (max-width: 599px) {
/* ... */
}Das ist ein wenig... zappelig. Die Syntax ist in diesem neuen Vorschlag viel übersichtlicher
@when media(min-width: 600px) {
/* ... */
}
@else {
/* ... */
}Es sieht so aus, als ob Sie mehrere Bedingungen mit and verknüpfen, einen Kaskadenlogikstapel mit mehreren @else-Anweisungen haben und nicht nur @media, sondern auch @supports verwenden können.
@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
/* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
/* B */
} @else {
/* C */
}Sieht für mich sehr logisch und praktisch aus!
Ich habe eine kleine Auseinandersetzung über die Namensgebung gesehen. @if könnte hier auch ein logischer Name sein. Aber Sass verwendet @if und es wäre für viele Entwickler super ärgerlich, wenn sie ihre gesamte Sass-Logik auf etwas Neues umstellen müssten oder wie auch immer das ausfallen würde. Sollte CSS einer beliebigen Präprozessorsprache nachgeben? Nein, aber Sass gibt es schon lange und ist super beliebt, und es gibt eine perfekt gute Alternative, warum also den Schmerz verursachen? In diesem Thread geht es nicht nur um Sass – einige Leute denken sowieso, dass @when ein besserer Name ist.
Dies ist schlechter Code, der *nicht* äquivalent zu den angezeigten
@whenist. Denken Sie daran, dass CSS-Pixel nicht ganzzahlig sind, sodass Sie problemlos Gerätebreiten zwischen 599px und 600px haben können (z.B. mit einem Geräte-Pixel-Verhältnis von 2 ist ein Fenster, das 1199 Gerätepixel breit ist, 599,5 CSS-Pixel breit). Stattdessen sollten Sie schreibenEs ist bedauerlich, dass Negation ein Medium erfordert, da
not all andeine idiosynkratische Schreibweise dessen ist, was eine vernünftige Person einfach alsnoterwarten würde, aber das ist das, was benötigt wird.... und deshalb denke ich, dass es nützlich sein könnte,
@whenin CSS zu bekommen, weil zu viele Leute diese Art von Negationen falsch verstehen.Danke!
Wir könnten auch so etwas tun
Einführung einer
element()-Sache nebenbei und Verwendung des berechneten Werts einer Eigenschaft des Elements, um die Bedingung ein- oder auszuschalten.Haben Sie jemals eine Lösung dafür gefunden? Ich zahle 200 Dollar, wenn Sie etwas finden, das in HTML-E-Mails funktioniert.
Ich widerspreche dem letzten Absatz. Es sollte
@ifsein, die Umstellung von Sass ist ziemlich einfach und vorübergehend ärgerlich, aber@whenwäre anders als jede andere Sprache, also etwas Spezifisches, an das man sich erinnern muss und das für immer ärgerlich ist. Ansonsten eine coole Ergänzung!Anders, sicher, aber CSS ist nicht wie andere Sprachen. Ich denke, das passt.
Es ist interessant für mich, dass es eine so heiße Debatte zwischen @if und @when gibt, aber es scheint, als ob niemand die Tatsache angesprochen hat, dass SASS auch @else verwendet.
Ich vermute, @else ist kein Problem, weil Sass @else nicht kompiliert, wenn es nicht nach einem @if verwendet wird. Es könnte aber während der Kompilierung einen Syntaxfehler werfen.
Beachten Sie, dass
calcin Less auf ähnliche Weise ein Problem darstellt. Ich meine, Sie müssen eine String-Escape-Sequenz verwenden~"calc(100% - 20px)"Ich denke also, man könnte das
@if-Problem auch umgehen... Aber persönlich bin ich mit dem Namen@whenzufrieden. Es gibt auch when in XSL, also wäre CSS nicht das erste.Ehrlich gesagt, da CSS deklarativ und nicht imperativ ist, macht das Sinn. Die Verwendung von „when“ löst diesen Begriff von der Ablaufsteuerung.
Die Zeitlichkeit des Wortes passt dazu: tue nicht nur das Folgende, WENN diese Bedingung so ist, sondern tue es, WANN IMMER es so ist.
Wow, deklarativ statt imperativ, das ist das beste Argument, genial!
Interessant. Nicht mehr lange, bis wir anfangen, CSS-Dateien zu unit testen, nehme ich an? ;)