Oi! Essa é a primeira parte de um projeto pessoal para ajudar a desmistificar o CSS. Sempre vejo o CSS sendo motivos de memes para centralizar, mas muitas vezes vejo muita gente iniciando na programação já com uma ideia negativa quanto a estilização.

Eu não trabalho na área, estou em transição de carreira, e quero poder contribuir para que outros que também estão iniciando os estudos, uma nova maneira de poder visualizar e entender o CSS.

Uma referência do que eu já fiz utilizando apenas CSS puro, sem nenhum uso de framework, é este site: https://spacedevchallenge.netlify.app/ que faz parte de um desafio da plataforma Frontend Mentor.

Eu pretendo escrever isto em algumas partes, e não pular diretamente para Flexbox e CSS Grid. Assim podemos juntos aprender, e evitar os chutes.

Entendendo o navegador

Quando olhamos para o nosso navegador, pode-se reparar que dependendo do tamanho da tela, existem dois valores que são sempre constantes: a sua largura e a sua altura.

É dentro desse universo plano e bem estruturado, onde você vai trabalhar.

O mais legal desta ideia, é que dentro dessa rede bem estruturada e planar, pra que possamos organizar qualquer elemento que se coloque dentro do navegador, podemos pensar que estamos trabalhando com estruturas de caixas.

E aí entramos no nosso primeiro entendimento, o comportamento chamado display: block.

Display: Block

Essa propriedade display é o que determina o comportamento de um elemento. Isso nos pode remeter, não instintivamente, mas cada elemento HTML possui um display (comportamento) padrão.

Por exemplo, porque quando colocamos dois elementos <p> lado-a-lado no HTML, eles não ficam lado-a-lado?

• Será que é porque o HTML é inteligente e identifica o ponto final como a hora de pular linha?
• Mas se for isto, porque não faz o mesmo quando colocamos dois elementos <span> lado-a-lado?

Isso se dá pela natureza padrão (especificação) de como esses elementos forem criados dentro no HTML.

O elemento <p> por padrão é um elemento de display: block, onde ele ocupada toda a largura permitida do navegador, como elemento. Desta maneira, como ocupa toda a linha, quando qualquer outro elemento é criado posteriormente, o navegador pula para a próxima linha automaticamente, pois estará livre para ser ocupada.

Ao perceber isso, podemos visualizar que o <span> aparentemente não tem por padrão o display: block e assim, se comporta de outra maneira.

Mas afinal, porque estamos falando do elemento p e span ? No que isso vai te ajudar a parar de chutar como centralizar uma div?

Vamos falar sobre as caixas

Quando olhamos a última foto, vemos que as mensagens estão envoltas por caixas.

Essa é a representação abstrata de todos os elementos que teremos dentro do nosso HTML, todos os elementos então envoltas de caixas. Quando usamos HTML/CSS, estamos manipulando essas caixas.

Por isso é muito importante entender como funciona o navegador, conhecer algumas propriedades padrões que utilizamos frequentemente, desta maneira podemos brincar com os elementos e movimentá-los por todo o nosso navegador.

A partir deste momento, eu vou usar div para representar as caixas, apenas com fins educacionais. Na vida real, não utilizem. As divs são péssimas pra acessibilidade, e nós queremos produzir serviços para que todos possam utilizar, correto?

Agora, vamos ver sobre a ideia de um site padrão, vamos precisar de:

• Um cabeçalho;
• Uma parte para o conteúdo
• Um menu lateral
• Um rodapé

Mãos na massa

E ao olharmos o nosso navegador, será isto que veremos:

E, na prática, o comportamento está sendo como

Não é bem o que queremos certo? Quero observar o conteúdo e o menu lado-a-lado, se não, não faz sentido o meu site, meu site é padrão, não estou revolucionando o “design”. E agora?

Nós vimos lá em cima que por padrão a largura é 100%, e se nós diminuirmos a largura? Vai ter espaço, se vai ter espaço, os elementos poderão ficar lado-a-lado, da maneira que queremos.

