CSS estável, poderoso e que pode ser usado hoje mesmo.
Acredito que todo desenvolvedor de front-end precisa saber que :has()
é mais do que um "seletor pai",
o como e por que de um subgrid
, como aninhar com a sintaxe CSS integrada, como deixar o
navegador equilibrar o recuo do texto do título e como usar unidades de consulta de contêiner.
Esta postagem é uma continuação de os 6 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()
foi lançado em 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 compatível com conteúdo, componentes inteligentes e
muito mais, como explicamos neste artigo de Jhey.
Confira alguns exemplos de como usar :has()
como um seletor pai. Ele recebeu esse nome porque
geralmente o assunto de um seletor fica no final, como ul li
, em que li
é o assunto
e recebe os estilos. Com :has()
, o elemento no início do seletor pode se tornar
o assunto. No exemplo abaixo, o botão tem uma lacuna se houver um elemento dentro
com uma classe de .icon
. O cartão muda de orientação se houver uma imagem dentro dele.
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
Um seletor muito desejado é mudar um layout com base no número de itens que ele tem. Isso agora é possível
com :has()
porque ele 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 mais alto, mude os estilos definidos em todo o documento quando uma caixa de seleção específica na página estiver ativada:
html:has(#dark-mode:checked) {…}
Esses são casos de uso simples que não mudam o assunto do seletor. Se você analisar apenas exemplos
como esse, pode pensar que :has()
é limitado a ser um seletor pai. Confira os exemplos
a seguir. Eles verificam algo com base em um ancestral comum e, em seguida, mudam o assunto
do seletor para um filho em algum lugar mais profundo na página.
Este mostra um elemento de erro de formulário se alguma das entradas for inválida:
form:has(:user-invalid) .error {
display: block;
}
Ele desliza para fora da área de conteúdo principal quando um sidenav tem uma classe de .--is-open
:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
Confira uma demonstração divertida que usa :has()
como um seletor pai, :has()
com consultas de quantidade
e consultas de contêiner para criar um layout de grade que pode exibir elegantemente
de 1 a 12 elementos nas orientações de retrato ou paisagem:
Criar uma subgrade
subgrid
Por muitos anos, a comunidade de front-end da Web pediu uma subgrade para ajudar a completar e finalizar o mecanismo de layout de grade CSS, que é muito conhecido e poderoso. Agora, ele está disponível nas três principais plataformas.
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
Aninhar o caminho do CSS
nesting
O aninhamento integrado do CSS ficou disponível em todos os principais navegadores em 2023. Até atualizei meu site para remover o processo de build que compilou o aninhamento e agora envio uma folha de estilos menor. Sim, as folhas de estilo com aninhamento são menores, e todas as ferramentas de desenvolvimento do navegador estão prontas para representá-las.
Confira uma visão geral da sintaxe de aninhamento do CSS para saber todos os 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 equilibre os títulos
balance
pretty
Sem text-wrap: balance
, os desenvolvedores e redatores de texto precisam usar dicas de quebra de linha,
como elementos <wbr>
ou ­
. É uma batalha perdida, porque assim que o
conteúdo é traduzido, ampliado ou modificado de qualquer forma, não há garantia de que essas
dicas de formatação estarão no lugar certo para a nova apresentação do conteúdo.
Com o balanceamento de texto, você pode deixar esse trabalho para o navegador. Confira uma comparação no Codepen a seguir.
Usar unidades de consulta de contêineres
cqw
A postagem do ano passado sugeriu que todo desenvolvedor de front-end precisa saber como escrever uma consulta de contêiner. Se você ainda não aprendeu, faça de 2024 o ano para se arriscar e conferir as unidades de consulta de contêiner. Como visão geral, Ahmad Shaded escreveu um ótimo artigo sobre unidades de consulta de contêineres em 2021.
Há seis novas unidades de consulta de container:
- Uma variante inline
cqi
. - Uma variante de largura
cqw
. - Uma variante de bloco
cqb
. - Uma variante de altura
cqh
. - Uma variante para qualquer comprimento é menor
cqmin
. - Uma variante para qualquer comprimento é maior
cqmax
.
Considere um cenário para animações relativas e intrínsecas a um contêiner. Um elemento filho que desliza para fora do contêiner usando 100cqi, ou seja, 100% do tamanho inline do contêiner.
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
Este é um card com tipografia responsiva de contêiner e uma imagem que se adapta à orientação do contêiner, ficando com metade do tamanho se a orientação for paisagem.
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
Se essas unidades forem novas para você, é recomendável analisar todas as unidades disponíveis em 2024.