LESS

Essa é uma dica pra quem usa LESS para escrever suas folhas de estilo.
De front-end para front-end, se você não usa LESS ou qualquer preprocessador CSS, meu amigo, só lamento. O ganho de produtividade com eles é assustador!

Gosto de trabalhar com LESS mas, usando qualquer preprocessador, variáveis, funções e mixins deixam seu código mais modular, mais reutilizável, mais limpo e organizado. Isso faz toda a diferença em um projeto, seja ele grande ou pequeno.

Antes, gostaria de deixar uma dica de programa indispensável pra quem usa LESS no Windows: o WinLESS.
Ele monitora a pasta LESS do seu projeto e a cada vez que o arquivo é salvo um output CSS é gerado. E você escolhe se o quer “minificado” ou não.

Vamos aos snippets.

Retina display

Tela Retina Display

Smartphones e tablets invadiram o mercado, evoluíram e em breve ultrapassarão notebooks e desktops para fins de navegação na internet. E as telas de alta densidade destes dispositivos (leia-se alta definição), cujo conceito “Retina display” – criado por Steve Jobs -, fizeram com que web designers e front-ends aprimorassem e desenvolvessem algumas técnicas para exibição de imagens sem perda de qualidade.

Por onde começar? Se você já procurou algo que exiba imagens corretamente nas telas “Retina” deve ter encontrado muita coisa a respeito.
Na minha opinião, o artigo Towards A Retina Web, da Smashing Magazine, é o ideal para entender o conceito.

Veja bem, o intuito deste artigo não é explicar o termo. Tenho em mente que você já tenha um mínimo de conhecimento sobre o assunto.

Media Query
O termo Responsive Web Design (ou RWD) trouxe as Media Queries para tornar os sites adaptáveis a quaisquer dispositivos. Não só isso, claro, mas aqui a finalidade delas é diferente.
Em vez de usarmos breakpoints para definir adaptações de layout, usaremos densidade de pixels para exibir outras imagens. Imagens maiores.
O Site CSS-Tricks tem um artigo bem explicado e atualizado sobre media queries para Retina displays.

Tenho usado essa aqui nos meus projetos e funciona muito bem:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
    ...
}

O que ela faz exatamente?
Bom, a resposta é complexa. O que você precisa entender é que esta media query somente será aplicada em telas de densidade igual ou superior a 1,5. Ou seja, acima dessa densidade tudo é considerado como Retina display e, portanto, podemos exibir as imagens adequadamente.

Comparativo de densidades

Mas, “por que 1,5?” – você pode perguntar. Se considerarmos que 1,0 é a densidade padrão, não deveríamos usar ao menos 2,0? Eu diria que sim, mas na prática nem todos os smartphones e tablets considerados Retina display têm telas de 2,0 pra cima. Por exemplo, os que possuem densidade 1,9 ficariam de fora, concorda?

Dito isso, defini uma variável LESS chamada @highdensity:

@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
              ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
              ~"only screen and (min-device-pixel-ratio: 1.5)";

Note que separei cada vendor-prefix em linhas. É só pra ficar mais organizado.
Agora crio um mixin usando esta variável:

.backgroundHD(@filename, @bg-width, @bg-height) {
    @media @highdensity {
        background-image: url("/images/@{filename}@2x.png");
        background-size: @bg-width @bg-height;
    }
}

Perceba que nomes de variáveis, quando dentro de escape strings, devem estar envolvidas por chaves {} logo após o símbolo @.

Até aqui tudo bem? Mas, espera! Se você gerar um output desse LESS, nada vai acontecer. Este é um mixin paramétrico, portanto, não sai no CSS gerado a menos que seja utilizado.

Veja o exemplo:

.icone {
    background: url("/images/icone.png") no-repeat;
    .backgroundHD("icone", 16px, 16px);
    display: block;
    height: 16px;
    text-indent: -9999px;
    width: 16px;
}

O que eu fiz?
Estou informando que a classe .icone é um bloco de 16×16 pixels e tem uma imagem de fundo chamada icone.png.
Além disso, possui uma imagem de fundo de alta densidade com mesmo nome de arquivo, porém com terminação @2x antes da extensão .png

Usar @2x no fim do nome do arquivo é uma boa prática para identificar imagens com o dobro do tamanho.


Touchscreen

Touch screen

Digamos que você queira exibir conteúdo somente em dispositivos com tela touchscreen. Se considerarmos que todos a maioria absoluta dos dispositivos móveis (smartphones e tablets) são touch, com essa media query estamos praticamente filtrando conteúdo desktop do mobile e vice-versa.

Segue a seguinte variável LESS:

@touchdevices: ~"(-webkit-min-device-pixel-ratio: 1.2)",
               ~"(max-device-width: 1024px)",
               ~"-moz-touch-enabled";

Isto é o suficiente para “detectar” dispositivos touch.
Criei então duas classes: .touch-devices e .non-touch-devices

.touch-devices {
    display: none;
}

@media @touchdevices {
    .non-touch-devices {
        display: none;
    }
    .touch-devices {
        display: inline-block;
    }
    * {
        -webkit-tap-highlight-color: transparent;
    }
}

Primeiro defini que qualquer elemento que contenha a classe .touch-devices não será exibido por padrão. Depois, dentro da media query, defini que elementos com a classe .non-touch-devices não serão exibidos por padrão e, ainda dentro da media query, tornei a outra classe visível com display: inline-block;.

“Por que inline-block?” – você pode perguntar.
Bom, poderia ser apenas inline ou apenas block, mas elementos em nível de linha não aceitam algumas propriedades importantes de layout, como margin e padding, por exemplo. E elementos em nível de bloco inserem quebras de linha no documento, um efeito talvez não desejado no layout.

Por último, uma propriedade interessante para dispositivos com browser webkit (Chrome e Safari): -webkit-tap-highlight-color, como o próprio nome já indica, atribui cor quando o usuário toca em qualquer link ou elemento JavaScript.

É como se simulasse o efeito hover/focus do desktop.

Ela é útil quando o usuário rola uma página e acidentalmente inevitavelmente clica em algum elemento e este permanece com a cor de hover/focus até que ele toque fora dessa área (daí o porquê de ela estar definida com transparência).


Dica de leitura:

  • Para quem deseja conhecer outras técnicas para dispositivos Retina, eu indico o livro retinafy.me, do autor Thomas Fuchs