Como trabalhar com CSS3 Seletores

Em meados de 2010, web designers e desenvolvedores se alegrou como CSS3 começou a fazer o seu caminho para o mainstream. Desde aquela época, o suporte ao navegador para CSS3 tem aumentado e melhorado, embora CSS3 não é oficialmente um padrão W3C ainda.

Na verdade, o único inconveniente (se você ainda quiser chamar assim) para a utilização desses seletores de hoje é que você pode ocasionalmente ainda precisa adicionar alguns prefixos específicas do navegador para o seu CSS para garantir que todos os estilos CSS3 aparecem corretamente na mais velhos versões dos navegadores mais populares.

Para ilustrar, se todos os navegadores suportados do CSS3 colunas selector, você só precisa especificar um único colunas declaração em seu estilo como este:

div {colunas: 100px} 3-

No entanto, porque este selector não é suportada da mesma forma por todos os navegadores populares, a solução é escrever seu declaração CSS3 único primeiro, e depois diretamente abaixo dela você vai incluir declarações duplicadas com prefixos específicas do navegador. Note-se como os comentários CSS são adicionados ao CSS para identificar os navegadores associados com cada prefixo:

div {colunas: 100px 3--webkit-colunas: 100px 3- / * Safari e Chrome * /-moz-colunas: 100px 3- /* Raposa de fogo */}

Aqui está uma lista de prefixos CSS3 por navegador:

navegadorPrefixo
Internet Explorer-Senhora-
Raposa de fogo-moz-
Google Chrome-webkit-
Safári-webkit-
Ópera-o- ou -xv-

Para obter uma lista up-to-date de suporte do browser para todas as propriedades CSS3, veja a tabela no w3schools.com.

Também não deixe de baixar uma cópia gratuita da Revista Smashing Folha CSS3 fraude PDF, que pode ajudá-lo a descobrir como usar CSS3 em seus projetos web: Revista Smashing.

Semelhante

menu