Use seu teclado para navegar.
Você pode acessar os posts usando as teclas destacadas. Para fechar pressione o X à direita.

CSS image-set() – Uma forma para servir imagens em alta resolução

Hoje em dia esta em voga o design responsivo e quais são as melhores técnicas para adaptar seu layout para diversas resoluções. Os media queries veem para nos auxiliar nesse desenvolvimento, porém um assunto que sempre esta em discussão para se descobrir a melhor solução é como fazer as imagens dos nossos layouts se tornarem responsivas.

A maioria das técnicas existentes ainda são um processo em backend e é nesse ponto que quero mostrar uma outra solução direta apenas em css, entretanto essa funcionalidade ainda não esta na especificação da W3C. Essa funcionalidade se chama image-set e esse é a sua especificação:


image-set( imagespec [ ',' imagespec ]* )
 imagespec ::= <image> S {num} 'x'

Ok isso não me ajudou muito Suissa! Calma meu caro amiguinho que o exemplo em css vem agora ;D


selector {
 background: image-set(url(foo-lowres.png) 1x,
 url(foo-highres.png) 2x) center;
 }

Olha só muito legal hein! Ta mas e dae como isso vai mudar minha vida? Certo então pense comigo. Agora com essa funcionalidade você poderá dizer a sua imagem original e setar as imagens que devem aparecer caso a resolução do usuário for maior, podendo assim ter a mesma imagem com diferentes resoluções.

Sei entendi, mas estou achando estranho como assim vou setar essas imagens com diferentes resoluções no mesmo css, como fica o meu css com media query?

Ai que em o pulo do gato, nesse caso quem irá escolher qual imagem mostrar será seu UA (User Agent). WTF? Isso mesmo ele irá escolher qual o melhor caso. Por exemplo: quando o usuário da um zoom out o UA pode mostrar a imagem com menos resolução e quando ele da um zoom in mostra com mais resolução, coisa que ainda não existe media query.

Tudo muito bom, tudo muito bem, mas por que vou querer saber isso se nem posso usar?

E se dizer que você pode? Você acreditaria em mim? Olha pense bem hein!

Sim você pode usar, mas obviamente com uma ajudinha mágica do javascript. E realmente é quase que uma gambiarra magia negra para funcionar. O Foresight.js é um projeto do Adam Bradley que tende a “contornar” essa funcionalidade enquanto ela ainda não esta “ativa”, porém o método que ele utiliza é deveras interessante para não dizer outra coisa. Então chega de enrolação e vamos ao exemplo.

Nosso css normal é este:

 myselector {
 background: image-set(url(foo-lowres.png) 1x, url(foo-highres.png) 2x) center;
 }

Porém depois da mais pura magia negra ele vira isso e o mais incrível é que funciona:


myselector {
 font-family: ' image-set( url(/images/foo.png), url(/images/foo_2x.png) 2x) ';
 }

Mas pode isso Arnaldo? Bom poder eu já não sei mas que foi inteligente e perspicaz isso foi, isso da certo porque os navegadores parseam a regra font-family e adicionam o valor no DOM ae o js faz o milagre.

Agora se eu indico a vocês usarem? Ae ja são outros quinhentos. Se precisarem de informações mais precisas como o Foresight.js funciona o autor explicou muito bem no seu github então aproveitem.

Referências

http://foresightjs.appspot.com/demos/
http://lists.w3.org/Archives/Public/www-style/2012Feb/1103.html
http://www.webmonkey.com/2012/04/a-smarter-way-to-serve-high-resolution-images/

Deixe um comentário

 

small_keyboard