Is there a simple way to save an HTML page that has an external stylesheet (1 or more) referenced but force all of the rules to be inserted into the page itself, inline? So basically I want to move all external rules onto the elements that they affect themselves.
For what it's worth, I'm using nearly every major browser (incase the solution is browser-specific), and I'm on Windows (incase it's OS-specific).
I'm assuming you've seen the online tools that are available like this one? This online tool (which I have not tested but looks like it works) gives you the option of providing a url or source code and shows warnings for cross-browser compatibilities with your styles.
I use a tool that does something like that, but it was written for Ruby and TextMate for Mac. It is released by Campaign Monitor as a way of preparing HTML emails. It brings all the rules from the stylesheet and makes them inline styles.
It might give you a good start. I'll keep looking.
TextMate Email Bundle
The piece that does the heavy lifting is the TamTam RubyGem which brings the CSS inline. However, it seems to only support one style element (not link elements). If you could work with those restrictions, you could get it to work on Windows using Ruby and a ruby script file. Not quite drag and drop I'm afraid.
i use chrome extension Save Page WE
Related
If you want to look at the CSS of other people's websites (to steal learn from them), Firebug lets you inspect the prettified CSS:
But in Chrome 16, you only get the minified CSS as it was served out:
Is there a way to get Chrome to prettify the CSS?
In the newer versions there is a "format" button that prettifies the source:
(only just realised myself :P )
The Developer's console shows the file as served. If you want a human-readable version, copy-paste the code to http://www.codebeautifier.com/.
If you use the Elements tab, the applied CSS properties are also shown per element.
I recommend Quick Source Viewer, which is an extension to chrome and requires no human copy-pasting (acts sort of like an extra chrome dev-tool).
It can show you the source of the current page formatted and colour coded.
It's pretty powerful, showing all 'sources' of the page, be it css, js or html. Even things like inline css/js can be viewed individually (with injected code highlighted). And the best part is it prettifies all of them, even the css (which chrome's dev tools still refuses to do).
You may want to checkout Pretty Print: https://chrome.google.com/webstore/detail/prettyprint/nipdlgebaanapcphbcidpmmmkcecpkhg?hl=en
After installing, when you view a minified CSS or JS file, it will appear (after a moment) un-minified.
I am implementing the Summernote Editor which rely on Bootstrap, but I usse my own custom stylesheet. This gives me 2 problems:
It breaks my design and the Bootstrap file is so long it is difficult to find the exact selectors causing the trouble.
It loads a 120kB file, when maybe just 20-30 is necessary (the part actually needed for the editor to render nice).
Does anyone know a tool (maybe online) to compare the actual used tags, classes etc. in the source code with the attached stylesheet pointing out what is in use?
Could also be helpful after a long developing proces, where you have made a lot of editing and you maybe ended up with a lot of un-used code.
Please right click and select Inspect Element while you are on your webpage on any browser.
You could use purifyCSS, which would require grunt or alike. There's this site https://unused-css.com/, which would require a URL of your site, it then would scan just a single page of that site. There's also this tool: https://sourceforge.net/projects/cssscanner/, which gives you list of used and unused selectors, but you need a machine running Windows to use.
After reading up on critical path css, I was wondering how I could embed this into my builds. Are there any finished tools out there that does this already? The process needs to be automatable to avoid the inline CSS getting out of sync with other CSS.
If there is no such tool today, I can see how I could make one (say a grunt plugin), using this experimental script together with PhantomJS, but there is no point in re-inventing the wheel (if there is one already).
I had exactly the same idea - if you're still looking, I built exactly what we both wanted:
Critical Path CSS Generator. (I didn't end up using the tool you linked too since it misses psuedo selectors, media queries, non -webkit prefixed css rules etc).
More documentation is on the way, but basically just install PhantomJS first and then call the script like this:
phantomjs penthouse.js http://youSite.com/page1 yourSite.css > yourSite-criticalcss-page1.css
phantomjs penthouse.js http://youSite.com/page2 yourSite.css > yourSite-criticalcss-page2.css
You can pass in minified CSS as well as unminified - I don't modify the CSS except for removing unmatched selectors, rules (and I remove comments).
Use IISpeed or the Apache/Nginx PageSpeed modules
Google maintains some wonderful modules called PageSpeed that works for Apache and Nginx front servers. For those on .NET, just use IISpeed, the IIS equivalent of the PageSpeed modules. It is commercial and costs 100$, but is quite marvelous from a front-end perspective in what it does, and (among lots of other stuff) handles the main problem when using Penthouse: dealing with changing/dynamic content generation.
It works by injecting some javascript into the head of some of the first visitors to any page, analysing which css rules are actually being used. Then, after some rounds, it then collects these css rules and injects them as inline css in the head of that page for all subsequent visitors.
This is totally automatic and works on any ASP.NET page. You then avoid having to manually run Penthouse (mentioned above) on every page you like to speed up, and remembering to keep that css up to date (otherwise it will be out of date at some time, messing up your styles).
Penthouse is still great for pages where the content is mostly static.
I'd like to compare my CSS files with the classes that I'm actually using in the site, and generate a new CSS file that contains only those classes. The point being to get rid of classes that I'm not using.
I previously used the Dust Me Selectors extension for FireFox to find the used and unused CSS selectors but it doesn't work in FireFox 6 any more.
Are there any alternatives?
When you put your site to GT-Metrix. Than you can see the un-used CSS selectors. Or you can do it with Google pagespeed.
You can try this online tool or use Google Chrome's developer tool(installed by default, no extension needed), which has audits tab to display unused css selectors on current page... but i dont think there is a way to have it done automatically for you...
You can try CSS Usage extension for Firebug. It works lika a charm, but it requires manual work https://addons.mozilla.org/en-US/firefox/addon/css-usage/
This system claim to do that:
http://sourceforge.net/projects/cssmerge/?source=dlp
But I couldn't make it work, though.
So here it goes some manual tools to compare the files. It is not as fast as an automatic solution, but would make it faster than going by visual comparison alone.
http://www.diffchecker.com/
http://www.araxis.com/merge_mac/index.html
http://csscompare.codeplex.com/
I know it's easy to get the CSS that is applied to a single node in HTML, using tools like the Firebug extension for Firefox, etc.
But is there a way to see all the CSS that is in effect on an entire page, or a larger fragment of HTML?
Specifically, we are cleaning up our one extremely large CSS file into smaller modules and would like to find out what CSS is used on a certain page, so we can move all the non-used CSS to another module.
Thank you all! These are the various solutions I've looked at now from your recommendations (collected here for people with the same problem):
Dust-Me Selectors (Firefox Add-on)
This does exactly what I need. Lists used and unused CSS selectors (for the current page, or the entire site, after spidering), and can dump both lists as CSV text. Great.
https://addons.mozilla.org/firefox/addon/5392/
CSS Usage (Firefox Add-on)
https://addons.mozilla.org/firefox/addon/10704/
WARI - Web Application Resource Inspector (Java tool)
Appears to only handle static code, not dynamically generated HTML as is present in most web applications that use ajax – which, unfortunately, makes it useless, at least for me
http://wari.konem.net/
CSS Redundancy Checker (Ruby script, requires Rubygems and Hpricot)
http://code.google.com/p/css-redundancy-checker/
TopStyle (Windows-only application, $79.95 (!!))
http://svanas.dynip.com/topstyle/
These are all cross-platform and free, except for TopStyle.
As far as tools go, you could use the css usage plugin for firebug. It will analyze pages for used css.
Or were you looking for a way to do it more programmaticly?
You can try Dust-Me Selectors, it's add-on for firefox, if you use firebug, as you stated, you may find useful CSS Usage.