Usando variáveis no CSS

INTRODUÇÃO

Pensando nos sites que estamos acostumados a usar, eles são bem coloridos, não é? Normalmente as cores fazem referência a itens específicos, é muito mais legal ver sites coloridos e já até nos acostumamos com certos itens que nem precisamos mais ler o que está escrito e somos guiados pelas cores.

Lembram do post que fiz sobre Como estilizar Checkbox com CSS? Para quem não viu, vale muito entrar no link e dar uma olhadinha… Gostei tanto daquele exemplo que vou usá-lo novamente para a gente aprender mais uma coisa legal de usar no CSS.

Figura 01 – Layout monocromático

O layout está legal com o checkbox estilizado, do jeitinho que queríamos. Porém está tudo da mesma cor, não fica legal assim. Seria bem melhor se cada item tivesse a sua cor, sua identidade, não acham? Assim quando fossemos fazer referência às informações de Frontend, por exemplo, a cor seria sempre a mesma, muito mais fácil para identificar pelas cores. Mas como podemos fazer isso no CSS não somente usando a propriedade color ou outra qualquer que coloque cor nos elementos?

Essa é a ideia deste post, dar cor para esses itens aprendendo coisas novas para implementar no CSS que podem nos ajudar muito na manutenção futura do código.

ADICIONANDO COR AOS ITENS

Já vimos como está o layout final do nosso projeto anterior, então, vamos recordar rapidamente como está o código do HTML, para assim, ficar mais fácil na hora de fazer referência no CSS.

Figura 02 – HTML do projeto anterior

Vamos estipular uma cor para cada item, assim em todos os lugares do site que o mesmo item aparecer, terá que aparecer com a cor que escolhemos para ele. Assim estamos dando identidade para cada item.

Figura 03 – Cores dos itens

Agora que as cores foram escolhidas, podemos adicioná-las no CSS que já fizemos no projeto anterior. Vamos colocar as cores escolhidas na descrição (label), no quadrado menor (label::after), no quadrado maior (label::before) e no fundo do quadrado menor quando o item é selecionado (input:checked). Para relembrar os detalhes do código onde criamos esses itens, deem uma olhada no código completo no post Como estilizar Checkbox com CSS.

Figura 04 – Implementando cores

Com o CSS de cores implementado, vamos olhar como ficou o resultado no navegador.

Figura 05 – Layout colorido

Pronto! Colocamos cor nos nossos elementos. Mas peraí… Essas propriedades de cores a gente já estava usando no código anterior, mas com a cor cinza, não fizemos nada de novo. O que era para a gente aprender mesmo?

Imagina manter esse esquema de cores em um código de grande porte com várias páginas, vários arquivos CSS e muito mais itens do que só 4, onde teríamos a necessidade de reutilizar essas cores em inúmeras posições nos vários arquivos. Seria chato ficar reescrevendo os códigos de cores em todos os momentos que eles fossem necessários, tirando a possibilidade de erro nesses “Ctrl+C” e “Ctrl+V” de cores para lá e para cá.

Outra coisa, imaginem se fosse necessário alterar o esquema de cores. Seria uma tarefa complexa, pois nem sempre um simples “Buscar e Substituir” seria o suficiente, e também poderia causar vários erros.

Como poderíamos fazer para que esse esquema de cores se tornasse um padrão para seguir em todas as outras páginas?

Hummm!!! Em outras linguagens podemos criar variáveis com um valor fixo e depois chamá-la sempre que ela for necessária. Será que é possível seguir o mesmo conceito no CSS?

VARIÁVEIS NO CSS

Atualmente, já conseguimos criar variáveis no CSS, pode parecer estranho, mas é possível e muito útil. Podemos criar variáveis com cores, números, medidas específicas e sempre que precisarmos, podemos usá-las como valor em qualquer propriedade do CSS.

Para declarar uma variável utilizamos as chamadas Custom Properties, que por definição é qualquer propriedade que inicie com dois hifens. A sintaxe para se criar uma variável CSS tem o formato –*, onde o sinal asterisco (*) é o nome da variável, e no qual alguns caracteres não são permitidos, como por exemplo: ; # } ] ) entre outros.

