Drop a stylesheet. Format, minify, inspect.
safe · secure · no server · works offline · fast
…or just start typing at the cursor.
safe · secure · no server · works offline · fast
…or just start typing at the cursor.
OmniViewer opens a CSS file right in your browser and gives it a real
toolkit: a source formatter, a dependency-free
minifier, a selector specificity ranker, a
colour palette extractor, a stats report,
and the raw and hex views. There is no upload and no server — the file
is read directly by your browser, and every tab runs in a background Web
Worker so the page never freezes. It works the same on a hand-written
stylesheet and, best-effort, on .scss and .less
sources.
/*!…*/ license banner), collapses insignificant whitespace and tightens commas and combinators — then shows the exact bytes saved. It is conservative on purpose: whitespace inside calc() is preserved, so the result always behaves identically.(a,b,c) triple — IDs, then classes/attributes/pseudo‑classes, then types/pseudo‑elements — exactly the way the browser does, including the recursive :is()/:not()/:has() and the zero‑weight :where(). Sort by specificity or source order; !important and the universal selector are flagged.rgb(), hsl() and named — as a swatch, grouped with how many times it appears. Click a swatch to copy the value.!important count and maximum nesting depth, plus your most‑used properties.
Specificity decides which rule wins when two rules set the same property. It
is a triple compared left‑to‑right like a version number, so a
single #id (1,0,0) always beats any number of
classes. Classes, attribute selectors and pseudo‑classes fill the
middle slot; type selectors and pseudo‑elements the last; the universal
selector * and combinators count for nothing. The subtle parts
— that ::before is a type‑level pseudo‑element
while :hover is a class‑level pseudo‑class, and that
:is()/:not()/:has() take the highest
specificity of their arguments while :where() contributes zero
— are exactly where hand‑calculation goes wrong, and exactly what
the SELECTORS tab gets right. The full algorithm, in code, is in
how CSS parsing and specificity work.
OmniViewer opens every file format; CSS is one of the formats with dedicated tooling, powered by the same viewing engine as fastjsonviewer.com and hugecsv.com.
No. OmniViewer is a static page with no server-side processing: your .css file is read directly by your browser, and every tab — formatted, minify, selectors, colors and stats — runs locally in a Web Worker. The file never leaves your computer.
Specificity is a triple (a,b,c): a counts ID selectors, b counts classes, attribute selectors and pseudo-classes, and c counts type selectors and pseudo-elements. They are compared left to right, so one ID beats any number of classes. The universal selector and combinators count for nothing. The functional pseudo-classes are recursive: :is(), :not() and :has() take the highest specificity among their arguments, while :where() always contributes zero. The SELECTORS tab computes this for every selector the way a browser does and lets you sort by it.
Yes. The MINIFY tab works from the parsed rule tree, not a find-and-replace, so it can only emit valid rules. It removes comments (keeping a /*! license banner), collapses insignificant whitespace and tightens commas and combinators, but it deliberately preserves the load-bearing whitespace inside calc(), so the minified stylesheet behaves identically. It reports the exact bytes saved.
Best-effort. The .scss and .less extensions open in the CSS toolkit, and the formatter, colour extractor and stats degrade gracefully over the extra preprocessor syntax. It is a tokenizer, not a Sass/Less compiler, so it will not resolve variables, mixins or nesting into plain CSS — for that, run your preprocessor first and open the compiled output.
The raw and hex views are windowed — they read only the bytes needed to paint the screen — so they open files of effectively unlimited size. The formatted, minify, selectors, colors and stats tabs parse the document in memory, so on very large generated stylesheets they work on a bounded prefix and tell you when they do. In practice most stylesheets are small, so this rarely matters.