14 comments

  • Guilherme Rizzo, almost 5 years ago

    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!

    6 points
  • Johnny Bad, almost 5 years ago

    A big time-saver for me and my team. Thanks a lot!

    1 point
  • helena domo, almost 5 years ago

    Well done! I was looking for something that works as good as this! Congrats!

    1 point
  • Nathan CooperNathan Cooper, almost 5 years ago

    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.

    1 point
    • Guilherme Rizzo, almost 5 years ago

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

      0 points
      • Nathan CooperNathan Cooper, almost 5 years ago

        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

        1 point
        • Guilherme Rizzo, almost 5 years ago

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

          1 point
        • Guilherme Rizzo, almost 5 years ago

          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!

          1 point
  • Alejandro DorantesAlejandro Dorantes, almost 5 years ago

    NICE

    1 point
  • Thomas Michael SemmlerThomas Michael Semmler, almost 5 years ago

    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.

    0 points