CSS Scan changelog
CSS Scan changelog
getcssscan.com

3.9.6

 

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.

3.9.5

 

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!

3.9.4 Update

 

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!

3.8.1 Update

 

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!

3.7 Update

 

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!

3.6 Update

 

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!

3.5 Update

 

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!

3.4 Update

 

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!

3.3 Update

 

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!

3.2 Update

 

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.