Gedanken nach dem Lesen des Kapitels über CSS im Web Almanac

Wow, damit habe ich nicht gerechnet! Das HTTP Archive hat diesen großen „State of the Web“-Bericht namens Web Almanac veröffentlicht, in dem Gastautoren Daten von 5,8 Millionen Websites untersuchen.

Una Kravetz und Adam Argyle schrieben das CSS-Kapitel. Ziel ist es, eine verdauliche Menge an Erkenntnissen aus einem Berg von Daten zu gewinnen. Daher gibt es hier eine gewisse Ironie, wenn ich meine Gedanken zu diesem Kapitel für eine noch schnellere Lektüre zusammenfasse, aber na ja, los geht's.

• 83 % der Websites verwenden rgba(), aber nur 22 % verwenden rgb(). Das ergibt für mich absolut Sinn, denn rgb() ist kein besonders nützliches Farbformat, wenn Sie mich fragen. Es ist das "a" (Alpha), das dem Format die Möglichkeit gibt, Transparenz zu steuern, die erst seit kurzem im beliebtesten Format, Hex, in Form von 8-stelligen Hex-Codes verfügbar ist. Aber selbst dann ist es nicht so schön wie rgba(). hsla() ist wohl das schönste Farbformat.
• Es ist definitiv keine Überraschung, dass Weiß und Schwarz die beiden beliebtesten benannten Farben sind. Ich verwende sie namentlich oft. Ich ändere sogar CSS-Commits, um white anstelle von #FFF und black anstelle von #000 zu verwenden, weil ich finde, dass es weniger mentalen Aufwand bedeutet.
• em ist doppelt so beliebt wie rem. Wow. Ich bin selbst ein rem-Typ, einfach weil ich es weniger pingelig und vorhersagbarer finde. Theoretisch gefällt mir immer noch die Idee von px für das Root, rem für Komponenten und em für Textelemente, aber ich bin mir nicht sicher, ob ich es jemals so sauber umgesetzt habe.
• Klassen sind mit Abstand führend bei den Selektortypen. Wenn man bedenkt, *wie viele* davon verwendet werden, haben sie einen Vorsprung von mehr als dem 10-fachen gegenüber allem anderen. Das sehe ich gern. Sie haben einen niedrigen, aber nicht zu niedrigen Spezifitätswert. Sie bieten gute APIs zur Manipulation. Ihr gesamter Zweck ist es, ein Styling-Hook zu sein. Sie sind element-agnostisch. Es ist einfach der richtige Weg, um Styling zu betreiben. Je flacher Sie die Stile halten, desto weniger Kopfschmerzen werden Sie haben. Etwas überraschender für mich ist die Tatsache, dass die durchschnittliche Anzahl von Klassen pro Element eins ist. Das lässt mich wirklich die Dezimalzahl wissen wollen. War es 1,1? 1,4? 1,00001?
• Heiliger Bimbam. Flexbox auf der Hälfte der Websites und Grid nur auf zwei Prozent?! Die Browserunterstützung ist nicht *so* unterschiedlich. Ich bin mir durchaus bewusst, dass beide sehr nützlich sind und zusammen verwendet werden können und für unterschiedliche Dinge gedacht sind, aber ich finde Grid generell nützlicher und persönlich verwende ich es öfter als Flexbox.
• Ich hätte vermutet, dass die mittlere Anzahl der *geladenen* Schriftarten auf einer Website im Durchschnitt 0 beträgt, aber es sind 3! Ich denke, CSS-Tricks hat eine (Rubik zum Zeitpunkt des Schreibens, nur für Titel verwendet. Die Schriftart des Körpers dieser Website ist system-ui). Aber eigentlich sind es 4, wegen Preloading und Subsetting und Bold vs. Regular und so weiter. Ich frage mich, wann variable Schriftarten anfangen werden, sich auszuwirken. Ich würde denken, das würde diese Zahl im Laufe der Zeit senken. Open Sans und Roboto sind dreimal so viele wie jede andere geladene Schriftart, und die gesamte Liste besteht aus Google Font-Sachen, abgesehen von einigen Instanzen von Font Awesome.
• Es ist lustig, wie einige große Bibliotheken Statistiken in einem so globalen/universellen Maßstab für ihre Nutzung bestimmter Funktionen verzerren können. Ich erinnere mich, wie sich YouTubes Play-Button mit einer SVG-Technologie namens SMIL in einen Pause-Button "verwandelte". Aber weil YouTube so riesig ist, konnte es wie ein sehr hoher Prozentsatz des Internetverkehrs SMIL beinhalten, obwohl es wirklich nur ein Button auf einer einzigen Website war. filter ist in diesem Bericht enthalten. Während Filter cool sind, ist es wirklich die Tatsache, dass sie zufällig in YouTube-Einbettungen und dem Stylesheet von Font Awesome vorkommen, die den Prozentsatz der Websites, die sie verwenden (78 %), erstaunlich hoch erscheinen lässt.
• Von Seiten, die Übergänge und Animationen sehr intensiv nutzen, werden Übergänge etwa doppelt so stark genutzt, aber Übergänge werden am 50. Perzentil sechsmal häufiger verwendet. Das erscheint mir richtig. Übergänge sind generell nützlicher, aber je mehr Animationen Sie machen, desto mehr greifen Sie zu fortgeschrittenen Werkzeugen wie Keyframes.
• Es scheint, dass die meisten Websites etwa 45 Media Queries haben. Es ist nicht ganz klar, ob das *unterschiedliche* Media Queries sind oder ob es sich um dieselben Media Queries handelt, die anderswo im Stylesheet wiederholt werden. Das erscheint viel, wenn sie alle unterschiedlich sind, daher vermute ich, dass es sich nur um ein Tooling-Problem handelt, bei dem Leute verschachtelte Media Queries zur besseren Lesbarkeit verwenden und diese herausgefiltert werden, aber nicht kombiniert werden, weil das bei der Spezifität zu seltsam ist. Ich wäre daran interessiert zu sehen, wie viele eindeutige Media Queries Leute verwenden. Das Faszinierendste für mich an den Media Query-Daten ist, dass min-width und max-width im Gebrauch Kopf an Kopf liegen. Hätte ich raten müssen, hätte ich max-width weit vorne gesehen.
• Etwa sechs Stylesheets pro Website. Es ist wahrscheinlich zu schwer zu sagen, da Assets wie diese so oft auf CDNs gehostet werden, aber ich würde gerne wissen, wie viele von Hand für die Website erstellt wurden und wie viele von Drittanbietern stammen. Ist die Verteilung drei zu drei oder eins zu fünf?

Es gibt noch viel mehr in dem Bericht, und CSS ist nur eines von zwanzig Kapiteln. Also, graben Sie mal los!