Este es un truco CSS genuino de Harry que le brinda algunos consejos genéricos de rendimiento basados en lo que ve en su <head> elemento.
Primero, es posible hacer un <style> bloque visible como cualquier otro elemento cambiando el display lejos del defecto de none. Es un pequeño truco agradable. Incluso puedes hacer eso para cosas en el <head>, por ejemplo…
head,
head style,
head script {
display: block;
}A partir de ahí, Harry se vuelve muy inteligente con los selectores, determinando situaciones problemáticas a partir del uso y la ubicación de ciertas etiquetas. Por ejemplo, digamos que hay un <script> que viene después de algunos estilos …
<head>
<link rel="stylesheet" href="https://css-tricks.com/ct-css-performance-hints-via-injected-stylesheet-alone/...">
<script src="https://css-tricks.com/ct-css-performance-hints-via-injected-stylesheet-alone/..."></script>
<title>Page Title</title>
<!-- ... -->Bueno, eso es malo, porque el script está bloqueado por CSS probablemente innecesariamente. Quizás algún software sofisticado de herramientas de rendimiento pueda decírselo. ¿Pero sabes qué más se puede hacer? ¡Un selector de CSS!
head [rel="stylesheet"]:not([media="print"]):not(.ct) ~ script,
head style:not(:empty) ~ script {
}Eso es como decir head link ~ script, pero un poco más elegante en el sentido de que solo selecciona hojas de estilo o bloques de estilo reales que realmente bloquean (y no a sí mismos). Luego, Harry aplica estilo y pseudocontenido a los bloques para que puedas usar la hoja de estilo como una herramienta de depuración de rendimiento visual.
Eso es malditamente inteligente. La hoja de estilo tiene un montón de pequeñas cosas que puede probar, como atributos que no necesita, recursos de bloqueo y elementos que están fuera de servicio.