Herramientas de HTML y CSS
El marcado y los estilos de frontend se rompen de forma visual y estructural a la vez: HTML o CSS sin formatear que cuesta revisar, un layout Grid o Flexbox más fácil de dibujar que de escribir de memoria, dos selectores peleando por especificidad, o una transición CSS que necesita una curva de easing propia en vez de ease-in-out. Estas herramientas se dividen entre formatear el código que ya tienes y generar código visualmente para las partes dolorosas de escribir a mano.
Para formatear, Formateador CSS, Formateador de HTML y comprobación, y Formateador de JavaScript y TypeScript mantienen la intención del código original mientras señalan errores de sintaxis, y Convertidor de HTML y Markdown mueve contenido entre formatos sin perder estructura ni enlaces. Para layout y visuales, Diseño CSS Grid / Flexbox te deja pintar un layout y copiar el código resultante, generador de degradados CSS y Generador de Efectos CSS previsualizan degradados, sombras y filtros en vivo, y Calculadora de especificidad CSS compara puntuaciones de selectores complejos o combinados.
12 herramientas
Formatear código y marcado
-
Formateador de HTML y comprobación
Organiza HTML legible sin separar palabras ni reescribir bloques
-
Formateador CSS
Formatea, minifica y valida CSS con diagnósticos línea por línea
-
Formateador de JavaScript y TypeScript
Formatea JS, JSX, TS y TSX ajustando sangría, comillas y punto y coma
-
Convertidor de HTML y Markdown
Convierte bidireccional entre HTML y Markdown preservando formato
-
codificador de entidades HTML
Codifica y decodifica entidades HTML en contexto de texto o atributo
Diseñar y calcular layout
Generar CSS visual
-
generador de degradados CSS
Diseña gradientes CSS visualizando colores y ángulos en tiempo real
-
Generador de Efectos CSS
Genera CSS de sombras en capas, bordes redondeados, transformaciones y filtros con vista previa
-
Generador de Clip-Path CSS
Diseña formas de recorte CSS arrastrando vértices y revisando la declaración resultante
-
Generador de cubic-bezier
Crea curvas easing CSS moviendo controles y viendo la animación
Preguntas frecuentes sobre herramientas de HTML / CSS Dev Tools
Las pseudoclases :is() y :where() manejan la especificidad de forma distinta: :is() toma la especificidad de su argumento más específico, mientras que :where() siempre cuenta como cero sin importar lo que contenga. Calculadora de especificidad CSS compara puntuaciones de selectores y muestra exactamente cómo influyen :is() y :where().
En vez de escribir grid-template-columns o propiedades flex de memoria, Diseño CSS Grid / Flexbox te deja pintar el layout visualmente y luego copiar el HTML y CSS generados, más rápido de acertar que ajustar valores a mano uno por uno hasta que encaje.
Una función cubic-bezier() se define con cuatro números difíciles de imaginar sin ver la curva resultante. Generador de cubic-bezier te deja arrastrar los controles para dar forma a la curva y previsualizar la animación CSS antes de copiar la función de temporización final.