CSS digno de ferramenta, poderoso e estável que você pode usar hoje.
Acredito que todo desenvolvedor front-end precisa saber que :has() é mais do que um "seletor pai",
o como e o porquê de um subgrid, como aninhar com sintaxe CSS integrada, como permitir que
o navegador equilibre o ajuste de texto do título e como usar unidades de consulta de contêiner.
Esta postagem é uma continuação dos seis snippets de CSS do ano passado que todo desenvolvedor de front-end precisa conhecer em 2023.
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
O :has() chegou a todos os principais navegadores no final de 2023. Esse novo seletor parece
pequeno e inocente, mas você vai se surpreender com todos os casos de uso que ele pode desbloquear:
jogos, reatividade, layout com reconhecimento de conteúdo, componentes inteligentes e
muito mais que é explorado neste artigo de Jhey.
Confira alguns exemplos de como usar :has() como seletor pai. Ela recebeu esse nome porque
geralmente o assunto de um seletor está no final, como ul li, em que li é o assunto
e mostra os estilos. Com :has(), o elemento no início do seletor pode se tornar
o assunto. No exemplo abaixo, o botão terá uma lacuna se houver um elemento dentro
com uma classe .icon. Quando há uma imagem dentro, o card muda de orientação.
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
Um seletor longo desejado altera um layout com base em quantos itens ele tem. Agora isso é possível
com :has() porque pode manter o contêiner como o assunto ao consultar o número de filhos
main:has(> :nth-child(5)) {…}
Outro exemplo de nível superior é a mudança de estilos definidos em todo o documento quando uma caixa de seleção específica na página está ativada:
html:has(#dark-mode:checked) {…}
Esses são casos de uso simples que não mudam o assunto do seletor. Se você analisar exemplos
como esse, poderá achar que :has() está limitado a um seletor pai. Mas considere os exemplos
abaixo. Eles verificam algo com base em um ancestral comum e, em seguida, alternam o seletor
de acordo com um filho em algum lugar mais para frente na página.
Este aqui mostra um elemento de erro de formulário se alguma das entradas for inválida:
form:has(:user-invalid) .error {
display: block;
}
Ela desliza a área de conteúdo principal quando uma navegação lateral tem a classe .--is-open:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
Confira uma demonstração divertida que usa :has() como seletor pai, :has() com consultas de quantidade
e consultas de contêiner para criar um layout de grade capaz de exibir elegantemente
de 1 a 12 elementos nas orientações de retrato ou paisagem:
Criar uma subgrade
subgrid
Por muitos anos, a comunidade da Web de front-end pediu que a subgrade ajudasse a completar e concluir o popular e poderoso mecanismo de layout de grade do CSS. Agora ele está disponível nos três principais mecanismos.
Saiba mais sobre a subgrade aqui se quiser uma visão geral.
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
Aninhar da maneira CSS
nesting
O aninhamento de CSS integrado foi disponibilizado em todos os principais navegadores em 2023. Até atualizei meu site para remover o processo de compilação que compilava o aninhamento e agora envio uma folha de estilo menor. Sim, as folhas de estilo com aninhamento são menores, e todo o DevTools do navegador está pronto para representá-la.
Você pode encontrar uma visão geral da sintaxe de aninhamento de CSS aqui para mais detalhes. O exemplo de código a seguir mostra um exemplo de sintaxe.
.you {
.can-totally-ship-this {
&.if-you-wanted {
/* it's VERY MUCH like SCSS */
&:is(:hover, :focus-visible) {
/* put a bird on it */
}
}
}
}
.for-theming {
@media (prefers-color-scheme: dark) {
/* you can nest media queries */
}
}
/* or for theming with [data-theme="dark"] */
.button {
background: black;
color: white;
/* nest and do more than just append, flip it and reverse it */
[data-theme="dark"] & {
background: white;
color: black;
}
}
Permitir que o navegador adapte os títulos
balance
pretty
Sem o text-wrap: balance, os desenvolvedores e os redatores de texto podem usar dicas de quebra de linha,
como elementos <wbr> ou ­. Na maioria das vezes, é uma batalha perdida porque, assim que o
conteúdo é traduzido, ampliado ou modificado de alguma forma, não há garantia de que essas
dicas estarão no lugar certo para a nova apresentação do conteúdo.
Com o ajuste de texto equilibrado, você pode deixar esse trabalho para o navegador. Confira uma comparação no Codepen a seguir.
Usar unidades de consulta do contêiner
cqw
A postagem do ano passado sugeriu que todos os desenvolvedores front-end deveriam saber como escrever uma consulta de contêiner. Se você ainda não aprendeu, faça de 2024 o ano para se arriscar e confira também as unidades de consulta de contêiner. Como visão geral, Ahmad Shadeed escreveu um ótimo artigo sobre unidades de consulta de contêiner em 2021.
Há seis novas unidades de conteor de contêineres:
- Uma variante in-line
cqi. - Uma variante de largura
cqw. - Uma variante de bloco
cqb. - Uma variante de altura
cqh. - Uma variante de comprimento menor:
cqmin. - Uma variante de tamanho maior:
cqmax.
Considere um cenário para animações relativas e intrínsecas em um contêiner. Um elemento filho que sai totalmente do contêiner usando 100cqi, ou seja, 100% do tamanho inline do contêiner.
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
Veja um card com tipografia responsiva de contêiner e uma imagem que se adapta à orientação do contêiner, tornando-se metade do tamanho se a orientação for de paisagem.
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
Se esses blocos são novos para você, é recomendável analisar todas as unidades disponíveis em 2024.