Recursos CSS interessantes que você deve conhecer

Na semana passada estávamos falando sobre pseudo-elementos e pseudo-classes em CSS. Nesse post, vimos como esses recursos CSS nos permitem gerar um código mais conciso, inteligível e fácil de manter. Hoje eu gostaria de compartilhar com vocês algumas propriedades CSS adicionais para construir sites adaptáveis ​​que levam em consideração as preferências de seus visitantes .

Aspect Ratios com object-fit object-position

object-fit é uma propriedade CSS que permite definir como um elemento de substituição (por exemplo, uma imagem) deve ser redimensionado para caber em seu contêiner. Vamos ver o que isso significa com um exemplo concreto, certo?

Suponha que temos a seguinte imagem vertical:

e queremos exibi-lo na seguinte área:

que tem 15em de altura e ocupa 80% da largura disponível. Em princípio, você pode pensar que tudo o que precisamos fazer é definir uma width e uma height específicas para nossa imagem, certo?

 .custom-size { height: 15em; width: 80%; }

Bem, se você fizer isso, verá que a proporção da imagem está confusa:

Para evitar que uma imagem seja distorcida ao usar largura e altura específicas, os desenvolvedores costumavam confiar (e alguns ainda confiam) na propriedade CSS background de um div . Então, ao invés de adicionar a imagem usando a tag img , criamos um container div :

 <div></div>

defina as dimensões corretas para o referido div e adicione a imagem real via CSS usando as propriedades background-size e background-position :

 #custom-image { background-image: url( …/image.jpg ); background-size: cover; background-position: center; height: 15em; width: 80%; }

E aqui você pode ver o resultado:

Dimensionar e cortar imagens usando propriedades de plano de background CSS em uma tag div é uma solução ruim, porque você não está mais usando a tag HTML semanticamente correta: img . Além disso, as tags img incluem várias propriedades interessantes que resultarão em sites mais rápidos e acessíveis: uma propriedade alt que descreve a imagem, srcset para torná-la responsiva, loading para carregamento lento e assim por diante.

Se você deseja dimensionar e cortar uma imagem para que ela se ajuste a algumas dimensões específicas sem distorcer a imagem em si, tudo o que você precisa fazer é usar as propriedades CSS object-fit object-position , que se comportam como background-size background-position Faz:

 .custom-size { height: 15em; object-fit: cover; object-position: center; width: 80%; }

Se você aplicar as regras anteriores a uma tag img :

 <img class="custom-size" src="…/image.jpg" />

este é o resultado que você obtém:

que é exatamente o que você estava interessado, não estava?

Se quiser saber mais sobre este imóvel, aqui está um link com todas as informações necessárias.

Design adaptável com consultas de mídia

As consultas de mídia são um mecanismo que permite adicionar regras CSS ao seu site com base nas características do dispositivo ou aplicativo a partir do qual seus visitantes acessam a web. Tenho certeza de que você está um pouco familiarizado com eles, pois as consultas de mídia são a base para a criação de sites responsivos, mas há muito mais que você pode fazer com eles!

Consultas de mídia clássica

Usar uma consulta de mídia em uma folha de estilo CSS é tão fácil quanto adicionar a palavra-chave @media com duas coisas: por um lado, uma condição que descreve quando a consulta de mídia está ativa e, por outro lado, o conjunto de regras CSS que devem ser carregado quando a condição for atendida. É por isso que as consultas de mídia são a base para criar designs responsivos: você simplesmente aplica um conjunto de regras ou outro, dependendo da width do navegador do visitante.

Por exemplo, vamos supor que você queira alterar a barra lateral do parágrafo a seguir:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. O leão na varanda macia e feia às vezes, mas estremece o elemento ao ar livre. Mas a necessidade dos empresários chamou de estresse térmico. Microondas reservado, mas minha porta é sempre ou às vezes autor de massa. Android e Nunc sodales interdum, tincidunt erat ac, tincidunt elit. No entanto, ultricies ac, arcu metus Sed congue. Por conveniência, tenha medo de proteína aprimorada de leo. É um tellus orci, tempor id egestas nec, pelo menos pegue alguns jogadores.

para que use todas as cores do arco-íris, dependendo da largura do navegador. Veja como você pode obter esse comportamento via CSS:

 .colored-border { border-left: 0.5em solid red; padding-left: 1em; } @media ( min-width: 400px ) { .colored-border { border-color: orange; } } @media ( min-width: 600px ) { .colored-border { border-color: yellow; } } @media ( min-width: 800px ) { .colored-border { border-color: green; } } @media ( min-width: 1000px ) { .colored-border { border-color: cyan; } } @media ( min-width: 1200px ) { .colored-border { border-color: blue; } } @media ( min-width: 1400px ) { .colored-border { border-color: violet; } }

