Novos recursos CSS para esperar em 2022

Aqui estão algumas atualizações de Cascading Style Sheets que você não vai querer perder, desde propriedades pouco conhecidas de scroll-snap até novas paletas de cores impressionantes.

CSS (Cascading Style Sheets) estreou em 1996 e ainda é um componente importante e em evolução da pilha de desenvolvimento web. CSS, como outras linguagens vivas, está sempre adicionando novos recursos em resposta às práticas do mundo real. Devido à rápida evolução, mesmo desenvolvedores dedicados podem perder novos recursos. Confira alguns dos recursos mais úteis que chegarão ao CSS em um futuro próximo.

Subgrade

CSS tem sido criticado por uma série de falhas flagrantes desde o seu início. Algumas tarefas simples, como centralizar algo em CSS, exigem soluções e ajustes excessivamente complexos.
Outro problema significativo foi conseguir um layout de grade razoável, pelo menos até o módulo CSS Grid Layout entrar em ação.

Um layout de grade é indicado pelo display: declaração de grade e é semelhante ao Flexbox, pois permite definir layouts retangulares enquanto também controla sua grade em duas dimensões.
De acordo com a pesquisa, a maioria dos desenvolvedores de CSS conhece o Grid Layout e muitos de nós o usam. (Não se esqueça de experimentá-lo se você não tiver!)

Subgrid é um recurso totalmente novo e extremamente útil para o módulo Grid Layout. O recurso de subgrade permite criar uma grade filha que herdará o layout de sua grade pai.

Em contraste com o aninhamento de uma exibição de grade em outra, a grade filha define suas próprias dimensões e intervalos. O layout do pai é aplicado à subgrade ao usar a subgrade, mas a subgrade ainda pode substituir aspectos do layout, se necessário.

Atualmente, o Subgrid está disponível apenas no Firefox 71 e superior, mas está planejado para o Safari WebKit, Google Chrome e Microsoft Edge. Um Subgrid será um recurso de layout muito útil no futuro.

Cor de destaque

Apesar de sua popularidade, alguns elementos de exibição são notoriamente difíceis de estilizar. Caixas de seleção e botões de opção, por exemplo, são frequentemente substituídos por um widget personalizado que imita seu comportamento enquanto oculta a implementação do navegador. Você pode direcionar esses elementos com a nova opção de cor de destaque CSS.

Por exemplo, conforme mostrado na Listagem 1, você pode aplicar uma cor magenta a todos os botões de opção em sua página (veja também este exemplo ao vivo).

Listagem 1: Controle de cores CSS para botões de opção

 <style> input[type="radio"] { accent-color: magenta; } </style> <form action="/foo.bar" > <p> Select your favorite outdoor adventure type </p> <input type="radio" name="type" value="mountain" > <label for="mountain" > Mountain </label><br> <input type="radio" name="type" value="ocean" > <label for="ocean" > Ocean </label><br> <input type="radio" 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. Muitos desses recursos já estão disponíveis em versões recentes do navegador, enquanto outros ainda estão sendo implementados.

Vale a pena notar que mais de um terço dos usuários de CSS ainda desconhecem o snap de rolagem.

O comando scroll-snap-* properties fornece várias opções para ajustar como a posição de rolagem funciona em um contêiner. Os desenvolvedores se beneficiam de maior precisão, enquanto os usuários finais se beneficiam de uma experiência de usuário mais suave e controlada.

A Listagem 2 mostra um exemplo simples de como controlar o snap de rolagem em uma div (veja também este exemplo ao vivo).

A Listagem 2 é um exemplo de um 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>

A posição de rolagem y na Listagem 3 se move automaticamente para o elemento filho, não importa onde você solte o movimento de rolagem. Isso ocorre porque a propriedade scroll-snap-type do contêiner de rolagem está definida como y e os elementos filho com a declaração scroll-snap-align:start.

Esse comportamento também pode ser alterado. Você pode, por exemplo, definir a propriedade scroll-snap-type para y proximidade. Isso funciona como esperado, encaixando apenas quando a rolagem está próxima ao elemento.