Figura 06 – Sintaxe para criar variáveis

Parece confuso, não é?

Mas calma, vamos fazer com o nosso exemplo para que fique mais claro como declarar as variáveis com as cores já escolhidas anteriormente.

Figura 07 – Criando as variáveis

Criamos nossas variáveis, mas elas estão soltas no CSS, sem seletor nenhum, não podemos deixar assim, então em qual seletor podemos colocar essas variáveis para que possamos utilizá-las em todos os arquivos necessários?

Para que uma variável funcione e seja acessível em todos os níveis do CSS, utilizamos o seletor :root. Trata-se de uma pseudo-classe que representa o “escopo global” do projeto, que nada mais é do que a raiz do documento.

Figura 08 – Variáveis no seletor :root

Pronto! Conseguimos criar as variáveis e já estão disponíveis para usarmos em todas as páginas que quisermos. Então, como fazemos para chamar a variável nas propriedades?

Podemos chamar uma variável como valor de qualquer propriedade CSS utilizando a notação var(), passando a variável já declarada como parâmetro, assim ela irá retornar o valor da variável.

Figura 09 – Sintaxe para chamar variáveis

Agora que sabemos como utilizar as variáveis declaradas nas propriedades, podemos colocá-las no nosso código de CSS.

Figura 10 – Variáveis sendo utilizadas

Ae! Conseguimos criar as variáveis e estamos usando nas mesmas propriedades de cores que utilizamos antes para colocar cores diretamente. Com isso, vamos olhar como ficou o layout no navegador.

Figura 11 – Layout final colorido

Com a criação de variáveis, se for necessário trocar a cor de qualquer um dos itens, é só alterar em um único lugar e todos os arquivos CSS que estiverem utilizando essa variável, já vão entender que a cor mudou e o site vai ficar lindão com a cor nova, somente com uma alteração rápida.

OUTRAS UTILIDADES DAS VARIÁVEIS

Usar variáveis não é somente para cores, podemos usar com números ou medidas específicas, e assim podemos até usar com o método calc(), ou em funções no JavaScript.

Podemos também associar variáveis ao content do pseudo-elemento, mas aqui vale ressaltar que para funcionar, a variável tem que ser declarada como uma string.

Vale observar que para alguns navegadores, como o Internet Explorer, esse método ainda não funciona, melhor verificar a disponibilidade do método no CANIUSE quando forem utilizá-la, dependendo do navegador onde querem que funcione.

Para quem quiser ver o código completo com a criação do checkbox estilizado e já colorido, podem acessar esse link no CodePen.

CONCLUSÃO

Nem preciso dizer que a grande vantagem de se criar variáveis no CSS é não ter mais que declarar diversos valores repetidos no meio do código, e assim facilitar o desafio da manutenção do código.

Vale lembrar que a criação de variáveis nos pré-processadores de CSS já era possível, e muitos utilizam esses pré-processadores para facilitar na montagem do CSS. E isso continua válido, mas a ideia aqui é se aventurar no CSS puro, sem frameworks ou pré-processadores que facilitem a utilização.

Espero que tenham gostado e que comecem a utilizar mais a criação de variáveis em seus arquivos, e prometo que no próximo post, vou tentar usar outro exemplo para aprender coisas novas e não mais os quadradinhos bonitinhos! rs…

Link para os posts anteriores, dos quadradinhos bonitinhos…
Como estilizar Checkbox com CSS
Aprenda a deixar o Checkbox estilizado acessível a pessoas com deficiência visual

Aprenda a deixar o Checkbox estilizado acessível a pessoas com deficiência visual

INTRODUÇÃO

Quando entramos num site, o que observamos primeiro? Se é legal, bonitinho e estilizado, se dá gosto de ver e ler? Eu, particularmente, adoro um site todo estilizado e diferente dos tradicionais, adoro estilizar os elementos e deixar do meu jeito, assim como mostrei no post Como estilizar Checkbox com CSS.

Legal ver o checkbox bonitinho do jeito que queríamos, não é? Mas vocês conseguem ver algum tipo de problema nessa estilização?

Figura 01 – Checkbox estilizado com CSS

