Pensamientos después de mirar el capítulo del Web Almanac sobre CSS

¡Vaya, no lo vi venir! El HTTP Archive publicó este gran informe sobre el “estado de la web” llamado Web Almanac con escritores invitados que exploraron datos de 5,8 millones de sitios web.

Una Kravetz y Adam Argyle escribieron el capítulo CSS . La cuestión es extraer una cantidad digerible de información de una montaña de datos. Así que hay algo de ironía en el hecho de que exprima mis pensamientos sobre este capítulo para una lectura aún más rápida, pero bueno, allá vamos.

• El 83% de los sitios hace uso rgba()pero sólo el 22% lo utiliza rgb(). Eso tiene mucho sentido para mí, ya que rgb()no es un formato de color particularmente útil, si me preguntas. Es la “a” (alfa) la que le da al formato la capacidad de controlar la transparencia, que sólo recientemente está disponible en el formato más popular, Hex, en forma de códigos hexadecimales de 8 dígitos . Pero incluso entonces, no es tan agradable como rgba(). hsla()Es posiblemente el formato de color más bonito.
• Definitivamente no sorprende que el blanco y el negro sean los dos colores con nombre más populares. Los uso mucho, por su nombre. Incluso cambio las confirmaciones de CSS para usar whiteen lugar de #FFFy blacken lugar de #000porque creo que implica menos sobrecarga mental.
• emes dos veces más popular que rem. Guau. Yo remtambién soy un chico, simplemente porque lo encuentro menos quisquilloso y más predecible. En teoría, todavía me gusta la idea de px en la raíz, rem para componentes y em para elementos de texto , pero no estoy seguro de haberlo logrado de manera tan limpia.
• Las clases son, con diferencia, líderes en tipos de selectores. Al factorizar cuántos se utilizan, tienen una ventaja de más de 10 veces sobre cualquier otra cosa. Me gusta ver eso. Tienen un valor de especificidad bajo, pero no demasiado bajo. Tienen buenas API para manipularlos. Todo su propósito es ser un gancho de estilo. Son independientes de los elementos. Es la forma correcta de peinar. Cuanto más planos mantengas los estilos, menos dolores de cabeza tendrás. Un poco más sorprendente para mí es el hecho de que el número promedio de clases por elemento es uno. Aunque realmente me hace querer saber el decimal. ¿Era 1.1? 1.4? 1,00001?
• Santos cubos. ¿Flexbox en la mitad de los sitios y grid solo en el dos por ciento? El soporte del navegador no es tan diferente. Soy consciente de que ambos son muy útiles y se pueden usar juntos y son para cosas diferentes, pero en general encuentro que grid es más útil y personalmente lo uso con más frecuencia que flexbox.
• Habría adivinado que el número medio de fuentes cargadas en un sitio sería 0, ¡pero son 3! Creo que tiene uno (que es Rubik al momento de escribir este artículo y se usa solo para títulos. La fuente del cuerpo de este sitio es system-ui.) Pero en realidad, es 4, debido a la precarga, los subconjuntos y la negrita frente a la normal y demás. Me pregunto cuándo empezarán a tener impacto las fuentes variables. Creo que reduciría este número con el tiempo. Open Sans y Roboto triplican cualquier otra fuente cargada, y la lista completa es material de Google Font, aparte de algunas instancias de Font Awesome.
• Es curioso cómo algunas bibliotecas importantes pueden distorsionar las estadísticas a una escala tan global/universal por el uso de ciertas funciones. Recuerdo cómo el botón de reproducción de YouTube solía “transformarse” en un botón de pausa usando una tecnología SVG llamada SMIL . Pero debido a que YouTube es tan grande, podría parecer que un porcentaje muy alto del tráfico de Internet incluye SMIL, cuando en realidad es solo un botón en un sitio. filterestá en ese informe. Si bien los filtros son geniales, en realidad es el hecho de que es dentro de las incrustaciones de YouTube y la hoja de estilo de Font Awesome que el porcentaje de sitios que los usan (78%) parece sorprendentemente alto.
• De las páginas que hacen un uso muy intensivo de transiciones y animaciones, las transiciones se utilizan aproximadamente el doble, pero las transiciones se utilizan seis veces más en el percentil 50. Eso me parece correcto. Las transiciones son generalmente más útiles, pero cuantas más animaciones hagas, más recurrirás a herramientas avanzadas como los fotogramas clave.
• Parece que la mayoría de los sitios web tienen aproximadamente 45 consultas de medios. No está del todo claro si se trata de consultas de medios diferentes o si podrían ser las mismas consultas de medios repetidas en otras partes de la hoja de estilo. Eso parece mucho si todos son diferentes, así que sospecho que es solo una herramienta en la que las personas usan consultas de medios anidadas para crear claridad y surgen pero no se combinan porque eso es demasiado extraño con la especificidad. Me interesaría ver cuántas consultas de medios únicas utiliza la gente. Lo más fascinante para mí acerca de los datos de consulta de medios es que min-widthsu max-widthuso es muy similar. Habría adelantado max-widthmucho si hubiera estado adivinando.
• Aproximadamente seis hojas de estilo por sitio. Probablemente sea demasiado difícil saberlo porque activos como este suelen estar alojados en CDN, pero me encantaría saber cuántos son escritos manualmente para el sitio y cuántos son de terceros. ¿La distribución es como tres y tres o como uno y cinco?

Hay mucho más en el informe y CSS es solo uno de los veinte capítulos. ¡Así que ve a cavar!