Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
CSS - Perguntas frequentes
Por que meu CSS, que é válido, não é renderizado corretamente?
Navegadores usam a declaração deDOCTYPE para decidir se devem exibir o documento usando um modo compatível com os padrões da web ou com padrões de navegadores antigos. Usar corretamente a declaração de umDOCTYPE moderno no início do seu documento HTML melhorará a forma como o navegador trata os padrões utilizados no documento.
Navegadores modernos possuem dois principais modos de renderização:
- Modo de peculiaridades (Quirks Mode): Também chamado de modo retrocompatível, permite que páginas antigas sejam renderizadas como seus autores pretendiam, seguindo regras de renderização não-padronizadas geralmente encontradas em navegadores antigos. Documentos com uma declaração
DOCTYPEincompleta, incorreta, que não tenham uma declaraçãoDOCTYPEou não tenham uma declaração comumente utilizada antes de 2001 serão renderizados deste modo. - Modo de padrões (Standards Mode): Neste modo o navegador tenta seguir os padrões W3C estritamente, ignorando peculiaridades encontradas em documentos designados a navegadores antigos. Espera-se que novas páginas HTML sejam desenvolvidas para navegadores que seguem os padrões da W3C, e como resultado disso, páginas com uma declaração de
DOCTYPEmoderna serão renderizadas deste modo.
Navegadores baseados na engine Gecko possuem um terceiro modo de renderização;Modo de "quase padrões" (Almost Standards Mode), que renderiza as páginas seguindo regras doModo de padrões, porém considerando algumas poucas peculiaridades encontradas em páginas para navegadores antigos.
Esta é uma lista das declarações deDOCTYPE mais usadas e que acionarão o modo de padrões ou de "quase padrões":
<!DOCTYPE html> /* Este é o doctype HTML5. Levando em consideração que navegadores modernos possuem um parser de HTML5, o uso desta declaração é recomendada */<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""https://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""https://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Sempre que possível, use a declaração deDOCTYPE HTML5.
Por que meu CSS, que é válido, não é renderizado?
Abaixo temos algumas das possíveis causas:
- O caminho para o arquivo CSS está incorreto.
- Para ser aplicado, uma folha de estilos CSS deve ser servido ao navegador com o tipo MIME
text/css. Caso o servidor não sirva a folha de estilos com este tipo, as regras CSS não serão interpretadas e aplicadas aos elementos no documento.
Qual a diferença entreid eclass?
Elementos HTML podem ter um atributoid e/ou um atributoclass. O atributoid designa um nome ao elemento ao qual este é aplicado, e para que a marcação seja válida, deverá haver no documento apenas um elemento com o nome designado (Por exemplo: Caso você designe o nomejanela a um elemento, nenhum outro elemento poderá ter o nomejanela).
O atributoclass designa um ou vários nomes de classes as quais um elemento pertence. Diferentemente do valor designado no atributoid, os nomes designados emclass podem ser reutilizados em outros elementos no documento. De qualquer forma, CSS permite que você aplique estilos tanto para umaid particular quanto paraclasses.
Algumas dicas de quando usarid e quando usarclass:
- Utilize classes para estilizar elementos quando você pretender atribuir as mesmas regras de estilização a diversos elementos num documento. Mesmo que você tenha apenas um elemento no momento, utilize classes para sua estilização caso você pretenda reutilizar as mesmas regras em elementos criados futuramente.
- Utilize ids quando você precisar restringir regras de estilização a um determinado bloco ou elemento. Como ids não devem sepetidas num documento, as regras de estilo designadas a uma
idserão aplicadas apenas àquele elemento.
Geralmente é recomendável que se utilize classes sempre que possível, utilizando ids apenas quando absolutamente necessário para usos específicos (como conectar umlabel a um elemento de formulário, ou para estilizar elementos que necessicam ser semanticamente únicos). Abaixo estão descritas algumas vantagens em utilizar classes como forma principal de estilização:
- Usar classes torna seu código extensível — Mesmo que você tenha apenas um elemento a ser estilizado agora, você pode querer adicionar as mesmas regras a outros elementos futuramente.
- Classes permitem que você estilize diversos elementos. Sendo assim, classes podem ajudar a desenvolver folhas de estilo menores; mais enchutas, já que regras podem ser facilmente reutilizadas entre elementos. Isso não só ajuda na manutenção da folha de estilo, como também agiliza a renderização de páginas, principalmente em conexões lentas.
- Seletores de classes tem menorespecificidade do que seletores de id, o que torna as regras de estilização mais fáceis de serem sobrepostas.
Nota:VejaSeletores para mais informações.
Como eu redefino o valor padrão de uma propriedade?
Inicialmente CSS não propiciava a diretiva "default" e a única forma de redefinir o valor padrão de uma propriedade era expliciatamente redeclarando aquela propriedade. Por exemplo:
/* A cor padrão do cabeçalho é preta */h1 { color: red;}h1 { color: black;}Isso mudou com CSS 2; a diretivainitial agora é um valor válido para uma propriedade CSS. Ela redefine tal propriedade para seu valor padrão, o qual é definido nas especificações CSS para tal propriedade.
/* A cor padrão do cabeçalho é preta */h1 { color: red;}h1 { color: initial;}Como eu derivo um estilo de outro?
CSS não exatamente permite que um estilo seja definido com os termos de outro. (Vejaas notas de Eric Meyer sobre a posição do grupo de trabalho a respeito do assunto). Entretanto, é possível atingir o mesmo efeito designando diversas classes a um elemento, eVariáveis CSS agora providenciam uma forma de definir informações sobre um estilo em um lugar e reutilizar estas informações em diversos outros lugares.
Como eu aplico diversas classes a um elemento?
Elementos HTML podem ter diversas classes designadas a si, com as classes sendo listadas no atributoclass, tendo um espaço em branco separando cada uma.
<style type="text/css"> .news { background: black; color: white; } .today { font-weight: bold; }</style><div>... content of today's news ...</div>Caso a mesma propriedade seja declara em mais de uma regra, o conflito é resolvido primeiro pela ordem de especificidade e depois através da ordem das declarações CSS, com o último valor definido da propriedade sendo considerado. A ordem em que o nome das classes aparece no atributoclass é irrelevante.
Por que minhas regras de estilização não funcionam corretamente?
Regras de estilização, mesmo que sejam semanticamente corretas, podem não ser aplicadas em determinadas situações. Você pode utilizar o visualizador de regras CSS doInspetor de DOM para resolver problemas deste tipo, mas as ocasiões mais frequentes onde regras de estilização são ignoradas estão listadas abaixo.
Hierarquia dos elementos HTML
A forma como estilos CSS são aplicados a elementos HTML depende também da hierarquia dos elementos HTML. É importante lembrar que a regra aplicada a um descendente sobrepõe a regra do pai, independente de qualquer especificidade ou prioridade das regras CSS.
<style type="text/css"> .news { color: black; } .corpName { font-weight: bold; color: red; }</style><!-- O texto do item news é preto, mas o nome da corporação é vermelho e em negrito --><div> (Reuters) <span>General Electric</span> (GE.NYS) announced on Thursday...</div>No caso de hierarquias HTML complexas, se uma regra parece ser ignorada, verifique se o elemento está dentro de outro elemento com um estilo diferente.
Regra de estilização explicitamente redefinida
Em folhas de estilo CSS, a ordemé importante. Se você definir uma propriedade e logo depois redefinir a mesma propriedade, a última regra definida será considerada.
<style> #stockTicker { font-weight: bold; } .stockSymbol { color: red; } /* outras regras */ /* outras regras */ /* outras regras */ .stockSymbol { font-weight: normal; }</style><!-- Boa parte do texto está em negrito, exceto "GE", que é vermelho e não está em negrito --><div>NYS: <span>GE</span> +1.0 ...</div>Para evitar que este tipo de problema, tente definir regras apenas uma vez para um determinado seletor e agrupe as regras para aquele seletor.
Uso de uma propriedade reduzida
Utilizar propriedades reduzidas para definir regra de estilização é interessante pois permite definir diversas propriedade de uma regra em uma sintaxe compacta e que permite otimizar o tamanho da folha de estilos. Utilizar propriedades reduzidas para definir apenas uma propriedade é permitido, mas deve ser lembrado que atributos da propriedade não definidos são redefinidos para seu valor padrão. Ou seja, isso pode acabar sobrepondo regras anteriormente definidas implicitamente..
<style> #stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; } .stockSymbol { font: 14px Arial; color: red; }</style><div>NYS: <span>GE</span> +1.0 ...</div>No exemplo anterior o problema ocorre em regras pertencentes a diferentes elementos. Mas também poderia acontecer para o mesmo elemento, pois a ordem das regrasé importante.
#stockTicker { font-weight: bold; font: 12px Verdana; /* font-weight agora está definido como "normal" */}Uso do seletor*
O seletor curinga* faz referência a qualquer elemento, e deve ser usado com cuidado.
<style> body * { font-weight: normal; } #stockTicker { font: 12px Verdana; } .corpName { font-weight: bold; } .stockUp { color: red; }</style><div> NYS: <span><span>GE</span></span> +1.0 ...</div>No exemplo acima, o seletor * aplica a regra para todos os elementos dentro debody, em qualquer nível hierarquico, incluindo a classe.stockUp. Sendo assim a regrafont-weight: bold; aplicada à classe.corpName é sobreposta porfont-weight: normal; aplicada a todos os elementos dentro debody.
O uso do seletor * também deve ser minimizado por ser um seletor lento, especialmente quando não utilizado como o primeiro elemento de um seletor. Este seletor deve ser evitado o máximo possível.
Especificidade em CSS
Quando multiplas regras são aplicadas a um elemento, a regra a ser renderizada depende de suaespecificidade. O estiloinline (regras de estilo definidas no atributostyle de um elemento HTML) tem a mais alta especificidade e irá sobrepor qualquer seletor. Seletores de ID tem a segunda mais alta especificidade, com seletores de classes vindo logo após e, eventualmente, seletores de elementos (tags). Tendo isso em mente, a cor do texto da<div> abaixo terá a cor vermelha.
<style> div { color: black; } #orange { color: orange; } .green { color: green; }</style><div>Isso é vermelho</div>As regras se tornam mais complicadas quando o seletor tem diversas partes. Informações mais detalhadas sobre como a especificidade de seletores é calculada podem ser encontradas nasEspecificações CSS 2.1, capítulo 6.4.3.
O que as propriedades -moz-*, -ms-*, -webkit-*, -o-* e -khtml-* fazem?
Estas propriedades, chamadaspropriedades prefixadas, são extenções ao padrão CSS. Elas permitem o uso de recursos experimentais e fora dos padrões em navegadores sem poluir o namespace convencional, prevenindo que incompatibilidades entre implementações experimentais e fora dos padrões surjam quando os padrões CSS forem expandidos.
Apesar do vasto uso na web, o uso de propriedades prefixadas não é recomendado em ambiente de produção. O uso indiscriminado de funcionalidades experimentais ou não-padrão pode causar problemas de compatibilidade futuros (como uma funcionalidade experimental mudando de nome, ou tendo o mesmo nome de uma outro funcionalidade que no passado tinha uma finalidade completamente diferente) e não renderizar páginas de forma correta em diferentes navegadores. Outro problema muito comum encontrado pelo uso indiscriminado de propriedades prefixadas é a declaração de regras que acabam se tornando exclusivas para determinadas engines, quebrando a renderização em outros navegadores, mesmo estes navegadores dando suporte à propriedade padrão não-prefixada (Por exemplo, apenas a propriedade-webkit-border-radius sendo usada em uma regra ao invés deborder-radius, que é suportada por todos os navegadores, inclusive os baseados em webkit).
Para amenizar os problemas de incompatibilidade gerados pelo uso de propriedades prefixadas (principalmente-webkit-), foi estabelecido oCompatibility Living Standard, o qual sugere um conjunto de propriedades-webkit- que navegadores (mesmo não utilizando a engine webkit) devem suportar. Outra medida que vem sendo tomada por desenvolvedores de navegadores é abandonar o suporte a propriedades prefixadas em versões estáveis dos navegadores, mantendo suporte a tais propriedades apenas emNightly Builds e similares, desencorajando o uso em ambiente de produção.
Caso você precise usar propriedades prefixadas em seu trabalho, você deve declarar primeiramente as propriedades prefixadas e, por último, declarar a versão padrão não-prefixada da propriedade anteriormente declara, garantindo que o navegador utilize a versão especificada nos padrões assim que suportado. Por exemplo:
-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);transform: rotate(90deg);Nota:Para mais informações em como lhe dar com propriedades prefixadas, vejaLidando com problemas comuns em HTML e CSS — Lidando com prefixos CSS do nosso móduloTeste Cross-browsing.
Nota:Veja a páginaExtenções CSS Mozilla para mais informações sobre propriedades CSS prefixadas da Mozilla.
Comoz-index está relacionado a posicionamento?
A propriedadez-index especifica a ordem dos elementos da pilha.
Um elemento com z-index/ordem na pilha maior sempre será renderizado à frente de um elemento com um z-index/ordem de pilha menor.z-index funcionará apenas em elementos que tenham uma posição especificada (Ou seja, só funcionará caso o elemento tenhaposition:absolute,position:relative ouposition:fixed).
Nota:Para mais informações, veja nosso artigo de aprendizado sobrePosicionamento, e em particular a seçãoIntroduzindo z-index.