Saving bandwidth: auto-titling with CSS and so forth
The XHTML version of Apollodorus Library Book 1 includes a huge number of title attributes and class attributes. The titles are, not surprisingly, hover-induced info like 'Show character details'. Many of the classes aren't really used for CSS, but were jQuery selectors. The net result of all of this is that Apollodorus Library Book 1 weighs in at 221K. After a bit of research and fiddling I've come up with a way to reduce this significantly. By significant, I mean HUGE - the same page is now 144K.
I've removed all of the jQuery selectors classes and replaced them with html5 data attributes that I use anyway. So, instead of a selector like $(".classname") I now use $("[data-type]"), which removes 1649 instances of 'class="retrieve"' from that page.
I've also swapped title attributes out for an all-CSS approach, so an anchor like <a data-id="ouranus" data-type="character">Sky</a> can be given a pseudo-title with the following CSS:
a[data-type]:hover {text-decoration: underline;position:relative;}
a[data-type]:hover:after {
content: "Show " attr(data-type) " details for " attr(data-id);
padding: 4px 8px;
text-transform:capitalize;
color: rgb(255,255,255);
position: absolute;
left: 50%;
top: 100%;
white-space: nowrap;
z-index: 2;
border-radius: 5px ;
background-color: rgba(0,0,0,0.8);
}
NOTE: the initial position:relative seems to be crucial here. I haven't investigated why.
An example page can be viewed here.