Say you had a dynamically generated site that has been worked on by too many people, past and present, and you now have a collection of shared stylesheets that contain over 20,000 lines of CSS. It isn't organized at all, there are some class and id-based selectors but also way too many tag-based selectors. And then say you have 100 templates that use these styles, via some controller.
Is there a tool, something that works like Firebug perhaps, that you can point at a url and it would determine all of the applicable CSS selectors for that page and dump them to a file? Basically some way to rip apart the shared stylesheets on a page by page basis.
Hands down the best tool that actually does exactly what you want by only getting the used CSS on the page and allows you to simply copy it to your clipboard is this Chrome extension CSS Used
Pretty Picture Example
I've used Dust-Me Selectors before, which is a Firefox plugin. It's very easy to use and versatile as it maintains a combined list across a number of pages of which CSS values are used.
The downside is that I wasn't able to automate it to spider an entire site, so I ended up using it just on key pages/templates of my site. It is very useful nonetheless.
http://www.sitepoint.com/dustmeselectors/
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
Contrary to the comment above Dust-Me Selectors 2.2 is compatible with Firefox 3.6 (I've just installed it).
These look promising:
Unused-CSS.com -- Service that spiders your website and emails you the results
CSS Usage -- Firebug addon
(Not for firefox but maybe this helps someone)
If you are working on chrome you can use this extension:
CSS remove and combine (https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh)
lets you download a combined css with all used styles
shows unused styles in popup window
includes generated styles
I came across Uncss-Online - Unofficial server, very convenient for testing or one-off usage! I think its the best tool I've come across.
UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS. It can be used in this way:
Copy & paste your HTML and CSS into provided boxes
Click button
Wait for magic to happen
Unused CSS is gone, take the rest and use it!
You can check their Github Page for other advanced ways to use this tool
Here's my solution using JavaScript :
var css = [];
for (var i=0; i<document.styleSheets.length; i++)
{
var sheet = document.styleSheets[i];
var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
if (rules)
{
css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */');
for (var j=0; j<rules.length; j++)
{
var rule = rules[j];
if ('cssText' in rule)
css.push(rule.cssText);
else
css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
}
}
}
var cssInline = css.join('\n')+'\n';
In the end, cssInline is a textual list of all the steelsheets of the page and their content.
Example :
/* Stylesheet : http://example.com/cache/css/javascript.css */
.javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); }
.javascript { color: rgb(172, 172, 172); }
.javascript .imp { font-weight: bold; color: red; }
/* Stylesheet : http://example.com/i/main_master.css */
html { }
body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); }
a { color: rgb(204, 0, 51); text-decoration: none; }
a:hover { color: rgb(153, 153, 153); text-decoration: none; }
.icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; }
#header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); }
#super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; }
#monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); }
#header a { color: rgb(255, 255, 255); }
#menu_2 { height: 290px; }
/* Stylesheet : [inline styles] */
.hidden { display: none; }
As of Sept 2020 this question is almost 10 years old. Most of the provided solutions no longer work or the linked projects have disappeared.
However, the question is still extremely relevant as Google now uses page speed as one of its prioritization metrics.
After doing a bunch of research into all the links listed, I found purgecss.com. This seems to be the best option to clean up unused CSS in modern web apps/SPAs using Angular, React, Vue, etc. There's also build integration with PostCSS, Webpack, Grunt, and Gulp.
Also, UnCSS still seems to be maintained. It's as powerful as PurgeCSS but not as integrated into build processes or single-page javascript apps.
SnappySnippet
There is an open source ad-on of chrome named SnappySnippet I found it lot better than other just extends the already available developer tools in chrome. You can even extract only one part of the page will all relevant css. Look at this stackoverflow post
uncss: Find Unused CSS - cli tool, uses phantomjs and executes JS on the page, can be used on URLs
grunt-uncss - only works on static files
(critical css - extracts CSS for elements visible in the browser window)
Check for PurifyCSS, and this for those who can handle CLI or Gulp/Grunt/Webpack
You can remove the unused style from single page or multiple page or from the entire project, even though the classes are being injected by javascript.
If you can google, there are tons of resources out there from which you can learn about PurifyCSS.
This Firefox extension will probably solve your problem, Dust-Me Selectors. There's also a tiny desktop app called CssCleaner or CssHelper but I was unable to find a link to it... (just have it here at my machine downloaded a long time ago for a similar task)
If you're dealing with single pages, you can also use my bookmarklet to quickly grab only the CSS that is actually used by the web page:
Go here (if this link is broken, you can also get it from pastebin).
Drag the big button under "Download Bookmarklet" onto your bookmarks toolbar.
That's it. Now whenever you want to encapsulate a static page (i.e., to make it portable or if you intend to serve it from its own iframe), just click on the bookmark and it will display all the used CSS on the current page in an overlay. Click on the shadow to close the overlay.
One good thing with this solution is that it supports responsive pages since the media queries are also extracted. As a bonus, media queries are sorted by viewport size specificity (e.g., #media (max-width: 767px) will come after #media (max-width: 1023px)).
If there's a need, I can also add an option to minify the generated CSS. Since I've only used this bookmarklet for my own needs, it hasn't been widely tested, so please report any issues in the comments.
NOTE: To make this bookmarklet work with local files in Chrome, add --allow-file-access-from-files to the Chrome shortcut target. Example:
"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
Try using this tool,which is just a simple js script
https://github.com/shashwatsahai/CSSExtractor/
This tool helps in getting the CSS from a specific page listing all sources for active styles and save it to a JSON with source as key and rules as value.
It loads all the CSS from the href links and tells all the styles applied from them.
You can save the output in a JSON file with any name.
Hmm.. I'd throw some brute force at this by extracting the various CSS selectors using a serverside parsing of the CSS file, then run each of these as a jQuery selector within the browser. Not very elegant, but should work?
The #pamekar solution worked perfectly for me, extracting the used css classes from https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css.
Note that you have to copy the code from the bootstrap.min.css file and paste it into the css section of https://uncss-online.com.
You can also use http://getcssusedinapage.com to get the CSS used in a page. It's free, fast & gives you back much details along with minimified & optimized CSS code that you can just copy + paste in your website
Related
i am kinda new to LESS, but already can see it's huge power of building huge design frameworks / systems.
I'll try to reduce my question as simple as i can, and hopefully i will got lucky with some help!
So, let's say i have build Framework (something like Bootstrap 3), that have a lot of own components, which have their own rules, variables to base etc. And than i have theme which of course can overwrite those variables to change style.
But what if i need to add some specific rules, which haven't been presented before?
// FRAMEWORK
#btn-font-size: 12px;
#btn-line-height: 1;
#btn-border: 3px;
.some-component .menu > .btn {
font-size: #btn-font-size;
line-height: #btn-line-height;
border: #btn-border solid transparent;
}
// HERE STARTS MY THEME
#btn-font-size: 16px;
#btn-border: 6px;
.some-component .menu > .btn {
margin-bottom: 12px;
letter-spacing: 0.3px;
background: #FFFFFF;
}
And you would ask, so what's the problem here? You should just get what you want with this approach.
But problem lays in my intention to build optimized code, which would be lot less in size, more readable, logical and won't ruin some of dependencies (so for some complex components i won't have to do some additional edits, just to add few things).
In plain simple words, i want it to compile like that:
// FRAMEWORK
.some-component .menu > .btn {
font-size: 16px;
line-height: 1;
border: 6px solid transparent;
margin-bottom: 12px;
letter-spacing: 0.3px;
background: #FFFFFF;
}
So the idea is to extend framework, not to overwrite classes.
To do so i was trying all kinds of mixins, extends, variables with rulsets etc, which ain't seem to help or to be enough specific.
Any ideas would be greatly appreciated, because there seem to be no native LESS solution, but maybe some tricks?)
Also see: How to keep duplicate properties in compiled CSS file when use LESS?
Since Less v2 you should use the Less Clean CSS plugin to compress the css output from Less using clean-css.
Clean-css will merge your properties automatically.
Compiling your code with lessc --clean-css code.less outputs:
.some-component .menu>.btn{font-size:16px;line-height:1;border:6px solid transparent;margin-bottom:12px;letter-spacing:.3px;background:FFFFFF}
I most likely know the answer but maybe I'm wrong so lets try.
I want to change the appearance of the comment form from Blogger (blogspot - Google blog system). Sadly, this awful little form is embedded in an iframe so my CSS styles wont work.
Also playing around with jquery is useless, of course.
I know, iframes are not meant to manipulated but maybe its possible for blogger, somehow... in a distant world.
Is there a way or just not possible as i think?
Have you tried styling your comment iframe?
you cannot style content inside iframe, but you could style your iframe .
Below is an example, add this just before closing the <head> tag.
<style type='text/css'>
#comment-editor {
background: #F9F9F9 url(http://2.bp.blogspot.com/-Bdsls_ui_vY/UX-d4NVcHiI/AAAAAAAAB3M/IIzD9w00lDs/s1600/form-gradient.gif) repeat-x scroll -1px -2px;
border: 1px solid rgb(221, 221, 221);
border-radius: 6px 6px 6px 6px;
box-shadow: 5px 5px 5px rgb(204, 204, 204);
padding: 5px;
width: 560px;
height: 224px !important;
}
</style>
So it will look like this!
Screenshot of the resulting comment form!
I never had a need to style comment section in Blogger, so I cannot help you in that regard.
But you could try to replace it with third-party comment systems like IntenseDebate.
It supports custom CSS and URL to external stylesheet and has lots of other useful features too.
If you decide to try it just remember to backup a template before making a switch in case you want to revert back.
I'm, styling a hyperlink which has an own class.
.myLink
{
display:block;
padding: 4px 9px;
margin: 0px 6px;
}
.myLink:hover
{
background-color: #E4E4E4;
padding: 4px 9px;
margin: 0px 6px;
color:#000;
}
For the removing, I have this:
.myLink, .myLink:active, .myLink:visited
{
color:#000;
text-decoration:none;
}
In IE everything is working fine, but in Firefox my link gets underlined WHILE clicking on it.
I thought, if I definde the ":active" part, it's going to work, but it isn't.
Help please.
This sounds less like a CSS issue but more like browser preferences/overrides. I'd try to add !important to the text-decoration attribute, but actually looking for the reason would be the even better solution. Best solution would be checking the origin of the style using a tool (IE's developer tools or Firefox' Firebug).
If your are using a CMS or something with pre defined CSS files, it might be a browser specific CSS file causing this, as they will override the main CSS file. Even if you are not using a CMS or something with browser specific CSS files try Firebug in Firefox, this will tell you where in the CSS file the style is coming from and what CSS file is generating it.
www.getfirebug.com
Either use !important or make sure your ".myLink, .myLink:active, .myLink:visited" rules are below in order
I'm working on a jQuery theme which includes styling for as many form elements as possible.
Initially it was developed for Webkit (Chrome). Now I want to make it work with Firefox as well.
Problem is; Firefox has problems with some Webkit-specific syntax.
For example:
input[type="range"]::-webkit-slider-thumb,
input[type=radio],
input[type=checkbox] {
-webkit-appearance: none !important;
-moz-appearance: none;
width: 1.2em;
height: 1.2em;
border: 1px solid black;
background: #666666 url(images/ui-bg_highlight-soft_50_666666_1x100.png) 50% 50% repeat-x;
}
The problem is the input[type="range"]::-webkit-slider-thumb, bit. Remove it and Firefox works fine. It also does this for other syntax like ::-webkit-file-upload-button, ::selection and all other things using the ::-webkit-... labels. It recognizes it's own ::-moz-... labels, like ::-moz-selection just fine though.
Webkit seems to just ignore the ::-moz- labels.
Is there any convenient way to make Firefox ignore the ::-webkit-... labels or otherwise deal with this problem without having to maintain multiple copies of every CSS block?
Using freshly updated versions of Chrome and Firefox.
Unfortunately, it's not possible without duplicating the declaration blocks, as the CSS spec stipulates that browsers must behave this way when encountering unrecognized selectors in CSS rules:
The selector consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a {}-block. When a user agent can't parse the selector (i.e., it is not valid CSS3), it must ignore the {}-block as well.
In this case, it's one vendor's browser being unable to recognize another vendor's prefixes, so it has to ignore the rule.
I had to read a little bit to answer this question, here are some good resources,
Gecko Style Engine Further Reading on the Engine Implementation, Still i did not see any pointers as why it would drop it, but i can give you my best guess, I think the engine is dropping the whole selector, suppose that mozilla implements -moz-slider-thumb pseudo selector and try to use it with -webkit- and it will be dropped as well.
I have seen this behavior before in all browsers, and i think its being used as a hack to target some browsers sometimes.
This will work
input[type=radio],
input[type=checkbox] {
-webkit-appearance: none !important;
-moz-appearance: none;
width: 1.2em;
height: 1.2em;
border: 1px solid black;
}
This wont
input[type="range"]::-webkit-slider-thumb,
input[type=radio],
input[type=checkbox] {
-webkit-appearance: none !important;
-moz-appearance: none;
width: 1.2em;
height: 1.2em;
border: 1px solid black;
}
or this
input[type="range"]::-moz-slider-thumb,
input[type=radio],
input[type=checkbox] {
-webkit-appearance: none !important;
-moz-appearance: none;
width: 1.2em;
height: 1.2em;
border: 1px solid black;
}
I think you will have to rewrite the properties-values on two or more different selectors, this will only affect the size of the stylesheet as the engines will keep dropping the selectors they dont own.
I really hope this helped a little bit at least.
EDIT:
As noted by user #BoltClock in the comments my guess was correct here is a link to the spec w3.org/TR/css3-syntax/#rule-sets
FYI, I ended up going for a different solution.
Since my end product is a stylesheet, I decided to use a CSS compiler to generate the .CSS file based on a source file. So far it's working fine.
I've used LessPHP because the .less format is reasonably popular and I'm familiar with PHP, but any of the other ones will do.
Note that I'm using LessPHP only for compiling a static .CSS file, so it won't be a requirement for end-users of this project unless they want to change the .less source files themselves.
I'm developing a Grails app and I need to modify some elements' style. I tried to add a css class to the main.css file but it is not working.
In /web-app/css/main.css:
.artistItem {
background-color: #444;
border: 1px solid #fff;
padding: 10px;
color: #ccc;
width: 200px;
}
In the .gsp:
<div class="artistItem">Some text</div>
But the div remains unchanged. Am I missing something?
Thanks!
This isn't a direct answer
Playing around with CSS in grails can be a little frustrating for someone that hasn't had a lot of exposure to CSS in general (I'm speaking form experience). Grails provides a nice clean CSS for a good starting point but trying to build on it without understanding CSS can cause some pain.
I would recommend looking at a couple tools like FireBug for firefox or Chrome's built in developer tools, IE also has a nice developer tool. These tools allow you to see how the browser is rendering your page and what CSS elements are being used or not used. They also expose the javascript console and several other nice debugging tools. I believe this are essential tools to help understand what the browser is doing.
I hope this helps!
Try:
.artistItem {
background-color: #444 !important;
border: 1px solid #fff !important;
padding: 10px !important;
color: #ccc !important;
width: 200px !important;
}
If that works, then you know there is another css stylesheet overriding it. If not the css is not being included properly.