9 truques CSS avançados de consulta de mídia que você deve conhecer
As consultas de mídia permitem designs responsivos e apropriados ao dispositivo há algum tempo. Essas consultas mais avançadas levam as coisas para o próximo nível.
Uma experiência utilizável e acessível é vital para um site de sucesso. Se seus leitores tiverem uma experiência positiva, é mais provável que eles realizem um apelo à ação, incluindo a compra de produtos. Eles também são mais propensos a retornar ou recomendar seu site a outras pessoas. A experiência é fundamental.
As consultas de mídia oferecem diferentes recursos CSS que podem personalizar seu site. Eles permitem personalizar a experiência de cada usuário com base nas capacidades de seu dispositivo. Aprenda como oferecer a melhor experiência aos seus leitores, estejam eles usando o telefone ou um grande monitor de desktop.
1. O recurso de ponteiro
A regra @media possui um recurso de ponteiro que permite personalizar seu design com base no dispositivo apontador principal. Você pode testar a disponibilidade e a qualidade.
Esse recurso de consulta de mídia de ponteiro assume um dos três valores: nenhum, grosso ou fino. O valor none se aplica quando não há dispositivo apontador. O valor grosso se aplica quando o dispositivo apontador principal tem um nível de precisão reduzido. E o valor fino se aplica quando o dispositivo apontador principal tem um alto nível de precisão.
Usando o recurso de ponteiro
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
input[type="radio"] {
appearance: none;
border: solid;
border-color: black;
margin: 0;
}
input[type="radio"]:checked {
background: red;
}
@media (pointer: fine) {
input[type="radio"] {
width: 15px;
height: 15px;
border-radius: 20px;
border-width: 1px;
}
}
@media (pointer: coarse) {
input[type="radio"] {
width: 25px;
height: 25px;
border-radius: 20px;
border-width: 2px;
}
}
</style>
<title>Pointer</title>
</head>
<body>
<label for="options">Options to Choose From: </label>
<input type="radio" id="options" > Option One
<input type="radio" id="options" > Option Two
</body>
</html>
O código acima gera duas opções de rádio de entrada, que variam de acordo com a precisão do dispositivo apontador principal do computador.
Um computador que possua um dispositivo apontador primário preciso (ou de alta qualidade) exibirá a seguinte página da web:
Um computador que possui um dispositivo primário com precisão limitada (ou baixa qualidade) exibirá a seguinte página da web:
O dispositivo que possui um dispositivo apontador primário com um nível limitado de precisão possui botões de opção maiores. Isso proporciona uma melhor experiência de usuário para esses usuários. Com o recurso de ponteiro, você pode garantir que todos os seus usuários tenham uma experiência agradável, independentemente do dispositivo.
2. O recurso de qualquer ponteiro
Assim como o recurso de ponteiro, o recurso de consulta de mídia com qualquer ponteiro tem como alvo dispositivos apontadores. No entanto, o recurso any-pointer avalia cada dispositivo apontador de um computador. O recurso de qualquer ponteiro também usa os valores nenhum, grosso e fino.
Usando o recurso de qualquer ponteiro
@media (any-pointer: fine) {
input[type="radio"] {
width: 15px;
height: 15px;
border-radius: 20px;
border-width: 1px;
}
}
@media (any-pointer: coarse) {
input[type="radio"] {
width: 25px;
height: 25px;
border-radius: 20px;
border-width: 2px;
}
}
Você pode simplesmente substituir o código acima pela seção de consulta de mídia do código no exemplo do recurso de ponteiro. O código acima renderiza uma exibição apropriada com base na qualidade de qualquer dispositivo apontador que um computador possa ter.
3. O recurso de foco
O recurso de consulta de mídia instantânea avalia se o mecanismo de entrada principal de um dispositivo é capaz de passar o mouse sobre os elementos em uma IU.
Usando o recurso de foco
/* CSS */
a{
text-decoration: none;
color: black;
}
@media (hover: hover) {
a:hover {
color: blue;
}
}
<!-- HTML -->
<a href="#"> A link element</a>
O código acima exibirá um elemento . Ele mudará de cor (de preto para azul) sempre que o mecanismo de entrada principal de um dispositivo (que suporta pairar) passar sobre ele.
4. O recurso de qualquer foco
A consulta de mídia any-hover tem como alvo qualquer mecanismo de entrada, incluindo o mecanismo de entrada primário.
Usando o recurso any-hover
@media (any-hover: hover) {
a:hover {
color: blue;
}
}
A consulta de mídia acima produz um efeito de foco para qualquer mecanismo de entrada que seja capaz de passar o mouse sobre um elemento.
5. O recurso de resolução
O recurso de consulta de mídia de resolução calcula o número de pixels exibidos por um dispositivo específico. Um dispositivo que exibe mais pixels por polegada tem uma resolução melhor porque exibe imagens com mais detalhes. Esse recurso pode ajudar um desenvolvedor a decidir quais usuários de dispositivos podem ver os elementos em uma IU com mais clareza.
O recurso de resolução usa intervalo. Isso significa que, além de usar a palavra-chave resolução, você pode usar resolução mínima e resolução máxima. O recurso de resolução de consulta de mídia pertence ao tipo de dados de resolução. Isso significa que o recurso de resolução pode ser medido em uma das três unidades: pontos por polegada (dpi), pontos por centímetro (dpcm) ou pontos por pixels (dppx).
Usando o recurso de resolução
/* CSS */
@media (min-resolution: 72dpi) {
p {
color: white;
background-color: blue;
}
}
<!-- HTML -->
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</p>
A resolução mais baixa que um dispositivo pode ter e ainda exibir imagens com qualidade é 72dpi. Portanto, se um dispositivo tiver resolução de 72 dpi ou mais, ele exibirá a seguinte saída em seu navegador:
6. O recurso de orientação
Uma janela de visualização de dispositivo só pode ter uma destas duas orientações: retrato oupaisagem. Você deve observar que a orientação da janela de visualização é diferente da orientação do dispositivo. Se um dispositivo usar um teclado virtual, sua janela de visualização poderá mudar de retrato para paisagem enquanto o próprio dispositivo ainda estiver na posição retrato.
Usando o recurso de orientação
/* CSS */
body{
display: flex;
}
section{
border: 2px solid blue;
padding: 3px;
margin: 3px;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
<!-- HTML -->
<section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
<section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
<section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
O código acima altera o layout de uma página da web com base na orientação de um dispositivo.
Um dispositivo com uma janela de visualização no modo paisagem exibirá a seguinte página da web:
Um dispositivo com uma janela de visualização no modo retrato exibirá a seguinte página da web:
7. O recurso de altura
O recurso de consulta de mídia de altura permite especificar o estilo CSS com base na altura da janela de visualização do dispositivo de um usuário. Este recurso suporta intervalo, então você também pode usar as palavras-chave min-height e max-height.
Usando o recurso de altura
/* CSS */
@media (min-height: 360px) {
p{
border: 2px dotted orangered;
}
}
<!-- HTML -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
O código acima personaliza o que o usuário vê com base na altura do dispositivo. Usuários com altura de dispositivo de 360px ou mais verão algo semelhante à seguinte página da web:
Dispositivos com altura inferior a 360px não exibirão a borda ao redor do parágrafo na página da web.
8. O recurso de largura
O recurso de consulta de mídia de largura permite criar estilos CSS específicos com base na largura da janela de visualização do dispositivo de um usuário. Este recurso também suporta intervalo, então você tem a opção de usar as palavras-chave min-width e max-width.
Usando o recurso de largura
/* CSS */
@media (min-width: 600px) {
p{
border: 2px solid purple;
}
}
<!-- HTML -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
O código acima personaliza o que o usuário vê com base na largura do dispositivo. Usuários com largura de dispositivo de 600px ou mais verão algo como a seguinte página da web:
Usar consultas de mídia baseadas em largura e altura pode ser uma estratégia eficaz para tornar seu site responsivo.
9. O recurso de cor
O recurso de consulta de mídia colorida avalia o componente de cor de um dispositivo (vermelho, verde, azul). O valor refere-se a quantos bits um display utiliza para cada componente, o que define quantas cores diferentes ele pode mostrar. Os dispositivos modernos normalmente usam uma tela de 24 bits que usa oito bits por componente de cor. Também assume um valor inteiro, onde um dispositivo incolor é zero.
O recurso de cores também usa os intervalos min-color e max-color .
Usando o recurso de cores
/* CSS */
@media (min-color: 7) {
p{
border: 2px solid green;
}
}
<!-- HTML -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
Dispositivos com um componente de cor igual ou superior a sete exibirão a seguinte saída em seus navegadores:
Agora você pode criar experiências de usuário exclusivas
Você deve ser capaz de usar essas consultas de mídia avançadas para aprimorar a experiência de cada usuário que visita seu site ou aplicativo. É importante proporcionar aos usuários de dispositivos móveis e de desktop uma experiência igualmente positiva em seu site.
As consultas de mídia não são as únicas ferramentas CSS que podem fortalecer suas habilidades de desenvolvedor.