Usar @media, @media screen and ou @media only screen and Tem alguma diferença? – css css3

Pergunta:


Queria saber se tem alguma diferença no css ao usar um desses media queries,

Exemplo A:

@media(max-width:770px) {
    .texto{
        color:red
    }
}

Exemplo B:

@media screen and (max-width: 770px) {
    .texto{
        color:red;
    }
}

Exemplo C:

@media only screen and (max-width: 770px) {
    body {
        color:red;
    }
}

Fiz testes aqui com cada um deles, e todos funcionaram.

Tem diferença?

Autor da pergunta Renan Osorio

hugocsl

Sim existem diferença, até pq nem toda a @media é screen, pode ser print por exemplo

@media(max-width:770px) {
    .texto{
        color:red
    }
}

No exemplo acima significa que para qualquer mídia que a largura seja de até 770px, mesmo seja uma TV, Monitor e até uma Impressora, a regra CSS ali contida vai ser aplicada.

Já nesse exemplo abaixo significa que em mídias do tipo screen e com telas de até 770px de largura a regra vai ser aplicada. (esse e é muito importante, pois o CSS só é aplicado se as duas regras screen e max-width corresponderem)

@media screen and (max-width: 770px) {
    .texto{
        color:red;
    }
}

Sobre o and

Veja que a sua regra @media pode ser bem complexa, e vc pode encadear vários parâmetros que deve ser atendidos para a regra ser aplicada. Por exemplo:

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    body { line-height: 1.4; }
}

Repare que vc vai “somando” requisitos com o and, logo para esse css ser aplicado precisa que:

a mídia tem que ser tela 
**e** ter no mínimo 320px de largura 
**e** no máximo 480px de largura
**e** a tela deve ter densidade de pixel de 2

Se um dos requisitos não retornar true a regra não é aplicada

The and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. It is also used for joining media features with media types.


Nesse outro exemplo o seletor only significa que apenas para mídia screen e com telas até 600px a regra vai ser aplicada. Essa regra não será aplicada a outras mídias como a print por exemplo

@media only screen and (max-width: 600px) {
    body {
        color:red;
    }
}

Exemplo de uso

Vamos supor que vc tenha um elemento na cor Amarela, que aparece bem na Tela do Computador, mas quando for imprimir o Amarelo não vai ficar legal e vc gostaria que ele ficasse Preto, como vc poderia resolver isso? Simples, usando @media only print. Então no seu CSS vc teria algo como:

div {
    background-color: yellow;
    width: 100px;
    height: 100px;
}

@media only print {
    div {
        background-color: black;
    }
}
<div></div>

Repare que com o exemplo acima quando vc der um Ctrl+P a div não vai aparecer Amarela, vai ficar Preta!

Sobre o Only

The only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. If you use the only operator, you must specify an explicit media type.

Em português
O operador only é usado para aplicar um estilo somente se uma consulta inteira corresponder e é útil para impedir que navegadores mais antigos apliquem estilos selecionados. Se você usar o operador only, deverá especificar um tipo de mídia explícito. (no caso se o tipo de mídia é screen, print ou speech)

Um esclarecimento sobre o Only

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

Ao que parece o atributo only também pode ser usado para que navegadores antigos ignorem a regra de css contida no @media, uma vez que eles podem não fazer distinção entre os tipos de mídia diferentes, veja que eles podem não ver diferença entre um @media screen de um @media print, para esses navegadores tudo seria uma coisa só. Então para fazer com que eles ignorem a regra se usa o only.

Resumindo: Nos navegadores que entendem a diferença entre print e screen não há necessidade do only, porém, nos navegador que não entendem as diferenças entre as mídias se usa o only para que ele não reconheça a tag e a ignore.

Fonte1: https://developer.mozilla.org/pt-BR/docs/Web/CSS/@media
Fonte2: https://www.w3.org/TR/css3-mediaqueries/

A grande diferença tem a ver com as resoluções que queres o 1 linha de código e para aquela resolução(assume a resolucao e ajusta a outros ecrans) a 2 linha e para screen e a resolução(consegue ler em outras ecran ajustando) e a 3 linha de código e só para ecran e aquela resolução(só lê em ecrans e aquela formatação especifica) mas le o link explica melhor que eu ( quando digo screen são monitores tipo pc )
info da google dev

Tem diferença sim. only serve para alguma coisa hoje? Provavelmente não.

Segundo o documento de especificações da W3C sobre media queries o operador lógico only serve para evitar que os estilos especificados sejam exibidos em navegadores antigos que não dão suporte a media features, como “max-width” por exemplo.

O CSS linkado abaixo, por exemplo, seria ignorado por navegadores que não entendem a media feature color.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

https://www.w3.org/TR/css3-mediaqueries/

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *