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.
If you use arrow keys (up and down) to navigate through the DOM tree and then click, it will now copy the right element.
The extension wasn't opening correctly on some websites, and now it's fixed. Thanks to Clint and Jeremy!
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.
Edit everything on the Code Editor, including pseudo-classes such as :hover, pseudo-elements like :before, and @keyframes animations.
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".
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 :)
I've removed, added, and re-ordered some options to make CSS Scan even easier to use for you.
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.
When creating new lines on the Code Editor, the caret will stay in the correct position. This significantly improves the experience when writing code.
I've fixed 6 bugs. Enjoy a more stable tool!
๐ Thanks for supporting my work!
With the new changelog, you can check every CSS Scan update since version 2.7.1. Check it here.
Now Tailwind CSS selectors are copied the right way.
Better than ever, the generated CSS code when copying and inspecting elements is now more precise.
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.
Now you can scan the CSS of localhost websites in all extensions (Chrome, Firefox, and Safari - thanks to Paul!).
We've fixed 4 bugs. Enjoy a more stable tool!
๐ Thanks for supporting our work!
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).
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.
You'll notice that the generated code is now more precise and reliable.
We've fixed 3 bugs. Enjoy a more stable tool!
๐ Thanks for supporting our work!
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.
We've fixed 2 bugs. Enjoy a more stable tool!
๐ Thanks for supporting our work!
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".
We've fixed 2 bugs. Enjoy a more stable tool!
๐ Thanks for supporting our work!
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).
We've fixed 2 bugs. Enjoy a more stable tool!
๐ Thanks for supporting our work!
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.
CSS Scan now works with Tailwind - it gets and copies the values for pseudo-classes the right way.
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.
You'll notice that the generated code is now more precise and reliable.
ใใใซใกใฏ! CSS Scan is now available in Japanese thanks to @hiyukoim!
๐ Thanks for supporting our work!
The easiest way to check the alignments of elements. You can disable this option on "Options > Display > Guidelines".
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.
If you open the extension with the shortcut, the scan will start as enabled instead of disabled. Thanks, Wilbert and Tim!
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.
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.