Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
List unique CSS properties for all DOM elements
/**
* List unique CSS properties for all DOM elements
* Initially created to list unique font stacks on a page
* @see {@link http://stackoverflow.com/a/35022690/ Inspired by this StackOverflow answer}
*
* @see {@link https://gist.github.com/macbookandrew/f33dbbc0aa582d0515919dc5fb95c00a/ URL for this file}
*
* @author AndrewRMinion Design (https://andrewrminion.com)
* @version 1.1
*
* @license MIT
* @copyright AndrewRMinion Design
*
* @example Show all unique font stacks in use on the current page
* console.log(styleInPage('fontFamily'));
*
* @example Show a list of all DOM elements with their computed font stack
* console.log(styleInPage('fontFamily', true));
*
* @example Highlight all DOM elements using a particular font stack (pass in the array key from styleInPage)
* var fontStacksInUse = styleInPage('fontFamily');
* console.log(fontStacksInUse);
* highlightInPage(8);
*/
/**
* Get an array of elements with their computed styles
* @param {string} css CSS property, camelCased for JS
* @param {boolean} verbose whether to output an array of all elements with their style properties
* @returns {array} array of unique properties, or if verbose is true, array of all elements with their properties
*/
function styleInPage(css, verbose) {
// polyfill getComputedStyle
if (typeof getComputedStyle == "undefined") {
getComputedStyle = function (elem) {
return elem.currentStyle;
}
}
// set vars
var style,
thisNode,
styleId,
allStyles = [],
nodes = document.body.getElementsByTagName('*');
// loop over all elements
for (var i = 0; i < nodes.length; i++) {
thisNode = nodes[i];
if (thisNode.style) {
styleId = '#' + (thisNode.id || thisNode.nodeName + '(' + i + ')');
style = thisNode.style.fontFamily || getComputedStyle(thisNode, '')[css];
// get element’s style
if (style) {
if (verbose) {
allStyles.push([styleId, style]);
} else if (allStyles.indexOf(style) == -1) {
allStyles.push(style);
}
// add data-attribute with key for allStyles array
thisNode.dataset.styleId = allStyles.indexOf(style);
}
// get element:before’s style
styleBefore = getComputedStyle(thisNode, ':before')[css];
if (styleBefore) {
if (verbose) {
allStyles.push([styleId, styleBefore]);
} else if (allStyles.indexOf(styleBefore) == -1) {
allStyles.push(styleBefore);
}
// add data-attribute with key for allStyles array
thisNode.dataset.styleId = allStyles.indexOf(styleBefore);
}
// get element:after’s style
styleAfter = getComputedStyle(thisNode, ':after')[css];
if (styleAfter) {
if (verbose) {
allStyles.push([styleId, styleAfter]);
} else if (allStyles.indexOf(styleAfter) == -1) {
allStyles.push(styleAfter);
}
// add data-attribute with key for allStyles array
thisNode.dataset.styleId = allStyles.indexOf(styleAfter);
}
}
}
return allStyles;
}
/**
* Highlight elements with the specified style
* @param {integer} styleId data-style-id to highlight
*/
function highlightInPage(styleId) {
var thisNode,
allNodes = document.body.getElementsByTagName('*'),
nodes = document.body.querySelectorAll('[data-style-id="' + styleId + '"]');
// remove previous highlights
for (var i = 0; i < allNodes.length; i++) {
allNodes[i].classList.remove('style-highlight');
}
// add highlight to specified nodes
for (var i = 0; i < nodes.length; i++) {
thisNode = nodes[i];
thisNode.classList.add('style-highlight');
}
}
/**
* Clear all highlights
*/
function clearHighlights() {
highlightInPage();
}
/**
* Add blank stylesheet for highlight rule
* @returns {CSSStyleSheet} new blankstylesheet
*/
var sheet = (function() {
// Create the <style> tag
var style = document.createElement("style");
// WebKit hack :(
style.appendChild(document.createTextNode(""));
// Add the <style> element to the page
document.head.appendChild(style);
return style.sheet;
})();
/**
* Add specified CSS rule to the specified stylesheet
* @param {CSSStyleSheet} sheet a CSSStyleSheet object
* @param {string} selector CSS selector rule; include “.” for classes or “#” for IDs
* @param {string} rules CSS properties for this selector
* @param {integer} index index detailing where to add the new rule
*/
function addCSSRule(sheet, selector, rules, index = 0) {
if ("insertRule" in sheet) {
sheet.insertRule(selector + "{" + rules + "}", index);
} else if ("addRule" in sheet) {
sheet.addRule(selector, rules, index);
}
}
// add a yellow background to highlighted elements
addCSSRule(sheet, ".style-highlight", "background-color: yellow");
Owner

macbookandrew commented Jan 12, 2017 edited

Description

Lists all the DOM elements with a specified CSS property; initially created to get a list of all unique font stacks used in a page for page speed optimization purposes.

Usage

Download this file and include in your page source, or copy-and-paste it into your browser’s JS console, then run the styleInPage() function with the CSS style you want to inspect as the parameter

Examples

// Show all unique font stacks in use on the current page
console.log(styleInPage('fontFamily'));

// Show a list of all DOM elements with their computed font stack
console.log(styleInPage('fontFamily', true));

// Highlight all DOM elements using font stack 8
var fontStacksInUse = styleInPage('fontFamily');
console.log(fontStacksInUse);
highlightInPage(8);

Changelog

  • v1.1: add clearHighlights() function to give your eyes a break
  • v1.0: initial commit

Heyo! This is awesome! Thank you for creating it, I did have one question. Do you know if there is a way to show the font weights being used?

My problem is that the design has lots of calls for all the font weights and all the fonts to be used on a site, however, not all the weights are used, so I want to prune them for faster load time.

I hope that makes sense, I look forward to tinkering!
-Darrel

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment