MozillaZine

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

User Help for Mozilla Firefox
pstover
 
Posts: 259
Joined: July 29th, 2005, 3:25 am

Post Posted February 23rd, 2018, 12:01 am

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
 
Posts: 3395
Joined: March 19th, 2005, 10:51 am

Post Posted February 23rd, 2018, 7:08 am

No Option or Extension. Forget it and Do it manually.
see below, seems possible with script
Last edited by Brummelchen on February 24th, 2018, 4:03 am, edited 1 time in total.

morat
 
Posts: 2662
Joined: February 3rd, 2009, 6:29 pm

Post Posted February 23rd, 2018, 9:07 am

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
Last edited by morat on February 24th, 2018, 7:34 am, edited 1 time in total.

RobertJ
Moderator

User avatar
 
Posts: 10542
Joined: October 15th, 2003, 7:40 pm
Location: Chicago IL/Oconomowoc WI

Post Posted February 23rd, 2018, 9:16 am

.
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.

.
FF 60.0.1 - FF 61b5 - FF 62a - Palemoon 27.8.1 - TB 52.7 - Mac OSX 10.13.4
Computers I've used: IBM 7094/UNIVAC 1108/IBM 360/DEC PDP11/DEC VAX-11 780/DEC VAXstation 8000/Sun SPARCstation 2/Mac from 1984 to 2018

pstover
 
Posts: 259
Joined: July 29th, 2005, 3:25 am

Post Posted February 23rd, 2018, 9:18 am

@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
Moderator

User avatar
 
Posts: 10542
Joined: October 15th, 2003, 7:40 pm
Location: Chicago IL/Oconomowoc WI

Post Posted February 23rd, 2018, 9:31 am

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

.
FF 60.0.1 - FF 61b5 - FF 62a - Palemoon 27.8.1 - TB 52.7 - Mac OSX 10.13.4
Computers I've used: IBM 7094/UNIVAC 1108/IBM 360/DEC PDP11/DEC VAX-11 780/DEC VAXstation 8000/Sun SPARCstation 2/Mac from 1984 to 2018

morat
 
Posts: 2662
Joined: February 3rd, 2009, 6:29 pm

Post Posted February 23rd, 2018, 9:37 am

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
 
Posts: 259
Joined: July 29th, 2005, 3:25 am

Post Posted February 23rd, 2018, 9:56 pm

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
 
Posts: 2662
Joined: February 3rd, 2009, 6:29 pm

Post Posted February 23rd, 2018, 11:52 pm

You can create a second bookmarklet to beautify the css.

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

pstover
 
Posts: 259
Joined: July 29th, 2005, 3:25 am

Post Posted February 24th, 2018, 2:13 am

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
 
Posts: 2662
Joined: February 3rd, 2009, 6:29 pm

Post Posted February 24th, 2018, 7:12 am

pstover wrote:How do I install this bookmarklet?

Instructions:

* open page in current tab

http://raw.githubusercontent.com/addyosmani/cssprettifier-bookmarklet/master/dist/bookmarklet.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
Moderator

User avatar
 
Posts: 10542
Joined: October 15th, 2003, 7:40 pm
Location: Chicago IL/Oconomowoc WI

Post Posted February 24th, 2018, 8:18 am

RobertJ wrote:.
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.

.
FF 60.0.1 - FF 61b5 - FF 62a - Palemoon 27.8.1 - TB 52.7 - Mac OSX 10.13.4
Computers I've used: IBM 7094/UNIVAC 1108/IBM 360/DEC PDP11/DEC VAX-11 780/DEC VAXstation 8000/Sun SPARCstation 2/Mac from 1984 to 2018

morat
 
Posts: 2662
Joined: February 3rd, 2009, 6:29 pm

Post Posted February 24th, 2018, 8:43 am

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
Moderator

User avatar
 
Posts: 10542
Joined: October 15th, 2003, 7:40 pm
Location: Chicago IL/Oconomowoc WI

Post Posted February 25th, 2018, 2:44 pm

RobertJ wrote:.
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.

.
FF 60.0.1 - FF 61b5 - FF 62a - Palemoon 27.8.1 - TB 52.7 - Mac OSX 10.13.4
Computers I've used: IBM 7094/UNIVAC 1108/IBM 360/DEC PDP11/DEC VAX-11 780/DEC VAXstation 8000/Sun SPARCstation 2/Mac from 1984 to 2018

pstover
 
Posts: 259
Joined: July 29th, 2005, 3:25 am

Post Posted February 26th, 2018, 12:32 am

@morat and RobertJ:

Thank you.
Very helpful

Return to Firefox Support


Who is online

Users browsing this forum: No registered users and 14 guests