Vou adicionar ao CSS, uma largura de 45% e colocar uma borda pra visualizarmos o que está acontecendo.

Vamos olhar o nosso navegador e…

Ué? Porque não está lado-a-lado? Tem espaço! Ah, CSS é impossível.

Calme-se! Se lembra do display: block? Então, nós só mudamos a largura dos elementos, de fato, tem espaço, mas continuam tendo o seu comportamento inicial, onde todo elemento posterior sempre começará numa próxima linha.

É por isto que os sites antigamente eram produzidos usando tables ou a grande mágica chamada float.

Porque essa dor de cabeça hoje em dia, é facilmente resolvida com flexbox 💓.

Float: o precursor da manipulação no navegador

O Float de certa maneira é problemático, porque essa propriedade quebra o comportamento padrão do navegador.

Se por um momento temos tudo bem rígido e estruturado, o float não liga para as regras. Como o seu nome diz, essa propriedade faz os elementos flutuarem pelo navegador, e isso, se não estiver bem amarrado, pode dar muitas dores de cabeça.

Então vamos usar essa propriedade no nosso exemplo.

1. Primeiro, vamos escolher os elementos que queremos que flutuem
2. Em seguidas, aplicaremos a propriedade float
3. Vamos diminuir a largura destes elementos, afinal, a soma dos seus lados tem que somar no máximo 100% (esse é o tamanho máximo do navegador, é toda a sua dimensão).

Ao olharmos o navegador,

Olha só já temos um esboço, mas isso aqui é um perigo.
No momento que declaramos para que a estrutura flutue, ela quebra toda a estrutura-padrão de como um navegador funciona.

Regras? Float não sabe o que é isso.

Se por alguma razão, eu decidir que as larguras sejam menor que 50%, vamos ver o que acontecerá.

Olhando o navegador…

🤬 mas que p# é essa?

Porque o rodapé tá flutuando também? Ele não é um display: block ? Este display não era pra sempre pular pra próxima linha e continuar a vida normal?

Bem-vindo, ao float!

Por isso, foi criado um clearfix para corrigir este problema.

Sempre na caixa seguinte aonde flutuamos os elementos, usamos o clear para que o HTML volte a ser o lugar rígido, estruturado e com regras como conhecemos.

E assim, conseguimos manipular caixas dentro do HTML

Desta maneira, mexendo um pouco ali e aqui, podemos criar um site simples e padrão, usando floats da maneira pretendida inicialmente.

Link: https://codepen.io/mpfdev/pen/XWZwMKg

Entendendo algumas diferenças

Eu adicionei uma nova div para concentrar e organizar melhor o que será o conteúdo do site.

Mas esse é o comportamento abstrato da div class="todo-menu" afinal, porque isso está acontecendo?

O certo não era essa caixa cobrir as duas caixas que fazem parte dela?

É por esse motivo que eu não vou falar de Flexbox agora, primeiro temos que entender o comportamento das caixas dentro do navegador, pra então entender o comportamento entre caixas-pais e caixas-filhas.

Mas o motivo disso estar acontecendo, se dá de novo pelo float.

Toda caixa div tem por padrão uma largura de 100% (display: block) do espaço disponível, mas a altura, a altura depende do seu conteúdo.

Mas essas duas estruturas estão flutuando, e nem fazem mais parte do comportamento padrão do navegador. Desta maneira, embora na estrutura o menu e o conteudo sejam filhos do todo-menu, quando é renderizado, a caixa-pai não reconhece o seu filho.

E assim, a caixa todo-menu não tem conteúdo, então, não tem altura.

Por hoje, é só.

Este é um primeiro contato bem resumido de como acontecem os comportamentos do HTML ao serem renderizados no navegador.

Num próximo post, pretendo falar sobre o modelo de caixas melhor, para criar uma base para entendermos Flexbox.

Se quiser ver meus posts antigos:

• CS50: S1 | E o problema do Mario (Link) 🇧🇷
• Lookbook with CSS Floats (Link) 🇺🇸