Cargando...

CSS Browser Support Complete Reference

Esta guía completa de soporte de CSS en navegadores está diseñada para ayudar a los desarrolladores a planificar la compatibilidad entre distintos navegadores. Proporciona información detallada sobre la compatibilidad de propiedades básicas de CSS, propiedades CSS3 y CSS4, Flexbox, Grid y pseudo-clases. Cada propiedad incluye soporte en Chrome, Firefox, Safari, Edge, Internet Explorer, iOS Safari y Android, además de notas sobre compatibilidad y prefijos necesarios. El formato de tabla facilita la consulta rápida, permitiendo identificar qué funciones son seguras de usar y cuáles requieren fallbacks o prefijos, asegurando que los diseños se muestren correctamente en todos los entornos.

📊 Basic CSS Properties Support

Property Chrome Firefox Safari Edge IE iOS Safari Android First Support Notes
color 1 1 1 12 3 1 1 CSS 1 Soporte universal
background-color 1 1 1 12 4 1 1 CSS 1 Soporte universal
font-family 1 1 1 12 3 1 1 CSS 1 Soporte universal
margin 1 1 1 12 3 1 1 CSS 1 Soporte universal
padding 1 1 1 12 3 1 1 CSS 1 Soporte universal
border 1 1 1 12 4 1 1 CSS 1 Soporte universal
width 1 1 1 12 4 1 1 CSS 1 Soporte universal
height 1 1 1 12 4 1 1 CSS 1 Soporte universal
display 1 1 1 12 4 1 1 CSS 1 Soporte universal
position 1 1 1 12 4 1 1 CSS 2 Soporte universal
float 1 1 1 12 4 1 1 CSS 1 Soporte universal

📊 CSS3 Properties Support

Property Chrome Firefox Safari Edge IE iOS Safari Android First Support Notes
border-radius 5 4 5 12 9 4 2.1 CSS3 Requiere prefijo -webkit en versiones antiguas
box-shadow 10 4 5.1 12 9 5 4 CSS3 Requiere prefijo -webkit en versiones antiguas
text-shadow 2 3.5 4 12 10 4 2.1 CSS3 No necesita prefijo
opacity 1 1 2 12 9 2 1 CSS3 Fallback filter: alpha() para IE8
rgba() 1 3 3.1 12 9 3.2 2.1 CSS3 Fallback a hex en navegadores antiguos
transform 36 16 9 12 9 9 3 CSS3 Requiere prefijo -webkit en versiones antiguas
transition 26 16 9 12 10 9 4 CSS3 Requiere prefijo -webkit en versiones antiguas
linear-gradient 26 16 7 12 10 7 4.4 CSS3 Requiere varios prefijos

📊 Flexbox Support

Property Chrome Firefox Safari Edge IE iOS Safari Android First Support Notes
display: flex 29 28 9 12 11 9 4.4 CSS3 IE10-11 usa -ms-flex
flex-direction 29 28 9 12 11 9 4.4 CSS3 IE usa sintaxis diferente
flex-wrap 29 28 9 12 11 9 4.4 CSS3 Solo IE11+
justify-content 29 28 9 12 11 9 4.4 CSS3 IE usa -ms-flex-pack
align-items 29 28 9 12 11 9 4.4 CSS3 IE usa -ms-flex-align
flex-grow 29 28 9 12 11 9 4.4 CSS3 IE usa -ms-flex-positive
flex-shrink 29 28 9 12 11 9 4.4 CSS3 IE usa -ms-flex-negative
order 29 28 9 12 11 9 4.4 CSS3 IE usa -ms-flex-order

📊 CSS Grid Support

Property Chrome Firefox Safari Edge IE iOS Safari Android First Support Notes
display: grid 57 52 10.1 16 10 10.3 57 CSS3 IE10-11 usa sintaxis antigua con -ms-
grid-template-columns 57 52 10.1 16 10 10.3 57 CSS3 IE usa -ms-grid-columns
grid-template-rows 57 52 10.1 16 10 10.3 57 CSS3 IE usa -ms-grid-rows
grid-gap 57 52 10.1 16 No 10.3 57 CSS3 Usar gap en sintaxis moderna
grid-column 57 52 10.1 16 10 10.3 57 CSS3 IE usa -ms-grid-column
grid-row 57 52 10.1 16 10 10.3 57 CSS3 IE usa -ms-grid-row
justify-items 57 52 10.1 16 11 10.3 57 CSS3 Soporte limitado en IE

📊 Modern CSS Features Support

Property Chrome Firefox Safari Edge IE iOS Safari Android First Support Notes
custom properties 49 31 9.1 16 No 9.3 49 CSS3 No soportado en IE
calc() 26 16 7 12 9 7 4.4 CSS3 Soporte limitado en versiones antiguas
clamp() 79 75 13.1 79 No 13.4 79 CSS4 Solo navegadores modernos
filter 53 35 9.1 12 No 9.3 53 CSS3 Soporte limitado en IE con -ms-filter
clip-path 55 3.5 13.1 12 No 13.1 55 CSS3 Requiere prefijo -webkit
object-fit 32 36 10 16 No 10 32 CSS3 No soportado en IE
aspect-ratio 88 89 15 88 No 15 88 CSS4 Solo navegadores modernos

📊 Pseudo-class Support

Selector Chrome Firefox Safari Edge IE iOS Safari Android First Support Notes
:hover 1 1 1 12 4 1 1 CSS1 Soporte universal
:focus 1 1 1 12 8 1 1 CSS2 Soporte universal
:first-child 1 1 3 12 7 1 1 CSS2 Soporte universal
:last-child 1 1 3 12 9 1 1 CSS3 Solo IE9+
:nth-child() 1 3.5 3 12 9 3.2 1 CSS3 Solo IE9+
:not() 1 1 3.2 12 9 3.2 1 CSS3 Soporte limitado en IE9+
:focus-visible 86 85 15.4 86 No 15.4 86 CSS4 Solo navegadores modernos
:has() 105 121 15.4 105 No 15.4 105 CSS4 Solo navegadores muy modernos

Cross-Browser Examples

css
CSS Code 
/* Reinicio de estilos cross-browser */

* {
box-sizing: border-box;
}

/* Flexbox con fallbacks */
.flex-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

/* Grid con fallback para IE */
.grid {
display: -ms-grid;
display: grid;
}

Se recomienda siempre proporcionar fallbacks para propiedades CSS nuevas y utilizar un enfoque de mejora progresiva (progressive enhancement). Testear en navegadores objetivo, especialmente Safari móvil e Internet Explorer, es crucial. Considera usar preprocesadores CSS como SASS o Autoprefixer para agregar prefijos automáticamente. Usa la regla @supports para detectar soporte de funciones modernas. Mantente al tanto de la cuota de mercado de los navegadores entre tu audiencia y consulta herramientas como “Can I Use” para información actualizada sobre compatibilidad. Estas prácticas garantizan que el diseño se vea correctamente en todos los entornos.

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Browser Support Knowledge Check

Prueba tus conocimientos sobre soporte de CSS en navegadores y compatibilidad.

❓
2
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 63 de 65
Css Tutorial