Compatibilidad CSS
La compatibilidad CSS asegura que los estilos se vean igual en distintos navegadores y versiones, esencial para consistencia en UX.
Uso de prefijos vendor
Los prefijos vendor permiten usar propiedades experimentales antes de ser estándar. Ej: -webkit- para Safari/Chrome, -moz- para Firefox.
Este ejemplo muestra cómo usar prefijos en border-radius.
Feature Queries (@supports)
@supports permite aplicar reglas solo si el navegador soporta cierta propiedad.
Este ejemplo usa grid si está disponible, de lo contrario flexbox.
Soporte de funciones principales
| Función | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| Flexbox | ✔ | ✔ | ✔ | ✔ |
| CSS Grid | ✔ | ✔ | 12+ | ✔ |
| mask-image | ✔ | ✔ | ✔ | ✘ |
Consejos para compatibilidad CSS
Buenas prácticas para asegurar compatibilidad CSS.
- Consulta caniuse.com para soporte de propiedades.
- Usa @supports para aplicar propiedades modernas de forma condicional.
- Prueba en varios navegadores y dispositivos antes de publicar.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
Seleccionar idioma
Establecer tema
© 2025 ReadyTools. Todos los derechos reservados.