CSS

Vantagens e desvantagens de labels flutuantes em formulários

Olá, Web Developers!

Há um bom tempo que temos visto formulários com labels flutuantes em vários lugares. A ideia era de trazer algo diferente e melhorar a experiência do usuário. Será que melhorou mesmo?

UX/UI - Introdução
Curso de UX/UI - Introdução
CONHEÇA O CURSO

Nesse artigo eu vou listar as vantagens e as desvantagens que considero pertinentes.

Vantagens

Algumas das vantagens de utilizá-los:

Os formulários ficam menores:

Nós enxergamos os elementos no navegador por blocos.
Na imagem abaixo, enxergamos quatro blocos: dois labels e dois inputs.

Já na imagem abaixo, percebemos apenas dois blocos. Isso passa a impressão de um formulário menor.

Já foram realizados testes com esses estilos de formulários e, no segundo estilo, os usuários realmente pensaram estar preenchendo um formulário com metade do número de campos.

Sem problemas com alinhamento:

Essa não é uma vantagem tão grande. Qualquer CSS bem feito resolve.

Mas, realmente, não precisamos ficar nos preocupando com o alinhamento dos elementos e labels, o que já dá uma pequena facilitada.

Separação entre campos:

Quando temos campos como os da imagem abaixo, precisamos dar um espaço em branco ou separar com uma linha para que o usuário saiba qual campo determinado label pertence.

Nesta imagem sabemos que senha pertence ao campo de baixo porque temos apenas dois campos. Agora, já imaginou um formulário maior? É preciso deixar um espaço bom para podermos perceber melhor a separação e agrupamento de elementos.

Já na imagem abaixo, não precisamos nos preocupar com separação e agrupamento. Mesmo que a gente diminua os espaços entre os inputs, saberemos qual input cada label pertence.

Leitura mais rápida:

Como o label estará dentro dos inputs, e também poderemos diminuir os espaços em branco, como visto no item anterior, a leitura será mais rápida. Isso porque os olhos do usuário precisam passar pelas linhas em branco e pensar na ligação entre elementos quando eles estão separados.

Desvantagens

Agora eu listarei algumas desvantagens.

Nada de labels compridos!

Você tem que pensar bem no que escrever no label para que ele seja bem curto e direto. Do contrário, seu texto pode acabar sendo cortado em dispositivos com telas menores.

No exemplo acima, ao invés de Há quanto tempo trabalha com desenvolvimento?, poderíamos escrever algo como Tempo de experiência, mas nem sempre vamos conseguir deixar claro o que queremos.

Campos preenchidos podem dificultar a leitura:

Quando preenchemos um campo, o label diminui de tamanho, dando espaço ao valor preenchido.

Dependendo do novo tamanho da fonte do label, pode dificultar a leitura, caso o usuário queira revisar os campos do formulário. Lembre-se que podemos ter usuário com problemas de visão usando dispositivos com telas pequenas.

Desenvolvedor PHP Júnior
Formação: Desenvolvedor PHP Júnior
Nesta formação você aprenderá todos os fundamentos necessário para iniciar do modo correto com a linguagem PHP, uma das mais utilizadas no mercado. Além dos conceitos de base, você também conhecerá as características e a sintaxe da linguagem de forma prática.
CONHEÇA A FORMAÇÃO

Labels dentro do input podem ser confundidos com campos preenchidos:

Sim, isso é um problema que também pode acontecer com placeholders. O usuário pode simplesmente passar o olho e pensar que aquele campo já está preenchido.

Mesmo que a gente os deixe com uma cor diferente, é sempre bom considerar essa possibilidade, ademais, diferentes usuários, diferentes formas de visualizar e entender o contexto.

Sem consistência de localização:

Não temos uma consistência de localização dos labels quando precisamos de campos que não sejam de texto, como combo boxes, radio buttons e checkboxes.

Concluindo

E você? Usa em seus formulários? É a favor ou contra?
Compartilhe com a gente aí nos comentários! 🙂

