Ancoragem CSS: Um Novo Paradigma em Layouts Web
A ancoragem CSS fornece uma nova abordagem para posicionamento e layout, introduzindo um conjunto de propriedades e valores que permitem que os elementos sejam vinculados uns aos outros. Oferece mais flexibilidade, controle e simplicidade do que o posicionamento CSS tradicional.
Um dos principais recursos da ancoragem CSS é a capacidade de fixar um elemento em uma posição específica dentro do elemento que o contém. Isso permite layouts dinâmicos e responsivos sem a necessidade de cálculos complexos. Vejamos um exemplo:
1 |
.parent { |
2 |
position: relative; |
3 |
}
|
4 |
|
5 |
.child { |
6 |
position: absolute; |
7 |
top: 50%; |
8 |
left: 50%; |
9 |
transform: translate(-50%, -50%); |
10 |
anchor-position: center; |
11 |
}
|
No trecho de código acima, o .child O elemento é posicionado no centro de seu elemento pai, independentemente das dimensões do pai. O anchor-position propriedade fornece uma maneira mais intuitiva e declarativa de obter tais layouts.
Definindo uma âncora
Para utilizar a ancoragem CSS, você precisa definir uma âncora que possa ser usada para posicionar outros elementos. Duas maneiras de definir uma âncora estão em seu CSS ou HTML.
Definindo uma âncora com CSS
Primeiro, você pode definir uma âncora em seu CSS definindo o anchor-name propriedade no elemento âncora. Ele aceita um valor de identificação tracejado.
1 |
.anchor { |
2 |
anchor-name: --my-anchor; |
3 |
}
|
No código acima, o .anchor classe define uma âncora chamada --my-anchor.
Definindo uma âncora com HTML
Alternativamente, você pode definir uma âncora em seu HTML usando o anchor atributo. O valor do atributo é o ID do elemento âncora, criando uma âncora implícita.
1 |
|
2 |
|
3 |
|
O código acima define uma âncora usando um espaço vazio elemento com o ID my-anchor e a anchor aula. O div elemento com a classe boat usa o anchor atributo para especificar que ele deve ser vinculado ao my-anchor âncora.
Usando a função âncora
Depois de definir uma âncora, você pode usar a função âncora para posicionar elementos em relação a ela. A função âncora leva três argumentos:
-
Elemento âncora: O nome da âncora a ser usada. Se você omitir o valor, uma âncora implícita será usada. Uma âncora implícita pode ser definida através do relacionamento HTML ou com o
anchor-defaultpropriedade usando um valor de nome de âncora. -
Lado da âncora: uma palavra-chave ou valor percentual que representa a posição que você deseja usar. Isto pode ser
top,right,bottom,left,centerou uma porcentagem. Por exemplo,50%representaria a posição central. - Cair pra trás: um valor substituto opcional que aceita um comprimento ou porcentagem. O valor de fallback será usado se a posição da âncora não for suportada ou não puder ser determinada.
Aqui está um exemplo de uso da função âncora:
1 |
.child { |
2 |
position: absolute; |
3 |
anchor: --my-anchor center; |
4 |
}
|
No código acima, o .child elemento é posicionado absolutamente usando o anchor função, que especifica que ele deve ser conectado ao --my-anchor âncora na posição central.
Recursos adicionais de ancoragem CSS
Além dos exemplos acima, o rascunho da especificação para ancoragem CSS introduz vários outros recursos que expandem as possibilidades de layouts web.
Bordas de âncora
A especificação de ancoragem CSS introduz o conceito de arestas de ancoragem, que permite aos desenvolvedores definir as arestas exatas às quais um elemento deve ser ancorado. Isso fornece controle preciso sobre o posicionamento. Por exemplo:
1 |
.element { |
2 |
anchor-edge: left top; |
3 |
}
|
O .element está ancorado no canto superior esquerdo do elemento que o contém.
Margens de âncora
A ancoragem CSS também introduz o anchor-margin propriedade, que permite aos desenvolvedores especificar margem adicional em torno do elemento ancorado. Isto é particularmente útil ao lidar com elementos sobrepostos. Por exemplo:
1 |
.element { |
2 |
anchor-position: center; |
3 |
anchor-margin: 20px; |
4 |
}
|
Aqui o .element está ancorado no centro do elemento que o contém, com uma margem adicional de 20 pixels.
Ancoragem de rolagem
A ancoragem de rolagem é um recurso que ajuda a manter a posição de rolagem quando elementos são adicionados ou removidos dinamicamente do documento. Ele evita que a página salte e fornece uma experiência de rolagem mais suave para os usuários. O comportamento de ancoragem de rolagem está habilitado por padrão, mas pode ser desabilitado se necessário:
1 |
html { |
2 |
overflow-anchor: none; |
3 |
}
|
O código acima desativa o comportamento de ancoragem de rolagem para todo o documento HTML.
Exemplo
Neste exemplo, recriaremos uma dica de ferramenta usando âncoras CSS em vez do método de posicionamento antigo.
1 |
|
2 |
|
3 |
|
4 |
|
5 |
This is some important notice in your application.
|
6 |
|
7 |
|
8 |
|
9 |
Tooltip
|
10 |
Tooltip content |
11 |
|
12 |
|
A principal mudança é a forma como abordamos o CSS. O .anchor turma recebe um novo anchor-name chamado tooltip, que nos permite definir seu vizinho de ancoragem com .tooltip
1 |
/* As of June 2023 this requires Chrome Canary with Experimental features enabled */
|
2 |
|
3 |
body { |
4 |
font-family: sans-serif; |
5 |
padding: 1rem; |
6 |
}
|
7 |
|
8 |
.container { |
9 |
margin: 4rem auto; |
10 |
max-width: 600px; |
11 |
}
|
12 |
|
13 |
.anchor { |
14 |
anchor-name: --tooltip; |
15 |
color: #444; |
16 |
font-weight: 500; |
17 |
padding: .5rem 1rem; |
18 |
border-top-left-radius: 6px; |
19 |
border-top-right-radius: 6px; |
20 |
}
|
21 |
|
22 |
.anchor svg { |
23 |
stroke: currentcolor; |
24 |
color: #444; |
25 |
width: 24px; |
26 |
height: 24px; |
27 |
position: relative; |
28 |
top: 6px; |
29 |
}
|
30 |
|
31 |
.anchor:hover ~ .tooltip { |
32 |
opacity: 1; |
33 |
visibility: visible; |
34 |
transition: ease-in .2s all; |
35 |
}
|
36 |
|
37 |
.tooltip { |
38 |
opacity: 0; |
39 |
visibility: hidden; |
40 |
position: fixed; |
41 |
|
42 |
anchor-default: --tooltip; |
43 |
bottom: anchor(auto); |
44 |
|
45 |
width: 400px; |
46 |
background: rgba(0, 0, 0, .01); |
47 |
padding: 1rem; |
48 |
border: 1px solid #ddd; |
49 |
border-radius: 6px; |
50 |
color: #333; |
51 |
transition: ease-in .2s all; |
52 |
}
|
53 |
|
54 |
.tooltip h3 { |
55 |
margin: 0; |
56 |
}
|
Você pode estabelecer esse relacionamento e, em seguida, adicionar estilos e configurações adicionais para construir o posicionamento ideal preferido. Aqui o estilo inferior fica anchor(auto), que desloca a dica de ferramenta para a parte inferior do elemento ancorado. Ajuste isso com mais propriedades como top,right ,bottom, left , auto-same.
auto-same é equivalente a:
1 |
.cover { |
2 |
top: anchor(top); |
3 |
right: anchor(right); |
4 |
bottom: anchor(bottom); |
5 |
left: anchor(left); |
6 |
}
|
Limitações: o que manter em mente
Embora a ancoragem CSS abra possibilidades interessantes para layouts da web, é essencial estar ciente de suas limitações. No momento em que este artigo foi escrito, o recurso ainda era um rascunho e o suporte do navegador pode variar. É crucial testar minuciosamente e considerar opções alternativas para navegadores não suportados.
A ancoragem CSS pode introduzir complexidades ao trabalhar com layouts complexos ou aninhados. Elementos com vários relacionamentos de ancoragem podem criar comportamentos inesperados, e âncoras sobrepostas ou que se cruzam exigem consideração adicional para alcançar os resultados desejados.
Conclusão
A ancoragem CSS apresenta um novo paradigma interessante no design de layout web, capacitando os desenvolvedores a criar layouts complexos de forma mais rápida e eficiente. Ao vincular os elementos entre si, a ancoragem do CSS elimina a necessidade de soluções alternativas e cálculos complicados, simplificando designs web responsivos e dinâmicos.
À medida que o recurso de ancoragem CSS evolui, é importante manter-se atualizado com as especificações mais recentes e o suporte do navegador. Embora ofereça um excelente potencial, também é crucial considerar as suas limitações atuais e planear adequadamente. A ancoragem CSS foi definida para redefinir a forma como abordamos os layouts da web, fornecendo uma ferramenta mais intuitiva e poderosa para os desenvolvedores criarem experiências de usuário excepcionais.
Saiba mais sobre propriedades CSS
