CSS Testing Lab

Well, someone asked what happened to the lab. So I found it. The lab was originally a place for me to design the tricks I was going to use for JEBHP 10, where I built the stylesheets, tweaked the JavaScript, created the colorsets, and in general looked at what what looked like. I tried to track how each thing I did worked in each browser I tested, and I made a lot of decisions based on that.

The Colors of JEBHP 12

The thing that I referred to The Lab for most was my Color Chart. One of the tenets of accessibility JEBHP 10 (and later) subscribes to is to restrict color choices to the so-called 216 "web-safe" colors. The idea behind that is that every color in JEBHP 12 should be able to be rendered on a 256-color display without dithering, creating uniformity across machines. Additionally, it prevents a problem I have had with some sites, where even on the same machine and the same monitor, the same web page looks like it uses completely different colors in three different browsers. (This does, however, mean that I will generally not use color names, even the 16 standard names, as many of the named colors are not on the web-safe list (black and white are notable exceptions).) In order to save space, the colors listed below are in short-hex notation; the full hex code simply doubles each character. For example, the color listed as F69 would normally be written in a style as #FF6699.

Web-Safe Color Chart

A Stratum Of Color

The image that follows is composed of all of the 216 colors, arranged such that each adjacent color differs in exactly one dimension by one step. (For those of you who understand graph theory, given a graph whose vertex set is the set of 216 ordered triples from the set {0,51,102,153,204,255} and whose set relates all pairs of points whose Euclidean distance is exactly 51, the image represents a Hamiltonian cycle of that graph, using colors for the vertices.)

Less Colorful Testing

Another use for The Lab was an area to check the behavior of my stylesheets. I have one standard stylesheet that I use across all my pages in JEBHP 12, which defines such things as header display, normal font choices, use of <code> tags, and indents and margins on paragraphs. The stylesheet also removes the color differentiation for clicked-on links, since it drives me batty. But sometimes I forget what an H4 Special header looks like. (I used to have "special" headers, which were a bit like having an <h3½> tag, etc., though it's malformed to consider an H4 "special" higher than an H4. So I got rid of them. (I also used to misuse <h6> tags, which most web designers did at the time I wrote JEBHP 1.) I look forward to XHTML 2, which will have <h> tags, and this point will be moot.) Also, it was important to show how the headers and normal text, as well as visited and unvisited links, would look in each of my colorsets. So I developed an area to test just that. Not much has changed here from JEBHP 10, except for a few textual effects (like orphaned text) that I shouldn't really have been able to do anyway have been removed because they won't validate (rightly so) in XHTML.

Note: obviously the use of headers below is not proper form for an XHTML document. That's why it's designated as a testing area.

Test Text

This is a special H1 header!

This is an H1 header!

This is an H2 header.

To be, or not to be: that is the question: Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep; To sleep: perchance to dream: ay, there's the rub; For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause: there's the respect That makes calamity of so long life; For who would bear the whips and scorns of time, The oppressor's wrong, the proud man's contumely, The pangs of despis'd love, the law's delay, The insolence of office and the spurns That patient merit of the unworthy takes, When he himself might his quietus make With a bare bodkin? who would fardels bear, To grunt and sweat under a weary life, But that the dread of something after death, The undiscover'd country from whose bourn No traveller returns, puzzles the will And makes us rather bear those ills we have Than fly to others that we know not of? Thus conscience does make cowards of us all; And thus the native hue of resolution Is sicklied o'er with the pale cast of thought, And enterprises of great pitch and moment With this regard their currents turn awry, And lose the name of action.-- Soft you now! The fair Ophelia! Nymph, in thy orisons Be all my sins remember'd. (This was a really big blockquote. Go Hamlet.)

This is a paragraph with no special formatting.

This is an H3 header.

This is another boring paragraph.

This is another H2 header.

This is yet another H3 header.

This is an H4 header.

This is yet another boring paragraph.

This is an H5 header.

This is a less boring paragraph, with a quote: We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

This is an H6 header.

When in the Course of human events it becomes necessary for one people to dissolve the political bands which have connected them with another and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation. (This has been a longer paragraph.)

This is another H6 header.

This is blinking text. (Never use.)

In addition, here is an unvisited link and a visited link. (Please don't click on the unvisited link and mess things up. It really goes nowhere.)

That's all for The Lab for right now.