Aprenda a formatar as mensagens do console do navegador

Olá, Web Developers!

Muitos aqui sabem que os navegadores possuem console e que podemos executar o comando console.log() para imprimir mensagens e objetos, o que nos ajuda muito na hora de fazer debug.

Porém, quando entramos em sites como, por exemplo, o Facebook e abrimos o console, podemos ver a seguinte mensagem:

Facebook Console

Muitas pessoas não sabem, mas as mensagens do console podem ser estilizadas em alguns navegadores. Para o exemplo a seguir, abra o console em seu computador e clique na aba Result:

Você terá o seguinte resultado:

Console

Para poder estilizar as mensagens do console, basta colocar %c junto ao texto que você está passando para o comando console.log() (ou qualquer outra função que imprima algo no console, como console.warn()). Em seguida, basta passar a estilização como um segundo parâmetro. Ela é feita via CSS mesmo:

console.log('%c Meu Texto','color: white; background-color: red;');

Mas, já que estamos falando de CSS, que tal também imprimir uma imagem?

No console, execute o seguinte comando:

console.log('%c', 'padding: 40px 45px;line-height:100px;background:url("http://i65.tinypic.com/dnixjm.png") no-repeat;background-size: cover;');

Você terá o seguinte resultado:
Console com Imagem

Ok, mas o console é mais para debug. Por que eu usaria isso?

Um cenário é quando a sua equipe usa muito o console para monitorar algo durante o desenvolvimento e deixa várias mensagens sendo impressas. Poder formatá-las, colocar imagens, etc, pode ajudar a deixá-lo mais organizado, facilitando a leitura dos conteúdos impressos. Mas há de se ter cautela, pois muitas mensagens sendo impressas com o console aberto podem afetar a performance da sua página e isso vai te atrapalhar no processo de desenvolvimento.

Um ótimo caso é fazer algo parecido com o Facebook. Se há possibilidade dos seus usuários abrirem o console para tentar algo, você pode chamar a atenção deles avisando que eles mesmos podem estar correndo algum tipo de risco.

O terceiro motivo é quando a intenção é exatamente fazer com que o usuário abra o console para usá-lo. Quando você entra no site da biblioteca RxJS e abre o console, você é recebido com uma simples mensagem dizendo que você pode experimentar os códigos da biblioteca diretamente por ele. Nesse caso, você poderia receber o usuário com o logo do seu projeto e uma mensagem com uma formatação simples (se o navegador dele suportar).

RxJS Console

E aí, o que achou? Já usou essa funcionalidade? Compartilhe com a gente aí nos comentários!

ITCSS – Organizando melhor o CSS

Olá, Web Developers!

Quem já não teve problemas com a organização do CSS?
Ou tentou estilizar um elemento e não funcionou porque já havia uma regra CSS com uma força maior e, no final, teve que criar um seletor mais específico para poder sobrescrever?

Tenho certeza que alguns aqui chegam ao momento em que não tem outra saída a não ser utilizar o !important.

Bom, o ITCSS foi pensado para essas coisas. Ele já existe há algum tempo, mas ainda é pouco conhecido. Eu o utilizo em meus projetos desde 2014 e sempre me ajudou muito com a organização do CSS.

Ele não é uma biblioteca, framework e nem metodologia como BEM, DRY, OOCSS, etc, que nos indica como montar nossas classes e como nomeá-las. Ele é apenas uma estrutura que, se seguirmos, teremos nossos códigos mais organizados. Podemos inclusive utilizar junto com BEM, DRY, SMACSS, OOCSS, etc.

Acessibilidade - Introdução
Curso de Acessibilidade - Introdução
CONHEÇA O CURSO

Como Funciona?

O ITCSS, na verdade, é proprietário em sua maioria. Então, apenas uma certa quantidade de regras foram reveladas pelo seu criador. Mas o que foi revelado já é muito útil para nossos projetos.

O CSS trabalha com a ideia de que, quanto mais específico for o seletor, maior a sua força. O seletor com mais força sobrescreve o seletor mais fraco.

