Hey Designer News! Creator here, happy to answer any questions! :)
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.
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:
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
- Instantly check computed styles
- Click to copy
- Check the real size of elements
- Outline all elements
- Ignore box-sizing or hover styles
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!
A big time-saver for me and my team. Thanks a lot!
That's nice to hear, Johnny! Wish you and your team the best.
Well done! I was looking for something that works as good as this! Congrats!
Thank you, Helena! I'm glad you like it :)
I use Chrome Dev Tools often. No longer do I have to scroll the lists of element and computed styles. This is a big time-saver for me. Thank you.
That's nice to hear, Nathan! :) Any suggestions for updates?
A toggle to include the class along with the properties/values when copied, i.e., the entire selector.
If possible to do the above, maybe include also parent, sibling, inherited, etc. styles that also affect the selected element's appearance.
For pre-processors, include the location of the selected style in the source files; source maps I believe.
You're welcome and I look forward to future updates. Thanks
Hey Nathan, I'm looking forward to implementing your first suggestion today! You'll be able to copy the entire selector. :)
Hi Guilherme, that's great, 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!
Interesting. But I have to open up dev tools anyway, plus, if you are developing, you are probably having the devtools open all the time anyway. Great tool anyway though, there are tons of use cases.