CSS Dig for Chrome
This Chrome Extension looks for stylesheets and style blocks on the webpage it's run against and groups declarations together for easy inspection. For example, you can see how many colors are used and how often. This can help you consolidate your styles and help with refactors.
It works on most websites but there are some limitations.
@import: CSS in
- Content Security Policies: In some situations CSS Dig has make AJAX calls to retrieve the contents of the CSS files. Sites with strict Content Security Policies can block them. For example, facebook.com and github.com.
- On sites with lots of external stylesheets it may take a few seconds to collect all the CSS.
Unable to scroll
When using this on the left side panel I am unable to scroll top to bottom. On the right panel I am able to scroll both ways.
Is anyone else noticing this issue?
"undefined is not a function" Error in Console
When I use CSS Dig on http://www.dvorakmotors.com/ using the steps below, it throws the following error in the console:
undefined is not a function
The error happens when you try selecting a rule on the left and the right side is supposed to narrow in on the selector that it's part of. I don't see this behavior on every site I visit, but this happened to be the first site I used CSS Dig on, hence my Twitter exchange with you about a feature addition.
Steps to recreate:
Let me know if I can provide more information.
Fixed a bug where perspective prop on body of src page pushed modal offscreen
Fixes #6. This is actually a little bit of a hack to fix an issue that might be with WebKit, where children whose parents have the perspective CSS prop don't calculate their height properly (demo). There's an issue on the WebKit bug tracker if you want to make some noise about it.
Show colors for other color-related properties
While it shows the color assigned for background-color and color properties, it doesn't show the color box for the following CSS properties:
-webkit-tap-highlight-color border-bottom-color border-left-color border-right-color border-top-color border-color
Uncaught TypeError: Cannot read property 'substring' of undefined
Had some issues getting this to work. Would simply flash the CSSDig symbol in the center of the screen with the white transparent overlay, and allowing me to open multiple of these.
To fix this, I encapsulated lines 723 through 754 of cssdig.js in an if(value != undefined) block, which solved this issue. However, the selectors panel is still broken, but I can still use most of the extension.
Attached are images of these two issues. In the first image some information is redacted, but it hides nothing of importance to the bug.
[suggestion] Allow combining vendor-prefixed CSS
Thanks for the great work on this extension.
I have a suggestion for how to make it even better. There should be a way to compare vendor-prefixed CSS with the non-prefixed equivalents (if found) and hide the vendored versions.
For example, one of my sites is full of things like this:
While it is sometimes useful to see all the prefixed items, I feel like it more-often just adds noise, given that there's not much you can do about them until you decide to stop supporting the browsers that need them.