leia mais em: Blog de Ben Roux
Posição-Fundo-X, Posição-Fundo-Y
O posicionamento em segundo plano é um caso forte para separar uma regra agrupada em partes individuais. Por que incluir o posicionamento x, y exclusivamente como um modificador enrolado? Qual é o perigo de quebrar as propriedades como é feito com margem ou preenchimento? Ainda mais confuso é que isso tem suporte no IE desde a versão 5.
Como acontece com qualquer sugestão de especificação, existem muitas aplicações para isso. Um exemplo claro surge quando um designer UX envia a você um único .png contendo muitos ícones para uma única página:
Para estilizar isso hoje, precisamos de algo assim:
.volumeDown { background-position: 0px 0px; }
.volumeDown:hover { background-position: 100px 0px; }
.volumeUp { background-position: 0px 100px; }
.volumeUp:hover { background-position: 100px 100px; }Um padrão óbvio emerge. Tudo o que o estado de foco faz é mudar o plano de fundo em 100 pixels. O programador em todos nós deseja abstrair isso. Mas, hoje, não podemos. Resta-nos criar 2 classes para cada ícone. Se este gráfico incluísse um estado inativo, precisaríamos de uma terceira classe para cada ícone.
Se tivermos a capacidade de separar isso, podemos abstrair essas propriedades e limpá-las com bastante facilidade.
.icon { background-position-x: 0px; }
.icon:hover{ background-position-x: 100px; }
.icon.volumeDown{ background-position-y: 0px; }
.icon.volumeUp { background-position-y: 100px; }Aqui, estamos adicionando apenas uma única classe por ícone, em vez de 2 (ou 3 com um estado inativo). Para uma imagem pequena, como este exemplo, a mudança é nominal. Para coleções maiores, isso pode economizar 10 ou 20 classes.
Como muitos notarão, isso foi sugerido para CSS3, mas infelizmente foi descartado com o fundamento de que era “muito fraco para introduzir novas propriedades”.
Ai de mim.