2022 está se preparando para ser um ótimo ano para CSS, com uma infinidade de novos recursos no horizonte. Alguns já estão começando a chegar aos navegadores, outros provavelmente ganharão amplo suporte ao navegador em 2022, enquanto para um ou dois o processo pode ser um pouco mais longo. Neste artigo vamos dar uma olhada em alguns deles.
As consultas de contêiner nos permitem estilizar um elemento dependendo do tamanho de seu pai — uma diferença crucial das consultas de mídia, que consultam apenas a janela de visualização. Isso tem sido um problema para o design responsivo, pois muitas vezes queremos que um componente se adapte ao seu contexto.
Pense em um cartão que pode ser exibido em uma ampla área de conteúdo ou em uma barra lateral estreita. Provavelmente gostaríamos de mostrar algo mais parecido com o layout móvel do cartão na barra lateral, talvez mostrando estilo quando houver espaço horizontal suficiente. Mas as consultas de mídia não estão cientes do contexto do componente. Por esse motivo, as consultas de contêiner estão na lista de desejos de muitos desenvolvedores há algum tempo.
Consultas De Contêiner
COMO OS USAMOS?
Para uma consulta de contêiner, precisamos especificar um elemento como nosso contêiner, usando a containerpropriedade (abreviação de container-typee container-name). O container-typepode ser width, height, inline-sizeou block-size. inline-sizee block-sizesão propriedades lógicas , que podem produzir resultados diferentes de acordo com o modo de escrita do documento .
main, aside {
container: inline-size;
}cópia de
Em seguida, podemos usar a @containerregra de uma maneira semelhante a uma consulta de mídia. Observe a maneira diferente como a regra pode ser expressa entre colchetes ( inline-size > 30emem vez de min-width: 30em). Isso faz parte da especificação de Media Queries Nível 4 . Para o exemplo de layout de cartão acima, quando o contêiner é maior que 30rem, mudamos para um layout horizontal usando flexbox:
@container (inline-size > 30em) {
.card {
display: flex;
}
}cópia de
A especificação CSS Containment Level 3 está atualmente em rascunho de trabalho, o que significa que a sintaxe pode mudar a qualquer momento – na verdade, mudou desde que alguns artigos sobre consultas de contêiner foram publicados no ano passado. Os exemplos aqui estão de acordo com a sintaxe proposta no momento da escrita.
POSSO USÁ-LOS?
O Chrome afirma oferecer suporte a consultas de contêiner por trás de um sinalizador, mas a implementação de trabalho não parece ser consistente com a especificação atual. Há um polyfill , mas não funciona com a sintaxe mais recente. Portanto, a resposta curta é “não”, eu definitivamente recomendo que você espere um pouco antes de usá-los na produção. Mas há muito impulso por trás das consultas de contêiner, então espero um suporte mais geral em breve.
:has()
O QUE É ISSO?
Frequentemente conhecido como “seletor pai”, essa pseudoclasse nos permite selecionar um elemento dependendo de seus descendentes. Como Bramus Van Damme escreveu no ano passado , tem alguns casos de uso bem interessantes além disso. Por exemplo, podemos estilizar uma imagem de maneira diferente <figure>dependendo de estar ou não acompanhada por um <figcaption>. Ou podemos segmentar rótulos em um formulário seguido por entradas inválidas. As possibilidades são infinitas.
COMO O USAMOS?
Para estilizar <section>elementos que contêm um <h2>:
section:has(h2) {
background: lightgray;
}cópia de
Para estilizar um <img>, somente se seu pai <section>também contiver um <h2>:
section:has(h2) img {
border: 5px solid lime;
}cópia de
POSSO USÁ-LO? #
Ainda não há suporte para navegadores convencionais, mas você pode jogar com o conteúdo do seu coração no Safari Technology Preview . Confira esta demonstração em navegadores de suporte.
Mais depois do salto! Continue lendo abaixo ↓
Conheça os Smashing Online Workshops sobre front-end e UX , com dicas práticas, sessões ao vivo, gravações de vídeo e perguntas e respostas amigáveis. Em sistemas de design, CSS/JS e UX. Com Carie Fisher, Stefan Baumgartner e tantos outros .Ir para workshops online ↬
@when/@else
O QUE É ISSO?
Uma regra para condicionais em CSS, semelhante à lógica if/else em outras linguagens de programação. Isso poderia tornar a escrita de consultas de mídia complexas muito mais lógica, por exemplo. @whenfoi escolhido em vez de @ifevitar conflito com Sass.
COMO O USAMOS?
Podemos consultar várias condições de mídia ou recursos suportados, como se a janela de visualização de um usuário está acima de uma determinada largura e seu navegador suporta subgrade. Ao usar @when/@else, removemos o @da regra de consulta:
@when media(min-width: 30em) and supports(display: subgrid) {
/* Styles for viewports over 30em, where the browser also supports subgrid */
} @else {
/* Styles for browsers that do not meet the condition */
}cópia de
POSSO USÁ-LO?
Ainda não. É muito cedo, e ainda em discussão. Eu não esperaria que o suporte a navegadores fosse amplamente lançado este ano, mas definitivamente é algo a ser observado.
accent-color
O QUE É ISSO?
A accent-colorpropriedade facilita e agiliza a distribuição das cores da nossa marca para determinadas entradas de formulário, aproveitando os estilos de agente do usuário. Pense em caixas de seleção, botões de opção, entradas de alcance e barras de progresso. Historicamente, estes são meio difíceis de estilizar, e todos os navegadores os processam de forma ligeiramente diferente. Como os desenvolvedores, a opção principal, na maioria das vezes, é ocultar a entrada padrão e rolar a nossa própria usando pseudo-elementos . accent-colornos permite manter a entrada padrão do navegador, mas aplicar uma cor para se adequar à nossa marca.
COMO O USAMOS?
O uso é simples e a propriedade é herdada, portanto, você pode configurá-la no nível raiz para aplicá-la em todos os lugares:
:root {
accent-color: lime;
}cópia de
Ou em elementos individuais:
form {
accent-color: lime;
}
input[type="checkbox"] {
accent-color: hotpink;
}cópia de
POSSO USÁ-LO?
Sim! accent-coloré compatível com Chrome, Edge, Firefox e Safari Technology Preview. Os navegadores que não o suportam simplesmente obterão as cores padrão e as entradas permanecerão perfeitamente utilizáveis - ótimo para aprimoramento progressivo.
RECURSOS
Novas Funções De Cores CSS
O QUE ELES SÃO?
Você já deve estar familiarizado com os formatos de cores Hex, RGB e HSL. Os níveis 4 e 5 do módulo de cores CSS incluem uma série de novas funções de cores que nos permitem especificar e manipular cores em CSS como nunca antes. Eles incluem:
hwb(): Matiz, Brancura, Escuridão.lab(): Luminosidade, juntamente com os valores aeb , que determinam a tonalidade.lch(): Leveza, Croma, Matiz.color-mix(): Misture duas cores.color-contrast(): de uma lista de cores, produza aquela com o maior contraste em comparação com o primeiro argumento.color(): Especifique uma cor em um espaço de cores diferente (por exemplo,display-p3).
Há muito o que se aprofundar nesse assunto esclarecedor – escrevi um artigo sobre isso no ano passado. Além disso, há também a sintaxe de cores relativas , que nos permite pegar uma cor e ajustá-la para criar outra.
COMO O USAMOS?
hwb(), lab()e lch()pode ser usado da mesma forma que as funções rgb()e com hsl()as quais estamos acostumados, com um parâmetro alfa opcional:
.my-element {
background-color: lch(80% 100 50); // opaque color
}
.my-element {
background-color: lch(80% 100 50 / 0.5); // color with 50% transparency
}cópia de
color-mix()produz uma cor como resultado da mistura de duas outras. Precisamos especificar um método de interpolação de cores como o primeiro argumento:
.my-element {
background-color: color-mix(in lch, blue, lime);
}cópia de
color-contrast()requer uma cor base com a qual comparar as outras. Ele produzirá a cor com o contraste mais alto ou, no caso em que uma palavra-chave adicional for fornecida, a primeira cor na lista que atende à taxa de contraste correspondente:
/* Output the color with the highest contrast */
.my-element {
color: white;
background-color: color-contrast(white vs, lightblue, lime, blue);
}
/* Output the first color that meets AA contrast ratio */
.my-element {
color: white;
background-color: color-contrast(white vs, lightblue, lime, blue to AA);
}cópia de
Isso é ótimo para esquemas de cores acessíveis. Por exemplo, podemos deixar nosso CSS selecionar se o texto preto ou branco é mais adequado (ou seja, fornece o maior contraste) para um botão com uma determinada cor de fundo.
POSSO USÁ-LOS? #
O Safari está liderando o suporte a navegadores agora, com hwb(), lch(), lab()e color()todos suportados desde a versão 15. color-mix()e color-contrast()pode ser ativado com um sinalizador. O Firefox suporta hwb(), e também tem suporte sinalizado para color-mix()e color-contrast(). O outlier surpreendente é o Chrome, que não suporta nenhum deles no momento. No entanto, não é muito difícil fornecer fallbacks em seu código: Dadas duas regras de cores, o navegador ignorará a segunda se não for compatível.
.my-element {
background-color: rgb(84.08% 0% 77.36%);
background-color: lch(50% 100 331);
}cópia de
Isso significa que quando o suporte chegar, seu código estará pronto.
RECURSOS
Camadas Em Cascata
O QUE ELES SÃO?
Camadas em cascata nos dão mais poder para gerenciar a parte “em cascata” do CSS. Atualmente, existem vários fatores que determinam quais estilos serão aplicados em seu código CSS, incluindo a especificidade do seletor e a ordem de aparência. Camadas em cascata nos permitem agrupar efetivamente nosso CSS em pedaços (ou “camadas”, se você preferir). O código dentro de uma camada inferior na ordem terá precedência sobre o código em uma camada superior, mesmo que um seletor na camada superior tenha maior especificidade. Se tudo isso é um pouco difícil de entender, Miriam Suzanne escreveu um guia completo para CSS-Tricks .
Eu gosto de pensar nisso como uma espécie de z-indexcascata. Se você entender como z-indexfunciona, provavelmente entenderá as camadas em cascata rapidamente.
COMO FAÇO PARA USÁ-LOS?
Como Bramus explica em seu tutorial, você pode criar camadas discretas consistentes com a metodologia ITCSS.
/* Create the layers, in the desired order */
@layer reset, base, theme;
/* Append the CSS to each of the layers */
@layer reset {
/* Append to 'reset' layer */
}
@layer base {
/* Append to 'base' layer */
h1.title {
font-size: 5rem;
}
}
@layer theme {
/* Append to 'theme' layer */
h1 {
font-size: 3rem;
}
}cópia de
font-sizeA declaração de CSS para h1na themecamada venceria a de base, apesar de esta última ter uma especificidade maior.
POSSO USÁ-LOS?
Camadas em cascata são suportadas na versão mais recente do Firefox e podem ser ativadas com um sinalizador no Chrome e no Edge (com suporte total chegando ao Chrome na versão 99). Parece que todos os principais navegadores estão adotando essa especificação, então espere um suporte mais amplo em breve. Portanto, você pode começar a jogar com Cascade Layers imediatamente, mas pode levar algum tempo até que possamos usá-los com confiança na produção. É difícil ver como fornecer facilmente fallbacks para navegadores mais antigos sem incluir uma folha de estilo separada, ou talvez os polyfills surjam com o tempo. Miriam Suzanne tem alguns pensamentos neste explicador .
Subgrade
O QUE É ISSO?
Quando o CSS Grid começou a ser falado anos atrás, muitos desenvolvedores pensaram que isso nos permitiria dispor cada parte da nossa interface do usuário em uma única grade, assim como os layouts típicos de 12 colunas que recebemos dos designers. Na prática, isso envolveria achatar completamente sua marcação, quebrando a semântica – não recomendado! Parte da especificação CSS Grid Layout Module 2, a subgrade permite que um elemento herde a grade de seu pai, seja no eixo da linha ou da coluna. Em teoria, você poderia aninhar grades até o fim, alinhando todos os componentes na mesma grade. Na realidade, provavelmente não precisamos fazer isso com a frequência que pensávamos, pois (espero) adotamos um web design mais flexível e intrínseco que prioriza conteúdo, UX e acessibilidade em vez de aderência rígida a uma grade. Mas a subgrade ainda é incrivelmente útil para resolver todos os tipos de desafios de interface do usuário.
Por exemplo, pegue esta linha de imagens com legendas. As legendas têm comprimentos variados, mas usando a subgrade podemos fazer com que todas se alinhem umas com as outras, sem codificar uma altura fixa.
COMO O USAMOS?
Especifique a grade do elemento pai usando as propriedades regulares de Grid. Use a palavra-chave subgridpara a propriedade grid-template-columnsou grid-template-rowsno item aninhado que você deseja herdar a grade pai:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
}
.grid > figure {
display: grid;
grid-template-rows: subgrid;
}
.grid figcaption {
grid-row: 2;
}POSSO USÁ-LO?
Notavelmente, a subgrade é suportada no Firefox desde 2019, mas nenhum outro navegador seguiu o exemplo quase três anos depois. Há indicações de que a equipe do Chromium está finalmente começando a implementá-lo, então podemos ter a sorte de vê-lo no Chrome e no Edge este ano. Estou menos esperançoso com o suporte do Safari, mas com Jen Simmons liderando o esforço de CSS na Apple, tudo é possível. Não há nada que impeça você de usar subgrade na produção, mas é melhor tratá-lo como aprimoramento progressivo por enquanto.
Rolar Linha Do Tempo
O QUE É ISSO?
Você provavelmente já viu muitos sites legais que implementam animações sofisticadas com links de rolagem. Existem muitas bibliotecas JS para nos ajudar a implementar esse tipo de coisa – sou um grande fã do plugin ScrollTrigger do [Greensock]. Imagine se pudéssemos fazer tudo isso dentro do CSS? Com @scroll-timelinenós podemos!
COMO O USAMOS?
Precisamos de algumas coisas:
- uma animação de quadro-chave,
- a
@scroll-timelineregra, - a
animation-timelinepropriedade no elemento que estamos animando (ou especifique a linha do tempo naanimationpropriedade abreviada).
Aqui está um exemplo:
/* Set up keyframe animation */
@keyframes slide {
to { transform: translateX(calc(100vw - 2rem)); }
}
/* Configure our scroll timeline. Here we're giving it the name `slide-timeline` */
@scroll-timeline slide-timeline {
source: auto; /* the scrollable element that triggers the scroll-linked animation (the document by default) */
orientation: vertical; /* the scroll orientation (vertical by default) */
scroll-offsets: 0%, 100%; /* an array of progress intervals in which the timeline is active */
}
/* Specify the keyframe animation and the scroll timeline */
.animated-element {
animation: 1s linear forwards slide slide-timeline;
}cópia de
Alternativamente, podemos usar deslocamentos baseados em elementos para a scroll-offsetspropriedade, para acionar a linha do tempo quando um determinado elemento rola para a visualização:
@scroll-timeline slide-timeline {
scroll-offsets: selector(#element) end 0, selector(#element) start 1;
}cópia de
Mais uma vez, Bramus nos cobre com uma introdução abrangente e alguns ótimos casos de uso.
POSSO USÁ-LO?
Se você estiver interessado em brincar com @scroll-timelineele, pode ser ativado com um sinalizador no Chrome. A especificação está no rascunho do editor, portanto, há uma boa chance de mudar antes de obter o status recomendado.
É provável que haja casos que exijam uma biblioteca JS para animação baseada em rolagem (pense no gerenciamento de cronogramas de animação complexos). Mas para casos relativamente simples, isso pode economizar em muitas importações desnecessárias.
Aninhamento
O QUE É ISSO?
Se você estiver familiarizado com o Sass, conhecerá a conveniência de poder aninhar seletores — essencialmente, escrever uma regra filho dentro de um pai. O aninhamento nos ajuda a manter nosso código organizado – embora, se usado demais, às vezes possa ser um obstáculo! Agora parece que o aninhamento está finalmente chegando ao CSS nativo.
COMO O USAMOS?
Sintaticamente, é semelhante ao Sass, então não deve parecer um salto muito grande. A regra aninhada aqui visa um h2 dentro de um elemento com uma classe de card:
.card {
color: red;
& h2 {
color: blue;
}
}cópia de
Ou podemos usá-lo para pseudo-classes e pseudo-elementos:
.link {
color: red;
&:hover,
&:focus {
color: blue;
}
}cópia de
O equivalente no CSS de hoje seria:
.link {
color: red;
}
.link:hover,
.link:focus {
color: blue;
}cópia de
POSSO USÁ-LO?
Não nativamente. Nenhum navegador ainda o suporta, mesmo atrás de uma bandeira. Mas se você usa PostCSS, pode testá-lo com o postcss-preset-envplugin.
O Futuro Do CSS
É justo dizer que estamos em uma era de expansão para CSS agora. Enquanto escrevo isso, percebo que muitos desses novos recursos têm algumas coisas em comum. Sim, eles geralmente nos ajudam a escrever um código melhor, mais limpo e mais eficiente. Alguns se baseiam nos recursos de ferramentas de pré-processamento (como Sass), tornando essas ferramentas menos necessárias com o passar do tempo. Mas eles também nos permitem – até nos encorajam – a abraçar a flexibilidade inerente da web e considerar as muitas maneiras diferentes pelas quais nossos usuários podem navegar. Os usuários de hoje podem estar usando qualquer um dos milhões de dispositivos diferentes disponíveis. Eles podem preferir um contraste mais alto, um esquema de cores escuras ou movimento reduzido. Eles podem usar um leitor de tela, um dispositivo mais antigo ou uma mistura de todos os itens acima.
Em vez de ser prescritivo com nossos designs e lamentar uma “perfeição de pixel” inatingível, podemos usar CSS para dar dicas e sugestões e deixar o navegador decidir a melhor forma de exibir nossa página da web. Essas ideias foram resumidas por Jen Simmons e Una Kravets (entre outros), que cunharam os termos web design “ Intrínseco ” e “ Novo design responsivo ”, respectivamente.
CSS parece estar atingindo um nível de maturidade onde o desafio não é mais se algo pode ser feito em CSS, mas sim treinar e armar uma nova geração de desenvolvedores para entender as ferramentas que temos à nossa disposição, saber quando alcançá-las, e como tomar decisões de desenvolvimento centradas no usuário.