CSS é uma grande gambiarra, e isso faz parte do seu encanto. Particularmente, desde que me conheço como desenvolvedor, adoro “perder” horas buscando soluções em Pure CSS, quase sempre usando técnicas que inicialmente servem para resolver outros problemas.

white-space: nowrap?

E uma dessas técnicas é usando o white-space: nowrap, inicialmente pensado para simplesmente remover as quebras de linha no texto, pode se tornar um importante aliado, servindo principalmente de fallbacks ou diminuindo a quantidade de código que usaríamos normalmente.

Como assim?

O white-space impede que textos não quebrem, certo?! Sabendo disso, podemos usá-lo para tratar qualquer elemento que se comporte como texto.

Através de exemplos é mais legal. Vamos lá!

Carousel

Que atire a primeira pedra quem nunca desenvolveu um carousel. Esse componente é utilizado em muitas e muitas aplicações, e o white-space: nowrap pode facilitar bastante nossa vida e ainda fornecer um fallback da hora, caso o JavaScript, por algum motivo, não funcione.

Existes milhares de tipos de carousel, e várias técnicas para desenvolvê-los. Porém, uma das mais utilizadas consiste em criar uma listagem de elementos, contar o número de itens e o tamanho deles, depois adicionar um width no elemento pai. Tudo isso usando JavaScript, é claro.

Mas e se pudessemos facilitar esse processo?

A funcionalidade do botão não foi feita, mas… tente fazer um scroll no carousel 🙂

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”LxwoQd” default_tab=”css,result” user=”LFeh”]See the Pen Navigation – Example by Felipe Fialho (@LFeh) on CodePen.[/codepen_embed]

Esse exemplo é a base de um carousel simples, com o item ocupando 100% do espaço visível. Mas observem que o scroll termina no lugar correto, respeitando o número de elementos. Tudo isso sem usar uma linha de JavaScript.

Ou seja, a partir desse ponto, é necessário desenvolver apenas a funcionalidade dos botões, pulando o passo anterior.

Por que isso acontece?

Porque, como disse anteriormente, o white-space: nowrap impede que os textos quebrem, e quando adicionamos essa propriedade em um container, e utilizamos display: inline-block nos filhos, eles passam a se comportar como texto. Assim a mágica acontece, faltando apenas setar o overflow: auto para o scroll funcionar.

E o mais legal é que essa técnica fornece um ótimo fallback, caso o JavaScript não funcione.

Navegação

Outro uso legal dessa técnica consiste em deixar automaticamente responsiva qualquer tipo de navegação.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”LxwoQd” default_tab=”css,result” user=”LFeh”]See the Pen Navigation – Example by Felipe Fialho (@LFeh) on CodePen.[/codepen_embed]

Observem agora que a navegação adiciona um scroll caso os elementos ultrapassem o tamanho do pai. Para testar melhor, recomendo que editem esse pen, e removam alguns items, deixando apenas dois. O scroll simplesmente não vai estar disponível.

Esse exemplo funciona perfeitamente em dispositivos mobile. Evitando que a navegacão quebre ou você tenha que usar soluções mirabolantes em telas menores.

Os mais atentos vão perceber que adicionei ainda um gradiente no lado direito, para informar o usuário que ali tem mais conteúdo e ele pode fazer o scroll.

Qualquer dúvida ou sugestão deixe um comentário.