Cases de estudos com novas mídias queryes
Design responsivo já não é novidade para ninguém do mundo da web. E quando falamos sobre responsividade muitas coisas caem dentro dessa forma de trabalho que até veio para melhorar a vida de todos nesse fantástico mundo da web. No post de hoje mostrarei alguns estudos que venho fazendo em cima das mídias queryes que são as responsáveis por deixar nossos layouts de forma correta desde telas até mesmo na hora de imprimir.
Modelos de mídias queryes
Antes de falar sobre as atuais mídias queryes vamos falar um pouco sobre as mídias types que foram o início de tudo. Se você ainda não conhece elas são responsáveis por definir uma folha de estilo específica para um determinado tipo de mídia veja abaixo um exemplo de mídia type.
uso dreto no HTML
ou caso queira usar dentro do CSS
@media print{
regras para impressão vão aqui
}
No exemplo acima temos uma mídia type para impressão, as regras dentro da folha de estilo só serão aplicadas para impressão de arquivos. Além desta também temos medias types para TVs, braille, projetores, portátil (destinada aos dispositivos móveis), telas de computadores, relevo e aural (atualmente obsoleta). Apesar das opções de medias types serem boas para trabalhar com um determinado tipo de tecnologia ou impressão, os dispositivos vêm evoluindo bastante e somente essas médias type já não são o suficiente para darmos o nosso usuário uma experiência legal. Para isso vieram as mídias queryes (Consultas de mídias) que nos permite através de uma expressão lógica consultar os variados tipos de dispositivos cobertos pelas medias types. Veja o exemplo a seguir de um modelo antigo de mídia querye.
@media screen and (max-width: 320px){
Regra que será aplicada...
}
@media screen and (min-width: 768px){
Regra que será aplicada...
}
O modelo acima já não é mais tanto utilizado por desenvolvedores e também as versões mais recentes dos navegadores já apresentam ao reconhecer esse padrão. Atualmente o padrão ´recomendável é este:
@media(max-width: 320px){
Regra aqui..
}
@media(min-width: 768px){
Regra aqui..
}
Indo um pouco mais além com nossas mídias queryes
Indo mais além podemos com nossas mídias queryes podemos substituir o pixel por outras medias como é o caso da medida (em), veja:
@media(min-width: 48em){
Regra aqui..
}
A media querye acima será aplicada para telas acima de 768px, mas ao invés de usarmos a medida (px) adotamos o valor na medida (em). Veja abaixo outros casos de uso.
CONFIRA OS EXEMPLOS DE MEDIDASAs novas Media Queries Level 4
Agora também podemos contar as novas sintaxes das mídias queryes que permitem um trabalho simplificado e com uso de operadores matemáticos. Veja este exemplo:
@media(width >= 78em)
..
Está mídia querye equivale a isto:
@media(min-width: 78em){
..
}
Você pode até encadear estes juntos assim:
(50em =< width <= 78em)...
Também temos este exemplo de mídia querye novo
@media((min-width: 78em) or (min-width: 120em))
and
(not (pointer: none)){
regras aplicadas aqui
}
O modelo acima ainda não é 100% recomendável, mas você já pode ir testando novos navegadores.
Conclusão
O CSS é incrível e a cada vez mais vem nos trazendo novidades incríveis. Acredito que iremos chegar a um CSS que faça 80% das coisas que o antigo JavaScript fez. Claro pode demorar alguns anos, mas é um tempo que vale a pena eperar. Se bem que hoje com as novas propriedades ajudando esse tempo está diminuindo. Para finalizar quero dizer que quando me referi a fazer coisas que o JavaScript fez é questão animações e eventos. Validações de formulários o JavaScript ainda será responsável. Bom espero que tenha gostado e até o próximo post.