Conversor de unidades CSS

O que faz o Conversor de unidades CSS

O Conversor de unidades CSS traduz valores entre px, rem, em e pt com tamanhos de base configuráveis. É útil quando leva um design token para CSS, verifica escalas tipográficas, converte uma folha de estilos antiga, compara valores em pontos orientados para impressão ou decide se um componente deve usar tamanhos relativos à raiz ou ao elemento. Introduza um valor de origem, escolha a unidade, defina os tamanhos de letra da raiz e do elemento e os valores equivalentes são atualizados de imediato. O conversor trata rem como relativo ao tamanho de letra da raiz e em como relativo ao tamanho de letra do elemento atual.

A conversão entre píxeis e pontos usa a relação CSS em que um ponto equivale a um píxel e um terço, pelo que um píxel corresponde a 0,75 pontos. Mostrar todos os equivalentes ao mesmo tempo facilita perceber se um token de espaçamento ou de tamanho de letra é coerente com o resto de uma escala. O botão de copiar cria um resumo compacto em várias linhas para notas, pull requests ou revisões de tokens.

Fluxo de trabalho privado no navegador

Todo o processamento acontece no seu navegador com JavaScript do lado do cliente. A ferramenta não envia excertos, valores de configuração, dados gerados, texto de consultas ou exemplos copiados para um servidor e não exige conta. Este modelo exclusivamente local é importante nos utilitários para programadores, porque o conteúdo colado parece muitas vezes dados reais de aplicações: respostas de API, registos, exemplos com aspeto de variáveis de ambiente, consultas a bases de dados, marcação de rascunhos ou valores copiados de sessões de depuração em produção. Manter a transformação local reduz o risco e mantém a interação rápida, porque não há qualquer pedido de rede.

A interface é propositadamente compacta para que possa colar a entrada, ajustar opções, inspecionar a saída, copiá-la e regressar ao editor. Os resultados devem, ainda assim, ser revistos antes de serem submetidos, partilhados publicamente ou usados num fluxo de produção. As ferramentas do navegador são excelentes para inspeção e preparação rápidas, mas não conseguem conhecer todas as convenções de um projeto, regras de classificação de dados ou requisitos de validação específicos de uma aplicação.

Dicas práticas

Use rem para valores que devem seguir a raiz do documento, como tamanhos de letra acessíveis e espaçamentos de layout ligados às preferências do utilizador. Use em quando um valor deve escalar com o tamanho de letra do próprio componente, por exemplo no alinhamento de ícones, no preenchimento local ou na tipografia aninhada. Use px com cuidado para bordas exatas, recursos raster e casos em que não se pretende escala relativa. Os tamanhos calculados reais podem ser afetados por definições do navegador, herança, zoom, media queries e estilos específicos do contentor, por isso verifique os valores importantes nas ferramentas de programador.