sanitize.css es una hoja de estilos base que extiende la idea de normalize.css para ofrecer valores predeterminados coherentes y útiles en proyectos frontend. A continuación se presentan quince capacidades poco conocidas que pueden agilizar el desarrollo diario.
- Box-sizing global con border-box
La librería establece box-sizing: border-box como valor por defecto para todos los elementos. Así, los tamaños declarados incluyen el relleno y el borde, lo que simplifica los cálculos de maquetación.
- Especificidad nula mediante :where()
Al envolver los selectores con :where(), las reglas de sanitize.css no suman especificidad. Esto permite que los estilos propios sobrescriban los valores base sin recurrir a selectores más complejos.
- Formularios con apariencia unificada
El módulo forms.css reduce las diferencias visuales entre botones, campos de texto, selectores y otros controles en distintos navegadores, proporcionando una base neutral para personalizar.
- Medios responsivos por defecto
Con assets.css, las imágenes, videos y otros elementos multimedia se adaptan al contenedor sin deformarse, ya que se mantiene la relación de aspecto original.
- Pila tipográfica del sistema
El archivo typography.css aprovecha las fuentes del sistema operativo, mejorando el rendimiento y logrando una apariencia nativa en cada plataforma.
- Cursores semánticos para ARIA
La hoja de estilos asigna cursores apropiados según el estado semántico, como cursor: progress para elementos ocupados o cursor: pointer para controles interactivos, mejorando la retroalimentación visual.
- Respeto a la preferencia de movimiento reducido
El módulo reduce-motion.css consulta la preferencia prefers-reduced-motion del sistema para disminuir o eliminar animaciones cuando el usuario así lo solicita.
- Redimensionamiento vertical de textarea
Los elementos textarea solo permiten redimensionarse verticalmente de forma predeterminada, evitando que el usuario altere el ancho de la interfaz.
- Optimización de eventos táctiles
La librería configura touch-action: manipulation en los elementos interactivos, reduciendo el retraso táctil en dispositivos móviles y mejorando la respuesta.
- Herencia en pseudo-elementos
Los pseudo-elementos ::before y ::after heredan propiedades como text-decoration y vertical-align, logrando una coherencia visual sin reglas adicionales.
- Listas de navegación sin estilos
Las listas dentro de elementos nav se muestran sin viñetas ni relleno interno, facilitando la creación de menús sin necesidad de resetear estilos manualmente.
- Color heredado en SVG
Los gráficos SVG toman el color del texto cicrundante cuando no se declara un relleno explícito, lo que simplifica la gestión de iconos temáticos.
- Colapso de bordes en tablas
Las tablas aplican border-collapse: collapse por defecto, eliminando los espacios entre bordes y generando presentaciones de datos más limpias.
- Control de repetición de fondos
El fondo se configura para no repetirse de forma predeterminada, una convención común en diseño moderno que se puede sobrescribir fácilmente cuando sea necesario.
- Ocultación visual con accesibilidad preservada
El contenido que debe permanecer disponible para lectores de pantalla puede ocultarse visualmente sin perder su semántica ni su orden en el flujo del documento.
Instalación
Se puede añadir al proyecto con el gestor de paquetes:
npm install sanitize.css
O importar desde el punto de entrada CSS:
@import url('sanitize.css');
También está disponible a través de CDN:
<link rel="stylesheet" href="https://unpkg.com/sanitize.css" />
Uso modular
Para evitar cargar reglas innecesarias, se pueden importar únicamente los módulos requeridos:
@import url('sanitize.css');
@import url('sanitize.css/forms.css');
@import url('sanitize.css/typography.css');
@import url('sanitize.css/assets.css');
@import url('sanitize.css/reduce-motion.css');