É, pessoal, temos um problema muito sério na maneira como codificamos o CSS. Como será que as pessoas com algum tipo de deficiência visual conseguem entender esses quadradinhos bonitinhos? Ou, antes disso, vocês sabem como as pessoas com esse tipo de deficiência fazem para usar e compreender os sites que tem na Web?

Essa é a ideia deste post, entender um pouco como melhorar nossos códigos para que fique acessível e usual para todos os tipos de pessoas. E, para isso, vamos implementar acessibilidade e usabilidade no código que fizemos no post anterior onde estilizamos o checkbox.

LEITORES DE TELA

Muitas pessoas tem algum tipo de deficiência visual e isso muda muito a visualização e utilização dos sites. Então, como eles fazem para compreender o conteúdo descrito nas páginas?

Existem vários Leitores de Tela, que como o próprio nome diz, são programas que leem a tela e assim o usuário consegue compreender o que está aparecendo no computador. O leitor de tela free feito para Windows é o NVDA (NonVisual Desktop Access).

Baixei e instalei o NVDA no meu computador e abri o meu site com o checkbox estilizado e bonitinho, e…

O leitor de tela simplesmente não leu nada e nem foi possível acessar os itens pelo teclado. Péssimo isso, de que adiantou os quadradinhos ficarem bonitinhos se não é possível que todos consigam usar essa funcionalidade no site?

ENTENDENDO OS MOTIVOS

Depois que a frustração de não ter funcionado passou, peguei o código do checkbox estilizado e fui descobrir porque o leitor de tela não lia nada e como arrumar isso.

Vamos lembrar o que fizemos no CSS: nós escondemos o input porque o quadrado no formato padrão é feio e colocamos uns quadradinhos bonitinhos com os pseudo-elementos ::before e ::after do CSS. E como conseguimos esconder o input?

Usamos a propriedade display do CSS, essa propriedade determina a maneira que a caixa de cada elemento aparece na tela. No HTML, os valores padrões da propriedade display seguem as especificações do HTML ou da folha de estilo padrão do navegador.

O valor padrão desta propriedade é inline, mas para o input ficar escondido, nós usamos o valor none, que permite desativar a exibição do elemento.

Figura 02 – CSS do input com display: none

Importante entender que quando você usa none em algum elemento, é como se esse elemento não existisse, e claro, o leitor de tela não consegue ler o que não existe. E agora, como resolver esse problema?

IMPLEMENTANDO ACESSIBILIDADE

Já descobrimos que o leitor de tela lê o input e por tanto não podemos usar display com valor none para ele não sumir de verdade do documento. Precisamos que o input esteja no documento, mas que fique invisível. Então, vamos primeiro apagar a propriedade display do input e olhar no navegador o que acontece.

Figura 03 – Layout sem display: none no input

Agora o input está aparecendo no documento, assim o leitor de tela entende e lê a descrição do item. Com isso, também conseguimos acessar o item pelo teclado, porque o teclado também entende o input.

Enquanto “andamos” pelos itens com a ajuda do botão tab do teclado, o quadradinho padrão do input fica com um contorno azul, mostrando visualmente que o item está com foco e lê a descrição do item.

Pronto, agora o leitor de tela consegue entender o nosso código, porque na verdade ele lê o input. Resolvido o problema de acessibilidade! rs…

Não, né!!! O quadradinho padrão e feio do input está aparecendo na tela, em cima do respectivo item. Funciona, mas está feio, precisamos dar um jeito nisso. Precisamos voltar para o nosso layout inicial e fazer com que o leitor de tela continue lendo os itens.

Para isso, vamos usar a propriedade position do CSS com valor absolute no input. Assim, o input ficará com a posição absoluta em relação a label, que já está com position com valor relative (post anterior).

Figura 04 – Posição do input e da label

Vamos olhar no navegador o resultado dessa modificação do CSS.

Figura 05 – Input com position: absolute

Hum!!! Já está ficando melhor. Agora o quadrado padrão do input está na mesma posição que os quadradinhos bonitinhos que colocamos com os pseudo-elementos ::before e ::after na label (post anterior).

