日本語English

CSS Analyzer (CSS Studio)

Paste CSS or drop a .css file to see the most specific selectors, CSS custom properties that are defined but never used, var() calls with no definition, every color in use, and !important, repeated declarations and empty rules. This tool only reads; it never changes your input.

On-device・No uploadMobile friendlyWorks offline

Your files and input are processed only inside your browser on this device and are never uploaded to our servers.

CSS

Drop a CSS file

.css or .txt, up to 5 MB.Accepts: CSS / TXTUp to 5 MB per filePaste (Ctrl+V) also works

Paste CSS or choose a file.

Result

Results appear here. Paste CSS and press Analyze.

Calculate one selector

e.g. ul li.red, #main > a:not(.skip)

Type a selector to see its specificity here.

How to use

  1. Paste CSS into the input, or choose a .css file (drag and drop also works).

  2. Press Analyze. Ctrl+Enter (⌘+Enter on Mac) also runs it. A sample is available to try first.

  3. Overview lists rule, selector and declaration counts and every @media, @supports, @layer and @container. Specificity shows the highest selectors and their distribution; the calculator gives (a,b,c) for any selector you type.

  4. Variables matches definitions with uses. Colors groups the same color written in different notations.

  5. Issues lists !important, duplicate selectors and declarations, empty rules, vendor-prefix-only rules and syntax problems, with line numbers.

What it does

Own tokenizer

Comments, strings and url() are skipped as tokens, not as text, and rules, at-rules and declarations are counted separately. Nested rules are supported (the thinking of CSS Syntax Level 3).

Specificity per Selectors Level 4

#id counts as a, .class, [attribute] and :pseudo-class as b, and type selectors and ::pseudo-elements as c. :is(), :not() and :has() count their most specific argument and :where() counts 0 (Selectors Level 4 §17).

Variables matched by definition and use

Lists --name definitions, var(--name) uses and whether a fallback is given. Variables defined but never used are shown apart from var() calls with no definition.

Same color, one row

#fff, #ffffff, rgb(255 255 255) and white are grouped as one color, with the count and the notations as written. Transparency is kept apart.

Problems as leads, not verdicts

Shows !important, duplicate selectors, duplicate declarations, empty rules, vendor-prefix-only rules and missing closing braces with line numbers. These are things to check, not confirmed errors.

Use cases

  • Check whether !important or repeated declarations keep growing
  • Clean up CSS custom properties that nothing uses
  • Find selectors so specific that they are hard to override
  • Build a list of the colors a site uses
  • Locate a missing closing brace in a broken stylesheet

Capability matrix

FeatureSupportNotes
Counts of rules, selectors and declarationsSupportedIncludes nested rules
List of @media, @supports, @layer and @containerSupported—
Selector specificity (a,b,c)SupportedSelectors Level 4 §17. A nested & does not add its parent’s specificity
CSS variables (--name): definitions, uses and fallbacksSupportedMatched within the stylesheet you paste only
Color list (#rgb, rgb(), hsl(), named colors)Supportedoklch(), lab() and color-mix() are not counted
Formatting and minifying CSSNot supportedUse code_formatter
Fetching @import targets or external CSSNot supportedNo network access. Paste the CSS after it is combined
Parsing Sass, Less or PostCSS syntaxNot supportedGive it compiled, plain CSS
Full syntax checking against every CSS rulePartialOnly major problems: missing braces, unclosed strings and comments, shown as leads
Variables set from JavaScript with setPropertyNot supportedNot visible here, so they may appear as unused

Limits & notes

  • Input is limited to 5 MB (UTF-8). Larger files are not read.
  • Top specificity selectors and each issue list show up to 200 items; counts include every item.
  • The single-selector calculator accepts up to 2,000 characters.
  • Variables are matched only within the CSS you paste.

Privacy & safety

The CSS you enter is analyzed only in your browser. It is never sent anywhere, and file names are not recorded.

FAQ

What is CSS specificity (a,b,c)?
It is a three-part weight for a selector. a counts #id, b counts .class, [attribute] and :pseudo-class, and c counts type selectors and ::pseudo-elements. The higher value wins; with equal values, the rule written later wins.
How are :is(), :where() and :not() counted?
:is(), :not() and :has() count their most specific argument, and :where() counts as 0 (Selectors Level 4). :nth-child(… of S) adds the weight of S. A nested & in CSS nesting is counted without its parent’s specificity.
How does it decide a CSS variable is unused?
A variable that is defined (--name:) in the stylesheet you paste and never used in var(--name) is listed as unused. Variables set or read by JavaScript or other files can appear unused here.
Which color notations are counted?
#rgb, #rgba, #rrggbb, #rrggbbaa, rgb(), rgba(), hsl(), hsla() and the 148 CSS named colors. Same colors are grouped under #rrggbb, and colors with transparency get their own row. oklch() and lab() are not counted.
Is my CSS sent to a server?
No. The analysis runs in a Web Worker inside your browser and makes no network requests. Nothing you paste or the file name is recorded.

Code Formatter — Format & Minify

Paste code to format it with the language auto-detected. Choose indent, line width, semicolons, quotes and trailing commas; JavaScript, CSS and HTML can also be minified with before/after size and reduction. Your code never leaves the browser.

No upload

Color Converter, Contrast Checker & Palettes (Color Studio)

Type one color and see it in HEX, RGB, HSL, HWB, OKLCH and approximate CMYK. Check WCAG contrast against a background (AA/AAA), generate complementary or triadic schemes and a 50–950 OKLCH scale, preview how a palette looks with color-vision deficiency, and export CSS variables or Tailwind config. Nothing leaves your device.

No upload

Font Studio

Drop a font file to see its names, glyph count and character coverage (JIS levels, jōyō kanji and Unicode blocks), and preview any text. Compare fonts side by side, convert to WOFF2 or WOFF, or keep only the characters you list. Everything runs in your browser and the font is never uploaded.

No upload

HTML Inspector

Paste a page’s HTML to review SEO and accessibility basics at a glance: heading structure, meta tags, Open Graph, image alt text, links and structured data — with a preview of how it may look in search and on social media.

No upload

robots.txt Tester

Paste a robots.txt to see instantly whether a URL is allowed or blocked for Googlebot or AI crawlers, and which line decided it. Misspellings and directives Google ignores are flagged too.

No upload

XML Sitemap Generator & Validator

Paste a list of URLs to create a correctly written sitemap.xml, or paste an existing sitemap to find the errors that stop Google from reading it — with line numbers.

No upload

Last updated: