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.
- Primeiro, vamos escolher os elementos que queremos que flutuem
- Em seguidas, aplicaremos a propriedade
float - 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:
Top comments (0)