De propriedades pouco conhecidas de rolagem a novas paletas de cores surpreendentes, aqui estão sete atualizações de folhas de estilo em cascata que você não vai querer perder.
As folhas de estilo em cascata (CSS) foram lançadas pela primeira vez em 1996 e continuam sendo uma parte essencial e em evolução da pilha de desenvolvimento da web. Como outras linguagens vivas, o CSS está constantemente introduzindo novos recursos em resposta às práticas do mundo real. Essa rápida evolução pode fazer com que até mesmo desenvolvedores dedicados percam novos recursos. Aqui está uma olhada nos recursos novos e futuros mais úteis em CSS.
Subgrade
Desde a sua criação, os desenvolvedores reclamaram de certas deficiências monstruosas no CSS. Algumas tarefas comuns, como centralizar algo em CSS , exigem soluções alternativas e ajustes excessivamente complexos. Outro grande problema foi obter um layout de grade razoável, pelo menos até o módulo CSS Grid Layout entrar na brecha.
Um layout de grade é indicado com a display: griddeclaração e é uma espécie de primo do Flexbox , pois permite definir layouts retangulares, mas também controlar sua grade em duas dimensões. Pesquisas mostram que a maioria dos desenvolvedores com as mãos em CSS estão cientes do Grid Layout e muitos de nós o estão usando. (Se você ainda não está usando, confira !)
Subgrid é um recurso novo e muito útil para o módulo Grid Layout. O subgridrecurso permite definir uma grade filha que herdará o layout de seu pai. Isso é diferente de aninhar uma exibição de grade em outra; nesse caso, a grade filha define suas próprias dimensões e lacunas. Com subgrid, o layout do pai é aplicado à subgrade, mas a subgrade ainda pode substituir aspectos do layout, se necessário.
Novos recursos de trabalho híbrido estão chegando ao Windows 11
0 segundos de 28 minutos, 12 segundos Volume 0%
Até o momento, subgridsó é implementado no Firefox 71 ou superior, mas está no roteiro para Safari WebKit , Google Chrome e Microsoft Edge . Subgrid será um recurso de layout muito útil daqui para frente.
Cor de destaque
Alguns elementos de exibição são tradicionalmente difíceis de estilizar, apesar de serem comumente usados. Caixas de seleção e botões de opção, por exemplo, são frequentemente substituídos por um widget personalizado que imita o comportamento desses elementos enquanto oculta a implementação do navegador. A nova opção CSS accent-colorpermite direcionar esses elementos.
Listagem 1. Controlando as cores do botão de opção em CSS
<style>
input[type="radio"] {
accent-color: magenta;
}
</style>
<form action="/foo.bar">
<p>Select your favorite outdoor adventure type</p>
<input type="radio" id="mountain" name="type" value="mountain">
<label for="mountain">Mountain</label><br>
<input type="radio" id="ocean" name="type" value="ocean">
<label for="ocean">Ocean</label><br>
<input type="radio" id="desert" name="type" value="desert">
<label for="desert">Desert</label>
</form>Snap de rolagem
CSS oferece um conjunto prático de propriedades para controlar a ação de rolagem em um navegador da web. Algumas partes dessa funcionalidade estão em vigor há alguns anos, enquanto outras ainda estão sendo lançadas em versões mais recentes do navegador .
O interessante é que mais de um terço dos usuários de CSS ainda não estão cientes do scroll snap .
O scroll-snap-* propertiescomando oferece algumas maneiras de ajustar como a posição de rolagem funciona em um contêiner. Os desenvolvedores obtêm maior precisão e os usuários finais obtêm uma experiência de usuário mais suave e controlada.
A Listagem 2 fornece um pequeno exemplo de como controlar o snap de rolagem em a div(veja também este exemplo ao vivo ).
Listagem 2. Exemplo de snap de rolagem simples
<style>
.scroll-container,
.scroll-area {
max-width: 850px;
height: 300px;
font-size: 60px;
}
.scroll-container {
overflow: auto;
scroll-snap-type: y mandatory;
height: 500px;
}
.scroll-area {
scroll-snap-align: start;
}
.scroll-container,
.scroll-area {
margin: 0 auto;
}
.scroll-area {
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.scroll-area:nth-of-type(1) { background: IndianRed; }
.scroll-area:nth-of-type(2) { background: Moccasin; }
.scroll-area:nth-of-type(3) { background: thistle; }
.scroll-area:nth-of-type(4) { background: seagreen; }
</style>
<div class="scroll-container">
<div class="scroll-area">1</div>
<div class="scroll-area">2</div>
<div class="scroll-area">3</div>
<div class="scroll-area">4</div>
</div>Não importa onde você libere o movimento de rolagem, a yposição de rolagem na Listagem 3 se move automaticamente para o elemento filho. Isso ocorre porque o contêiner de rolagem tem a scroll-snap-typepropriedade definida como y mandatorye os elementos filho têm a scroll-snap-align: startdeclaração.
Você também pode modificar esse comportamento. Por exemplo, você pode definir a scroll-snap-typepropriedade como y proximity. Isso faz o que você espera e se encaixa apenas quando a rolagem se aproxima da proximidade do elemento.
Como uma observação lateral, a propriedade overscroll-behavior relacionada permite definir como os contêineres de rolagem aninhada se comportam.
Propriedades lógicas CSS
Se você sempre quis definir uma borda de contêiner à esquerda e à direita, ou inferior e superior, experimentou o incômodo de ter que escrever as propriedades border-leftand border-right, ou border-top, border-bottomliteralmente. O problema é que não há como aproveitar a propriedade de atalho sem afetar também as bordas que você não deseja manipular. Esse inconveniente também se aplica a elementos como preenchimento e margens.
O módulo CSS Logical Properties permite que você use as palavras-chave inlinee blockpara fazer referência a coisas de maneira abstrata. Quando você quiser falar sobre esquerda e direita, use inline; quando você quiser se referir ao topo e ao fundo, use block. Por exemplo, para definir uma borda à esquerda e à direita de um div, você pode usar o código da Listagem 3 (veja também um exemplo ao vivo aqui ).
Listagem 3. Preenchimento esquerdo e direito com inline lógico
div {
border-inline: 10px dashed seagreen;
}Esses são atalhos úteis para bordas, mas você também pode encontrar as palavras-chave inlinee blocklógicas em várias outras propriedades .
A maioria dos desenvolvedores usa esses atalhos para lidar com considerações de direção de texto e modo de escrita . Nesses casos, usar uma propriedade como padding-inline-endpermite direcionar o preenchimento à direita, independentemente da direção do texto que está ativa. Basicamente, a abstração para inline e block permite escrever estilos generalizados que se aplicam a uma variedade de configurações. Consulte Propriedades e valores lógicos CSS para uma discussão mais aprofundada.
Consultas de contêiner
As consultas de contêiner não estão totalmente estabilizadas em CSS, mas elas serão lançadas em breve. Eles terão um grande impacto em como pensamos sobre o design responsivo. A ideia básica é que você poderá definir um ponto de interrupção não apenas com base na janela de visualização e na mídia, mas no tamanho de um contêiner pai.
A sintaxe não está totalmente definida, mas provavelmente será algo como a Listagem 4.
Listagem 4. @container
@container (max-width: 650px){ … }Considere o quão poderoso será ajustar um layout com base no tamanho de diferentes contêineres, que são manifestados em todas as camadas aninhadas de uma interface do usuário. Esta é uma mudança bastante abrangente que provavelmente instigará uma onda de inovações de interface.
@quando e @else
Enquanto estamos pensando na nova @containerconsulta, você sabia que o suporte a consultas condicionais @when e @else também está no horizonte? Ainda não é suportado por nenhum dos principais navegadores, mas é um recurso que chegará em um futuro não muito distante.
As consultas @whene @elsehabilitam um fluxo lógico condicional no estilo if/then ao lidar com consultas de mídia e suporte. Eles simplificarão sua vida em muitas situações e layouts CSS complexos.
Três novas paletas de cores
Desde tempos imemoriais, os praticantes de CSS usam RGB, HEX e cores nomeadas para embelezar e animar as telas de seus dispositivos. Mais recentemente, a declaração de cores no estilo HSL foi introduzida. Agora, a especificação CSS está introduzindo novas maneiras de denotar cores; ou seja, hwb, labe lch.
HWB significa matiz, brancura e negritude. É uma adição elegante que é notável por sua legibilidade humana – você escolhe uma cor e depois adiciona branco e preto. É compatível com versões recentes do Chrome, Firefox e Safari. (A referência de recurso do Microsoft Edge é estranhamente silenciosa neste tópico.) Consulte hwb() – uma notação de cores para humanos? para saber mais sobre o HWB. Como RGB e HWL, ele suporta um canal alfa para transparência.
LCH, abreviação de leveza, croma e matiz, é notável por aumentar a gama de cores disponíveis. Cores LCH em CSS: o que, por que e como? é uma boa visão geral com uma discussão de abertura dos olhos da teoria das cores em CSS. Atualmente, apenas o Safari suporta LCH.
LAB, derivado da teoria de cores CIE LAB , é o mais teórico dos novos espaços de cores. O labdescritor de cores pretende abranger toda a gama de cores perceptíveis pelo homem, o que é uma afirmação e tanto. Como o LCH, atualmente é suportado apenas pelo Safari. Você pode aprender mais sobre o LAB for CSS na documentação do Mozilla CSS .