O ITCSS segue isso baseado na ideia do Triângulo Invertido. Quanto mais acima do triângulo você estiver, mais fraco será o seletor. Os seletores presentes em uma camada sempre sobrescrevem os seletores da camada de cima.

Cada camada serve para colocarmos um tipo específico de código.

1). Settings

É onde declaramos as configurações do nosso projeto, como variáveis de medidas, cores, etc.

$my-color: #0057FB;
$footer-height: 120px;

2). Tools

Onde colocamos funções, mixins, placeholders, etc. Se não estiver utilizando pré-processadores como Sass ou Less, essa camada não precisa existir.

@mixin  my-box(){
   width: 200px;
   height: 100px;
}

3). Generic

Camada para colocarmos seletores com a menor especificidade. Por isso é normalmente usado para quando queremos usar o seletor *.

*{
   box-sizing: border-box;
}

4). Elements

Também chamada de base. Essa camada serve para estilizarmos a parte mais básica dos elementos. Nada de IDs nem classes aqui, apenas seletores de elementos.

Normalmente utilizada para se fazer o CSS Reset.

div{
   padding: 10px;
}

5). Objects

Usamos apenas classes aqui. É onde começamos a declarar a estrutura dos nossos elementos.

.my-button{
   width: 200px;
   padding: 10px;
}

6). Components

Aqui também só utilizamos classes. É onde começamos a estilizar os nossos elementos de forma mais específica.

.my-red-button{
   background-color: red;
   color: white;
   border: 2px solid black;
}

7). Trumps

É a camada com maior especificidade. Aqui criamos pequenas classes com !important para sobrescrever certas regras.

.hidden{
   display: none !important;
}

Organização dos arquivos

Eu costumo utilizar o Sass. Independentemente se você utiliza ou não um pré-processador, é bom que no final todos os arquivos sejam minificados e unidos num único arquivo.

Para garantir a organização e a ordem de carregamento, eu costumo utilizar a seguinte estrutura:

|__  1_settings
|   |__  _example_file.scss
|   |__  _1_settings.scss
|__  2_tools
|   |__  _example_file.scss
|   |__  _2_tools.scss
|__  3_generic
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _3_generic.scss
|__  4_base
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _4_base.scss
|__  5_objects
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _5_objects.scss
|__  6_components
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _6_components.scss
|__  7_trumps
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _7_trumps.scss
|__  styles.scss

As pastas ficam numeradas apenas para manter a ordem quando formos ver no nosso editor ou IDE.

Dentro de cada pasta contém um arquivo principal, com o mesmo nome da pasta. Ele serve para carregar os demais arquivos.

Na raiz há o arquivo styles.scss, que carrega cada um dos arquivos principais das pastas na ordem que as camadas devem seguir. Esse arquivo nunca será tocado.

@import "1_settings/1_settings";
@import "2_tools/2_tools";
@import "3_generic/3_generic";
@import "4_base/4_base";
@import "5_objects/5_objects";
@import "6_components/6_components";
@import "7_trumps/7_trumps";

Caso queira testar, aqui tem um projeto em branco com a estrutura do ITCSS já montada, com Gulp e WebPack configurados:

https://github.com/hanashiro/simple-project-seed

Ao escrever o CSS somos livres para seguir a metodologia que quisermos: OOCSS, SMACSS, BEM, ACSS, etc.

Para saber mais, temos o curso de HTML5 e CSS3 Avançado, onde falamos mais sobre cada uma das metodologias de organização de CSS.

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO
HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

E você, já conhecia o ITCSS? Utiliza alguma metodologia em seus projetos?

Compartilhe com a gente aí nos comentários!

Começando com o novo CSS Grid Layout

Olá, Web Developers!

Chrome e Firefox finalmente lançaram uma atualização onde há suporte total à especificação de CSS Grid Layout. Antes esse suporte era apenas parcial.

“Ué, mas já fazemos isso com ferramentas como 960gs, unsemantic e bootstrap há muito tempo.”

