Hack 42. Make External Stylesheets Clickable | Greasemonkey Hacks: Tips & Tools for Remixing the Web with Firefox

< Day Day Up >

Ever want to see a page's stylesheets? Stop digging through source code to find them.

Have you ever seen a standards-based site that used CSS in an innovative way, and you asked yourself, "How did they do that?" Then you had to view source, scan through all those angle brackets, find the link to the stylesheet, and load it manually in your browser. Make it easier on yourself! This hack adds a navigation bar along the top of each page with links to each of the page's stylesheets.

5.4.1. The Code

This user script runs on all web pages. It relies on the fact that Firefox maintains a global list of stylesheets, document.styleSheets (note the camelCase capitalization).

There is just one problem: if the page defines additional styles inline, such as with a <style> element in the <head> of the page, or in a style attribute on one specific element, Firefox creates a separate entry for each style in the document.styleSheets list, using the page's URL as the address of the stylesheet (which is technically true, but unhelpful for our purposes). As we loop through document.styleSheets, we need to check for this condition and filter out stylesheets that point back to the current page.

Save the following user script as showstylesheets.user.js:

 // ==UserScript== // @name Show Stylesheets // @namespace http://diveintomark.org/projects/greasemonkey/ // @description adds links to all of page's stylesheets // @include http://* // @include https://* // ==/UserScript== var arHtmlStylesheetLinks = new Array(); for (var i = document.styleSheets.length - 1; i >= 0; i--) { var oStylesheet = document.styleSheets[i]; if (oStylesheet.href == location.href) continue; var ssMediaText = oStylesheet.media.mediaText; if (ssMediaText) { ssMediaText = 'media=&quot;' + ssMediaText + '&quot;'; } arHtmlStylesheetLinks.push('<a title="' + ssMediaText + '" href="' + oStylesheet.href + '">' + oStylesheet.href.split('/').pop() + '</a>'); } if (!arHtmlStylesheetLinks.length) return; var elmWrapperDiv = document.createElement('div'); elmWrapperDiv.innerHTML = 'Stylesheets: ' + arHtmlStylesheetLinks.join(' &middot; '); elmWrapperDiv.style.textAlign = 'center'; elmWrapperDiv.style.fontSize = 'small'; elmWrapperDiv.style.fontFamily = 'sans-serif'; document.body.insertBefore(elmWrapperDiv, document.body.firstChild);

5.4.2. Running the Hack

After installing the user script (Tools Install This User Script), go to http://www.fsf.org. At the top of the page, you will see a list of links showing all the pages stylesheets. If you hover the cursor over one of the stylesheet links, you will see a tool tip that gives more information about the stylesheet, such as whether it is meant for screen or print media, as shown in Figure 5-3.

Clicking a stylesheet link displays the stylesheet in your browser, as shown in Figure 5-4.

5.4.3. Hacking the Hack

This hack displays only external stylesheets; it goes out of its way to filter out references to inline styles. However, you might want to know whether the page defines any inline styles. As we loop through document.styleSheets, if we find a stylesheet that points back to the original page, we can create a special type of link that will open the source view of the current page (i.e., the view you would get if you selected View Source on the page). An example of a page with inline styles is Amazon.com, as shown in Figure 5-5.

Figure 5-3. FSF's stylesheets

Save the following user script as showstylesheets2.user.js:

 // ==UserScript== // @name Show Stylesheets 2 // @namespace   http://diveintomark.org/projects/greasemonkey/ // @description adds links to all of page's stylesheets + inline styles // @include * // ==/UserScript== var arHtmlStylesheetLinks = new Array(); var bHasInlineStyles = false; for (var i = document.styleSheets.length - 1; i >= 0; i--){ var oStylesheet = document.styleSheets[i]; if (oStylesheet.href == location.href) { bHasInlineStyles = true; } var ssMediaText = oStylesheet.media.mediaText; if (ssMediaText) { ssMediaText = 'media=&quot;' + ssMediaText + '&quot;'; } arHtmlStylesheetLinks.push('<a title="' + ssMediaText + '" href="' + oStylesheet.href + '">' + oStylesheet.href.split('/').pop() + '</a>'); } if (bHasInlineStyles) { arHtmlStylesheetLinks.push('<a href="view-source:' + location + '">inline styles</a>'); } if (!arHtmlStylesheetLinks.length) return; var elmWrapperDiv = document.createElement('div'); elmWrapperDiv.innerHTML = 'Stylesheets: ' + arHtmlStylesheetLinks.join(' &middot; '); elmWrapperDiv.style.textAlign = 'center'; elmWrapperDiv.style.fontSize = 'small'; elmWrapperDiv.style.fontFamily = 'sans-serif'; document.body.insertBefore(elmWrapperDiv, document.body.firstChild);

Figure 5-4. FSF's print stylesheet

Figure 5-5. Page with inline styles

< Day Day Up >