Carregando...

CSS Browser Support Complete Reference

Este guia de referência completo sobre suporte a CSS em navegadores foi criado para ajudar desenvolvedores a planejar e garantir a compatibilidade entre diferentes navegadores. Ele cobre todas as propriedades básicas de CSS, propriedades CSS3 e CSS4, Flexbox, Grid e pseudo-classes. Cada recurso inclui as versões de suporte para Chrome, Firefox, Safari, Edge, Internet Explorer, iOS Safari e Android, juntamente com notas importantes de compatibilidade. O formato em tabela permite uma consulta rápida, facilitando decisões práticas de desenvolvimento. Com este guia, é possível identificar rapidamente quais recursos são seguros para uso em ambientes de produção e quais requerem fallbacks ou prefixos de navegador.

📊 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 Suporte universal
background-color 1 1 1 12 4 1 1 CSS 1 Suporte universal
font-family 1 1 1 12 3 1 1 CSS 1 Suporte universal
margin 1 1 1 12 3 1 1 CSS 1 Suporte universal
padding 1 1 1 12 3 1 1 CSS 1 Suporte universal
border 1 1 1 12 4 1 1 CSS 1 Suporte universal
width 1 1 1 12 4 1 1 CSS 1 Suporte universal
height 1 1 1 12 4 1 1 CSS 1 Suporte universal
display 1 1 1 12 4 1 1 CSS 1 Suporte universal
position 1 1 1 12 4 1 1 CSS 2 Suporte universal
float 1 1 1 12 4 1 1 CSS 1 Suporte 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 Requer prefixo -webkit em versões antigas
box-shadow 10 4 5.1 12 9 5 4 CSS3 Requer prefixo -webkit em versões antigas
text-shadow 2 3.5 4 12 10 4 2.1 CSS3 Não requer prefixo
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 para hexadecimal necessário em navegadores antigos
transform 36 16 9 12 9 9 3 CSS3 Requer prefixo -webkit em versões antigas
transition 26 16 9 12 10 9 4 CSS3 Requer prefixo -webkit em versões antigas
linear-gradient 26 16 7 12 10 7 4.4 CSS3 Requer prefixos extensivos

📊 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 sintaxe diferente
flex-wrap 29 28 9 12 11 9 4.4 CSS3 Somente 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 sintaxe antiga com -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 Use gap para sintaxe 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 Suporte limitado no 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 Não suportado no IE
calc() 26 16 7 12 9 7 4.4 CSS3 Suporte limitado em versões antigas
clamp() 79 75 13.1 79 No 13.4 79 CSS4 Apenas navegadores modernos
filter 53 35 9.1 12 No 9.3 53 CSS3 Suporte limitado no IE com -ms-filter
clip-path 55 3.5 13.1 12 No 13.1 55 CSS3 Requer prefixo -webkit
object-fit 32 36 10 16 No 10 32 CSS3 Não suportado no IE
aspect-ratio 88 89 15 88 No 15 88 CSS4 Apenas 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 Suporte universal
:focus 1 1 1 12 8 1 1 CSS2 Suporte universal
:first-child 1 1 3 12 7 1 1 CSS2 Suporte universal
:last-child 1 1 3 12 9 1 1 CSS3 Somente IE9+
:nth-child() 1 3.5 3 12 9 3.2 1 CSS3 Somente IE9+
:not() 1 1 3.2 12 9 3.2 1 CSS3 Suporte limitado no IE9+
:focus-visible 86 85 15.4 86 No 15.4 86 CSS4 Apenas navegadores modernos
:has() 105 121 15.4 105 No 15.4 105 CSS4 Apenas navegadores muito modernos

Cross-Browser Examples

css
CSS Code 
/* Reset cross-browser */

* {
box-sizing: border-box;
}

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

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

Sempre forneça fallbacks para propriedades CSS mais novas. Utilize progressive enhancement e teste em navegadores-alvo, especialmente Safari móvel e IE. Considere preprocessadores CSS como SASS ou Autoprefixer para adicionar automaticamente prefixos de navegador. Use a regra @supports para recursos modernos e monitore a participação de mercado dos navegadores do seu público. Ferramentas como “Can I Use” fornecem dados atualizados de compatibilidade e ajudam na tomada de decisões de desenvolvimento. Manter práticas consistentes garante que o design funcione de forma confiável em todos os ambientes.

🧠 Teste Seu Conhecimento

Pronto para Começar

Browser Support Knowledge Check

Teste seu conhecimento sobre suporte a CSS em navegadores e compatibilidade.

❓
2
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 63 de 65
Css Tutorial