Figura 06 – Pseudo-elementos ::before e ::after na label

Já que não podemos colocar display com valor none no input, qual seria uma outra forma de tornar o input invisível, sem removê-lo do documento?

No CSS temos a propriedade opacity que especifica a transparência de um elemento. Perfeito! É exatamente o que precisamos! Podemos deixar o input transparente, mas ainda no documento, para que o leitor de tela consiga ler. Para que o elemento fique transparente, vamos usar opacity com valor zero.

Figura 07 – CSS completo do input

Com esse CSS para o input, conseguimos ter o mesmo layout que tínhamos no término do outro post. E como o quadradinho padrão está somente transparente, o leitor de tela entende e consegue ler o conteúdo e acessá-lo pelo teclado também.

Figura 08 – Layout final

Aeee!!! Conseguimos voltar nosso layout para os quadradinhos bonitinhos do post anterior, e conseguimos adicionar acessibilidade a estilização do checkbox. Mas quando “andamos” com o botão tab do teclado pelos itens conseguimos perceber qual item está em foco?

MELHORANDO A USABILIDADE

Lembram que antes de tornar o input transparente, quando “andávamos” com o botão tab do teclado pelos itens, o quadradinho do input ficava com um contorno azul mostrando que o item estava em foco?

Agora isso não acontece porque o input está escondido. Acabamos de encontrar um problema de usabilidade no código. Vamos aproveitar e resolver isso para deixar nosso checkbox mais completo.

Para melhorar a usabilidade, vamos adicionar ao CSS do input alguns estilos para quando o item estiver em foco. Vamos adicionar uma borda mais grossa aos quadradinhos e deixar a fonte da descrição em negrito.

Figura 09 – Estilo para quando o item está em foco

Propriedades adicionadas, ficamos com o layout abaixo quando o item está focado.

Figura 10 – Item com marcação visual quando em foco

Assim, quando “andamos” pelos itens com a ajuda do teclado, fica mais fácil visualmente de identificar o item que está focado, não ainda marcado, só com foco.

CONCLUSÃO

Com poucas alterações no código inicial, conseguimos tornar o checkbox estilizado acessível para os leitores de tela e assim as pessoas com algum tipo de deficiência visual conseguem entender o conteúdo da página.

Se pensarmos em acessibilidade e usabilidade durante a criação do site, fica mais natural a sua implementação e assim o site além de bonito visualmente, ficará funcional para todos os tipos de pessoas.

Precisamos sempre pensar em todos os tipos de usuários quando criamos um site ou um software novo. Agora, sempre quando estou “codando”, o programa NVDA está aberto para entender melhor como ele funciona e poder melhorar os meus códigos.

Como estilizar Checkbox com CSS

INTRODUÇÃO

Uma coisa muito comum na maioria dos sites são os formulários, e normalmente eles não são muito atrativos, dificilmente achamos um formulário bonitinho que dê vontade de preencher, não é?

Sabem aqueles quadradinhos que quando clicamos eles ficam com um ✓, o famoso checkbox? Não seria interessante se conseguíssemos alterá-los para que ficassem mais legais? Como será que podemos estilizá-los para que essa parte do formulário fique mais atrativa?

Uma maneira rápida é usar qualquer framework que tenha a funcionalidade de estilizar formulários, como por exemplo o Bootstrap. Mas como esses frameworks trabalham para que isso seja possível?

Essa é a ideia deste post, mostrar como é possível estilizar o checkbox usando o CSS, sem frameworks prontos.

COMO CONSTRUIR O HTML

Vamos primeiro montar o HTML com o checkbox. Para isso vamos adicionar a tag input com o atributo type=”checkbox”. Para nosso exemplo, criaremos quatro inputs e suas respectivas descrições.

Figura 01: Criando o HTML

Agora que os checkboxs e suas respectivas descrições estão criados, será que quando clicarmos em cima da descrição conseguiremos selecionar o checkbox? Ou para selecionar o item precisaremos clicar somente dentro do quadradinho pequeno?

Infelizmente, da maneira que criamos o HTML, só conseguiremos selecionar o item desejado quando clicarmos dentro do checkbox, e isso é ruim. Seria mais prático se conseguíssemos clicar dentro do checkbox ou na descrição do item e o check já aparecesse no quadradinho. Será que isso é possível?

