Css tool, to calculate how many (in bytes) inline css in html

Question

There is Firebug AddOn - "Inline Code Finder", but it doesn't show how many bytes! Do you know any tool doing it?

Answer 1

Stoyan Stefanov created a really nice tool fr working out the values of js/css on a page and called it statsy

http://www.phpied.com/statsy-more-data-points-for-markup-quality/

Below is an explanation taken from his site

the results

Once you run the bookmarklet it alerts these stats points:

• • JS attributes (e.g. onclick) - this is the sum of all onclick, onmouseover and so on including the attribute names. So for example is 11 characters (bytes) of JavaScript attributes code
  • CSS style attributes - the sum of all style="..."
  • Inline JS - the sum of all the contents of all script tags (excluding the tag itself)
  • Inline CSS - sum of all tag contents
  • All innerHTML - this is document.documentElement.innerHTML.length, it should be close to the ungzipped size of a page, provided the page is not doing a lot of DOM manipulation
  • # DOM elements - the total number of elements on the page is counted simply using document.getElementsByTagName('*').length

Answer 2

Do a character count on the found CSS - usually 1 char is 1 byte.

Answer 3

You can run the following bit of JS in the Firebug Console for the size in bytes of all the effective inline style rules as CSS.

(unhook all linked stylesheets, load page and run this JS to effectively get the only-declared-inline CSS size).

var styleText = '';
$('*').each(function(){
    styleText += this.style.cssText;
});
var styleTextLengthInBytes = encodeURIComponent(styleText).replace(/%../g, 'x').length
console.log(styleTextLengthInBytes);

(conversion to bytes handles UTF-8 correctly, courtesy of dt.in.th/2008-09-16.string-length-in-bytes

---

Variation - exclude SPANs and Ps, and count everything else:

var styleText = '';
$('* :not(span,p)').each(function(){
    styleText += this.style.cssText;
});
var styleTextLengthInBytes = encodeURIComponent(styleText).replace(/%../g, 'x').length
console.log(styleTextLengthInBytes);