7 novos recursos para fazer um site responsivo
O CSS moderno assume todo o controle do estilo do site com a ajuda do JavaScript necessário. Neste artigo, destacaremos sete novas atualizações de CSS para simplificar o futuro do estilo. Além disso, estamos considerando o suporte do navegador Chrome, Edge e Firefox. Por fim, discutiremos os problemas, soluções e praticamente tudo de que você precisa para começar imediatamente.
Considerando todos os truques e técnicas, aqui estão alguns recursos CSS escolhidos a dedo que valem seu tempo. Então, sem mais delongas, vamos mergulhar direto nisso.
1. CSS Subgrid
Ao contrário da capacidade do CSS flexbox de se mover apenas em uma direção, você pode definir ambas as dimensões em grades. À medida que eles começam a se tornar poderosos e populares nas próximas décadas, mudanças tremendas são testemunhadas nos designs da web. As grades aninhadas são usadas para desenhar grades dentro das grades. Mas, quais são as principais desvantagens que levantaram uma chamada para subgrids CSS?
- As grades aninhadas após o nível 2 costumavam estourar o conteúdo fora da grade maior, o que afetava fortemente a capacidade de resposta de um site.
- As grades aninhadas agiam como elementos independentes dentro do contêiner de grade maior. Não houve nenhuma referência ao container pai para qualquer mudança.
Sem subgrids:
Depois das subgrades:
Veja como você pode implementar subgrids:
.container {
width: 700px;
height: 500px;
background: rgb(214, 255, 139);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
.container div {
background: rgb(72, 170, 137);
grid-row: 2/ 3;
grid-column: 2 / 5;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}Você pode colocar várias subgrids. A exceção notável é que as subgrades herdam a propriedade de intervalo de grade pai. Isso resultará na criação de todas as subgrades com as mesmas propriedades de lacuna dentro de cada grade pai.
A melhor coisa sobre subgrids é que eles são altamente responsivos, ajustáveis e escaláveis.
Compatibilidade do navegador: Firefox
2. Propriedade de proporção de aspecto
Você pode eliminar todos os ajustes e problemas de cálculo alterando a proporção de aspecto de um determinado contêiner. Se você pretende inserir um vídeo, tudo que você precisa fazer é corrigir uma proporção relativa ao tamanho variável da tela. Mas, ao trabalhar com várias grades bidimensionais, há chances de transbordamentos e exibição padrão.
Você pode corrigi-lo apoiando a propriedade de proporção de aspecto com o atributo de largura. É útil para imagens responsivas, pois você pode definir uma altura ou largura.
Veja como você pode implementar a propriedade de proporção:
.container {
width: 700px;
aspect-ratio: 16 / 9;
background: rgb(72, 170, 137);
}
Você também pode inserir a proporção de aspecto: automático em vez de especificar a proporção. A desvantagem do valor automático padrão é que o navegador escolherá a dimensão original da imagem. Sem dúvida, isso dificulta a capacidade de resposta do site.
Compatibilidade do navegador: Chrome, Edge, Firefox (parcial)
3. Flexbox Gap
A lacuna da grade é bastante popular para criar espaço igual entre cada grade. Mas, você deveria aplicar margens negativas, seletores de pseudo-classe e seletores complexos para lidar com o espaço entre cada flex-items. Assim, a lacuna do Flexbox resulta em menos linhas de código com maior escalabilidade.
Veja como você pode implementar a lacuna do flexbox:
.container {
width: 700px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
gap: 1em;
}Resultado:
Compatibilidade do navegador: todos os principais navegadores, incluindo Chrome, Edge e Firefox.
4. Snap de rolagem
A rolagem ajuda no compartilhamento de mais informações sobre um único site sem bagunçar a cópia da web. Mas, a principal desvantagem da rolagem é que ela pode parar na metade do para ou da imagem. Às vezes, o controle do conteúdo paginado é deixado no meio. O JavaScript é cuidadosamente usado para evitar a personalização de rolagem. Mas, não foi um resultado completamente satisfatório até que veio o CSS Scroll Snap.
Usando Scroll Snap, você pode definir limites específicos para corrigir o layout e a visibilidade de um determinado contêiner. Por exemplo, é incrível criar carrosséis e seções de site definidas. Observe que você não exigirá JS para nenhum ajuste.
Veja como você pode implementar o snap de rolagem:
.container {
width: 100%;
height: 100%;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
section {
flex: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 15em;
font-family: Arial, Helvetica, sans-serif;
scroll-snap-align: end;
width: 100%;
height: 100%;
}Resultado:
O snap de rolagem CSS tem propriedades pai e filho. A propriedade parent ou container decide a direção da rolagem (x ou y) e o comportamento do ajuste de rolagem. Por exemplo, você pode definir scroll-snap-type: x obrigatório. Isso concederá ao usuário o controle para decidir o ponto de rolagem sem considerar a posição de rolagem.
Por outro lado, scroll-snap-type: y funções de proximidade apenas quando o visitante do site está mais perto do ponto de rolagem.
A propriedade child é scroll-snap-align para alinhar os elementos durante o scroll snap do CSS. Ele insere valores de início, fim e centro para alinhar os elementos de acordo.
5. Consultas de recursos
As consultas de recursos são usadas para lidar com a degradação normal. Por exemplo, grades CSS são bastante populares hoje em dia. Mas, vale a pena mencionar que os navegadores mais antigos não podem renderizá-lo.
Aqui, as consultas de recursos verificam se aquele navegador específico oferece suporte a uma propriedade específica ou não e fornece um sistema de suporte que incentiva a referência a uma propriedade CSS apenas se houver suporte nesse navegador. Caso contrário, o valor padrão é considerado. Nesse caso, você pode colocar blocos em vez de grades para qualquer fallback previsto.
Veja como você pode implementar consultas de recursos:
@supports (content-visibility: auto) {
body{
background: teal;
width: 100%;
height: 100%;
}
}Portanto, apenas os navegadores que renderizam propriedades de visibilidade de conteúdo terão a cor de fundo azul-petróleo; caso contrário, o valor padrão seria considerado. Observe que @ é semelhante a @media de consultas de mídia, onde você deveria definir uma largura máxima ou largura mínima para ajustes improvisados. Isso simplifica lembrar as consultas de recursos @supports.
Compatibilidade do navegador: todos os principais navegadores, incluindo Chrome, Edge e Firefox.
6. Propriedade de visibilidade de conteúdo
A renderização rápida funciona como uma espinha dorsal para um site interativo com o usuário. Com a crescente popularidade dos dispositivos móveis, o desempenho de renderização de um site da Web atua como um gargalo para a obtenção de um site atraente.
Aqui, a propriedade de visibilidade do conteúdo desempenha um papel crucial. Porque, por padrão, os navegadores processam todos os elementos do site de uma vez. Isso diminui o tempo de carregamento e o desempenho geral do site, especialmente se o seu site tiver muitas animações pesadas. Por outro lado, a propriedade de visibilidade do conteúdo renderiza apenas os elementos da janela de visualização e mostra outros elementos conforme você rola pela página.
#main {
content-visibility: auto;
/* contain-intrinsic-size: 0 500px; */
}A propriedade de visibilidade do conteúdo insere três valores. visibilidade do conteúdo: visível não mostra nenhum efeito, enquanto visibilidade do conteúdo: oculto é semelhante a exibição: nenhum, onde o elemento ignora o conteúdo inacessível. A visibilidade do conteúdo: auto ignora o conteúdo irrelevante, mas está disponível como uma página normal para os recursos do agente do usuário.
Vamos medir o poder da visibilidade do conteúdo. Aqui está o resultado:
7. Transição, transformação e animação
Em CSS, temos duas maneiras de aplicar animação. A transição é usada para fazer mudanças suaves nas propriedades visuais dos elementos. Por outro lado, sem transição, a transformação seria manipulada abruptamente de um estado para outro.
As animações são usadas com @keyframes que definem estilos em vários pontos durante a duração da animação. O interessante é que @keyframes define quando a mudança acontecerá , a transformação e a animação assumem o controle da mudança e a transição cuida de como a mudança acontecerá (por exemplo, efeitos de foco).
.child {
background: teal;
height: 150px;
width: 150px;
color: white;
transition: transform 0.2s ease-in-out;
animation: myAnimation 2s infinite;
}
.child:hover {
transform: scale(2, 2) rotate(45deg);
}
@keyframes myAnimation {
0% {
}
50% {
transform: translateX(400px)
}
100% {
transform: translateX(0px)
}
}Compatibilidade do navegador: todos os principais navegadores, incluindo Chrome, Edge e Firefox.
Empacotando
A marcação da folha de estilo em cascata está em constante evolução com recursos melhores. Até agora, você conheceu esses sete recursos incríveis que incluem subgrid CSS, propriedade de proporção de aspecto, lacunas de flexbox, snap de rolagem, consultas de recursos, propriedade de visibilidade de conteúdo, transição, transformação e animação.
No final do dia, você deve garantir quais recursos estão simplificando o estilo do seu site.
