CSS Scan changelog getcssscan.com

Fix

🎯 Fix copying elements with click after re-targeting using arrow keys

If you use arrow keys (up and down) to navigate through the DOM tree and then click, it will now copy the right element.

Fix

✅ Fix the extension on some websites

The extension wasn't opening correctly on some websites, and now it's fixed. Thanks to Clint and Jeremy!

New

📱💻🖥 Copy, inspect, and edit Media Queries

Now you can copy, inspect, and edit CSS media queries.

You can also see which media queries currently match your device and which don't.

You'll get all media queries when copying or exporting elements in a single click.

New

🚀 Edit pseudo-classes, pseudo-elements, and keyframes!

Edit everything on the Code Editor, including pseudo-classes such as :hover, pseudo-elements like :before, and @keyframes animations.

New

✨ 2 new ways of copying selectors: Original or Smartly Generated

You can now choose how you want CSS Scan to copy the CSS selectors of the elements.

It can copy the original CSS selectors or smartly generate selectors on the fly that will not collide with each other (as in previous versions).

You'll find these options on the Options menu, under "Copy preferences for CSS selectors".

Improvement

✏️ A complete rewrite of the Inspect, Copy, and Export to Codepen features

I've entirely rewritten the code for the most important part of CSS Scan: the part where it gets the CSS code of elements.

It is infinitely more precise and reliable and captures Inherited styles with their original units (not everything in pixels).

Many optimizations and checks are done on every selector so that the exported or copied code gives you an exact copy of the element most of the time.

However, it can be slower than the last versions (because it checks much more things). So I'll try to fix that in future updates.

I've been working on this inspection algorithm for three years since the first CSS Scan version, and it has become amazingly advanced. Thanks for supporting me all this time <3

Saw an element that is not being copied correctly? Please let me know here, and I'll fix it for you :)

Improvement

🟦 New Options Menu

I've removed, added, and re-ordered some options to make CSS Scan even easier to use for you.

Improvement

🏁 Better translations

Some translations were missing and are now fixed. If any translation is wrong, please let me know here. Or, if you want to help me translate CSS Scan to your language, click here.

Improvement

👨‍💻 A better Code Editor

When creating new lines on the Code Editor, the caret will stay in the correct position. This significantly improves the experience when writing code.

Fix

🐞 Bug fixes

I've fixed 6 bugs. Enjoy a more stable tool!

💖 Thanks for supporting my work!

New

✏️ Changelog

With the new changelog, you can check every CSS Scan update since version 2.7.1. Check it here.

Improvement

✌️ Full Tailwind support

Now Tailwind CSS selectors are copied the right way.

Improvement

👩‍🔬 CSS inspection algorithm improvements

Better than ever, the generated CSS code when copying and inspecting elements is now more precise.

Improvement

🔍 More specific CSS selectors when copying or exporting elements

CSS Scan now generates more specific CSS selectors for child elements, so the result you get when exporting elements to Codepen, for example, is more similar to the original elements.

Improvement

🏠 Scan localhost websites in Safari (and all other browsers)

Now you can scan the CSS of localhost websites in all extensions (Chrome, Firefox, and Safari - thanks to Paul!).

Fix

🐞 Bug fixes

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

💖 Thanks for supporting our work!

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.