Skip to content

1ureka/user-agent-style

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

UA Style Inspector

A zero-dependency, client-side tool that reveals the User-Agent default stylesheet of your current browser. It uses getComputedStyle() on 80+ HTML elements and presents the results in a searchable, sortable, and exportable table — no framework, no build step.

Live Demo →

Features

  • 80+ elements across 9 categories: Headings, Text Content, Inline Text, Lists, Tables, Forms, Sections, Embedded, and Misc
  • 30+ CSS properties organized into groups (Layout, Box Model, Typography, Text, Visual, List & Table, Bidi)
  • Preset chips for quick column switching between property groups
  • Column picker for fine-grained control over visible properties
  • Category filter to narrow down to a specific element group
  • Full-text search across tag names and property values
  • Sortable columns — click any header to sort
  • Expandable detail panel — click any row to see all computed styles, grouped by category
  • Dark / Light theme with system preference detection and persistence
  • Export results as JSON or CSV
  • Fully static — works on GitHub Pages, or any static host

How It Works

A hidden sandbox <div> (outside the app's styled scope) hosts test elements. For each registered element, the tool creates it inside the sandbox, reads all target properties via getComputedStyle(), then removes it. The app's own styles are scoped under a [data-ua-app] attribute to avoid interfering with the UA style readings.

About

Instantly inspect User Agent default styles for 80+ HTML elements in your current browser.

Topics

Resources

Stars

Watchers

Forks

Contributors