Nenhuma DIV escapa dessa!

#css #webdev #html #design

Opa! Me chamo Luís, sou Desenvolvedor Frontend e este é meu primeiro post!

Segunda-feira 8h da manhã, você acabou de pegar 3 metrôs pra chegar no trampo. Tu faz um cafézinho, liga o pc e abre o e-mail, adivinha o que tinha na caixa de entrada? Isso aí, bug pra corrigir, mas não é qualquer bug é CSS!

Aí você pensa "Pô, é só um margin-top errado que colocaram ali, nada demais". 3h depois:

É eu sei... Nessas horas a gente pensa em mudar de profissão, virar desenvolvedor backend, ver se somos herdeiros de algo e por aí vai. Mas nem tudo está perdido, existem maneiras rápidas e fáceis (além do DevTools do navegador) de inspecionar esses elementos "fantasmas" que a gente acaba apanhando no dia a dia. Se liga:

**Utilizando o seletor universal (*)**

Há diversas maneiras de utilizar o seletor universal dentro do CSS, uma delas é desenvolver formas de pegar esses elementos "fantasmas" dentro do nosso código. Vamos ver alguns exemplos:

html * {
    background: rgba(255, 0, 0, .1);
    box-shadow: 0 0 0 1px red;
}

*{
   outline: 1px solid #fff !important;
   background-color: rgba(0,2,54,.1) !important;
}

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

Repare que os exemplos têm praticamente o mesmo resultado, contornar todo e qualquer elemento criado dentro da página web. Lembrando que esse hack será utilizado apenas para debug, não vai deixar dentro do seletor universal durante o desenvolvimento hein...

Tá, mas pra que eu iria contornar todos os elementos? É simples, quando você precisar arrumar algo que não vê, tu vai entender rsrs.

Pesticide Extension

Extensão do Chrome que injeta um "CSS pesticida" para visualizar todo e qualquer elemento, garantindo que possamos enxergar algo que deixamos passar e que está causando erro. Exemplo:

Screenshot do site oficial do GatsbyJs, antes de acionar a extensão