Opa!!! É possível sim, precisamos “ligar” a tag input com a sua descrição de algum jeito. Assim, quando clicarmos tanto no input, quanto na descrição, estaremos selecionando a mesma informação. Então, como podemos conectar o input com a sua descrição correspondente?

Para fazer a ligação entre a tag input e sua descrição, precisamos primeiro colocar a descrição dentro de alguma tag, não deixando ela solta no HTML. Mesmo assim, essas tags ainda não estariam conectadas, precisamos “ligá-las” dando o mesmo “nome” para as duas tags.

Vamos utilizar a tag label para colocar as descrições, porque essa tag possui um atributo chamado FOR que pode ser conectado com o atributo ID da tag input. Com esses dois atributos com o mesmo “nome”, conseguimos conectar as duas tags, input e label. Isso significa que quando clicarmos no checkbox ou na descrição correspondente, estamos selecionando a mesma informação. Vamos ver como ficou o HTML completo.

Figura 02: Conectando cada checkbox com sua respectiva descrição

Vamos verificar como ficou o resultado do HTML no navegador, lembrando que não adicionamos nenhum CSS, somente o HTML puro, com os estilos padrões de cada navegador.

Figura 03: Resultado do HTML sem CSS

TENTANDO ESTILIZAR A TAG INPUT

Com o HTML pronto, podemos verificar que quando não temos nenhum CSS, o formato do checkbox fica bem simples, por isso, vamos tentar estilizar a tag input para deixar os quadradinhos bonitinhos. Vamos primeiro aumentar as dimensões do checkbox.

Figura 04: CSS para aumentar as dimensões do checkbox

CSS implementado, vamos verificar no navegador o resultado.

Figura 05: Resultado do CSS com o checkbox maior

Opa!!! Os quadradinhos estão maiores, parece que funcionou fazer as alterações direto na tag input. Vamos tentar mais uma alteração, além de aumentar as dimensões do checkbox, vamos colocar um fundo vermelho.

Figura 06: CSS com adição de fundo vermelho

Vamos para o navegador para ver como ficou os nossos quadradinhos com mais essa alteração.

Figura 07: Resultado do CSS com adição de fundo vermelho

Ops!!! Não mudou nada? Será que eu colei aqui a figura errada?

Não!!! Não colei a figura errada, é isso mesmo. O navegador não entendeu a propriedade de fundo vermelho para a tag input, mas entendeu as alterações das dimensões. Mas como assim?

Para entender melhor, vamos analisar o Dev Tools do navegador para verificar se o nosso CSS foi realmente entendido.

Figura 08: Dev Tools do navegador

Como podemos perceber, o CSS está correto e aparecendo no Dev Tools, o navegador consegue ler corretamente as alterações do CSS, sem erros, mas o checkbox continua com a cor de fundo padrão. E sabe porque? Porque a tag input não aceita todas as configurações possíveis do CSS, só algumas poucas propriedades que nos limitam muito em deixar esses quadradinhos mais legais.

Por isso, precisamos pensar em outro jeito de estilizar o checkbox sem ser direto na tag input. Mas como podemos fazer isso?

MÃOS À OBRA

Como vimos anteriormente, o checkbox padrão da tag input não aceita grandes alterações ou estilizações mais complexas, então, para começar, precisamos “tirá-lo” do nosso formulário. Para que ele não atrapalhe mais no documento, podemos usar no CSS a propriedade display com valor none, tornando assim o checkbox invisível.

Figura 09: CSS para deixar o checkbox padrão invisível

Agora não estamos mais vendo o checkbox, estamos somente com as descrições nas tags label. Lembrando que como conectamos as tags input com suas tags label, pelo ID e FOR, respectivamente, mesmo que o input esteja invisível, podemos clicar na label que estaremos selecionando também o input “escondido”.

Vamos estilizar as descrições um pouco, só para começar a dar uma cara mais legal para nosso formulário. Vamos alterar o nome e tamanho da fonte, adicionar espaçamentos (como margin e padding), alterar o formato do cursor para indicar que o elemento pode ser interagido clicando nele (normalmente, é uma imagem de uma mão) e, por último, alterar o display para block para que as descrições fiquem uma embaixo da outra.

