Compatibilidad de navegadores y caniuse.com
Compruebe la compatibilidad de las funcionalidades entre navegadores en caniuse.com, comprenda los prefijos de proveedor y use polyfills o alternativas cuando sea necesario.
Compatibilidad de navegadores y caniuse.com es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Por qué es importante la compatibilidad?
Los distintos navegadores implementan los estándares web a diferentes velocidades. Es posible que una propiedad CSS o una API de JavaScript disponible en Chrome 130 no exista en una versión antigua de Safari o Firefox. Probar y planificar la compatibilidad evita experiencias deficientes para sus usuarios.
caniuse.com: su referencia de compatibilidad
Visite caniuse.com y escriba cualquier propiedad CSS, API de JavaScript o atributo HTML. Verá una tabla de compatibilidad codificada por colores para los principales navegadores y sus versiones recientes, junto con estadísticas de uso y notas sobre la compatibilidad parcial.
Leer la tabla de caniuse
Verde = compatible. Amarillo = compatibilidad parcial. Rojo = no compatible. Gris = desconocido. Compruebe el porcentaje de uso global en la parte superior: si más del 97 % de los usuarios lo tienen, normalmente puede utilizarlo sin un fallback.
browser-compat-data y MDN
Las páginas de MDN Web Docs incluyen una tabla de compatibilidad de navegadores al final de cada página de referencia de una API. Utiliza los mismos datos que caniuse y los propios proveedores de navegadores los actualizan con frecuencia.
La iniciativa Baseline
La iniciativa Baseline (web.dev/baseline) marca las funcionalidades como Newly Available o Widely Available según su compatibilidad con Chrome, Edge, Firefox y Safari. Una funcionalidad Widely Available se puede utilizar de forma segura sin polyfills.
Polyfills
Un polyfill es código JavaScript que implementa una API más reciente en navegadores antiguos. Fuentes populares: polyfill.io (entrega únicamente los polyfills necesarios), core-js (polyfills completos de JavaScript) y los helpers de Babel.
// polyfill.io example:
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.at,Object.hasOwn"></script>@supports — Consultas de características en CSS
@supports permite escribir CSS que solo se aplica cuando una propiedad es compatible. Proporciona alternativas de CSS, de forma similar a como las consultas de medios proporcionan sobrescrituras adaptables.
/* Fallback for all browsers */
.grid {
display: flex;
flex-wrap: wrap;
}
/* Enhancement for browsers that support grid */
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}Prefijos de proveedor (heredados)
Las características antiguas de CSS necesitaban prefijos de proveedor: -webkit-, -moz-, -ms-. Ahora están en su mayoría obsoletos: los navegadores modernos usan propiedades estándar sin prefijo. Autoprefixer (complemento de PostCSS) los añade automáticamente si todavía son necesarios.
Transpilación con Babel
Babel compila JavaScript moderno (ES2022+) a ES5, que los navegadores antiguos pueden ejecutar. Vite y webpack integran Babel mediante complementos. Configure los navegadores de destino en browserslist dentro de package.json.
// package.json
"browserslist": [
"last 2 versions",
"not dead",
"> 0.5%"
]Pruebas en navegadores reales
La emulación de dispositivos de DevTools no sustituye las pruebas en navegadores reales. Use BrowserStack, Sauce Labs o el navegador Safari real (requiere macOS o iOS) para una verdadera validación entre navegadores.
El panorama de los navegadores evergreen
Chrome, Edge, Firefox y Safari se actualizan automáticamente. La larga cola de navegadores obsoletos se reduce cada año. Para la mayoría de los productos de consumo, dirigirse a las dos últimas versiones principales de cada navegador cubre a más del 95 % de los usuarios.
Comprobación rápida
¿Qué indica una celda verde en la tabla de compatibilidad de caniuse.com?
Repaso: compatibilidad entre navegadores
Consulte caniuse.com antes de usar API nuevas. Lea las tablas de compatibilidad de MDN. Defina conjuntos razonables de navegadores con browserslist. Use @supports para las consultas de características de CSS. Añada polyfills solo cuando sean necesarios. Transpile el JavaScript moderno con Babel. Pruebe las características críticas en navegadores reales.
Preguntas frecuentes
¿La lección «Compatibilidad de navegadores y caniuse.com» es gratis?
Sí — el texto completo de «Compatibilidad de navegadores y caniuse.com» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Compatibilidad de navegadores y caniuse.com»?
Compruebe la compatibilidad de las funcionalidades entre navegadores en caniuse.com, comprenda los prefijos de proveedor y use polyfills o alternativas cuando sea necesario. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Compatibilidad de navegadores y caniuse.com»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Chrome DevTools: Elements, Console y Network
- VSCode: extensiones, Emmet y atajos
- Configuración de Prettier y ESLint
- Compatibilidad de navegadores y caniuse.com