Show HN: CSS Scan 2.0 – Instantly check and copy the computed CSS of any element

by guivr • 7 years ago

19 5 7 years ago

guivr2• 7 years ago

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 :)

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

iurisilvio• 7 years ago

Nice demo in your sales page. Love it!

brunolemos• 7 years ago

True, I really liked the landing page.

guivr2• 7 years ago

Thanks, glad you liked it!

joshdance• 7 years ago

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

Show HN: CSS Scan 2.0 – Instantly check and copy the computed CSS of any element

Related Stories