Figura 10: CSS para estilizar a label

Depois de adicionados esses dois CSS, podemos dar um break e conferir no navegador como está o resultado do nosso projeto até aqui.

Figura 11: Checkbox invisível e descrição estilizada

Até o momento, nosso CSS deixou as descrições mais bonitas e escondeu o checkbox, mas, do jeito que está, como o usuário vai saber que isso é uma lista de itens que podem ser selecionados? Precisamos colocar alguma coisa na frente das descrições para demonstrar o check nas opções.

Temos algumas maneiras para fazer isso, podemos adicionar vários desenhos que representem um checkbox. Aqui vou mostrar como fazer dois quadrados no lugar do input, que quando clicarmos neles ou na descrição, o quadrado de dentro fique com fundo pintado, mostrando que o item foi selecionado. A ideia é chegar nesse resultado final.

Figura 12: Resultado final

Hum!!! A ideia de adicionar esses quadrados antes das descrições parece boa, mas como adicionamos coisas pelo CSS? E onde vamos adicionar isso?

O CSS possui algumas funcionalidades que são chamadas de pseudo-elementos, palavras-chave adicionada a um seletor que nos permite marcar uma parte específica do elemento selecionado. Existem vários pseudo-elementos, no nosso exemplo vamos utilizar o ::before e o ::after.

What??? O que é esse treco? Como usar? Onde adicionar?

Muita calma nessa hora… Vamos primeiro entender o que são esses fulanos de pseudo-elementos ::before e ::after e depois implementaremos no nosso exemplo.

O QUE É PSEUDO-ELEMENTO ::BEFORE E ::AFTER?

Os pseudo-elementos ::before e ::after nos dão a possibilidade de inserir elementos antes e depois do conteúdo de uma tag. Eles podem ser usados de diversas formas, para aspas mais bonitas em citações, para adicionar ícones em botões, para estilizar itens, entre outras várias possibilidades.

Vamos a um exemplo simples de como podemos usar o ::before, só para pegar o jeito da coisa e ficar mais tranquilo de usar no nosso objetivo principal.

Nesse exemplo vamos colocar o desenho de um coração no começo de um parágrafo.

Figura 13: HTML para adicionar um parágrafo
Figura 14: CSS para adicionar um elemento na frente da tag

Com esse HTML e CSS, podemos ver no navegador o resultado do pseudo-elemento ::before.

Figura 15: Resultado visto no navegador

Hum!!! Então sempre que quisermos adicionar algum elemento pelo CSS, podemos usar os pseudo-elementos ::before ou ::after. Com isso conseguimos adicionar os nossos quadradinhos para estilizar o checkbox do jeito que queremos.

CHECKBOX ESTILIZADO

Agora que já aprendemos a usar o ::before e o ::after, podemos voltar ao nosso CSS e completá-lo para atingir o nosso objetivo final. Mas vamos por partes para entender muito bem o que estamos fazendo e para que possamos fazer o mesmo processo com qualquer outro tipo de desenho depois.

O nosso objetivo é adicionar dois quadrados de tamanhos diferentes, um dentro do outro e quando clicarmos nos quadrados ou na descrição, o quadrado de dentro (o menor) ficará preenchido para representar que o item foi selecionado.

Vamos criar esses elementos na tag label, por que nela? Lembrem-se, conectamos a tag input com a tag label e quando clicamos na label, mesmo com o input invisível, estamos selecionando o mesmo item. Então como já escondemos o input, vamos adicionar os elementos na tag label.

Portanto, vamos colocar o quadrado maior antes da descrição, usando o ::before e o quadrado menor depois da descrição, usando o ::after.

Figura 16: CSS com os pseudo-elementos ::before e ::after

Adicionamos os dois quadrados, vamos ver no navegador o resultado com a adição desse CSS.

Figura 17: Resultado da criação dos pseudo-elementos