Sim, mas para isso é necessário colocar uma biblioteca inteira no nosso projeto apenas para utilizarmos uma meia dúzia de classes.

Essa especificação indica propriedades que nos ajudam a criar grids diretamente no nosso CSS, e mais algumas facilidades que às vezes é chatinho de se fazer.

“Mas não criaram o FlexBox para facilitar exatamente a criação de layouts?”

A ideia principal do FlexBox é ajudar a trabalhar com uma coluna. Então podemos utilizá-lo para organizar itens dentro de uma coluna mas, para trabalhar com várias colunas, as Grids podem ser mais úteis.

Isso porque com as Grids podemos indicar quantas colunas ficarão disponíveis para cada tamanho de tela, fazendo com que fique mais fácil indicarmos quando um elemento deve ir para baixo ou para outro lugar se estivermos em uma tela menor. Também podemos indicar o número de linhas.

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

Começando com Grids

Primeiro vamos começar com um HTML bem simples, que utilizaremos para todos os nossos exemplos.

Temos basicamente dois tipos de elementos: o container e os itens.

<div class="container">
  <div class="item item-1">a</div>
  <div class="item item-2">b</div>
  <div class="item item-3">c</div>
  <div class="item item-4">e</div>
  <div class="item item-5">f</div>
  <div class="item item-6">g</div>
  <div class="item item-7">h</div>
</div>

E agora um CSS bem simples:

.container{
  display: grid;
  background-color: rgba(0,0,0,0.5);
  height: 300px;
  grid-template-columns: 40px 80% auto;
  grid-template-rows: 30px 20% auto;
}

.item{
  border: 1px solid black;
  background-color: white;
}

O que fizemos aqui? Na classe .item eu apenas coloquei uma borda e uma cor de fundo para podermos enxergar melhor cada item.

Na classe .container é que fizemos a brincadeira. Coloquei uma cor apenas para podermos ver onde está os limites do container.

Para começar a utilizar o Grid Layout, o nosso container têm que ter o display com o valor grid. Isso irá criar grids do tipo block.

Também há o inline-grid para criar grids do tipo inline e o subgrid, que serve para quando o container de uma grid também é um item de outro container de grid.

Em seguida conhecemos dois novos amigos: grid-template-columns e grid-template-rows.

Em grid-template-columns nós passamos as medidas que queremos para cada coluna. Se quiser acrescentar uma coluna nova é só adicionar um novo valor ali. No exemplo passamos uma coluna com uma medida em px e outra em %. A última colocamos auto. Este valor faz com que o elemento preencha todo o espaço restante.

Em grid-template-rows temos exatamente a mesma coisa, mas para linhas. Como no CSS precisamos que o container possua uma altura definida para que alturas dinâmicas funcionem, passei um valor fixo de 300px. Assim os valores em % e auto irão funcionar.

(Para o exemplo abaixo funcionar, certifique-se de estar utilizando a última versão do Chrome ou Firefox.)

Só com isso já poderíamos parar por aqui. Já tá bonito!
Mas vamos ver um pouco mais.

Podemos também nomear cada coluna ou linha:

.container{
  /***********/
  grid-template-columns: [primeira] 40px [col_2] 80%  [ultima] auto;
  /***********/
}

Para isso, basta colocar o nome desejado entre [] antes da medida da coluna/linha.

Caso queira repetir um valor um determinado número de vezes, podemos utilizar a função repeat():

.container{
  /***********/
  grid-template-columns: repeat(3, 20px) auto;
  /***** equivalente a ******/
  grid-template-columns: 20px 20px 20px auto;
}

“Mas e esse ‘auto’ aí? Tem como ter mais controle sobre o espaço disponível?”

Tem sim.

Temos uma unidade de medida chamada fr. Ela indica uma fração do espaço disponível em uma grid.

.container{
  /***********/
  grid-template-columns: 1fr 50px 2fr;
  /***********/
}

