Lista de verificação de compatibilidade de CSS e navegador

Uma lista de verificação prática para layouts resilientes em navegadores e dispositivos modernos.

• Comece com HTML semântico e um layout legível sem JavaScript.
• Use consultas de recursos como @suporta quando o aprimoramento depende de um recurso CSS.
• Teste o foco do teclado, zoom de 200%, movimento reduzido, modo escuro e cores forçadas.
• Evite alturas fixas para contêineres de texto; permitir envolvimento e expansão.
• Forneça substitutos para funções de cores mais recentes, consultas de contêiner e seletores avançados quando seu público precisar deles.
• Teste Safari/iOS, Chromium e Firefox em vez de depender de um mecanismo.
• Use propriedades lógicas para layouts multilíngues e da direita para a esquerda.
• Verifique os estilos de impressão e os controles do formulário, não apenas o layout visual principal.

Ferramentas CSS geradas úteis

Gerador de grade CSS, Calculadora de braçadeira CSSe Gerador de gradiente CSS.