Sunday, March 29, 2015

With CSS, More Seems to be Less

In the beginning -- at least for my purposes here -- there was HTML.  Tags gave straightforward markup capabilities, but large amounts of the actual presentation were left to the readers' discretion.  Some people like serif fonts; some people don't.  Some people need bigger text to read comfortably.  Some people don't like 36-point headlines.  In an online world, those are choices that ought to be left to the reader.

Then the Web was increasingly taken over by commercial concerns, who hired graphics design professionals to lay out more sophisticated pages.  Professionals who took much greater advantage of the newer HTML capabilities to force the pages to look the way the professionals thought they should.  Color!  Giant text!  Tiny text!  Five fonts for different purposes on every page!  Not to put too fine a point on it, but some of the professionals seemed to have taken degrees in Ugly and Hard to Read.

Some Web browsers gave their users tools to fight back.  One of the reasons I settled on Firefox early on was that it let me override part of the ugliness.  I could specify fonts that were usually honored and a minimum font size (a maximum would also be nice, if anyone at Mozilla is listening).  From time to time I would look over someone's shoulder to see how they experienced the web.  I gloated internally, about how much more consistent in appearance "my" web was compared to theirs.  How much easier to read.  How much more visually attractive, because of my superior taste in fonts [1].

Then came CSS, and the widespread adoption of various CSS libraries, and the use of JavaScript to set CSS properties, and the widespread adoption of JavaScript libraries that did all sorts of things besides the feature or two the page developer needed.  Some browsers helped the readers out again, by allowing the user to have their own style sheet that was applied to all pages.  But CSS has, among other things, specificity rules that make it possible for the page developer to identify a particular element at such a fine grain that none of the browsers will honor the user's choices.  In fact, the specificity rules can get so complex that developers need specialized tools to debug their pages, trying to figure out why some bit of text here or there isn't in the font/size/whatever that they expected.  The image accompanying this post is a portion of a screenshot of Firebug, one such tool, showing part of the CSS cascade that resulted in a piece of text on a downloaded page ignoring my font choices.

I suppose I shouldn't feel so strongly about this that I'm sitting here considering the question, "How hard would it be to write a Firefox add-on that (reasonably intelligently) overrides the font choices for all of the content on every page?"  Guess I've finally turned into a full-blown curmudgeon.

[1] Not to mention faster, because Firefox had Adblock, and it's amazing how much faster the front page of a newspaper site loads if your browser simply skips loading 30 advertising elements from DoubleClick's under-engineered servers.

No comments:

Post a Comment