Os valores que não são dinâmicos são calculados primeiro. Então no exemplo acima, primeiro é calculado o “50px”. Depois é calculado o espaço disponível e então ele é distribuído para as frações que indicamos.

No nosso caso, colocamos 1fr e depois 2fr, o que totaliza 3fr. A primeira coluna ficará com 1/3 e a última ficará com 2/3 do espaço disponível.

E não precisamos indicar uma medida fixa para o fr funcionar.

.container{
  /***********/
  grid-template-columns: 1fr 1fr 1fr;
  /***********/
}

No código acima, cada uma das colunas ficará com 1/3 do espaço disponível.

Bom, essa foi apenas um introdução ao Grid Layout. Ainda há muito mais o que se aprender.

E você? Já utilizava o Grid Layout antes de ser lançado? Se não conhecia, gostou ou achou mais difícil?

Compartilhe com a gente aí nos comentários!

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

CSS Filters – Tratamento de imagens em sua página

Quem desenvolve páginas para a Web há um bom tempo deve se lembrar da época em que o CSS era bem limitado. O que os designers criavam, normalmente no PhotoShop, tinha de ser recortado e cuidadosamente organizado em tabelas para que fosse possível ter os efeitos de imagem e layout nas páginas.

Com a evolução do CSS3 passou a ser possível criar muitos dos efeitos dos softwares de edição de imagem diretamente pelo CSS.

Uma propriedade ainda pouco utilizada, mas já bem suportada pelos browsers modernos, é a filter. Com ela podemos aplicar filtros em nossos elementos ou imagens como se estivéssemos fazendo tratamentos por um software de edição de imagens.

Podemos fazer os seguintes tratamentos em nossos elementos:

  • blur(px) – nível de ofuscamento
  • brightness(%) – ajusta o brilho
  • contrast(%) – ajusta o contraste
  • drop-shadow(h, v, blur, color) – aplica sombras
  • grayscale(%) – transforma as cores do elemento para uma escala cinza
  • hue-rotate(deg) – altera as cores do elemento
  • invert(%) – inverte as cores do elemento
  • opacity(%) – controla a opacidade do elemento
  • saturate(%) – altera a saturação do elemento
  • sepia(%) – transforma as cores do elemento para um tom sépia

Aqui temos um exemplo prático sobre o uso de cada uma dessas funções da propriedade filter.

Caso você tenha que dar suporte a navegadores mais antigos, será obrigado a utilizar imagens já tratadas. Do contrário, poderá aproveitar essas funcionalidades.

Bootstrap 4 - Fundamentos
Curso de Bootstrap 4 - Fundamentos
CONHEÇA O CURSO

Vantagens

Mas, quais as vantagens de termos isso no CSS se o designer pode nos enviar tudo pronto?

Algumas pessoas dizem que uma das vantagens é continuar com a imagem original intacta, permitindo editá-la novamente caso sejam necessários ajustes. No entanto, muitos designers trabalham com os filtros separadamente da imagem, exatamente para não perder a original, então isso não é um grande motivo.

Como pudemos ver no exemplo acima, é possível aplicar os filtros em qualquer elemento, não apenas em imagens. Caso você precise aplicar em um elemento dinâmico, um texto, uma animação, vídeo, etc, é bem mais prático fazer estes tratamentos pelo CSS.

Em alguns designs que querem mostrar algo mais vivo, com ideia de movimento, etc, é comum o uso de transições. A propriedade filter também nos permite criar transições e animações, o que não daria com o uso de material já pronto vindo de um software de edição de imagem ou vídeo.

Outra possibilidade é a integração com o JavaScript. Conforme você vai interagindo com a página, algum elemento pode mudar de cor, ou se você quiser deixar algum trecho menos destacado para dar atenção a outro elemento, que tal deixá-lo em uma escala cinza? Ou criar um efeito de vidro fosco?

