Media queries (Consultas de Mídia) são o que torna possível o design responsivo moderno. Com elas, você pode definir um estilo diferente com base em itens como tamanho da tela do usuário, recursos do dispositivo ou preferências do usuário. Mas como elas funcionam, quais existem e quais você deve usar? Aqui está o guia completo para CSS Media Queries.
O que esse guia vai abordar:
Como uma Media Query é estruturada?
Usando os recursos de Media Queries
Novas notações em Media Query nos níveis 4 e 5
Uso de Media Queries em JavaScript
Como uma Media Query é estruturada?
Aqui está a estrutura geral de uma Media Query:
Começa com a palavra-chave @media, também chamada de uma “at-rule”, opcionalmente seguida por media type e zero ou mais recursos de mídia.
Em inglês, o que isso diz é: “se o site estiver sendo exibido em uma tela e a largura da tela tiver pelo menos 400 pixels de largura, aplique este CSS”.
O tipo de mídia e o recurso de mídia são opcionais, portanto, esta é uma regra de mídia válida:
E está também é uma Media Query válida:
Se você deixar de fora o tipo de mídia, ele será visto como o tipo de mídia all, o que geralmente é bom.
Operadores lógicos
Ao lado do tipo de mídia e dos recursos de mídia, também temos alguns “operadores lógicos” que ficam entre as partes: and, or e not. Veja como eles funcionam:
O operador and
Você pode usar o operador and não apenas entre um type e um recurso, mas também pode “encadear” vários recursos de mídia usando and assim:
O que instrui o navegador a aplicar esse CSS se a largura do navegador estiver entre 400 e 800 pixels.
O operador or: , (uma vírgula)
Você pode usar uma , para fazer o operador or, assim:
que se aplica a screen ou print. Cada linha separada por vírgula é sua própria Media Query e, assim que uma delas é avaliada como verdadeira, o CSS na Media Query é aplicado. No futuro, você também poderá usar or ao invés de , (vírgula).
O operador not
Por fim, há o operador not, que pode ser usado para negar uma Media Query inteira. Assim, a próxima Query será aplicada em todo lugar, menos em print.
Se você usar o operador not, você também deve definir um tipo de mídia (como screen ou print). Caso contrário, o tipo de mídia será all e, em seguida, sua Media Query exibirá “not all”, então não será aplicada em lugar algum.
not inverte toda a Media Query. Role para baixo até a notação not () para um próximo recurso que permitirá negar apenas uma parte de uma Media Query.
Também existe o operador lógico only, mas nos navegadores modernos você não precisa usá-lo, portanto fingiremos que ele não existe.
Nesting
Você pode usar o procedimento de nesting (fazer um arranjo) de Media Queries em outras Media Queries e isso vai funcionar bem. Então, ao contrário de:
Você também pode escrever
Neste exemplo, pode não ser tão útil, mas você pode agrupar todo o CSS em uma tela @media {} e fazer seu design responsivo com Media Queries aninhadas e, em seguida, ter uma folha de estilo de print totalmente personalizada. Com isso, ficará um pouco mais limpo.
Media Query em HTML
Você também pode usar Media Query em seu HTML, por exemplo, em <style> ou <link>, como:
Vale ressaltar que esse arquivo ainda será baixado pelo navegador, mesmo que não seja aplicável.
Tipos de Mídia
O tipo de mídia é usado para descrever o tipo de dispositivo em que um navegador está sendo executado. Costumava haver carregamentos, mas a especificação de nível 4 depreciou muito e nunca foi implementada de qualquer maneira, deixando-nos com 4 com os quais devemos nos preocupar:
- All
- Screen
- Speech
All
Como mencionado anteriormente, se você não especificar um tipo de mídia, o padrão será “all”, o que significa que o css será aplicado a todos os dispositivos.
Screen
Provavelmente é onde você está lendo este artigo agora.
Para quando você imprime uma página ou qualquer mídia “paginada” (como um livro! Você sabia que as pessoas usam HTML e CSS para marcar livros?).
Speech
Para uso com sintetizadores de fala, como leitores de tela. Nenhum navegador importante suporta isso ainda.
Portanto, apenas para completar, aqui estão todos os outros que você nunca usou e provavelmente nunca usará:
- aural, agora substituído por speech
- tty, para o terminal
- tv (como uma tela, mas diferente … de alguma forma?)
- projection (projetores)
- handheld (para telefones, eles foram realmente usados por um tempo antes que as expressões da mídia se tornassem importantes)
- braille (para dispositivos braille)
- embossed (como uma combinação de print e braille, para printed braille).
Usando Media Queries
Ao usar Media Queries, é bom fornecer algumas regras a si mesmo, para que você não adicione consultas de mídia aleatoriamente e acabe com um CSS que se comporte de maneira imprevisível e difícil de manter.
Ao começar, recomendo escrever CSS de narrow (móvel) a wide (desktop) e, em seguida, usar min-width para seu estilo. Dessa forma, você sempre cria seu design “up” e seu CSS permanece fácil de raciocinar: Todo o CSS que você escrever será aditivo em comparação com o estilo base. Seu CSS original pode colocar itens em uma coluna:
e quando ficar wide o suficiente para mostrar duas colunas, você muda para horizontal:
Como o elemento main já possui display: flex ;, tudo o que precisamos fazer no ponto de interrupção mais amplo é alterar o flex-direction. Evitamos a duplicação de código e tudo fica mais legível e mais rápido para baixar.
Podemos estender esse raciocínio a todos os recursos de mídia descritos abaixo. Escreva seu CSS como ponto de partida: a versão mais bem suportada, a menor ou a mais acessível. Em seguida, adicione progressivamente mais estilo usando Media Queries.
Para obter dicas mais detalhadas sobre como desenvolver um site responsivo, leia nosso artigo Regras básicas do design responsivo.
Usando recursos de Media Query
O recurso de media query compõe a parte principal de uma consulta de mídia e tem maior influência sobre o que você está projetando. Os recursos de mídia fazem muito. Eles permitem verificar os recursos do dispositivo e do navegador, configurações e preferências do usuário além do tipo de dispositivo.
Dimensões
De longe, os recursos de mídia mais usados estão relacionados às dimensões do navegador. Aqui estão eles:
Largura e altura
Você pode checar exatamente width, min-width e max-width, e a exata height, min-height e max-height.
width e height você provavelmente nunca desejará usar, eles se aplicam apenas à largura exata.
Mais úteis são os valores min-* e max-*, que permitem escrever CSS para telas que começam em um determinado tamanho e maiores, (usando min-*) ou maior até um certo tamanho (usando max-*).
Todos os recursos de mídia de largura e altura suportam unidades CSS regulares, como pixels e ems. É recomendável usar a unidade em para media queries, então o design vai escalar de uma maneira agradável quando as pessoas usarem o recurso de zoom no navegador. Isso não acontecerá com pixels e rem tem o mesmo tamanho que em quando é usado em media queries. rem também tem alguns bugs quando usado no Safari. Então os em’s são melhores.
Se você acha que determinar o tamanho em em’s é difícil por que você não sabe quão grande um em é: as consultas de mídia são tratadas no nível superior; portanto, 1 em sempre tem 16 pixels ou o que o navegador define como o tamanho da fonte padrão (e o mesmo acontece com rems).
Proporção de tela (Aspect ratio)
Você também pode testar a relação entre largura e altura, com o aspect-ratio e os recursos de mídia orientation.
O recurso de mídia aspect-ratio leva uma fração, e também tem os mais úteis min-aspect-ratio e max-aspect-ratio recursos de mídia.
Isso permitirá que você verifique se um navegador tem uma certa proporção entre largura e altura. A maneira de pensar é: o primeiro número representa a largura, o segundo número representa a altura. Isso significa que uma proporção de tela de 2/1 tem o dobro da largura e é alta.
Você pode testar (apenas) telas quadradas:
Ou checar screens que são 16 por 9
Como largura e altura, você usaria normalmente as variantes min-* e max-*. Com uma certa proporção, você pode optar por mostrar imagens no modo retrato ou paisagem, por exemplo.
Com min-aspect-ratio, você pode verificar se há telas mais largas do que altas:
Por outro lado, usando max-aspect-ratio: 1/1, você muda isso para apenas telas maiores que largas.
Ao invés de fazer isso, você também pode simplesmente usar orientation: landscape e orientation: portrait, que significam a mesma coisa e são um pouco mais claras.
Prefers-color-scheme
Com prefers-color-scheme, você pode verificar se um usuário prefere visualizar um modo escuro ou um modo claro do seu website.
Alguns usuários podem preferir o modo escuro porque é mais agradável para os olhos, porque o ambiente é escuro ou porque são sensíveis a luzes brilhantes. Por outro lado, os usuários podem preferir o seu modo claro para obter um contraste aumentado ou porque eles visitam seu site em um espaço claro.
Veja como testar os dois:
Entre esses, light é considerado o padrão. Tanto que uma terceira opção no-preference foi removida recentemente das especificações devido à falta de implementações.
Implementando o modo escuro
Se você já possui um site e deseja adicionar o modo escuro, a melhor maneira de fazer isso é redesenhar cada parte. Isso lhe dará o maior controle e a mais alta qualidade de implementação.
Para muitos sites, pode ser difícil percorrer todas as partes ou não há tempo ou orçamento disponível. Para esses sites, há uma coisa que gosto de chamar de “modo escuro barato” e fica assim:
Eis como funciona: primeiro, definimos um fundo escuro no :root, que é basicamente o elemento html. Isso não precisa ser o #111 (cinza muito escuro), também pode ser preto puro (#000) ou você pode adicionar um pouco de cor a ele. Tudo depende da sua marca e design, então escolha um que funcione para você.
A próxima linha é onde a mágica acontece. Com filter nós podemos aplicar o invert para todas as cores. Isso fará o light dark e o dark light. Não afetará o pano de fundo e é por isso que nós definimos isso nós mesmos.
Inverter também tem outro efeito, ele também inverte as cores. Assim, o azul se tornará laranja, o verde se tornará rosa e assim por diante. Isso não é ótimo, porque significa que você acabou de perder as cores da sua marca. Não tema, porém, podemos recuperá-las girando o matiz de volta às cores originais com hue-rotate(180deg), desfazendo a inversão especificamente para o tom de suas cores.
Nesse momento, todas as imagens e vídeos em seu site parecem super estranhos; portanto, o que precisamos fazer é aplicar duas vezes o invert e o hue-rotate, voltando os dois às cores originais. Agora você tem um site no modo escuro, onde todas as imagens e vídeos são mostrados como são. Nada mal para apenas algumas linhas de CSS!
Prefers-reduced-motion
Com prefers-reduced-motion, os usuários podem indicar que desejam ver menos coisas acontecendo na tela. A razão pela qual eles podem querer fazer isso pode ser coisas como enjoo causado pelo movimento, distúrbios vestibulares ou simplesmente por que não querem esperar que suas animações terminem.
Se um usuário tem o prefers-reduced-motion ativado, isso não significa que ele não deseja movimento, mas você deve estar atento: use o movimento apenas onde for necessário para entendimento e, se fizer, mantenha o movimento pequeno (desbote em vez de swoosh ) Caso contrário, basta desligá-los. E para vídeos, certifique-se de não reproduzi-los automaticamente.
Implementando o reduced motion
Se você está iniciando um novo projeto e deseja incorporar suporte para movimento reduzido, é uma boa ideia considerar o movimento como um aprimoramento: tenha pouco ou nenhum movimento como padrão e somente quando refers-reduced-motion: no-preference estiver configurado, inclua movimento adicional no seu site. Dessa forma, a experiência padrão é a mais acessível.
Para um site existente, isso pode dar muito trabalho, então também temos um script de movimento reduzido barato:
Isso desativará toda a animação de todos os elementos, por isso é um método relativamente contundente, mas é perfeito adicionar retroativamente a um site para torná-lo mais acessível. A animação é definida como 1ms, para que os eventos animationend e transitionend ainda sejam acionados porque seu javascript pode depender deles, mas com o atraso negativo, você não perceberá a diferença.
Display-mode
Se você estiver projetando um jogo ou um reprodutor de vídeo, poderá ter mais do que apenas o jogo/vídeo na página, mas quando alguém muda para a tela cheia, você só deseja exibir o jogo/vídeo. A consulta de mídia permite fazer isso. O display-mode é suportado por todos os navegadores perenes modernos e permite testar como o site é mostrado com quatro opções possíveis:
- browser
Este é o modo padrão, onde sua página é mostrada em uma janela normal do navegador.
- fullscreen
Sua página é exibida em tela cheia e não há nenhum navegador visível. Se não houver uma consulta de mídia em tela cheia definida, seu navegador aplicará os estilos definidos em uma media query standalone.
- standalone
A página não é exibida em tela cheia, mas também não possui todo o chrome normal do navegador. Em vez disso, parece um aplicativo independente (desktop). Se não houver uma consulta de mídia standalone definida, seu navegador aplicará os estilos definidos em uma minimal-ui media query.
- minimal-ui
Sua página é mostrada em sua própria janela, mas o navegador ainda mostrará algum chrome para controlar a navegação (como janelas pop-up). Se não houver uma consulta de mídia minimal-ui definida, seu navegador aplicará os estilos definidos em uma consulta de mídia browser.
Como você pode ver, a maioria desses valores volta ao próximo, portanto, se você definir um estilo minimal-ui, ele também será aplicado à standalone e fullscreen.
Resolution/device-pixel-ratio
Com a consulta de mídia resolution, você pode testar a densidade de pixels dos monitores. Há resolution, que testa uma densidade específica de pixel, e min-resolution e max-resolution, que fornecem um limite inferior e superior.
Você pode usar isso para exibir imagens de fundo da retina em telas que suportam isso, por exemplo.
A resolução leva um número com um dpi (pontos por polegada), dpcm (pontos por centímetro) ou dppx (pontos por pixel). No CSS, um pixel sempre tem 96 dpi, então 1dppx é uma resolução de tela regular e 2dppx é ‘retina’.
Ao invés de dppx, você também pode simplesmente usar x, então o seu CSS poderia parecer com isso:
Safari é um único browser moderno que não suporta a media query resolution, mas ele tem um recurso semelhante, chamado -webkit-device-pixel-ratio (bem como -webkit-min-device-pixel-ratio e -webkit-max-device-pixel-ratio), que aceita um número sem uma unidade. A unidade implícita é a mesma que dppx. Então, o CSS seguinte tem o mesmo efeito que o exemplo de resolution apresentado acima.
Cores invertidas
Essa consulta de mídia indica que o sistema operacional inverteu todas as cores. O sistema operacional nesta instância é o MacOs, o único sistema operacional que suporta isso (e, inversamente, apenas o Safari suporta essa consulta de mídia). Ele está desativado ou ativado:
Você pode pensar que usaria isso para inverter duas vezes suas imagens e vídeos, como fizemos no nosso modo escuro barato, mas o Safari já faz isso por você. No entanto, você ainda pode alterar o tom do site inteiro para garantir que as cores de sua marca sejam seguidas.
Interação: pointer e hover
Agora, temos muitos outros dispositivos de entrada/apontador diferentes em comparação com o início da Web. Os ponteiros do mouse ainda existem, mas também temos controles externos por toque, como controles remotos Wii e até coisas como detecção manual de AR.
Algumas coisas fáceis de fazer com um mouse são mais difíceis ou impossíveis de fazer com dispositivos de toque, como atingir alvos pequenos ou até pairar. Com os recursos de mídia de interação, você pode se adaptar a esses dispositivos de maneiras inteligentes.
A maneira como eu faria isso seria considerar um dispositivo de toque como a implementação mínima. Isso não terá efeitos de foco, e a precisão do seu dispositivo de entrada é coarse (é o tamanho do seu polegar).
Para este grupo, você não pode ter coisas aparecendo ao passar o mouse, então elas precisam estar visíveis ou atrás de uma alternância explícita, e seus alvos de toque precisam ser maiores.
Mas esses dispositivos também podem ter suporte para uma caneta, ainda não permitindo pairar, mas facilitando apontar para partes específicas na tela. Embora seja uma boa ideia ter destinos clicáveis grandes o suficiente, mesmo que apontadores, você pode, por exemplo, colocá-los mais perto e fazer um uso mais eficiente do espaço.
Então, enquanto você começa a obter recursos para pairar, você pode adicioná-los com:
Dispositivos que permitem pairar, mas têm um ponteiro grosso, são coisas como os controles do Wii e o Kinect. Eles permitem que você aponte para as coisas, mas sem grande precisão. Você quer alvos grandes o suficiente e pode adicionar efeitos de foco instantâneo como uma indicação de onde eles estão apontando.
Por fim, terminamos com o que muitos consideram “normal”, mas na verdade é a situação mais bem caracterizada: um dispositivo com mouse/trackpad.
Esses dispositivos podem passar o mouse sobre elementos e direcioná-los com precisão. Os usuários desses dispositivos ainda podem ter recursos diferentes (não apenas permanentes! Eles também podem estar cansados ou ter dedos oleosos), então faça o design adequadamente.
Embora o iOS 13.4+ ofereça suporte a esses recursos de mídia, ele sempre corresponderá a pointer:coarse e hover:none (e seus any- equivalentes), mesmo ao usar o novo trackpad ou o lápis.
Múltiplos dispositivos apontadores (pointing devices)
As media queries pointer e hover te fornecem informações sobre o dispositivo apontador principal. Mas e o exemplo da tela sensível ao toque com caneta onde você tem um dispositivo apontador grosso e fino simultaneamente? Mesmo que o usuário tenha uma caneta, o dispositivo apontador principal ainda é uma tela sensível ao toque, o coarse. Para essas situações, você pode usar any-hover e any-pointer. Isso testará se existe algum dispositivo apontador que corresponda aos critérios.
Media queries menos interessantes
Existem muitas outras media queries que não são tão úteis no uso diário, mas, mesmo assim, eu não quis deixá-las de fora.
Color
A media query color (e as suas variantes min-* e max-*) te permite detectar se a tela em que sua página está sendo exibida tem alguma cor e, em caso afirmativo, quanto:
Você também pode atribuir um valor que corresponda ao número de bits por componente de cor, para cada vermelho, verde e azul separadamente. As telas mais modernas têm 8 bits por canal, mas telas de 10 bits e até telas de 12 bits estão se tornando mais comuns. O valor não é o número total de cores, mas os bits por cor; portanto, não confunda com “8-bitcolor”, que é algo diferente. 8 bits por canal de cor corresponde a uma tela colorida de 24 bits.
Monochrome
Algo como o inverso, monochrome (e suas variantes min-* e max-*) te permite detectar se a tela é mostrada em um tipo de mídia monocromática (como escala de cinza). Você pode novamente usar apenas o valor para detectar um tipo de mídia monocromática:
Assim como color, ele também tem um valor opcional que é o número de bits por pixel. Se você testar para monochrome: 0, este verificará se o dispositivo não é monocromático (por isso possui cores). monochrome: 1 vai detectar um dispositivo com pixels ativados ou desativados (como um e-paper).
Um caso de uso interessante para monocromático é que você pode usá-lo para detectar quando uma página é impressa em cores ou monocromática:
Grid
A media query grid permitirá que você detecte quando uma página é mostrada em terminais somente-texto (text-only) ou telefones básicos com fontes fixas. Seu valor é 0 ou 1 e diferentemente de color ou monochrome, você precisa adicioná-lo explicitamente:
Próximos recursos de Media Query
Embora todos os recursos anteriores tenham um suporte muito bom nos navegadores modernos, também existem muitos recursos futuros que são suportados apenas por alguns navegadores ou que, esperamos, serão implementados em breve.
Observe que alguns deles ainda estão em fase de elaboração, o que significa que eles podem ser alterados ou descartados antes de se tornarem parte de uma especificação.
Prefers-reduced-data (no support)
Nem todo mundo é suficientemente sortudo para ter um rápido, confiável e ilimitado plano de dados. Os navegadores podem enviar o header Save-data: on e os servidores da Web podem optar por enviar imagens e vídeos menores e desativar qualquer forma de pesquisa ou pré-carregamento. Embora a ativação do envio desse header esteja oculta nas configurações (no celular) ou exija um plug-in de terceiros (na área de trabalho), um grande número de pessoas ainda acaba usando esse header.
Infelizmente, lidar com isso no nível de servidor da Web geralmente é difícil, porque você não tem acesso ou os requisitos de configuração para fazê-lo funcionar são muito complexos. Isso é lamentável, porque ele é potencialmente muito impactante.
A seguir há a media query prefers-reduced-data: reduce, que te permitirá direcionar essa situação no CSS. Embora você possa fazer menos com isso em comparação com save-data header (que você pode usar para enviar um site totalmente diferente, basicamente), você ainda pode usá-lo para impedir o download de fontes e imagens de fundo desnecessárias ou para solicitar imagens de fundo menores.
Enquanto aguardamos o desembarque desse recurso, já podemos usar JavaScript para detectar a preferência de salvamento de dados ou uma conexão lenta usando a rede de informações API:
A rede de informação API está disponível em navegadores Chromium e atrás de uma flag no Firefox. Ele pode mostrar se o seu saveData está ativo e te fornece informações detalhadas sobre o tipo de conexão. effectiveType leva em consideração não apenas o tipo (wifi, celular etc.), mas também quanto tempo as viagens de ida e volta ao servidor levaram e qual é a velocidade do download. Há slow-2g, 2g, 3g e 4g como possíveis variantes.
Prefers-contrast (no support)
Prefers contrast indica se um usuário prefere uma interface de alto ou baixo contraste. Por exemplo, deficiências visuais podem dificultar a identificação de detalhes ou diferenças sutis de cor, então pessoas as que possuem podem preferir um contraste mais alto. Por outro lado, outras pessoas podem ser sensíveis ao alto contraste e preferem que as cores estejam mais próximas umas das outras.
Atualização de 9 de julho de 2020: essa media query provavelmente ainda mudará muito. Como nenhum sistema operacional implementa baixo contraste em qualquer configuração, ela pode ser descartada. Por outro lado, o macOS e o iOS implementam uma opção de contraste “aumentado”, então podemos ter um increased value. Por fim, há planos de transformar forced-colors em prefers-contrast com um valor prefers-contrast: forced. Vou atualizar esta seção quando a especificação mudar.
Prefers-reduced-transparency (no support)
O usuário pode usar isso para indicar que prefere ver coisas em cores sólidas, geralmente devido a deficiências visuais, dificultando a leitura de texto, por exemplo, em imagens de fundo. Mas também pode ajudar as pessoas com problemas de dislexia ou concentração, por exemplo, a ler seu conteúdo com mais facilidade. Observe que não diz não-transparência.
Querer menos transparência não é o mesmo que querer mais contraste e isso não deve ser agrupado. prefers-contrast e prefers-reduced-transparency existem por diferentes razões e podem ser compensados de maneiras diferentes.
Forced-colors (no support) / -ms-high-contrast (com suporte no Edge)
Cores forçadas, ou alto contraste, removerão todas as suas imagens de plano de fundo se houver texto sobre elas e substituirão todas as outras cores, tornando tudo uniforme com o restante do sistema operacional. Isso ajuda as pessoas com deficiência visual, facilitando a leitura de todo o texto.
Aqueles que têm trabalhado com desenvolvimento web há mais tempo podem se lembrar de que conseguíamos estilizar as coisas com cores do sistema. Isso não é mais possível devido a implicações de segurança, mas no modo de alto contraste do Windows, um subconjunto está de volta:
- windowText: controla a cor do conteúdo textual
- highlightText: controla a cor de um texto selecionado
- highlight: controla a cor de fundo de um texto selecionado
- buttonFace: controla a cor de um botão de elemento textual
- window: controla a cor de um plano de fundo
- O elemento a controla a cor dos links
Esses nomes de cores não estão aqui para você escolher, o modo de cores altas já substitui todas as cores de texto, fundo, borda e botão. Eles estão lá para você usar em outros elementos (como ícones) para ajustá-los ao restante do site.
-ms-high-contrast tem três possíveis valores (não há mais a opção de verificar modo de alto contraste desativado).
Enquanto as cores forçadas terão dois valores possíveis:
Quando forced colors está ativado, prefers-color-scheme pode ser usado para detectar se há texto em branco em um fundo preto ou texto em preto em um fundo branco.
Light-level (no support)
Light-level vem em três possíveis valores: dim, normal e washed. O que esses significam exatamente e quando são acionados depende do sistema operacional.
Light-level será dim se a tela estiver em um local escuro, como à noite, enquanto washed significa que ela é exibida sob luzes brilhantes ou em condições externas com muita luz solar.
Atualmente, os sistemas operacionais já compensam essas situações aumentando ou diminuindo o brilho, mas, se você possui um site, pode melhorar ainda mais a experiência. Em situações dim, você pode optar por diminuir o forte contraste aqui e ali e diminuir o brilho geral. Em situações washed, convém aumentar o contraste de todo o texto em comparação com o plano de fundo.
Overflow (com suporte somente no Firefox)
O Overflow pode testar como um dispositivo lida com conteúdo maior que o adequado. Existe de duas propriedades overflow-block, para a direção do bloco (geralmente de cima para baixo), e overflow-inline, para a direção de alinhamento (geralmente da esquerda para a direita).
Para o overflow-block há 4 valores potenciais para checar:
- none, significando que qualquer coisa que transborda simplesmente não é exibida
- scroll, você pode rolar para o conteúdo que excede
- optional-aged, você pode rolar, mas as quebras de página podem ser acionadas manualmente
- paged, o conteúdo que excede o limite é mostrado na próxima página.
E o overflow-inline tem somente dois valores:
- none, significando que qualquer coisa que transborda simplesmente não é exibida
- scroll, você pode rolar para o conteúdo que excede
Color-gamut (com suporte em Chromium browsers e safari)
Até agora, as cores na Web foram limitadas apenas à gama de cores sRGB, mas as telas modernas são capazes de exibir muito mais cores, como o espaço de cores p3. Com o color-gamut, você pode testar se um dispositivo possui um espaço de cores muito maior.
Existem três opções possíveis e, se suportar o espaço de cores maior, isso incluirá automaticamente o suporte para o espaço de cores menor.
- srgb, este é o que todos nós sabemos
- p3, este é o que, por exemplo, os iPhones modernos usam, geralmente chamado de “ampla gama”
- rec2020, esse é o maior espaço de cores disponível no momento, mas você basicamente não o encontrará na natureza.
Se um usuário tiver uma tela com uma gama mais ampla, você poderá usar imagens nesse espaço de cores e elas serão mais vibrantes que as do sRGB.
Ainda não há suporte, mas em breve haverá novas notações CSS que você poderá usar para descrever cores nesse espaço de cores mais amplo (já que isso não é possível com rgb, hsl ou hex, que estão limitados a sRGB.
Para essas novas cores, existem três funções novas de CSS: lab(), lch() e color().Por enquanto, apenas o Safari suporta a função color() e as outras duas funções não são suportadas em nenhum lugar.
Lab e lch permitem descrever cores mais precisas que rgb e hsl, mas com color() você pode ativar explicitamente uma gama de cores, como:
O display-p3 é o único valor suportado no momento e os três números são números de ponto flutuante para o canal R, G e B.
Scripting (no support)
Scripting vai permitir que você teste se JavaScript está disponível. Ele tem três recursos possíveis:
- none, JavaScript não está disponível
- initial-only, JavaScript só está disponível durante o carregamento de página, mas não depois
- enabled, JavaScript está disponível
Update (no support)
update também não tem suporte do navegador e é usado para detectar com que frequência o tipo de mídia pode ser atualizado. Os valores possíveis são:
- none, significa que não pode ser atualizado, como printed paper
- slow, onde a atualização é lenta, como em leitores de e-book ou dispositivos de baixa potência
- fast, onde a atualização não é restrita pelos recursos do dispositivo, como telas comuns.
Dynamic-range (no support)
Alguns monitores podem exibir “HDR” ou “alta faixa dinâmica”, caracterizada por grande contraste, brilho e profundidade de cor. A especificação oferece duas opções: high e standard
Um dispositivo tem uma faixa dinâmica alta se a tela e o navegador tiverem suporte para alta taxa de contraste e alto brilho, onde “alto” depende do navegador e pelo menos 8 bits por cor (ou 24 bits no total).
Environment-blending (no support)
Environment blending te permite testar se sua tela combina ou não com o ambiente, por exemplo, se for projetada em um pedaço de vidro. Existem três valores possíveis:
- opaque, como um monitor comum ou papel (pense nisso como o padrão).
- additive, por exemplo, uma exibição heads-up como Hololens. O preto é transparente e o branco é 100% claro.
- subtractive, por exemplo, uma tela LCD como uma tela Gameboy, embutida em um espelho. Aqui acontece o oposto: ‘branco’ é totalmente transparente e preto tem mais contraste.
Spanning (no support [1])
O recurso de mídia Spanning está em desenvolvimento pela Microsoft para oferecer suporte a dispositivos com várias telas e informará se um navegador abrange várias telas e se essas telas estão alinhadas horizontal ou verticalmente. Possui três valores possíveis:
- none, quando o navegador não abrange várias telas.
- single-fold-horizontal, quando o navegador abrange duas telas, com a dobra horizontalmente no meio.
- single-fold-vertical, quando o navegador abrange duas telas, com a dobra na vertical no meio.
Seu site funcionará bem em duas telas, porque o navegador apenas fingirá que é uma tela única, mas você pode usar os valores acima, juntamente com um novo conjunto de variáveis de ambiente env () css para organizar as coisas na tela primária ou secundária. Por exemplo, você pode usá-lo para ter uma lista em uma tela e um mapa na outra.
[1] O Microsoft Edge possui um recurso de emulação nas ferramentas do desenvolvedor, mas não tenho certeza se o próprio navegador já o suporta.
Novas notações na Media Query nos níveis 4 e 5
Juntamente com as novas media queries, as especificações mais recentes (4 e 5) também vêm com algumas novas notações. São melhorias úteis, mas nada nesta seção é suportado ainda.
Substituindo min-* e max-*
Na media query nível 4 você pode acabar com as versões min- * e max- * dos recursos de mídia que possuem um ” range context ” (por exemplo, uma versão min e max) e, em vez disso, gravá-las como uma equação simples:
Se você tiver ambos, min-width e max-width, você pode até mesmo combiná-los em uma equação:
Palavra-chave or
Ao invés de uma vírgula, agora você também pode escrever or, assim como você já pode escrever and. A consulta inteira será avaliada como verdadeira assim que uma delas corresponder.
Função not ()
Você pode anexar not à consulta inteira da mídia, mas e se você quiser apenas verificar um único valor? Você pode fazer isso com a notação not ():
Consultas de mídia personalizadas
As consultas de mídia personalizadas permitem definir uma media query uma vez e depois usá-la em vários locais sem se repetir, assim como as propriedades personalizadas de CSS (“variáveis”) funcionam. Elas ainda têm a mesma notação.
Aqui está um exemplo:
Media Queries Obsoletas
Apesar de todos os novos recursos lançados, também existem algumas especificações mais antigas que não são mais recomendadas para uso. Você ainda pode vê-las aqui e ali, mas não deve adicioná-las a novos projetos e, se as encontrar em projetos existentes, tente refatorá-las.
Device-* media queries
Quando as consultas de mídia foram implementadas pela primeira vez, a ideia principal era que elas raciocinassem sobre o dispositivo, para que houvesse recursos de mídia como device-width, device-height e device-aspect-ratio.
Mas o tamanho do dispositivo nem sempre é o tamanho da janela de visualização, portanto, o estilo baseado nelas não faz sentido.
prefers-color-scheme perderá um valor
O valor no-preference para prefers-color-scheme foi recentemente removido, portanto, haverá apenas dark e light como valores possíveis. Eles o removeram porque a maioria dos navegadores implementou esse recurso de mídia, sendo o padrão light e nunca implementando no-preference. A porta é deixada aberta para reintroduzi-lo no futuro, além de introduzir outras preferências de esquema de cores, como “sépia”.
Scan
Nenhum navegador realmente suporta esse recurso e ele deveria ser usado em conjunto com o tipo de mídia de TV descontinuado; portanto, provavelmente nunca mais veremos suporte novamente, mas explicarei de qualquer maneira. A consulta da mídia scan pode ser usada para testar o processo de digitalização usado para pintar uma imagem em uma tela (como em um monitor CRT). Tem duas opções:
- interlace, onde linhas ímpares e pares são desenhadas alternadamente.
- progressive, onde todas as linhas são desenhadas uma a uma.
progressive é descrita como uma tela que é mais lenta para atualizar e provavelmente mais imprecisa.
Usando Media Queries em JavaScript
Por fim, quero ressaltar que você não pode apenas usar media queries em CSS, mas também pode argumentar sobre elas em JavaScript. Você pode fazer isso com a função window.matchMedia ().
A função window.matchMedia () pega uma string de media query e retorna um objeto “MediaQueryList” com informações sobre se essa media query específica corresponde:
O valor matches informará se a media query é avaliada como verdadeira. Portanto, se você tiver o vídeo que deseja reproduzir automaticamente, poderá usar uma função matchMedia para fazer isso apenas para pessoas que não têm prefers-reduced-motion: reduce:
Você também pode adicionar um ouvinte ao objeto MediaQueryList. Isso permitirá que você responda às alterações no documento que fazem com que a consulta de mídia passe de falsa para verdadeira ou vice-versa.
Este é um artigo traduzido, você pode acessar a versão original em inglês aqui. Todos os créditos para o autor: Polypane blog
Last modified: 05/08/2020