Além disso, a propriedade overscroll-behavior relacionada controla como os contêineres de rolagem aninhada se comportam.

Propriedades Lógicas do CSS

Você provavelmente já experimentou o incômodo de ter que escrever as propriedades border-left e border-right ou border-top, border-bottom textualmente se você já quis definir uma borda de contêiner à esquerda e à direita, ou inferior e topo. O problema é que não há como usar a propriedade de atalho sem afetar as bordas que você não deseja alterar. Isso também é verdade para elementos como preenchimento e margens.

O módulo CSS Logical Properties permite que você faça referência a coisas de maneira abstrata usando as palavras-chave inline e block. Ao se referir à esquerda e à direita, use inline; ao se referir a parte superior e inferior, use bloco. Por exemplo, para adicionar uma borda aos lados esquerdo e direito de uma div, use o código na Listagem 3. (veja também um exemplo ao vivo aqui).

Listagem 3: Preenchimento esquerdo e direito com lógica inline

 div { border- inline : 10px dashed seagreen; }

Esses são atalhos úteis para bordas, mas as palavras-chave lógicas embutidas e de bloco também podem ser encontradas em várias outras propriedades.

A maioria dos desenvolvedores usa esses atalhos para lidar com problemas de direção de texto e modo de escrita. Nesses casos, uma propriedade como padding-inline-end permite direcionar o preenchimento à direita, independentemente da direção do texto.

Essencialmente, a abstração para inline e block permite a criação de estilos generalizados que podem ser aplicados a uma variedade de situações. Mais informações podem ser encontradas em Propriedades e valores lógicos do CSS.

Pesquisas de contêiner

As consultas de contêiner ainda não são totalmente estáveis ​​em CSS, mas serão em breve. Eles terão um impacto significativo na maneira como pensamos sobre design responsivo. A ideia básica é que você poderá definir um ponto de interrupção com base no tamanho de um contêiner pai, em vez de apenas na janela de visualização e na mídia.

Não há uma definição clara da sintaxe, mas provavelmente será semelhante à Listagem 4.

@container Listagem 4.

 @container (max-width: 650px){ … }

Considere o quão poderoso será ajustar um layout com base no tamanho de vários contêineres que aparecem nas camadas aninhadas de uma interface do usuário. Esta é uma mudança bastante significativa que quase certamente desencadeará uma onda de inovações de interface.

Três novos esquemas de cores

Praticantes de CSS têm usado RGB, HEX e cores nomeadas para embelezar e animar telas de dispositivos desde tempos imemoriais. A declaração de cores no estilo HSL foi introduzida recentemente. A especificação CSS agora está introduzindo novos descritores de cores, como hwb, lab e lch.

HWB é uma abreviação de matiz, brancura e negritude. É um toque agradável que se destaca por sua legibilidade humana - você escolhe uma cor e depois adiciona branco e preto. É compatível com as versões mais recentes do Chrome, Firefox e Safari. (A referência de recurso do Microsoft Edge é estranhamente silenciosa sobre esse assunto.) Para saber mais sobre HWB, consulte hwb() – uma notação de cores para humanos? Ele, como RGB e HWL, possui um canal alfa para transparência.

LCH, que significa leveza, croma e matiz, é notável por expandir a paleta de cores disponível. O que, por que e como as cores LCH são usadas no CSS? Esta é uma boa visão geral que inclui uma discussão reveladora da teoria das cores em CSS. Atualmente, apenas o Safari suporta LCH.

O mais teórico dos novos espaços de cores é o LAB, que é derivado da teoria de cores CIE LAB. O descritor de cores de laboratório afirma cobrir todo o espectro de cores perceptíveis por humanos, o que é uma afirmação ousada. Ele, como o LCH, atualmente é suportado apenas pelo Safari. Mais informações sobre o LAB for CSS podem ser encontradas na documentação do Mozilla CSS.