Vi en un artículo de Nicholas Cerminara el otro día (con cuidado al visitar ese enlace, parece que algunos scripts de seguimiento se han vuelto locos) que Bootstrap 4 tiene un nuevo restablecimiento de CSS incorporado que están llamando Reboot:
Reboot, una colección de cambios CSS específicos de elementos en un solo archivo, kickstart Bootstrap para proporcionar una línea de base elegante, consistente y simple sobre la cual construir.
Si es nuevo en el desarrollo de CSS, la idea general de un restablecimiento de CSS es lidiar con las inconsistencias de estilo en los navegadores. Por ejemplo, acabo de hacer estallar un <button> en una página sin ningún otro estilo. Se aplica Chrome padding: 2px 6px 3px; – Se aplica Firefox padding: 0 8px;. Un reinicio de CSS se aplicaría nuevo padding a ese elemento, para que todos los navegadores sean coherentes sobre lo que aplican. Hay muchos ejemplos así.
A modo de un poco de historia …
En 2007, Jeff Starr reunió varios reinicios de CSS diferentes. El más antiguo fechado es undohtml.css de Tantek Çelik (que es un enlace directo a la fuente). Podemos ver que el propósito detrás de esto era eliminar el estilo predeterminado.
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved. */
/* http://creativecommons.org/licenses/by/2.0 */
/* This style sheet is licensed under a Creative Commons License. */
/* Purpose: undo some of the default styling of common (X)HTML browsers */Con mucho, el reinicio más popular se produjo poco después: el reinicio de Meyer. Tiene cosas diferentes a las de Tantek (incluso se ha actualizado con algunos elementos HTML5) pero el espíritu es el mismo: eliminar el estilo predeterminado. Probablemente reconocerá este famoso bloque de código, encontrando su camino en su panel de estilo DevTools en todas partes:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}Comience con un reinicio como este (en la parte superior de su hoja de estilo de producción) y los estilos que escriba después del texto estarán sobre una base estable.
Años más tarde, a medida que HTML5 se hizo más real, los reinicios como el Reinicio de HTML5 de Richard Clark ganaron popularidad. Todavía era una versión modificada del reinicio de Meyer, y conservaba ese espíritu.
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}Salpicado de todo esto, hubo muchos desarrolladores que fueron mínimos simplemente eliminando el margen y el relleno de todo y dejándolo así:
* {
padding: 0;
margin: 0;
}Trivia tonta: el logotipo de Programar Plusse inspiró en el selector universal y esa idea.
Llega Normalize.css …
Normalize.css representa el primer cambio significativo en el espíritu de lo que debería hacer un restablecimiento de CSS. Esto es lo que me pareció tan diferente:
- Fue una nueva evaluación de todo lo que podría tener un estilo diferente en los navegadores y lo aborda todo. Donde los restablecimientos de CSS más antiguos eran un puñado de líneas de código, la normalización sin comprimir y documentada es 447.
- No eliminó ningún estilo de los elementos que ya eran consistentes en todos los navegadores (en su mayor parte). Por ejemplo, no hay nada en Normalizar para elementos h2-h6, solo una solución para algo extraño de h1. Eso significa que no está eliminando la jerarquía del encabezado, ese estilo predeterminado permanece.
- Se adaptaba más a la idea de modificarlo, en lugar de simplemente incluirlo. Por ejemplo, hay una sección solo para
<pre>etiqueta y una línea de eso establece sufont-family. Puede cambiar eso a la familia de fuentes que desee, y sería tan efectivo como un reinicio.
El código es satisfactorio de leer, ya que explica lo que está haciendo sin ahogarse en detalles:
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbrReboot, Resets, and Reasoning | Programar Plus{
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}Hoy, Normalizar está en 7.0.0 y tiene 30,000 estrellas de GitHub. Es muy popular.
Entonces … ¿se puede opinar sobre los reinicios?
Hemos visto muchas tomas diferentes de los restablecimientos de CSS y hemos visto cambios fundamentales en el enfoque, por lo que creo que es justo decir que los restablecimientos de CSS pueden adoptar una postura obstinada.
Consideremos algunas formas …
- ¿El reinicio toca todos los elementos posibles? ¿O un subconjunto de elementos? ¿Cómo decide qué elementos tocar y cuáles no?
- ¿Qué propiedades se modifican? ¿Solo aquellos con diferencias entre navegadores? ¿O algún otro criterio, como la similitud con otros elementos que necesitaban cambios? ¿Está bien aplicar propiedades a elementos que no tienen problemas entre navegadores en nombre de la coherencia y la eficiencia?
- ¿Intenta preservar el espíritu de la hoja de estilo del agente de usuario? ¿Incumplimientos sensibles?
- ¿Aplica alguna propiedad que no tenga problemas entre navegadores que puedan considerarse beneficiosos para “restablecer”, como los valores predeterminados tipográficos o el tamaño de las cajas?
- ¿Incluye clases de “caja de herramientas” para necesidades comunes? ¿O dejar eso para que otros proyectos se encarguen de ello?
- ¿Le preocupa el tamaño del mismo?
- ¿Utiliza un preprocesador o cualquier otra herramienta?
Eche un vistazo a Vanilla CSS Un-Reset. Un montón de opiniones aquí, comenzando con la idea de que está destinado a rediseñar elementos después de quitarles el estilo y luego con un reinicio. Establece el tamaño de fuente del cuerpo en pt, establece una pila de fuentes monoespaciada muy específica, incluye una ol ol ol ol selector, un clearfix y clases auxiliares de alineación. No hay juicio allí. La gente hace cosas para ayudar con sus propios problemas y estoy seguro de que esto fue útil para el creador. Pero podemos ver que las opiniones brillan allí.
Ahora mire MiniReset.css. ¡Muy diferente! Elimina los estilos de letra “para que el uso de marcado semántico no afecte el estilo”, pero deja algunos valores predeterminados a propósito “para que los botones y las entradas mantengan su diseño predeterminado”, incluye algunas cosas que no tienen cruces -problemas del navegador pero son útiles a nivel mundial (box-sizing), y agrega algunos ayudantes de diseño sensibles menores.
Un conjunto de opiniones totalmente diferente allí.
Jonathan Neal creó un reinicio llamado santize.css que es muy claro sobre sus opiniones. Busque la palabra “obstinado” en el código fuente y la verá 19 veces. Todas estas son elecciones que Jonathan tomó en base a la investigación y lo que parecen ser las mejores prácticas modernas, y sin duda salpicadas de sus propias necesidades y deseos de lo que debería ser un reinicio.
/*
* Remove the text shadow on text selections (opinionated).
* 1. Restore the coloring undone by defining the text shadow (opinionated).
*/
::-moz-selection {
background-color: #b3d4fc; /* 1 */
color: #000000; /* 1 */
text-shadow: none;
}
::selection {
background-color: #b3d4fc; /* 1 */
color: #000000; /* 1 */
text-shadow: none;
}La palabra “restablecer”
Personalmente, creo que es útil pensar en todos ellos bajo el mismo término general y ser consciente de las diferencias filosóficas. Pero, Normalizar se separa intencionalmente:
Una alternativa moderna y lista para HTML5 a los restablecimientos de CSS
Sanitize se llama a sí mismo una biblioteca CSS y no usa la palabra “restablecer” en ningún lugar excepto para citar el restablecimiento de Meyer.
Reiniciar
Reboot es interesante ya que es quizás el jugador más nuevo de este mundo. Su historial de archivos se remonta a 2015, que probablemente esté relacionado con que Bootstrap 4 tarde un poco en desaparecer después de Bootstrap 3. Reboot no tiene su propio repositorio, es parte de Bootstrap. Aquí está el archivo directo y los documentos.
La forma en que lo piensan es interesante:
Reboot se basa en Normalize, proporcionando muchos elementos HTML con estilos algo obstinados utilizando solo selectores de elementos. El estilo adicional se realiza solo con clases. Por ejemplo, reiniciamos algunos <table> estilos para una línea de base más simple y luego proporcionar .table, .table-bordered, y más.
Puede tener una clase que tenga estilo, pero si usa un restablecimiento, no tiene que sobrecargar esa clase con estilos de restablecimiento que manejan problemas de coherencia entre navegadores.
//
// Tables
//
table {
border-collapse: collapse; // Prevent double borders
}
caption {
padding-top: $table-cell-padding;
padding-bottom: $table-cell-padding;
color: $text-muted;
text-align: left;
caption-side: bottom;
}
th {
// Matches default `<td>` alignment by inheriting from the `<body>`, or the
// closest parent with a set `text-align`.
text-align: inherit;
}Definitivamente es obstinado, pero de una manera que funciona muy bien con Bootstrap. El hecho de que esté enterrado dentro de Bootstrap es una señal bastante buena de que está diseñado para ese mundo, no como un complemento para ningún proyecto. Dicho esto, hice todo lo posible para compilar una versión CSS directa aquí.
Adaptación de un restablecimiento según la compatibilidad del navegador
Mientras hablemos del pasado y el futuro de los restablecimientos, vale la pena mencionar Browserslist nuevamente, que es un formato estandarizado para declarar qué navegadores / versiones admite un proyecto.
Un reinicio podría construirse de tal manera que las cosas que incluye sepan por qué están allí. Exactamente qué navegador y versión está allí para admitir. Entonces, si la configuración de la lista de navegadores dice que este proyecto no es compatible con un navegador en particular, ese CSS podría eliminarse.
Eso es lo que hace PostCSS Normalize.