A nova especificação media queries nível 4 introduz 4 novas e interessantes features de mídia, além das 13 já existentes.

São elas: script, pointer, hover e luminosity. Eu diria que estas novas features de mídia vêm para beneficiar primordialmente questões sobre acessibilidade e mobile. Veremos porque.

@media script

A feature script detecta se JavaScript é suportado e está ativo ou não — já que os navegadores geralmente possuem uma opção para desativá-lo (com exceção ao Firefox v23+) e nem todo agente de usuário é um navegador web na maneira como conhecemos. Um leitor de feeds, por exemplo, geralmente ignora qualquer script que esteja numa página de um artigo.

Se quisermos modificar algum estilo ou comportamento CSS caso o usuário não tenha suporte ou JavaScript ativado, como por exemplo, mostrar as opções de um menu dropdown que apenas responde ao evento mouse over por JavaScript (prática muito comum).

.menu-opcao {
    display: none;
}

/* para agentes de usuário sem javascript */
@media not script {
    /* mostra as opções do menu dropdown */
    .menu-opcao {
        display: block;
    }
}

Este caso é interessante pois um usuário poderá nunca ter acesso às opções do seu menu. Esta feature com certeza beneficia a acessibilidade, e pode ser bem útil se for preciso apenas modificar seu CSS, tornando desnecessário o uso do elemento <noscript> em seu HTML. Agora resolvemos esse problema puramente com CSS. How nice!

@media pointer

Esta feature fornece a presença e a precisão de um dispositivo apontador (pointer device). Por dispositivo apontador entende-se um dispositivo que fornece um meio ou capacidade de indicar pontos no sistema de coordenadas da tela. São disposivitos apontadores: mouse, trackpad, telas sensíveis ao toque, telas sensíveis a Pen Stylus (como por exemplo, o Palm). Três valores são possíveis para pointer:

• none: Não há dispositivo apontador;
• coarse: Há dispositivo apontador de baixa precisão (tela sensível ao toque);
• fine: Há dispositivo apontador de alta precisão (mouse, trackpad e tela sensível a Pen Stylus).

/* para telas de toque */
@media (pointer: coarse) {
    /* aumenta tamanho de checkboxes e radio buttons em 75% */
    input[type="radio"],
    input[type="checkbox"] {
        transform: scale(1.75);
    }
}

No exemplo acima estamos melhorando a acessibilidade principalmente para os usuários mobile, que podem ter dificuldade para marcar checkboxes com precisão.

@media hover

Esta feature também diz respeito aos dispositivos apontadores e tem uma relação estreita com pointer, pois hover apenas indica se o dispositivo apontador do usuário é ou não capaz de realizar hover, ou seja, de realizar o evento mouse over. Exemplos de dispositivos para hover são mouse e trackpad.

Considerando o exemplo anterior do menu dropdown com a feature script, podemos refiná-lo ainda mais com hover, pois o menu só deverá aparecer aberto se o usuário não for capaz de realizar o evento mouse over (ou não ter JavaScript ativado).

.menu-opcao {
    display: none;
}

/* para agentes de usuário sem javascript ou que não possam realizar hover */
@media not script or not hover {
    /* mostra as opções do menu dropdown */
    .menu-opcao {
        display: block;
    }
}

mas pera ai..

Então quer dizer que hover é equivalente à pointer: fine? Considerando que os dispositivos que têm pointer: fine são os mesmos que hover — mouse e trackpad —, poderia ser. Contudo, há outros meios “apontadores” não tão óbvios assim, como o recurso Air View do celular Samsung Galaxy S4. O Air View torna possível que o usuário realize um hover sem precisar tocar na tela, e acredito que isto caracteriza um novo tipo de dispositivo apontador. Se traduzíssemos isso numa media query, acho que o resultado seria algo do tipo:

@media hover and (pointer: coarse) {
    /* air view */
}

Procurei por alguma informação sobre este recurso funcionar dentro de navegadores web, mas não obtive sucesso.

@media luminosity

Esta é a feature mais Chuck Norris de todas.

Talvez você já tenha ouvido falar na nova API HTML5 de eventos de luminosidade (já disponível no Firefox v22+), ela permite que tenhamos acesso à quantidade de luminosidade do ambiente, ou seja, podemos saber se o usuário está situado num lugar escuro, por exemplo.

Esta feature nos permitirá fazer ajustes no CSS de acordo com a luminosidade do ambiente. Logicamente, o dispositivo do usuário em questão deve ser equipado com um sensor de luz — qualquer MacBook e a maioria dos dispositivos móveis já o possuem. Os valores possíveis para luminosity são:

• dim: O dispositivo se encontra num ambiente escuro ou com pouca iluminação. Exemplo: noite ou quarto escuro.
• normal: O ambiente tem um nível ideal de luminosidade. Exemplo: sala iluminada adequadamente.
• washed: O ambiente tem um nível muito claro ou até excessivo em quantidade de lux (para mais informações sobre a unidade lux, leia isto), fazendo com que a tela adquira um aspecto meio “apagado”. Exemplo: luz do dia.

Isso é muito legal, mas onde eu uso?

Você deve estar se perguntando isso agora. Eu vi um caso de uso muito interessante, que diz respeito basicamente a leitura de texto. Várias aplicações de leitores de feeds (Pocket, Digg, Readability) possuem uma funcionalidade em comum, que é modificar o contraste do texto. Assim o usuário pode alternar entre níveis de contraste de maneira a tornar o texto mais confortável para leitura, como mostrado abaixo.

Se você estivesse à noite na cama e com as luzes apagadas, qual contraste seria o mais confortável para ler? Eu com certeza escolheria o da direita (com fundo escuro).

Agora, como seria legal se uma aplicação fizesse isso de maneira totalmente automática, hein? Com luminosity, será muito fácil (e sem JavaScript):

body {
    color: #513B2C; /* marrom */
    background-color: #FBF0D9; /* bege */
}

/* ambiente escuro */
@media (luminosity: dim) {
    /* diminui o contraste do texto */
    body {
        color: #E2E2E2; /* cinza claro */
        background-color: #252525; /* cinza escuro */
    }
}

/* ambiente muito claro */
@media (luminosity: washed) {
    /* aumenta o contraste do texto */
    body {
        color: black;
        background-color: white;
    }
}

Acho que nem precisaria mencionar, mas como tudo, é bom utilizar esta feature com parcimônia. Bom senso é sempre bem vindo. Acredito que outros bons casos de uso para esta funcionalidade estão por vir, e vai de acordo com a criatividade de cada um.

Triste. Apesar da API JavaScript para os eventos de luminosidade já estar parcialmente disponível no Firefox, sua versão para media query ainda não. Assim como nenhuma das outras.