Thanks, Salatiel!

Glad to hear that, Chris! Hope you have a great experience.

Let me know if you need help or have any feedback :)

Hey Tekeste, thanks for posting!

Dear Designer News, creator here, happy to answer any questions and talk a little about the design process of CSS Scan :)

The problem

While working with web development, I've always found myself crushing my head to understand why the CSS was not working, looking through thousands of CSS rules on the browsers’ Dev Tools, scrolling and scrolling...

And while surfing the web, sometimes I just wanted to get 1 thing from a framework (specifically Bootstrap’s alert) or am curious about what is the amazing box-shadow, font, border-radius, etc of an element I just saw.

The solution

A browser extension that when activated on a page, enables you to instantly visualize the CSS of any element you hover over and let you copy its entire rules with a single click.

Check out the free demo on the website: https://getcssscan.com

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

The process

I have to say that I was feeling like “just do it”, but anyway I decided to validate the problem and solution.

The solution I had in mind was just like the extension WhatFont? but for checking CSS.

So I made an image preview of how the extension would look, and reached out Facebook and Telegram developers groups, and sent them a Typeform with a few basic questions:

1. From 0 to 10, how much did you like this idea?
2. Which feature is more useful for you? (2 options: check the CSS / copy the CSS)
3. Would you pay for this?

The results were convinceable enough to make me start building it.

My audience was not too much defined, I just had “designers and front-enders” in mind :)

To work across any OS, I decided to build it as a browser extension.

And then coded for precisely 50 hours and 17 minutes from the first line of code to the first version - luckily I recorded all this and made a nice speed video, you can check it here: https://www.youtube.com/watch?v=OtsNNXpXcYs

The 2.0

CSS Scan 1.0 was launched 9 months ago, and since then I’ve made a lot of new features, bug fixes, and improvements, the most important ones:

• Code syntax highlighting for readability
• UI and Landing Page redesign
• Show element dimensions and rendered font
• Show :hover styles separated
• Option to traverse overlapping elements
• Works on iframe
• Added shortcuts (lots of people asked for it)

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.

I am all ears if any of you have any ideas or feedback.

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

Thank you!

Nathan, I have good news! Just updated the app. Now you can copy the selector name! If you use Chrome, the extension will update itself. On Firefox, I'll implement auto-update functionality tomorrow. More updates to come!

That's nice to hear, Johnny! Wish you and your team the best.

Hey Nathan, I'm looking forward to implementing your first suggestion today! You'll be able to copy the entire selector. :)

Thank you, Helena! I'm glad you like it :)

Thanks, Alejandro!

That's nice to hear, Nathan! :) Any suggestions for updates?

Hey Designer News! Creator here, happy to answer any questions! :)

The problem

While working with web development, you've probably found yourself scrolling through inspect element a lot or looking for the computed styles tab on your browsers developer tools (and probably found some CSS properties that you've never heard before haha).

Sometimes you just want to get 1 thing from a framework or are curious about what is the border-radius, box-shadow, etc of an element you just saw on the internet.

The solution

This tool is faster than inspect element and gives all of the styles with their shorthands. This means you don't get messy ... or overwritten styles. Want to copy them? Cool, you just have to click! Check out the demo on the website:

https://guivr.github.io/cssscan

3 Products in 3 Months

This is my last product of the challenge I made up for myself to ship 3 products in 3 months.

CSS Scan took me 50 hours and 17 minutes to develop. Inspired by @levelsio, I recorded all the development and made a timelapse video of it. Check it out! https://www.youtube.com/watch?v=OtsNNXpXcYs

Features:

• Instantly check computed styles
• Click to copy
• Check the real size of elements
• Outline all elements
• Ignore box-sizing or hover styles

Price

I decided to price it as Pay what you want.

I would love to hear from you all how you can have a better experience using CSS Scan! Thank you!