Frontend e mobile

Ferramentas de HTML e CSS

Formatar um HTML gerado por um CMS sem quebrar conteúdo sensível, desenhar um layout Grid antes de escrever o CSS final ou entender por que uma regra perde para outra na cascata são tarefas do trabalho diário de frontend. Aqui o Formatador HTML e verificação organiza a hierarquia de um documento sem reescrever conteúdo de CMS ou email, e o Formatador CSS formata, minifica ou valida a folha de estilo com diagnóstico por linha e coluna, mexendo só no estilo.

Para desenhar layout, o Layout CSS Grid / Flexbox monta o resultado visualmente comparando o canvas com o código gerado, e o gerador de gradiente CSS e o Gerador de Clip-Path CSS funcionam arrastando pontos e cores até o efeito ficar certo. Já a Calculadora de especificidade CSS resolve qual regra vence um conflito de cascata, e as Unidades CSS responsivas e clamp convertem unidades e calculam clamp com precisão para layouts fluidos.

12 ferramentas

Formatar HTML, CSS e JS

Montar e calcular layout

Desenhar efeitos visuais

Perguntas frequentes sobre ferramentas de HTML / CSS Dev Tools

Por que uma regra CSS não está sendo aplicada mesmo estando mais abaixo no arquivo?

Provavelmente outra regra tem especificidade maior e vence independente da ordem no arquivo. A Calculadora de especificidade CSS calcula o peso de cada seletor envolvido e mostra qual delas realmente prevalece na cascata, evitando adivinhação e uso de !important sem necessidade.

Como desenhar um layout CSS Grid sem escrever o código de cabeça?

O Layout CSS Grid / Flexbox deixa montar o layout arrastando visualmente no canvas e mostra o código CSS equivalente lado a lado, então dá para comparar as duas visões antes de copiar o resultado final para o projeto.

É seguro formatar o HTML de um template de email ou de um CMS?

O Formatador HTML e verificação organiza a hierarquia e a indentação do documento sem reescrever o conteúdo em si, o que evita que texto sensível de um CMS ou de um template de email seja alterado durante a formatação.