Bem fácil, certo? Simplesmente precisamos aplicar uma cor diferente toda vez que a largura do navegador ultrapassar um determinado limite. Observe que implementamos isso usando uma abordagem mobile first, porque “novas” regras são aplicadas à medida que a tela fica maior. Altere a largura da janela e você verá o resultado.

Como implementar o modo escuro com CSS

Os modos escuros estão na moda agora, tanto no celular quanto no desktop. Você sabia que existe uma consulta de mídia para ver se os usuários preferem os modos escuros? Usando a consulta de mídia prefers-color-scheme você pode ver se o usuário prefere um esquema de cores light ou dark . O que significa que agora você tem o poder de criar duas versões do seu site para que ele corresponda às preferências de todos os seus visitantes.

Por exemplo, considere o seguinte trecho de HTML:

 <div class="force-light-theme">Light Theme</div> <div class="force-dark-theme">Dark Theme</div> <br> <div class="theme">Dynamic (based on your settings)</div>

e estas regras CSS:

 .force-light-theme { background: #eee; color: black; } .force-dark-theme { background: #333; color: white; } @media (prefers-color-scheme: light) { .theme { background: #eee; color: black; } } @media (prefers-color-scheme: dark) { .theme { background: #333; color: white; } }

Dependendo da sua configuração, você verá que a parte “Dynamic” do snippet HTML anterior se parece com o Light Theme ou o Dark Theme:

Bem legal, hein? E simples!

Outros casos de uso interessantes com consultas de mídia

Há muitas consultas de mídia que você pode usar (você tem uma lista completa aqui), mas gostaria de me concentrar em uma em particular. Especificamente, quero explicar a você como aplicar estilos diferentes dependendo se a página é exibida no navegador ou está prestes a ser impressa. Tudo o que você precisa fazer é usar a palavra-chave print ou screen para a consulta de mídia da seguinte maneira:

 @media print { … } @media screen { … }

ou crie dois arquivos CSS separados, um para cada caso de uso, e inclua-os em seu HTML usando a propriedade media de uma tag de link :

 <link media="print" src="…/print.css" /> <link media="screen" src="…/default.css" />

O interessante disso é que você pode criar uma folha de estilo que transforma seu site em um conteúdo projetado para ser impresso. Assim, por exemplo, você poderá ocultar partes dinâmicas da web que não fazem sentido em uma versão impressa (como menus ou formulários). Ou você pode até garantir que algumas coisas que são perdidas quando impressas fiquem visíveis, como, por exemplo, a URL de destino de um link:

 @media print { .menu { display: none; } .show-links a:after { content: " (" attr(href) ")"; } }

cujo resultado é o seguinte:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo em turpis interdum, em pharetra velit elementum. Nam eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi sempre, vel interdum massa auctor. Pellentesque et massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam comodo metus sed ligula consectetur interdum. Curabtur odio est, tempor id egestas nec, aliquam at nisl.

Variáveis ​​CSS

Finalmente, vamos falar sobre outro recurso CSS incrível: propriedades personalizadas CSS (também conhecidas como variáveis ​​CSS). Sites complexos têm grandes quantidades de CSS, e é bastante comum ter o mesmo valor repetido várias vezes. Por exemplo, sua paleta de cores, bordas, preenchimentos e assim por diante são usados ​​em todos os lugares. Bem, as variáveis ​​CSS simplificam essa complexidade. E eles são extremamente úteis para implementar o modo escuro facilmente!

As variáveis ​​CSS são exatamente o que você está pensando: uma maneira de armazenar e reutilizar um valor CSS específico por trás de um nome significativo. É muito mais fácil entender o que --main-text-color do que #333 , não é?

A declaração de uma propriedade personalizada é feita usando um nome de propriedade personalizada que começa com um hífen duplo ( -- ) e um valor de propriedade que pode ser qualquer valor CSS válido. Como qualquer outra propriedade, isso é escrito dentro de um conjunto de regras, assim:

 element { --main-color: red; --main-padding: 2em 1em; }

O seletor que você usa no bloco de regras onde você definiu a variável CSS determina seu escopo. Ou seja, se você definir uma variável dentro de uma regra div.banner , essa variável estará disponível apenas nesse escopo. No entanto, o mais comum é criar variáveis ​​no escopo global usando a pseudo-classe :root :

 :root { --main-color: red; --main-padding: 2em 1em; }

Para usar uma variável CSS, basta especificar seu nome dentro da função var :

 p { color: var(--main-color); padding: var(--main-padding); }

CSS está aqui para ajudá-lo

A estrutura HTML de uma página da web é como a fundação de uma casa – você precisa de uma base sólida se quiser construir algo sólido. Ao criar uma página da Web, certifique-se de usar uma árvore HTML semanticamente correta e limpa. Isso resultará em uma página que funcionará em todos os navegadores para todos os visitantes, e aplicar truques de CSS em cima dela será simples e eficaz.

Espero que tenham gostado do post de hoje. Se você fez, compartilhe com seus amigos

Imagem em destaque por William Daigneault no Unsplash.