Opa!!! Conseguimos adicionar elementos usando o CSS, nossos quadradinhos já estão aparecendo no navegador. Agora, só precisamos arrumar o posicionamento deles para que o quadrado menor fique dentro do quadrado maior.

Figura 18: Posicionando os quadrados

Vamos olhar no navegador se os quadrados que fizemos para estilizar o checkbox já estão como queríamos.

Figura 19: Checkbox do jeito que queríamos

Opa!!! Vejam como já estão bem melhores os nossos quadradinhos! Agora já temos um dentro do outro e na frente de cada descrição.

Para finalizar, está faltando só uma coisinha muito importante. Quando clicarmos nos quadrados ou na respectiva descrição, temos que pintar o quadrado menor para que fique claro que o item foi selecionado. Vamos adicionar esse item no CSS.

Figura 20: Clicando no item desejado

Agora sim!!! Nosso CSS está completo e chegamos ao resultado desejado.

Figura 21: Resultado Final

Bem melhor assim do que a versão sem CSS, não acham? O que vocês preferem, os quadradinhos padrões e feios ou esses bem mais bonitinhos?

No link codepen.io/andrezaluchini, vocês podem encontrar o código completo de tudo isso que ensinei aqui, tanto do HTML quanto do CSS.

CONCLUSÃO

Com os pseudo-elementos ::before e ::after conseguimos criar muitas estilizações diferentes e personalizar muito mais qualquer parte do nosso site, não somente os formulários.

Outra estilização legal que pode ser feita com esse mesmo processo é o desenho , muito usado nos Apps dos Androids.

Fica a dica para tentar refazer o código para que o desenho fique parecido com esse, que tal?

Expressões Regulares – Parte I

INTRODUÇÃO

Sabe quando nos deparamos com o problema de encontrar informações específicas em um grande texto? É… É nessa hora que sentimos a necessidade de entender as expressões regulares, aquela linha de código com um formato maluco cheio de símbolos que são difíceis de compreender. Mas calma, assim que conseguirmos decifrar os símbolos e seus significados, perceberemos que elas não são tão complicadas quanto parecem à primeira vista.

O objetivo desta série de posts é mostrar um jeito fácil de entender as expressões regulares para que possamos trabalhar mais facilmente com elas e perceber o quanto elas podem facilitar o nosso trabalho.

O QUE É EXPRESSÃO REGULAR (REGEX)?

Expressão Regular é uma representação formada por símbolos para encontrar padrões em strings. Serve para filtrar padrões de informações em qualquer tipo de texto, desde o valor de um campo de formulário ou simplesmente um search no seu editor de código predileto.

Resumindo, é uma linguagem de busca de padrões, onde dizemos o padrão (pattern) do texto que queremos encontrar, passamos o texto alvo (target) e pedimos para uma Regex Engine (motor) fazer essa busca, é esse motor que tem a função de avaliar o contexto e de fazer a busca.

Cada linguagem de programação tem o seu motor e apesar da Regex ter um padrão fixo, há algumas diferenças e detalhes na implementação em cada uma das linguagens. O que vai mudar de fato é a forma com que se trabalha, e não a lógica e os padrões em si das expressões regulares.

Para facilitar vamos usar o site https://regex101.com/, que possui diferentes Regex Engine (JavaScript, PHP, Python) e até gera o código para a linguagem dado o target e o pattern.

COMEÇANDO COM UM EXEMPLO BÁSICO

Vamos começar com um exemplo simples e aos poucos vou ensinando o que significa cada coisa. Vamos usar como exemplo um arquivo CSV com algumas informações de pessoas, contendo na sequência: Nome; CPF; Endereço; CEP; Telefone.

Imaginando que gostaríamos de extrair desse arquivo todos os CPFs, como faríamos isso?

Opa, usando uma Regex bem simples: \d\d\d\.\d\d\d\.\d\d\d-\d\d

Estranho, não é? Difícil de entender sem explicação, só olhando esses códigos malucos? A melhor forma de entender uma Regex é analisá-la por partes.

O \d é uma classe de caractere que vale qualquer número de zero a nove, também pode ser representada por [0-9].

