Choose your color scheme:
Current navigation tree: JEBHP 12 >> The Lab

Version Twelve

CSS Testing Lab

Safety First! Always Wear Goggles And Lab Coat Or Apron While In The 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

                                   
000 003 006 009 00C 00F 030 033 036 039 03C 03F 060 063 066 069 06C 06F
                                   
300 303 306 309 30C 30F 330 333 336 339 33C 33F 360 363 366 369 36C 36F
                                   
600 603 606 609 60C 60F 630 633 636 639 63C 63F 660 663 666 669 66C 66F
                                   
900 903 906 909 90C 90F 930 933 936 939 93C 93F 960 963 966 969 96C 96F
                                   
C00 C03 C06 C09 C0C C0F C30 C33 C36 C39 C3C C3F C60 C63 C66 C69 C6C C6F
                                   
F00 F03 F06 F09 F0C F0F F30 F33 F36 F39 F3C F3F F60 F63 F66 F69 F6C F6F
                                   
090 093 096 099 09C 09F 0C0 0C3 0C6 0C9 0CC 0CF 0F0 0F3 0F6 0F9 0FC 0FF
                                   
390 393 396 399 39C 39F 3C0 3C3 3C6 3C9 3CC 3CF 3F0 3F3 3F6 3F9 3FC 3FF
                                   
690 693 696 699 69C 69F 6C0 6C3 6C6 6C9 6CC 6CF 6F0 6F3 6F6 6F9 6FC 6FF
                                   
990 993 996 999 99C 99F 9C0 9C3 9C6 9C9 9CC 9CF 9F0 9F3 9F6 9F9 9FC 9FF
                                   
C90 C93 C96 C99 C9C C9F CC0 CC3 CC6 CC9 CCC CCF CF0 CF3 CF6 CF9 CFC CFF
                                   
F90 F93 F96 F99 F9C F9F FC0 FC3 FC6 FC9 FCC FCF FF0 FF3 FF6 FF9 FFC FFF

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.

It is now safe to remove your goggles. Have a nice day.