Caixa de seleção avançada com grade CSS
o Módulo de Layout de Grade CSS não só pode resolver um problema enorme de layout, mas também alguns bons e velhos problemas lidando com um longo tempo, tal como nomeando um rótulo de caixa de seleção.
Embora exista um método relativamente direto para estilizar o rótulo quando ele aparecer depois de a caixa de seleção, não é tão fácil quando o rótulo aparece antes isto.
Estilo de caixa de seleção sem CSS Grid
Estilizando uma etiqueta depois de uma caixa de seleção é algo que os desenvolvedores vêm fazendo desde que lemos sobre isso em algum lugar. Esta técnica é um dos principais e antigos exemplos da poderosa dinâmica que o CSS pode possuir.
Aqui está o código com o qual você já pode estar familiarizado estilos um rótulo depois de uma caixa de seleção marcada:
entrada: checked + label / * style me * /
UMA rótulo estilizado depois de uma caixa de seleção pode se parecer com isso (no entanto, você pode usar outras regras de estilo também):
O código CSS acima usa o combinador irmão adjacente marcado pelo + chave. Quando uma caixa de seleção está no :verificado Estado, um elemento depois de isto (geralmente um rótulo) pode ser estilizado usando este método.
Uma técnica tão simples e eficaz! O que poderia possivelmente errar com isso? Nada até que você queira exibir o rótulo antes a caixa de seleção.
O combinador irmão adjacente seleciona o próximo elemento; isso significa que o rótulo tem que vir depois de a caixa de seleção no código-fonte HTML.
Então, para fazer um rótulo aparecer antes a caixa de seleção pertencente na tela, não podemos simplesmente movê-lo antes da caixa de seleção no código-fonte, como um o seletor irmão anterior não existe em CSS.
Que deixa apenas uma opção: reposicionando a caixa de seleção e o rótulo usando transformar ou posição ou margem ou outra propriedade CSS com algum tipo de poder telecinético, de modo que o rótulo apareça à esquerda da caixa de seleção na tela.
Problemas com o método tradicional
Não há nada majorly errado com a técnica acima mencionada, mas pode ser ineficiente em certos casos. Quero dizer casos em que as posições rearranjadas da caixa de seleção e o rótulo não funcionam mais.
Pense responsivo, por exemplo. Pode ser necessário redimensionar ou reposicionar a caixa de seleção de acordo com o dispositivo em que ela é exibida. Quando isso acontece, você vai precisa reposicionar o rótulo bem, como não haverá realinhamento automático feito na etiqueta em resposta ao reposicionamento / redimensionamento da caixa de seleção.
Podemos eliminar essa desvantagem se pudéssemos apenas fornecer algum layout sólido para a caixa de seleção e o rótulo, em vez de posicioná-los grosseiramente na página.
Mas, quase todos os sistemas de layout, como tabelas ou colunas, exigem que você adicione o rótulo antes da caixa de seleção no código-fonte para fazê-lo aparecer da mesma maneira na tela. Isso é algo que não queremos fazer porque o próximo seletor de elemento no rótulo deixará de funcionar.
O CSS Grid, por outro lado, é um sistema de layout que é não dependente do posicionamento / ordem dos elementos no código-fonte.
As capacidades de reordenamento do layout da grade afetam intencionalmente apenas a renderização visual, deixando a ordem da fala e navegação com base na ordem de origem. Isso permite que os autores manipulem a apresentação visual enquanto deixam a ordem de origem intacta ... - Módulo de Layout de Grade CSS Nível 1, W3C
Assim, a grade CSS é uma solução ideal para estilo o rótulo que aparece antes a caixa de seleção.
Estilo de caixa de seleção com CSS Grid
Vamos começar com o código HTML. A ordem da caixa de seleção e da etiqueta permanecerá a mesma de antes. Nós apenas adicionamos os dois a uma grade.
O CSS acompanhante é o seguinte:
#cbgrid display: grid; grid-template-areas: "esquerda direita"; largura: 150px; input [type = checkbox] grid-area: right; label grid-area: esquerda;
Eu não vou aprofundar sobre como funciona a grade CSS, como eu já escrevi um artigo detalhado sobre o assunto, que você pode ler aqui. Algumas noções básicas, no entanto: display: grade propriedade transforma um elemento em um contêiner de grade, área de grade identifica a área da grade a que um elemento pertence e áreas de modelo de grade forma um layout de grade, composto por diferentes áreas de grade.
No código acima, existem duas áreas de grade: "esquerda" e "certo". Eles compõem duas colunas de uma linha de grade. A caixa de seleção pertence ao "certo" área e o rótulo para o "esquerda". Aqui como eles parecem na tela:
Como não alteramos o posicionamento relativo da caixa de seleção e o rótulo no código-fonte, podemos ainda usar o combinador irmão adjacente:
entrada: checked + label / * style me * /
Observe que um item de grade é sempre bloqueado; aparece com uma caixa circundante conhecida como caixa de nível de grade. Se você não quer isso, por exemplo, para um rótulo, coloque um wrapper nesse item (embrulhe em outro elemento) e transformar esse wrapper na área da grade.
É isso aí pessoal. A grade CSS ajuda você a encontrar os layouts dessas caixas de seleção insolentes.