Voltando para o tratamento de imagens: imagine um site que tenha uma imagem padrão, seja de banner ou de fundo, e cada categoria do site tem uma cor, e a imagem deve seguir essa cor. Com os filtros do CSS, ao invés de ter uma imagem para cada cor, podemos carregar apenas uma imagem e mudar sua cor pela função hue-rotate.

Quem utiliza sprites ao invés de FontIcons muitas vezes acaba tendo que repetir alguns ícones apenas para ter sua cor diferente. Com os filtros do CSS podemos mudar a cor desses sprites.

Também há uma biblioteca baseada nos filtros do CSS, CSSGram, que recria os filtros do Instagram apenas com CSS.

Essas foram algumas ideias simples do que os filtros do CSS podem nos oferecer e que seriam difíceis ou impossíveis apenas com um material pronto vindo de softwares de edição de imagens.

E você, tem alguma ideia em que os filtros seriam úteis? Já precisou deles em um projeto? Compartilhe com a gente aí nos comentários!

MEAN 2 - JavaScript Full Stack
Curso de MEAN 2 - JavaScript Full Stack
CONHEÇA O CURSO

CSS: Float vs Inline Block – Qual usar em meus layouts?

Olá, Web Developers!

Você sabe quando utilizar float e display: inline-block? Aqui a gente vai ver as características de cada um para te ajudar a escolher qual o melhor a ser usado em determinada ocasião no seu projeto.

Ambos têm uma base parecida: permitir que elementos fiquem na mesma linha. Os seus demais comportamentos são totalmente diferentes e muitos desenvolvedores acabam não sabendo quando devem usar um ou outro.

Float

As pessoas normalmente utilizam o float para desenvolver colunas em seus layouts ou permitir que elementos de bloco ocupem a mesma linha, mas esta propriedade foi criada originalmente para permitir que um texto envolva um elemento.

No exemplo acima, nosso texto está envolvendo a nossa div. Normalmente os elementos ocupam uma linha, e aqui temos três linhas ao lado dele.

Um dos problemas do float é que o elemento pai não vai saber a sua altura, já que o elemento está flutuando.

  • No Exemplo 1 podemos ver que a div container, com borda verde, apenas interpreta a altura do nosso texto. A altura do nosso elemento flutuante, a div azul, é ignorada.

  • No Exemplo 2 nós utilizamos outra div com a propriedade clear para poder limpar os efeitos do float, fazendo com que o fluxo dos elementos volte ao normal e o container possa interpretar a altura normalmente.

<div class="container">
  <div class="floating" ></div>
  Exemplo 2
  <p class="clear" ></p>
</div>

Muitas pessoas acham isso feio: ter que colocar um elemento vazio apenas para fazer a altura de um elemento ser interpretada. Isso também tira o sentido da semântica do código.

Muitos frameworks, como o bootstrap, e bibliotecas de grid, como o unsemantic, funcionam assim para poder dar suporte a navegadores mais antigos.

  • No Exemplo 3 nós utilizamos outro hack: a propriedade overflow: auto no container. Isso faz com qua a gente não precise mais de um elemento apenas para encerrar o comportamento do float, mas só funciona bem se tivermos total controle das margens do container. Do contrário, você verá barras de rolagem.
.container-overflow{
  overflow: auto;
}
  • No Exemplo 4 temos algo mais complexo, porém mais confiável, muito utilizado em lugares como o HTML5 Boilerplate. Então, problemas com barra de rolagem resolvidos!
