nth-child() e calc() – Uma proposta para o abandono de frameworks de grids responsivos
Apesar da adoção do Tableless para construção de layouts o conceito de tabela ainda persiste através de inúmeros frameworks de grids responsivos. Além da semântica, o conceito Tableless prega, sempre que possível, levar a responsabilidade do layout para o CSS. O problema dos frameworks CSS focados em grids é que a especificação do layout continua dentro do HTML, descrita através de classes CSS, ancoradas
Apesar da adoção do Tableless para construção de layouts o conceito de tabela ainda persiste através de inúmeros frameworks de grids responsivos.
Além da semântica, o conceito Tableless prega, sempre que possível, levar a responsabilidade do layout para o CSS. O problema dos frameworks CSS focados em grids é que a especificação do layout continua dentro do HTML, descrita através de classes CSS, ancoradas diretamente aos elementos HTML, e de forma intrusiva, ou seja, os elementos
antigamente utilizados foram substituídos por elementos
para a criação do layout.
Enquanto a especificação “CSS Grid Layout Module” ainda está no forno, proponho uma alternativa simples aos frameworks de grids responsivos, através da dupla dinâmica nth-child() e calc() presentes no CSS3, e que são suportadas pelos navegadores modernos, inclusive o IE9 (veja mais opções de compatibilidade aqui e aqui). Para um rápido entendimento destes recursos também confira estes artigos: https://tableless.com.br/nth-child/ e https://www.maujor.com/tutorial/css3-funcao-css-calc.php
Exemplo de formulário
Antes de partimos para o CSS, sempre que possível, precisamos usar elementos HTML5 semânticos, atributos WAI-ARIA, entre outros padrões de acessibilidade. Para este exemplo, o uso dos elementos de entradas de dados seguirão as técnicas preconizadas pelo eMAG 3.1 (ver https://emag.governoeletronico.gov.br/).
Para cada elemento de entrada de dados presente na estrutura form -> fieldset o seguinte padrão será seguido:
Agora podemos aplicar o seguinte CSS para todos os elementos presentes neste padrão.
Por termos utilizado o margin-right com 10px, este valor foi contabilizado na largura do label (uso da função calc) com a finalidade de que sua margem não ultrapasse os limites do contêiner. Isto foi feito para que possamos alterar o layout de uma coluna para múltiplas colunas diretamente pelo CSS. Com este estilo, cada campo de entrada de dados aparecerá disposto como uma lista, e se adaptará a largura do contêiner.
O próximo passo é poder criar mais de uma “coluna”, para que o campo Código e Nome fiquem na mesma “linha” quando o tamanho da tela for grande. O campo Código terá uma largura fixa de 80px e o campo Nome preencherá o restante do espaço do contêiner descontando a largura do campo Código juntamente com a margem de 10px dos dois labels.
Com estes recursos podemos alterar o layout da página HTML diretamente pelo CSS sem que a estrutura do layout fique no próprio HTML. Além de criar colunas que se adaptam a largura do contêiner, é possível criar colunas com tamanhos fixos, evitando também o uso de classes CSS, que só é encorajado quando for realmente necessário.
