Die Ergebnisse des „State of CSS“ Surveys erscheinen bald und ich ahne jetzt schon mal, dass sich das seltsame Gefühl, das ich schon beim Ausfüllen hatte, noch verstärken wird. Ich finde ja die Antwortmöglichkeiten „Nie davon gehört“, „Kenne ich (habe es aber noch nicht verwendet)“ und „Habe ich verwendet“ wirklich treffend, hatte aber die ganze Zeit das schlechte Gefühl, zwar ein hochinformierter Entwickler zu sein („kenn’ ich, kenn’ ich, kenn’ ich, das auch und das sowieso“), mein Wissen aber viel zu selten einzusetzen. Oder zumindest nicht dazu komme, es einzusetzen. Das mag ja auch etwas mit dem Alter zu tun haben, als ich mit Mitte Zwanzig die Nächte durchgecodet habe und alles ausprobiert habe, was nicht bei drei wieder deprecated war, kannte ich zunächst wenig, habe aber alles ausprobiert und angewendet. Heute komme ich mit dem Set an CSS aus, das ich mir in den letzten Jahren (Jahrzehnten) erarbeitet habe. Altes CSS ist schneller geschrieben, als neues gelernt. Und dann ist ja auch immer die Browserunterstützung so wichtig!

Ich merke das an jungen Kollegen, die sich über jeden Fitzel an Information über neues Zeug erfreuen und ununterbrochen darüber reden wollen, was sie wieder geiles gestern Abend ausprobiert haben. Und ich frag man dann so, ob die keine Familie haben (natürlich nicht!).

Dabei ist das so schade! Viele der neuen Techniken sind hochinteressant und lösen meist Dinge elegant, die früher™ nicht gingen. Trotzdem habe ich, privat oder auf der Arbeit, viele Sachen noch nicht in den produktiven Einsatz gebracht, auch wenn sie schon breite Browserunterstützung haben, oder sogar baseline sind. Ein paar Beispiele: Container Queries, Subgrid, color(), den CIE LAB Farbraum, text-wrap: balance, @property, @layer, ich könnte noch Stunden so weiter machen, aber das ist schon so peinlich genug.

Aber mal ehrlich, was geht hier schief? Ganz einfach: das meiste funktioniert auch ohne diese Features. Es sind teilweise wirkliche Technologiesprünge, auf die wir ewig gewartet haben (bspw. Container Queries), aber sie wirken eben eher nach innen. Damals™, wir hatten ja nichts, als box-shadow eingeführt wurde, da kam uns das wie eine CSS-Mondlandung vor. Mit einer Zeile Code stundenlanges Grafikschnippeln und nächtelange Diskussionen mit renitenten Designer*innen auf einen Schlag aus der Welt geschafft, das war Fortschritt! Dagegen stinken Container Queries irgendwie ab, weil ging ja bisher auch ohne…

Zum Glück kann ich anderen Leuten sagen, sie sollen mal dies oder jenes ausprobieren. Denn wenn ich das (in meiner Position als Teamlead und Frontend-Graubart) mache, fühlen sich die jungen Leute legitimiert und haben noch mehr Spaß daran. Und hinterher können sie mir dann die Praxisbeispiele zeigen. ;) Alternativ könnte ich das natürlich auch so wie früher an meinen privaten Projekten ausprobieren, hier hätte ich ja noch eine Menge Raum dafür. Aber wie gesagt, ich hab ja Familie…

I always have fun with specificity, especially when I have to say it out loud. As good CSS wizards, we don’t worry about that, of course, we feel it when we look at the code. Nevertheless, there are actually cases where the weight of selectors is so difficult to plan that we would rather do without them altogether. Enter: where() (MDN, CanIUse). The handy little pseudo-selector, which is primarily intended to simplify the writing of selector chains, also ensures that the specificity of the bracket expression is set to (0, 0, 0), i.e. zero, nothing… this is very useful if, for example, we want to give a component some basic styles, but also do not want to exclude the possibility of overwriting these styles.

.base-text { /* specificity (0, 1, 0) */ 
    font-weight: 400; 
}

:where(.base-text){ /* specificity (0, 0, 0) ! */ 
    font-weight: 400; 
}