Una especie de truco clásico para todos hoy. Conoce el <style> bloques que puedes poner en el <head> de su HTML para hacer estilo? En realidad, no tienes que ponerlos en tu cabeza, pueden estar en cualquier parte de la página.
¿Y lo que es más? Es solo un elemento como cualquier otro. La hoja de estilo predeterminada de todos los navegadores la convierte en display: none;.
Si lo mueve hacia abajo en el cuerpo y lo restablece a display: block; puede ver el mismo código que está aplicando estilo a esa página. Bien podría hacer que se vea bien y codificado para ¿eh?
body style {
display: block;
background: #333;
color: white;
font: 13px/1.8 Monaco, Mono-Space;
padding: 20px;
white-space: pre;
}¿Y lo que es más? Puedes darle el atributo HTML5 de contenteditable y literalmente puedes editar el CSS allí mismo y ver cómo afecta la página.
<style scoped contenteditable>body {
background: green;
}</style>
Ver demostración
Así es como se hace todo el código en la página The Shapes of CSS. No solo es un poco ordenado, sino que es muy útil en una página como esa para que no tenga que mantener el CSS en dos lugares.
No creo que sea una práctica muy buena en general, fuera de las demostraciones de CSS. <style> En general, iría tan lejos como para decir que son una mala práctica a menos que se trate de un escenario de terceros realmente específico, como donde inyectar estilos es la forma más eficiente de diseñar contenido de terceros recién inyectado.
También para el registro, no es inválido de usar <style> fuera del <head> siempre que use el atributo de ámbito y es el primer hijo de su padre. De lo contrario, no es válido. Se supone que el atributo de ámbito (aunque actualmente no es compatible con navegadores) implica que los estilos incluidos solo se aplican a ese elemento principal y en ningún otro lugar. Obtenga más información al respecto.