How to merge and show all *.css statements for web page?

[pstover]

Assume a web page defines multiple stylesheets in the way similar to

Code: Select all

<link rel="stylesheet" id="mycss1" href="http://www.foobar.net/aaa/bbb/min.css?ver=1.9" type="text/css" media="all">

<link rel="stylesheet" id="mycss2" href="http://www.foobar.net/ccc/ddd/min.css?ver=2.5" type="text/css" media="print">

<link rel="stylesheet" id="mycss3" href="http://www.foobar.net/eee/ffff/min.css?ver=1.3" type="text/css" media="screen">

How can I (temporarirly) merge all the CSS statements into one document and show it in browser?
This should not be done manually by coyping manually stylesheet be stylesheet but AUTOMATICALLY.

In other words: before Firefox renders the actual web page it does exactly this job: It creates a consolidated full CSS stylesheet with ALL relevant CSS statements. What I just need is an access to this background, hidden, internal, full *.css stylesheet.

Does Web Developer Tool offer such a function?

Peter

[Brummelchen]

No Option or Extension. Forget it and Do it manually.
see below, seems possible with script

[morat]

You could create a bookmarklet.

Code: Select all

javascript:(function(){

  var links = document.querySelectorAll("link[rel='stylesheet']");
  var sheets = [];
  for (var i = 0; i < links.length; i++) sheets.push(links[i].href);
  var out = "/* Style sheets (" + sheets.length + ") */";
  for (var i = 0; i < sheets.length; i++) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", sheets[i], false);
    xhr.send(null);
    out += "\n\n" + "/* ^ " + sheets[i] + " */" + "\n\n" + xhr.responseText;
  }
  document.body.innerHTML = "<div>" + out.replace(/\n/g, "<br>") + "</div>";
  document.body.style = "font-family: consolas; font-size: 20px; margin: 8px;";

})();

Bookmarklet Builder
http://subsimple.com/bookmarklets/jsbuilder.htm

Style Editor
http://developer.mozilla.org/en-US/docs ... yle_Editor

Edit: changed code so it works better with css prettifier

[RobertJ]

.
It can be done (I think) but have not done a thorough test. For the page of interest copy the URL and go here

http://jigsaw.w3.org/css-validator/

Paste the URL into the box and under more options select Warnings All. Click on the Check button.

After that click on the Validated CSS tab at the top of the resulting page. What results (I believe) is a complete listing for the CSS for the page.

You may have to try this and do a manual comparison on a simple page to verify.

.

[pstover]

@morat

That sounds acceptable.

Assume I copy & pasted it in Bookmarklet Builder entry field:
How do I save it in Firefox? I miss a "save as" button

And how do I call it for a certain web page?

[RobertJ]

.
I checked and that bookmarklet gives the same result as what I suggested above. Now you have two ways to go.

.

[morat]

Bookmarklet Builder instructions:

* type name in name box
* paste code in code box
* click compress button
* drag link to toolbar

How to use a bookmarklet? load a page and click it

I rather RobertJ's solution. It pretty prints the css and works with csp restrictions.

[pstover]

Thank you for the suggestions.

@morat: On emore question:

The output of your Bookmarklet is unformatted in long, long, long lines for every css stylesheet

Is there a way to beautify the resulting CSS code to a more human readble format?

Thank you

[morat]

You can create a second bookmarklet to beautify the css.

http://github.com/addyosmani/cssprettifier-bookmarklet

[pstover]

Ok, thank you.

If I download the zip file and extract it.

How do I install this Bookmarklet?
Do I have to just drag the Gruntfile.js file onto Firefox?

Can I somehow copy the Javascript code from cssprettifier to the end of the previously created javascript code?

Sorry, I am new to Bookmarklets

[morat]

How do I install this bookmarklet?

Instructions:

* open page in current tab

http://raw.githubusercontent.com/addyos ... marklet.md

* select all
* copy code to clipboard
* create normal bookmark in toolbar
* right click bookmark and click properties
* type name in name box
* paste code in location box
* click save

[RobertJ]

.
It can be done . For the page of interest copy the URL and go here

http://jigsaw.w3.org/css-validator/

Paste the URL into the box and under more options select Warnings All. Click on the Check button.

After that click on the Validated CSS tab at the top of the resulting page. What results are a complete listing for the CSS for the page.

.

Or you could use this SIMPLE approach and the result is VERY NEATLY formatted.

.

[morat]

Here is a validate this page bookmarklet.

Code: Select all

javascript:void(location="http://jigsaw.w3.org/css-validator/validator?uri="+encodeURIComponent(location));

More info
http://validator.w3.org/favelets.html

[RobertJ]

.
It can be done (I think) but have not done a thorough test. For the page of interest copy the URL and go here

http://jigsaw.w3.org/css-validator/

Paste the URL into the box and under more options select Warnings All. Click on the Check button.

After that click on the Validated CSS tab at the top of the resulting page. What results (I believe) is a complete listing for the CSS for the page.

You may have to try this and do a manual comparison on a simple page to verify.

New information: From above

"After that click on the Validated CSS tab at the top of the resulting page. What results (I believe) is a complete listing for the CSS for the page."

I found that the CSS on the Validated CSS tab at the top is not the original CSS; it is the original CSS with corrections of errors. I have not checked out to see if it also corrects warnings.

EDIT: It appears it does nothing with warnings. Most, not all, of the warnings are for either an unknown vendor extension or are deprecated items.

.

[pstover]

@morat and RobertJ:

Thank you.
Very helpful