Minificar y Formatear CSS - comprimir o expandir

Minificador y formateador CSS

Minificación de CSS - preguntas frecuentes

Solo se quitan espacios y comentarios normales, y los tres sitios donde el espacio significa algo -selectores, paréntesis y cadenas- se dejan en paz. Nada se renombra, reordena ni fusiona, así que las reglas que ve el navegador son las que escribiste.
Nuevo
Editor Markdown Escribe Markdown y ve el resultado renderizado al lado. Admite títulos, listas, tablas, bloques de código y enlaces; copia el HTML o descarga archivos .md y .html. Funciona en tu navegador.
Popular Hoy
Formateador YAML Reindenta un YAML desordenado, encuentra el error con su número de línea y léelo como JSON. Conserva tus comentarios, escalares de bloque y anclas. Funciona en tu navegador.

Qué hace esta herramienta

Dos tareas opuestas sobre la misma hoja de estilos. Minificar quita lo que solo necesitan las personas: comentarios y sangría. Formatear los devuelve, para que un archivo heredado vuelva a leerse. Ambas trabajan sobre el texto que diste y ninguna toca el significado del CSS.

Cómo se usa

  1. 1 Pega el CSS: un archivo entero o una sola regla.
  2. 2 Pulsa Minificar para comprimir, o Formatear para expandir con sangría.
  3. 3 Comprueba los bytes y luego copia el resultado.

Un espacio en un selector no es decoración

«.a .b» selecciona un .b dentro de un .a; «.a.b» selecciona un elemento que lleva las dos clases. Son selectores distintos, y un minificador que trate el espacio como sobrante pinta en silencio los elementos equivocados. Aquí el espacio entre dos partes del selector siempre sobrevive; solo se quita el que rodea combinadores como > y +.

calc() necesita sus espacios

En «calc(100% - 10px)» los espacios alrededor del menos los exige la gramática: sin ellos el navegador lee «-10px» como una longitud negativa, la expresión pasa a ser inválida y la declaración entera se descarta. Nada te avisa: el diseño simplemente sale mal. Esta herramienta nunca quita espacios dentro de paréntesis.

Los comentarios de licencia se quedan

Un comentario que abre con /*! lleva un aviso de copyright o de licencia y, por convención, todo minificador lo conserva. Quitarlo sería eliminar la atribución que una biblioteca te pide distribuir. Los comentarios /* normales son para ti y tu equipo, así que esos sí se van.

Minificar CSS rinde menos que gzip

Los servidores ya comprimen las hojas de estilo al enviarlas, y gzip es muy bueno con los espacios repetidos: minificar encima suele ahorrar un pequeño porcentaje, no la mitad. Hazlo porque ese archivo es el que se publica y lo quieres pequeño y estable, no porque esperes que la página cargue mucho más rápido.

Herramientas de Desarrollo Relacionadas

Formateador JSON Formatea, minifica y valida JSON en el navegador. El error se señala por línea y columna, y un árbol plegable muestra la estructura.
Formateador HTML Indenta HTML desordenado para poder leerlo, o compáctalo para que pese menos. También funciona con fragmentos y nunca reescribe tu marcado en otra cosa.
Formateador XML Indenta XML desordenado para poder leerlo, o compáctalo. Entiende RSS, CDATA y espacios de nombres, y nunca reescribe tu documento.
Formateador SQL Reparte una consulta larga en líneas legibles, o compáctala de nuevo en una. Mantiene tus mayúsculas, tus nombres entrecomillados y tus cadenas tal cual.
Minificador JavaScript Reduce JavaScript con Terser, el motor de las herramientas de build. Analiza el código en vez de adivinarlo, así el comportamiento sobrevive. Nada se sube.

Otras herramientas que pueden interesarte

Word a PDF Convierte Word a PDF gratis: sube un archivo DOC, DOCX, ODT o RTF y descarga un PDF bien formateado en segundos, sin registro ni marca de agua.
PDF a Word Convierte PDF a Word gratis: sube un PDF y descarga un DOCX editable en segundos - sin registro, sin marca de agua y sin instalar nada.
Contador de Palabras Contador de palabras gratuito: pega un texto para contar palabras, caracteres, frases y párrafos, y ver el tiempo estimado de lectura sin subir nada.
Contador de Caracteres Contador de caracteres gratuito: caracteres con y sin espacios, palabras y líneas, además de los límites SEO de títulos y meta descripciones.
Comprobador de Densidad de Palabras Clave Analizador de densidad de palabras clave gratuito: pega un texto o una URL y mira la frecuencia de cada palabra y frase, en porcentaje.