O \. significa simplesmente um ponto, temos que colocar antes do ponto a barra invertida (\) para que a Regex Engine entenda o ponto com seu formato literal, se colocarmos somente o ponto sem a barra invertida, a Regex Engine entende de uma outra forma.

O (hífen) pode ser colocado na Regex direto, sem a barra invertida, que será entendido com o seu formato literal. Mas por que o hífen a Regex Engine entende e o ponto não? Simples, porque o ponto é um Metacharacter. What??? Calma, veremos o que isso significa ainda neste post.

Resumindo, o CPF é composto por pacotes de 3 números (\d\d\d ou [0-9][0-9][0-9]), pontos (\.) e um hífen (). Logo, temos:

Porém, percebam que no exemplo acima, o CPF do Marcio Silva não possui pontos e hífen, e com a Regex que criamos, não conseguimos capturar essa informação. Como podemos alterar a nossa Regex para conseguir capturar os dois tipos de CPF?

Para que os pontos e hífen não sejam obrigatórios, isso é, eles podem ou não aparecer no texto pesquisado, vamos utilizar um quantifier. Mas o que é quantifier? Vamos com calma, num próximo post veremos com mais detalhes o que isso significa, por enquanto vamos apenas utilizar um dos quantifiers para seguir com o nosso exemplo.

E, para esse caso, vamos utilizar o ponto de interrogação (?). O ponto de interrogação tem alguns significados diferentes nas expressões regulares dependendo de que maneira ele é utilizado. Um dos significados dele é o quantifier, que representa um atalho para dizer que aquele elemento pode ou não aparecer no texto pesquisado, tornando assim, o elemento opcional.

Logo, para considerar os dois casos de CPF, quando o ponto ou hífen aparecem e quando eles não aparecem no nosso alvo, precisamos alterar a nossa Regex para: \d\d\d\.?\d\d\d\.?\d\d\d-?\d\d

Perceba que agora ambos os casos foram capturados.

Esse é apenas um exemplo bem rústico e simples do uso de expressões regulares. Elas podem ficar muito mais elegantes e fáceis de ler e também muito mais complexas.

Vamos aproveitar esse mesmo exemplo e melhorá-lo um pouquinho. Estamos repetindo \d três vezes porque estamos procurando três dígitos. Imagina se o nosso alvo fosse alguma sequência com 10 números, teríamos que repetir \d 10 vezes? Poderíamos, e a Regex estaria correta, mas podemos também escrever de um jeito mais simples.

Para isso podemos aproveitar e conhecer mais um tipo de quantifier. O {n} significa que queremos que um determinado elemento apareça especificamente “n” vezes, onde “n” sempre é um número inteiro. Portanto, podemos escrever os \d\d\d de uma forma mais simples com: \d{3}.

Com esse novo quantifier, a nossa Regex fica mais simplificada e funciona igual a mostrada anteriormente.

METACHARACTER

Como vimos no exemplo anterior, o ponto é um metacharacter, mas o que isso significa? Metacharacter ou meta-caractere é todo caractere que não possui o seu valor semântico (literal) propriamente dito, ou seja, ele não tem o seu significado normal e sim um significado especial para a Regex Engine.

Em uma expressão regular, um ponto (.) sozinho tem o valor de qualquer caractere, isso significa que quando usamos o ponto na Regex, queremos capturar qualquer caractere que esteja no alvo.

Para conseguir “pegar” o ponto no nosso alvo, precisamos “escapar” do significado do metacharater e utilizamos a barra invertida (\) para isso. Assim “pegamos” o ponto com o seu significado semântico.

Há mais alguns caracteres que possuem esse mesmo comportamento, a maior parte deles são os quantifiers, como já comentei, veremos todos os quantifiers num próximo post.

CONCLUSÃO

Neste post vimos um pouquinho do que são as expressões regulares e como elas têm diversas formas de serem escritas, cada uma com seus símbolos diferentes. Nos próximos posts veremos mais coisas novas e faremos mais exemplos para ficar mais fácil de compreender cada detalhe.

Espero que esse primeiro post já tenha ajudado a tirar o medo de trabalhar com essas expressões malucas! Com certeza depois de terminar de ler todos os posts da série, vão entender muito mais de como trabalhar com elas.