
Show HN: CSS Scan 2.0 – Instantly check and copy the computed CSS of any element - guivr
https://getcssscan.com
======
iurisilvio
Nice demo in your sales page. Love it!

~~~
brunolemos
True, I really liked the landing page.

------
joshdance
This needs more upvotes. Demo is awesome, tool looks great.

------
guivr
Dear Hacker News,

Creator here, happy to answer any questions :)

As a webdeveloper, I always caught myself having to open Dev Tools when
curious about some box-shadow, border-radius or any other rule of an element I
liked on the web.

And when you use the Dev Tools to inspect, if the element matches many CSS
selectors, you might need to scroll a lot to figure out how it is styled and
which rules aren’t being overwritten. And if by any reason you want to copy
the styles, it’s a pain. Alternatively, you can use the Computed Styles tab -
but then you’ll get all the rules in longhand form, which is bloated and it
converts all units to pixel, ignoring %, em, calc(), etc and completely
breaking responsiveness.

So I built CSS Scan. With it, wherever you hover your mouse over, you
instantly get the clean, computed (but responsive) CSS of that element, and
you can copy all its rules with a single click.

 _CSS Scan is particularly useful for:_

    
    
      - Discovering how your favorite websites are styled;
      - Debugging your own code;
      - Moving your codebase;
      - Copying specific elements from frameworks/themes/templates to use them without importing huge CSS files.
    

It's a browser extension compatible with Firefox and Chrome. I'm working on
the Safari add-on, which will be released in May.

 _How does it works, technically?_

This isn't as simple as doing something like `el.getComputedStyle`.

As you may already know, this one doesn't read :hover styles (while CSS Scan
does) and returns a lot of rules that are only for the browser rendering
purposes. Even if you filter it, you'll still get the measuring units only in
pixels, whereas with CSS Scan, you get the original unit used (rem, em, % or
px), because it gets the CSS through a different way. I’m going to explain it
below.

CSS Scan does an XMLHttpRequest for all the stylesheets loaded and add them
into an iframe (because of CORS), then check if the current element selector
matches the CSS selector, one by one; then checks each selector specificity,
rearrange, clean, sort alphabetically and finally caches the processed and
optimized CSS with `nano-memoize` for speed.

The extension optimizes all the final CSS with the use of 3 libraries
together:

    
    
      - CSSO;
      - Shrthnd (I've made some local changes on this one to add more shorthand rules support);
      - PostCSS.
    

By the way, if you have any ideas or suggestions to improve this flow, I'm
open to hearing from you!

Since the first version, which was launched 9 months ago, I’ve implemented new
features, bug fixes, and general improvements:

    
    
      + Code syntax highlighting
      + Show rendered font
      + Show element dimensions
      + Option to pin the box
      + Shortcuts (Lots of people asked)
      + Option to move the UI buttons to the bottom
      + Option to pause the scanner
      + Option to truncate classes names
      + Show :hover styles separated
      + Copy :hover styles merged or separated
      + Traverse the element and scan the parent
      + Identifies when elements are being overlapped
      + Now it works on iframes!
      + More shorthand rules support
      + i18n: Chinese (simplified and traditional) and Portuguese
      + Redesign UI and landing page
    
    
    
    

This is a work that has taken me almost 1 year so far, so I’m excited to share
with you and genuinely interested in hearing what you think about it.

SPECIAL: I’m also giving you an exclusive HN mates 25% discount limited for
the first 10 sales from here. To use it, buy it from this URL:
[https://gum.co/cssscan/hn-mates](https://gum.co/cssscan/hn-mates) :)

P.S.: Please keep in mind that this extension is only for use cases when you
want to have an overall vision of the styles; it's far from being a full
alternative to Inspect Element.

P.S. 2: The first version took me precisely 50 hours and 17 minutes to
develop. I recorded all the development and made a nice speed video! You can
check it at
[https://www.youtube.com/watch?v=OtsNNXpXcYs](https://www.youtube.com/watch?v=OtsNNXpXcYs)