.clearfix:before, .clearfix:after { content: "020"; display: block; height: 0; overflow: hidden; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

Criamos uma classe .clearfix que cria um pseudo-elemento com o :before e :after. Ele utiliza a ideia do overflow e clear:both, e não veremos nada estranho porque também escondemos os pseudo-elementos com height: 0.

Mas se a ideia das tecnologias é sempre melhorar, por que continuar com essa complexidade toda?

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

Inline Block

Quando utilizamos display: inline-block, também estamos fazendo com que um elemento permaneça na mesma linha.

Note a diferença com o primeiro exemplo do float: nossa div está na mesma linha do texto, mas não são criadas novas linhas em volta dela. Tudo bem, o objetivo aqui é manter elementos na mesma linha. Aqui não teremos problemas com a altura do cointainer ou barra de rolagem. (◠◡◠)

Outra vantagem é que como agora ele é um elemento com comportamento de linha, poderemos utilizar as propriedades text-align e vertical-align para modificar sua posição. Masss … Teremos um probleminha quando precisarmos que os elementos estejam encostados (⌣_⌣”)

No exemplo acima criamos um layout que tem três colunas de larguras iguais que precisam preencher uma linha inteira. Note que entre a Div 1 e a Div 2 há um espaço. Se inspecionarmos os elementos veremos que não há margens separando as divs. Por quê esse espaço existe? Por causa dele, a nossa Div 3 foi jogada para a linha de baixo!

Acontece que o inline-block faz o elemento ter comportamentos de um elemento de linha. Os elementos de linha são basicamente textos!

<div class="container" >
  <div class="column">Div 1</div>
  <div class="column">Div 2</div>
  <div class="column">Div 3</div>
</div>

Quando escrevemos um texto, queremos que haja espaços entre as palavras, certo? Então o navegador interpreta os espaços que damos entre as palavras. Para organizar melhor o nosso HTML, nós colocamos uma div em cada linha. Essa quebra de linha no código é interpretado como espaço e acaba interferindo na renderização de elementos inline ou inline-block.

Caso você tenha o costume de minificar o seu código, os espaços serão removidos e você não terá esse problema.

Exemplo do resultado que queremos:

Aqui algumas maneiras de resolver isso com HTML:

<!-- Deixar tudo na mesma linha -->
<!-- Péssimo, pois deixa o código muito bagunçado -->
<div class="container" >
  <div class="column">Div 1</div><div class="column">Div 2</div><div class="column">Div 3</div>
</div>

<!-- Deixar a tag de fechamento junto à tag de abertura do elemento seguinte -->
<!-- Melhora um pouquinho, mas continua estranho -->
<div class="container" >
  <div class="column">Div 1
  </div><div class="column">Div 2
  </div><div class="column">Div 3</div>
</div>

<!-- Criar um comentário entre a quebra de linha -->
<!-- Muita gente prefere esse -->
<div class="container" >
  <div class="column">Div 1</div><!--
  --><div class="column">Div 2</div><!--
  --><div class="column">Div 3</div>
</div>

Aqui algumas maneiras de resolver isso com CSS:

/* Declarar uma margem negativa */
.column{
   margin-right: -4px;
}

/* Declarar font-size do container como 0 fará
*  o espaço ser 0 também, mas teremos que declarar
*  novamente o tamanho da fonte da nossa coluna.
*  Esse hack pode ter problemas em algumas versões
*  do Android e pode nos atrapalhar se nossos elementos
*  estiverem usando unidades como "em"
*/
.container{
   font-size: 0;
}
.column{
   font-size: 16px;
}

Concluindo

Float: Prefira usar quando quiser que um texto ou outros elementos contornem um determinado elemento. Essa é a real função dele.

Inline Block: Vimos aqui que o único problema do inline-block ocorre quando precisamos que os elementos fiquem encostados. Caso esse não seja o seu caso, o inline-block resolverá seus problemas sem a necessidade de algum hack.

Caso você não precise dar suporte total a navegadores mais antigos, então é mais recomendado que você monte seus layouts com as propriedades do flex-box.

Alguma ideia, dúvida ou sugestão? Compartilhe com a gente aí nos comentários!

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

Criando contadores apenas com CSS

Olá Web Developers!

Vocês sabiam que é possível criar contadores apenas com CSS? Com isso alguns desenvolvedores conseguem até criar jogos sem nenhuma linha de JavaScript!

Os contadores fazem parte do CSS 2, então já possuem suporte por boa parte dos navegadores. Mesmo assim, são poucas as pessoas que conhecem ou fazem uso deles.

Para quem nunca viu pode parecer meio estranho, mas vamos ver de modo simples como usá-los!

Joomla - Criação de Temas
Curso de Joomla - Criação de Temas
CONHEÇA O CURSO

Inicializando o contador

Primeiro vamos imaginar que os contadores são simplesmente variáveis, exatamente como as das linguagens de programação. Então, vamos começar com a declaração:

.minha-classe{
   counter-reset: meucontador;
}
  • meucontador é o nome do nosso contador, nossa “variável”.
  • counter-reset reinicia o nosso contador.

É como se estivéssemos escrevendo:

var meucontador = 0;

Imprimindo o contador

Agora vamos apresentar o nosso contador em algum lugar. Para isso, nós usamos a propriedade content, que deve ser usada junto a um pseudo-elemento, ::before ou ::after.

<div class="imprime-contador">Minha Div</div>
.imprime-contador::after{
   content: counter(meucontador);
}

O resultado será:

Veja que colocamos a classe imprime-contador em uma div. Foi exibido o conteúdo da div, e o ::after acrescentou depois dela o que passamos em content, o valor do nosso contador.

incrementando o contador

Agora temos que incrementar o nosso contador.

.imprime-contador{
   counter-increment: meucontador
}

Diferente do counter-reset, que reinicia o nosso contador, o counter-increment incrementa o valor.

Sempre que houver uma classe onde haja o incremento do nosso contador, ele será incrementado. Seria como se executássemos o seguinte código:

// imagine "elementsList" como sendo uma lista com todos
// os elementos HTML do nosso código
elementsList.forEach((element)=>{
   if( element.classList.contains("imprime-contador") ){
      meucontador++;
   }
})

Então se colocarmos três divs:

<div class="imprime-contador">Minha Div</div>
<div class="imprime-contador">Minha Div</div>
<div class="imprime-contador">Minha Div</div>

O Resultado será:

Incrementando de acordo com a seleção do usuário

Podemos também aproveitar o seletor :checked, que indica checkboxes marcados, para utilizar como condição para o incremento dos contadores. Por exemplo:

<style>
body {
  padding: 2em;  
}

.counter-reset{
   counter-reset: checkboxcounter;
}

.meucheckbox{
   width: 20px;
   height: 20px;
   margin-right: 10px;
   appearance: checkbox;
   -moz-appearance: checkbox;
   -webkit-appearance: checkbox;
}

.counter-print::after{
   content: "Total: " counter(checkboxcounter);
}

.meucheckbox:checked{
   counter-increment: checkboxcounter;
}
</style>

Clique nos Checkboxes para ver o contador incrementar:

<div style="margin-top: 30px;">  
  <span class="counter-reset"></span>  
  <input type="checkbox" class="meucheckbox" id="checkbox1" /><label for="checkbox1" >CheckBox 1</label>  
  <input type="checkbox" class="meucheckbox" id="checkbox2" /><label for="checkbox2" >CheckBox 2</label>  
  <input type="checkbox" class="meucheckbox" id="checkbox3" /><label for="checkbox3" >CheckBox 3</label>  
  <span class="counter-print"></span>  
<div>  

Se você quiser testar:

Aqui fizemos o seguinte:

  • Criamos uma classe no CSS apenas para reiniciar nosso contador, o .counter-reset;
  • Criamos uma classe no CSS apenas para imprimir o total do nosso contador, o .counter-print;
  • Fizemos um tipo de “condição” para o incremento, que são os checkboxes da classe .meucheckbox que estiverem marcados;

Vejam então que conseguimos fazer um contador que tem seu valor atualizado na página sem o uso de onclicks que chamam funções que calculam valores e atualizam o HTML, ou o uso de binds como os do Angular ou React. Apenas algumas linhas de CSS foram necessárias para criar este comportamento.

Alguma ideia, dúvida ou sugestão sobre como usar o CSS Counter? Compartilhe com a gente aí nos comentários!

Por hoje é só. Até o próxima o/

SEO - Search Engine Optimization
Curso de SEO - Search Engine Optimization
CONHEÇA O CURSO