Cómo usar esta herramienta para desarrolladores
- Pega la hoja CSS.
- Si lo necesitas, escribe un filtro de texto.
- Genera la vista y recorre el esquema por niveles.
- Copia el resultado para revisiones o documentación.
CSS Viewer
Presenta una hoja CSS como un esquema textual ordenado para recorrerla sin perderse entre bloques largos. El visor separa reglas normales, reglas con arroba y declaraciones, y permite filtrar el resultado por texto para localizar selectores o propiedades. No modifica el código: su objetivo es facilitar lectura, revisión y orientación dentro de fragmentos CSS extensos.
Datos de entrada
Vista estructuradaEspacio publicitario
Qué hace esta herramienta para desarrolladores
Organiza las reglas reconocidas por CSSOM en una representación de árbol compacta, mostrando cada selector y sus propiedades debajo.
El filtro se aplica a la representación de cada regla y mantiene una regla si su selector, propiedad o valor contiene el texto buscado.
Es un visor, no un formateador: el resultado prioriza estructura y legibilidad sobre conservar el texto exacto.
Ejemplo
Entrada
.tag { color: purple; border-radius: 999px; }Salida
▸ .tag • color: purple • border-radius: 999px
Casos de uso
- Navegar CSS generado por un framework.
- Buscar dónde aparece una propiedad concreta.
- Preparar una vista compacta para revisión de código.
Consejos para obtener resultados fiables
- Usa filtros cortos como grid, color o .card.
- Quita el filtro para recuperar la estructura completa.
- Combina este visor con CSS Inspector para métricas globales.
- Los comentarios no aparecen porque CSSOM los elimina.
Detalles del procesamiento
El documento aislado evita afectar los estilos de la página. El recorrido conserva bloques anidados y genera líneas con sangría según profundidad.
No muestra comentarios ni espacios originales. Tampoco expande preprocesadores; solo puede visualizar CSS que el navegador interprete.
Preguntas frecuentes
¿Puedo buscar un selector concreto dentro del CSS Viewer?
Sí. El campo Filtro conserva las reglas cuyo selector, propiedad o valor contenga el texto indicado.
¿El CSS Viewer modifica o reformatea mi archivo?
No modifica la entrada. Genera una representación estructurada independiente para lectura.
¿Se muestran reglas anidadas dentro de @media?
Sí, cuando CSSOM expone sus reglas internas se muestran con mayor sangría.
¿Por qué no aparecen los comentarios CSS?
Los comentarios no forman parte de cssRules y el visor se basa en CSSOM, por lo que se omiten.
¿Puedo descargar la vista como archivo de texto?
Sí. El botón Descargar guarda el esquema mostrado en formato .txt.
Herramientas relacionadas para desarrolladores
Módulos del procesamiento
| Módulo | Función |
|---|---|
| Esquema | Reglas y declaraciones con sangría |
| Filtro | Coincidencia por texto |
| Salida | Vista de solo lectura descargable |
Explora más herramientas de HTML, CSS y JavaScript
Consulta el centro de categoría para acceder a validadores, analizadores, generadores y utilidades relacionadas.