Relatório de desenvolvimento para a Web
5 coisas que os desenvolvedores da Web precisam saber sobre CSS
Como CSS é uma especificação muito grande, é comum se esquecer de recursos que podem ajudá-lo a reduzir scripts, códigos de estilo e HTML, o que, por sua vez, pode facilitar a manutenção de seus projetos. Na coluna deste mês, abordo cinco fatos sobre CSS que os desenvolvedores da Web frequentemente se esquecem de levar em consideração.
1. Há mais seletores do que apenas de ID, tipo e classe
Os seletores de elemento, classe e ID são comuns e conhecidos — e incluídos em todos os sites da Web. Muitos desenvolvedores da Web usam apenas esses seletores, embora o CSS tenha outros que permitem codificar com mais precisão, evitando códigos redundantes, não reutilizáveis ou difíceis de manter. Conhecer a gama completa de seletores de CSS permite escolher aqueles que irão ajudá-lo a reduzir o tempo gasto em tarefas que não são essenciais para solucionar problemas de negócios.
Entre os vários seletores disponíveis, os seletores de atributo permitem selecionar um ou mais elementos dependendo da existência ou do valor de um dos atributos do elemento. Os seletores de atributo são especialmente valiosos ao trabalhar com elementos de formulário HTML, como os mostrados na Figura 1.
input[type="submit"], input[type="button"] {
color:#333;
background:#F5F5F5;
border:1px solid #999;
cursor:pointer;
margin:.2em 0 2em 0;
padding:.3em 1.8em;
text-align:center;
}
Figura 1 Seletores de entrada com atributos de tipo diferentes como destino
Sintaticamente, a vírgula que separa os elementos de entrada na Figura 1 indica que as regras dentro dos colchetes se aplicam aos botões Enviar e aos normais. Em outras palavras, a vírgula permite listar vários elementos para os quais é possível aplicar estilos. Isso é útil nas várias vezes em que você precisar aplicar um conjunto de regras a vários itens que não sejam necessariamente relacionados, para evitar a duplicação do código.
Quando você precisar de mais do que um seletor único ou simples, independentemente se for um seletor de atributo, ID, classe ou qualquer outro, você pode usar um combinador de CSS para criar expressões CSS complexas. Quatro tipos de combinadores são descritos na Tabela 1.
Tabela 1 Combinadores de CSS
| Combinador | Sintaxe | Descrição |
| Descendente | A B | O seletor B é um descendente do seletor A. Observe que um único caractere de espaço em branco faz parte da sintaxe. |
| Filho | A > B | O seletor B é um filho direto do seletor A. |
| Adjacente/Irmão | A + B | O seletor B está no mesmo nível de nó que o seletor A. |
| Geral | A ~ B | O seletor B segue o seletor A, mas não necessariamente logo em seguida. |
Como o nome indica, os combinadores podem ser combinados com os seletores para criar expressões complexas no CSS. Escrever expressões que são mais complexas significa usar menos CSS em geral porque seus seletores são muito mais precisos.
2. Reduza os scripts com pseudoelementos e pseudoclasses CSS
Pseudoelementos e pseudoclasses também são uma ótima forma de reduzir o código, pois representam os elementos lógica e fisicamente. É comum criar bibliotecas JavaScript que realçam linhas alternativas da tabela ou executam outras iguarias de interface do usuário. Como a maioria dos desenvolvedores, você provavelmente usa a popular pseudoclasse :hover para pistas visuais em um foco de mouse de um link. No entanto, você pode não conhecer os vários outros recursos de pseudoelementos e pseudoclasses.
Há dois tipos de pseudos: elemento e classe. Um pseudoelemento CSS é um componente de um elemento HTML padrão, e uma pseudoclasse é um atributo dinâmico que descreve o estado atual de um elemento ou causa uma alteração de estado.
Pseudoelementos são mapeados para componentes físicos de um elemento, da seguinte forma:
:first-line, :first-letter, :nth-child, :before, :after
Pseudoclasses descrevem estados do elemento e são lógicas e, muitas vezes, dinâmicas. Eis alguns exemplos:
:hover, :active, :not, :first-of-type, :only-child, :empty
Independentemente das especificações dos pseudoelementos e pseudoclasses, a sintaxe e a aplicação são essencialmente iguais em ambos. Embora a pseudoclasse :hover seja lógica e dinâmica, outros pseudos, como o pseudoelemento :first-letter, são estáticos. O pseudoelemento :first-letter altera fisicamente o estilo apenas da primeira letra de seu elemento aplicado antes do tempo de execução, como demonstrado na Figura 2.
p:first-letter {
color:#990000;
font-size:2em;
font-weight:bold;
}
.png)
Figura 2 O pseudoelemento :first-letter altera o estilo da primeira letra
Para fazer a mesma coisa usando scripts, você precisaria selecionar um elemento e depois chamar vários métodos para manipular o elemento em tempo de execução (por exemplo, getElementById, substr e, em seguida, addClass). Não se esqueça de que usar scripts para esses tipos de tarefas significa que você deve manter o código no futuro, e manter códigos que executam apenas definições de estilo prejudica as regras de negócios nas quais você precisa se concentrar.
Você pode consultar a lista completa de pseudoelementos e pseudoclasses no W3C online.
3. Use consultas de mídia CSS para entrega de conteúdo entre plataformas
À medida que cada vez mais tablets, laptops, smartphones e outros dispositivos se tornam disponíveis para as massas, muitos desenvolvedores da Web estão prevendo uma experiência de desenvolvimento penosa para oferecer tantas formas diferentes do mesmo conteúdo e mídia. Felizmente, as consultas de mídia CSS são uma ótima forma de entregar conteúdo entre plataformas e fatores forma.
Conceitualmente, as consultas de mídia CSS são semelhantes à detecção de navegadores e recursos, mas em vez de determinar quais recursos devem receber suporte por agente do usuário, as consultas de mídia determinam como apresentar o conteúdo com base no agente do usuário de consumo. Além disso, há muito menos tipos de mídia do que recursos de navegador. No entanto, você pode criar algumas expressões complexas de consulta de mídia para fornecer conteúdo perfeitamente personalizado para usuários individuais.
Você pode identificar facilmente uma consulta de mídia em um arquivo .css ou uma marca <style> ao pesquisar regras @media, como mostra a Figura 3.
@media handheld {
body
{
font-size: 10pt;
background-color: #5c87b2;
}
}
@media screen {
body { font-size: 18pt }
}
@media screen, print {
body { line-height: 1.2 }
}
Figura 3 Consultas de mídia para dispositivos de mão, impressão e tela
Como você pode ver nos seletores na Figura 3, as consultas de mídia são uma forma de designar vários estilos para tipos de dispositivo correspondentes. Há mais tipos de mídia do que os explicados na Figura 3: tudo, de braille, de alto-relevo, de mão, de impressão, de projeção, de tela, de fala, tty e tv.
4. O CSS é muito específico em relação a estilo
A especificidade é um conceito importante no CSS que permite evitar uma "batalha de estilos" entre os elementos. Quando você lida com estilos externos, de nível de página e embutidos, as coisas podem ficar complicadas.
Felizmente, o CSS tem uma regra simples sobre hierarquia de estilos: A regra de estilo mais próxima do elemento vence, portanto, o navegador aplica esse estilo ao elemento. Isso significa que a ordem de importância para aplicação de estilos é estilos embutidos > estilos de nível de página > arquivos de folha de estilos.
A lista fora de ordem apresentada na Figura 4 e Figura 5 é um grande exemplo da herança CSS em ação. O código na Figura 4 renderiza uma lista fora de ordem com uma borda verde, plano de fundo roxo e texto branco. Os filhos da lista, ou seja, as marcas de item da lista, herdam os atributos de cor de plano de fundo e texto, ao passo que alguns atributos, como o atributo de borda, não são herdáveis.
A CSS
ul
<style type="text/css">
{
width:150px;
border:5px solid #090;
background-color:#909;
color:#fff;
}
</style>
A HTML
<ul>
<li>
List item one
</li>
<li>
List item two
</li>
<li>
List item three
</li>
</ul>
Os resultados
.png)
Figura 4 Cada item da lista herda cores, mas não as bordas
Observe que na Figura 4 a borda é renderizada ao redor da lista inteira, e não ao redor dos itens individuais da lista, mostrando que os itens da lista não herdaram aquele atributo.
A modificação apenas do CSS ao inserir um seletor para o elemento <li> que redefine as cores e a borda cria uma aparência totalmente nova na lista, como ilustrado na Figura 5.
A CSS
<style type="text/css">
ul
{
width:150px;
border:1px solid #090;
background-color:#909;
color:#fff;
}
li
{
width:100px;
border:1px solid #099;
background-color:#009;
color:#fff;
}
</style>
A HTML
<ul>
<li>
List item one
</li>
<li>
List item two
</li>
<li>
List item three
</li>
</ul>
Os resultados
.png)
Figura 5 Herança e especificidade em ação
A combinação das larguras dos elementos e das cores do plano de fundo na Figura 5 demonstra que o estilo específico para os itens de lista filho é aquele que o navegador usa.
A especificidade do CSS permite que você determine quando e em qual elemento você deve aplicar seus estilos, ao mesmo tempo em que aproveita a herança e a ampla aplicação dos estilos nos elementos filho sem exigir que você crie regras particularmente para essa finalidade.
5. Nivele a área de atuação com as redefinições CSS
Cada navegador renderiza elementos de uma forma padrão específica. Por esse motivo, muitos desenvolvedores escolhem usar a redefinição CSS, uma folha de estilos que refine os elementos comuns e principais para os valores de sua preferência.
As redefinições CSS podem fazer parte da folha de estilos principal ou ficar sozinhas em um arquivo .css separado, geralmente nomeado Reset.css. A Figura 6 mostra um exemplo de uma redefinição CSS.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
Figura 6 Exemplo de redefinição CSS
Se você não desejar fazer o trabalho externo e criar uma redefinição CSS, pode baixar e modificar Normalizar CSS no GitHub como alternativa. O importante sobre as redefinições CSS é que você controla a linha de base de estilos.
Conclusão
Conhecer melhor os recursos do CSS pode facilitar a vida de um desenvolvedor da Web. Os desenvolvedores adoram reduzir o código, e os pseudos e consultas de mídia CSS o ajudam a fazer exatamente isso, assim como os truques de seletores, como o uso de combinadores e expressões avançadas. Por fim, não se esqueça de aproveitar a hierarquia de estilos CSS e usar as redefinições CSS para controlar os padrões em suas páginas da Web.
Rachel Appel é desenvolvedora e divulgadora da Microsoft na cidade de Nova York. Você pode contatá-la em seu site http://rachelappel.comou por email no endereço rachel.appel@microsoft.com. *Você também pode acompanhar suas mais recentes atualizações no Twitter em @rachelappel.*