CSS - Perguntas frequentes

Por que meu CSS, que é válido, não é renderizado corretamente?

Navegadores usam a declaração de DOCTYPE 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 um DOCTYPE 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 DOCTYPE incompleta, incorreta, que não tenham uma declaração DOCTYPE ou 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 DOCTYPE moderna 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 do Modo de padrões, porém considerando algumas poucas peculiaridades encontradas em páginas para navegadores antigos.

Esta é uma lista das declarações de DOCTYPE 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 de DOCTYPE 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 entre `id` e `class`?

Elementos HTML podem ter um atributo id e/ou um atributo class. O atributo id 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 nome janela a um elemento, nenhum outro elemento poderá ter o nome janela).

O atributo class designa um ou vários nomes de classes as quais um elemento pertence. Diferentemente do valor designado no atributo id, os nomes designados em class podem ser reutilizados em outros elementos no documento. De qualquer forma, CSS permite que você aplique estilos tanto para uma id particular quanto para classes.

Algumas dicas de quando usar id e quando usar class:

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 id serã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 um label 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 menor especificidade do que seletores de id, o que torna as regras de estilização mais fáceis de serem sobrepostas.

Nota: Veja Seletores 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:

css

/* A cor padrão do cabeçalho é preta */
h1 {
  color: red;
}
h1 {
  color: black;
}

Isso mudou com CSS 2; a diretiva initial 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.

css

/* 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. (Veja as 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, e Variá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 atributo class, tendo um espaço em branco separando cada uma.

html

<style type="text/css">
  .news {
    background: black;
    color: white;
  }
  .today {
    font-weight: bold;
  }
</style>

<div class="news today">... 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 atributo class é 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 do Inspetor 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.

html

<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 class="news">
  (Reuters) <span class="corpName">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.

html

<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 id="stockTicker">NYS: <span class="stockSymbol">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..

html

<style>
  #stockTicker {
    font-size: 12px;
    font-family: Verdana;
    font-weight: bold;
  }
  .stockSymbol {
    font: 14px Arial;
    color: red;
  }
</style>

<div id="stockTicker">NYS: <span class="stockSymbol">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.

css

#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.

html

<style>
  body * {
    font-weight: normal;
  }
  #stockTicker {
    font: 12px Verdana;
  }
  .corpName {
    font-weight: bold;
  }
  .stockUp {
    color: red;
  }
</style>

<div id="section">
  NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
</div>

No exemplo acima, o seletor * aplica a regra para todos os elementos dentro de body, em qualquer nível hierarquico, incluindo a classe .stockUp. Sendo assim a regra font-weight: bold; aplicada à classe .corpName é sobreposta por font-weight: normal; aplicada a todos os elementos dentro de body.

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 sua especificidade. O estilo inline (regras de estilo definidas no atributo style 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.

html

<style>
  div {
    color: black;
  }
  #orange {
    color: orange;
  }
  .green {
    color: green;
  }
</style>

<div id="orange" class="green" style="color: red;">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 nas Especificações CSS 2.1, capítulo 6.4.3.

O que as propriedades -moz-, -ms-, -webkit-, -o- e -khtml-* fazem?

Estas propriedades, chamadas propriedades 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 de border-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 o Compatibility 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:

css

-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);

Nota: Para mais informações em como lhe dar com propriedades prefixadas, veja Lidando com problemas comuns em HTML e CSS — Lidando com prefixos CSS do nosso módulo Teste Cross-browsing.

Nota: Veja a página Extenções CSS Mozilla para mais informações sobre propriedades CSS prefixadas da Mozilla.

Como `z-index` está relacionado a posicionamento?

A propriedade z-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 tenha position:absolute, position:relative ou position:fixed).

Nota: Para mais informações, veja nosso artigo de aprendizado sobre Posicionamento, e em particular a seção Introduzindo z-index.