Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

only screen and (min-width...)

O instrutor deu uma orientação no vídeo de que screen and (min-width...) pode passar apenas pelo teste screen em navegadores antigos que não entendem o que é min-width e que, por isso, deveríamos incluir o only quando "misturamos" media query com media type. Assim já falharia o teste no only e nada mais seria processado.

Mas pensando por essa lógica não basta inverter, deixando o min-width no começo do teste?

Desta forma:

@media (min-width: 400px) and screen {
    ...
}

Assim já falha no primeiro teste e não testaria screen.

Ou necessariamente o teste de media type vai antes do media query?

3 respostas
solução!

Fala aí Cristiano, tudo bem? Na verdade essa é uma preocupação desnecessária nos dias de hoje, podemos utilizar o @media screen and (min-width: ALGUM_PX) sem o menor problemas.

Normalmente caso tenhamos problemas será com o velho conhecido IE, mais provavel que seja na versão 6, 7 e talvez a 8.

Para contornar o problema, é possível carregar arquivos CSS apenas para esses navegadores:

// se for IE
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

// se for IE 7
<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

// se for IE 6
<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Existem diversas combinações, se quiser ver todas:

https://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Espero ter ajudado.

Legal Matheus, obrigado!

Magina Cristiano, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software