CSS Scan changelog getcssscan.com

New

📱🖥 Copy all media queries with one click

Now you can copy all media queries of child elements (make sure you toggle "Child elements CSS" > "Copy it" on your settings). You can also inspect an element's media queries at the "Sources" tab (when pinning the CSS window).

Improvement

🏡 Scan local files (Chrome)

You can now scan pages that are in your file system (file:// and C://). There's no need to turn on a local server or deploy it.

Improvement

👩‍🔬 CSS inspection algorithm improvements

You'll notice that the generated code is now more precise and reliable.

Fix

🐞 Bug fixes

We've fixed 3 bugs. Enjoy a more stable tool!

💖 Thanks for supporting our work!

New

📦 Copy the CSS and HTML of the child elements

Now you can copy the HTML and CSS of all the child elements - instead of just copying the selected element!

To toggle this option, go to Settings > Child elements CSS and choose "Copy it".

This option is selected by default when exporting elements to Codepen.

Fix

🐞 Bug fixes

We've fixed 2 bugs. Enjoy a more stable tool!

💖 Thanks for supporting our work!

New

🔍 See where the CSS comes from (files and selectors)

Now you can see from which selectors and CSS files a rule is coming from.

When pinning an element with the space bar key, click on the new tab "Sources".

Fix

🐞 Bug fixes

We've fixed 2 bugs. Enjoy a more stable tool!

💖 Thanks for supporting our work!

New

🌳 DOM tree: inspect or copy any element

Now you can precisely select any element from the page.

If the element you're hovering is not the one you want to inspect, use your keyboard's ▲ up and ▼ down arrow keys to navigate through the HTML tree (to scan parent, siblings, or child elements).

Fix

🐞 Bug fixes

We've fixed 2 bugs. Enjoy a more stable tool!

💖 Thanks for supporting our work!

New

⚙️ HTML attributes

Now you can scan the HTML attributes of any element! Useful to check if your images have the attribute "alt", for example.

Pin the CSS window (with the space bar key) and click on it to expand, or have it always expanded by toggling on your Options > Display > HTML attributes expanded.

New

🤝 Tailwind pseudo-classes support

CSS Scan now works with Tailwind - it gets and copies the values for pseudo-classes the right way.

Fix

✌️ Fix CORS

There was a new Chrome update that limited CSS Scan's scan feature (mostly on big websites). We've now updated our code to work with any website's CORS settings.

Improvement

👩‍🔬 CSS inspection algorithm improvements

You'll notice that the generated code is now more precise and reliable.

Improvement

🗣 Japanese translation

こんにちは! CSS Scan is now available in Japanese thanks to @hiyukoim!

💖 Thanks for supporting our work!

New

📏 Guidelines

The easiest way to check the alignments of elements. You can disable this option on "Options > Display > Guidelines".

New

💡 Tooltips

We've added tooltips to the buttons (icons) on pinned CSS windows so you know what you can do with them: export elements to Codepen, copy CSS code or close the window.

Fix

😉 Scan always starts enabled

If you open the extension with the shortcut, the scan will start as enabled instead of disabled. Thanks, Wilbert and Tim!

Improvement

⚙️ Export to Codepen with preprocessor setted

If your settings are to copy pseudo-classes and pseudo-elements as nested, when you export elements to Codepen, it'll automatically export it with SCSS setted as the CSS preprocessor.

Improvement

🗣 New translations and improvements

CSS Scan is now available in Romanian (thanks to Alina), and Telugu (thanks to Mani).

The Italian translation was also improved (thanks to Emanuele).

💖 Thank you for supporting our work! We'll keep working hard on making your life easier and your workflow faster.

New

🎉 Support for all pseudo-classes and pseudo-elements

CSS Scan now gets all pseudo-classes (:active, :focus, etc), and pseudo-elements (:before, :after, etc) of an element.

This means that the code you inspect/copy will be much more complete than before.

Improvement

👩‍🔬 CSS inspection algorithm improvements

You'll notice that the generated code is now much more precise and reliable.

💖 Thank you for supporting our work!

New

🧬 Support for inherited styles

Now CSS Scan gets inherited styles, like font-size, color, etc.

This gives you a more complete and reliable code, delivering better results.

You can disable this option anytime on the Options menu.

New

🎁 New "What's New" button

Here's where we will keep you updated on what we've worked on and improved :)

Improvement

🚀 Performance improvement

You'll notice that the extension is now faster. The performance was improved by up to 10%!

New

📋 Button to copy the CSS code from pinned CSS windows

Copy edited code directly from the pinned CSS windows.

New

🖱 Option to pin on click

You can now choose on your Settings what should happen when you click on an element: copy the CSS or pin the CSS window (result).

Improvement

🧠 Ignore Elementor's and Wordpress UIs

CSS Scan ignores Elementor's and Wordpress UIs when inspecting - so that you don't need to pause it every time.

New

🎨 Color previews / hints / highlights

Now where there's color syntaxes on the code, there will be small boxes on its left side showing the color as a preview / hint / highlight.

Improvement

👩‍🔬 CSS inspection algorithm improvements

You'll notice that the generated code is now more precise and reliable.