CSS (hojas de estilo en cascada) es un lenguaje de hojas de estilo para describir la presentación de un documento HTML o XML (incluidos los dialectos XML como SVG, MathML o XHTML). CSS especifica cómo deben aparecer los elementos en una pantalla, en papel, en el habla o en otras formas de medios.
Mientras usa CSS, el desarrollador puede encontrar inconsistencias en la configuración del navegador, como alturas de línea predeterminadas, márgenes y tamaños de fuente de encabezado, etc. Algunos navegadores, por ejemplo, emplean márgenes izquierdos para sangrar listas ordenadas y desordenadas, mientras que otros usan el relleno izquierdo. Los márgenes superior e inferior de los encabezados son ligeramente diferentes, las distancias de sangría varían, etc. Ahí es donde entra Restablecer y normalizar CSS para hacer que el valor predeterminado se vea más consistente en todos los navegadores y, por lo tanto, pase menos tiempo luchando con los valores predeterminados del navegador.
Veamos brevemente estas técnicas:
Restablecimiento de CSS: un restablecimiento de CSS es un conjunto de estilos que carga antes que sus otros estilos para eliminar los estilos integrados del navegador. Cada navegador tiene su propia hoja de estilo de agente de usuario , que emplea para hacer que los sitios web sin estilo sean más legibles. La mayoría de los navegadores, por ejemplo, hacen que los enlaces sean azules y los enlaces visitados sean morados de forma predeterminada, agregan un borde y relleno a las tablas, aplican varios tamaños de fuente a H1, H2, H3 y prácticamente a todo, y aplican una cantidad específica de relleno a casi todo.
¿Se ha preguntado alguna vez por qué los botones Enviar aparecen de manera diferente en los distintos navegadores?
Obviamente, esto causa mucho dolor a los autores de CSS porque no pueden descubrir cómo hacer que sus sitios web se vean igual en todos los navegadores. Los autores de CSS pueden usar un Restablecimiento de CSS para hacer que el estilo de cada navegador se restablezca a nulo, minimizando las diferencias entre navegadores tanto como sea posible. Luego puede cambiar el estilo de su contenido utilizando la base consistente que ha establecido con su restablecimiento, con la seguridad de que las variaciones de los navegadores en su representación predeterminada de HTML no lo afectarán.
Con un restablecimiento de CSS, los autores de CSS pueden obligar a todos los navegadores a que restablezcan todos sus estilos a cero, evitando así las diferencias entre navegadores tanto como sea posible.
Por ejemplo, para configurar todos los elementos para que tengan el mismo peso y estilo de fuente, usamos:
font-weight: inherit; font-style: inherit; font-family: inherit;
PERO, el navegador Internet Explorer no es compatible con la herencia, por lo tanto, la herencia automática de valores no ocurrirá y la interfaz de usuario parecerá rota cuando se vea en IE. Restablecer ayuda a superar problemas como estos mientras se mantiene la interfaz de usuario.
Ejemplo: En este ejemplo, veremos cómo usar la técnica de reinicio de CSS que se cargará antes que nuestros otros estilos para eliminar los estilos de navegador integrados.
restablecer.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Resetting CSS | GeeksForGeeks </title> <!-- Import the CSS Reset --> <link rel= "stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css"> </head> <body> <!-- HTML Content --> <h1>GeeksForGeeks</h1> <h2>Hello There!</h2> <h3>We Are Performing Reset CSS</h3> <p>It Resets the Default CSS</p> </body> </html>
Producción:
Restablecer CSS
Normalización de CSS: la normalización de CSS mejora la coherencia entre navegadores en el estilo predeterminado del elemento HTML del agente de usuario del navegador. Es un reemplazo compatible con HTML5 para el restablecimiento de CSS estándar.
Los propósitos de la normalización son:
- Conserve los navegadores útiles predeterminados en lugar de borrarlos.
- Estandarice estilos para una amplia variedad de elementos HTML.
- Corregir errores e incoherencias de navegadores comunes.
- Mejore la usabilidad a través de mejoras sutiles.
- Use comentarios y documentación detallada para explicar el código.
Ahora pasemos a resolver la duda de qué es mejor y qué se debe utilizar entre estas dos técnicas para suavizar el CSS. La normalización mantiene valores predeterminados útiles en lugar de no estilizar todo y no abarrotará la ventana de herramientas de desarrollo. Además, Restablecer está destinado a eliminar todo el estilo predeterminado del navegador en los elementos. Por ejemplo, los márgenes, los rellenos y los tamaños de fuente de todos los elementos se restablecen para que sean iguales. Tendrá que volver a declarar el estilo para los elementos tipográficos comunes; por otro lado, la normalización conserva estilos predeterminados útiles en lugar de eliminar todos los estilos por completo. La normalización de CSS es una tecnología más nueva que la antigua Restablecimiento de CSS, por lo que es modular y fácil de usar. Finalmente, como ahora conocemos la diferencia entre Restablecer y Normalizar, entendemos que no son muy diferentes ya que ambos luchan para evitar la ruptura de la interfaz de usuario de una página web.
Ejemplo: En este ejemplo, veremos cómo usar la técnica de normalización de CSS.
normalizar.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Normalizng CSS | GeeksForGeeks </title> <!-- Import Normalize.css --> <link rel="stylesheet" href= "https://necolas.github.io/normalize.css/7.0.0/normalize.css"> </head> <body> <!-- HTML Content --> <h1>GeeksForGeeks</h1> <h2>Hello There!</h2> <h3>We Are Performing Normalize CSS</h3> <p>It Normalizes the Default CSS</p> </body> </html>
Producción:
Normalizando CSS
|
Restablecimiento |
normalizando |
| Restablece todos los estilos thehas que vienen con el agente de usuario del navegador. | Proporciona coherencia entre navegadores en el estilo predeterminado de los elementos HTML que proporciona el agente de usuario del navegador. |
| El restablecimiento tiene una gran string de selectores y realizan muchas anulaciones innecesarias en el estilo. | No se ven muchas grandes strings de selectores de CSS mientras se normaliza, ya que utiliza los estilos del agente de usuario. |
| Es difícil depurar ya que es casi imposible identificar errores. | La depuración es fácil mientras se normaliza |
| El restablecimiento no es modular (no hay cortes de sección en los estilos) | La normalización es modular (el estilo se divide en secciones para facilitar) |
Publicación traducida automáticamente
Artículo escrito por shrish0608 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA