going further into CSS only…

…and expecting browsers to follow.

As long as we are talking “visual web design”, well applied markup and CSS should do. The less we rely on scripting to design the better, in my opinion.

Now, all pages on this site rely a little on Javascript, and I am not about to change that. Instead I am using this page to check some “markup and style”alternatives to scripting for what I want to do with this very design.

I also must avoid clashes between “new” styling without javascript, and “old” styling with javascript manipulation.

It is of special interest to see if anything gets lost of the experience with markup and CSS alone, compared to using javascript to manipulate parts of the page.

For the purpose of testing: absolutely no javascript is acting on this page.

task: open and close folders at will.

It is such a simple presentational task: show or hide some content depending on what the individual visitor wants to see. Good browsers can easily fix that with markup and CSS alone, in more than one way.

First I focus on opening and closing addendum on this page. That link is working to target and open addendum on this as on other pages on my site, but the regular javascript based show/hide button functionality is replaced with an <INPUT> based solution on this page.

Given the chance I tried to improve on the javascript driven show/hide solution. Thus, differences in appearance and behavior on this page compared to that on other pages on site, are for the most part intentional.

Reusing styling of the javascript injected button and adding text and other details as generated content, the visual came out OK without much additional markup. Mainly a question of adding, and in a few cases modifying, selector‐chains to keep both the CSS+javascript and the CSS‐only options available in same stylesheet.

The show/hide solution is copied almost verbatim from my simple CSS slideshow, as it shows/hides content on/off‐screen and doesn't clash with styling for the javascript driven “display: block/none” method used on other pages.

how it works: the basics.

I like to get as much out of as simple and logical markup as possible, and my styling relies heavily on relationship between and status of elements. IDs and CLASSes are added where necessary for improved flexibility, but not sprinkled around everywhere.

HTML…
<h5 class="lgl" id="addendum">addendum</h5>
<input type="checkbox" name="add" />
<b><b><!-- --></b></b>
<div id="folder">
   …content…
</div>

…not much markup there, but that is all we need to build and style a  folder with “show/hide” functionality. The “content” in the folder‐container does of course consist of numerous elements, depending on what type of content it is used for.

As can be seen: I have used an <H5> directly followed by an <INPUT>, directly followed by an element of which a visual button can be styled, directly followed by the element (container) that should be open or closed. Such an element‐combination or ‑sequence is unique enough in itself to be used as target for “show/hide” styles, so ID and CLASS on <H5> mainly serve other purposes.

CSS…
h5[class]+input {display: block; position: relative; z-index: 200; 
   width: 18em; height: 2em; margin: .1em auto -2em; opacity: .01;}

h5[class]+input+* {display: block; color: #000; position: relative; z-index: 20;
   border: solid 1px #666; padding: 3px 6px 3px; margin: 2px; 
   font-style: normal; font-weight: normal; font-size: 86%; 
   line-height: 1.15; border-width: 1px 2px 2px 1px;
   background: #ddd url(../button.jpg); text-decoration: none; 
   border-radius: 3px; box-shadow: 2px 2px 2px 1px #bbb;}

…the <INPUT type=checkbox> is stacked and sized to be layered in front of the visual button. There it will stay invisible but “clickable”, and its status is used to control the visual button that follows it in the markup.

h5[class]+input+*>*::before {content: "show/hide Addendum"; 
   color: #000; font-weight: 200; font-size: 100%; line-height: 1.1;}

…I use a <b> wrapped in a <b> as visual button, with a comment inside to prevent my editor tools from removing the empty element(s). Wrapped elements are used on my page to provide enough elements to attach 3‑4 instances of generated content to. A single element will do in most cases.

Then I size these wrapped <b> and insert text as generated content on the inner element. The reason for this is that I don't want a meaningless “button” to show up in browsers that don't support the function styled in, which it will if text is written in it in the markup.

And lastly: the off‐screen hide when the <INPUT type=checkbox> is unchecked, and on‐screen appearance when <INPUT type=checkbox> is checked.

h5[class]+input+*+#folder {height: 1px; 
   position: absolute; top: -10000px; left: -5000px; 
   overflow: hidden; display: block; opacity: 0.01;}

h5[class]+input:checked+*+#folder {height: auto; 
   position: static; overflow: visible; 
   opacity: 1; transition-property: opacity; transition-duration: 1.5s;}

That covers the functionality and visual appearance. From there we can modify and spice it up to our hearts delight, to go with our designs. I have done a bit of that in my pages, and, again: most styles were already in use for the javascript driven “show/hide” button on pages other than this on site.

how it works: a little extra.

The following CSS drops down a short message when hovering on button for closed folder. Which of the 3 messages I have prepared that is shown depends on what class is added to <H5>.

Pretty complete/complex styling of the drop down…

h5[class]+input:hover+*::after {position: relative; background: #333; 
   font-size: 14px; line-height: 1.3; color: #fff; border: solid 1px #fff; 
   width: 111%; padding: .2em 1.4%; right: -7%; top: 120%; white-space: normal; 
   font-family: Tahoma, Arial, sans-serif; text-align: center; 
   text-shadow: 1px 1px 2px #000, -1px -1px 1px #000, -1px -1px 1px #000;
   border-radius: 3px; box-shadow: 2px 2px 3px 2px #999;}

h5.add+input:hover+*::after {content: "More pictures and information below.";}
h5.read+input:hover+*::after {content: "More related information below.";}
h5.lgl+input:hover+*::after {content: "Standard stuff and info below.";}

h5+input:checked+*::after {display: none;}

The icons I have hanging near right edge on the visual button, are added as generated content. Which of the icons that appears depends on what class is added to <H5>

h5.read+input+*::before {position: absolute; top: 2px; right: -.2em;
   margin-right: -2px; content: url(../book.png); z-index: 2;}

h5.lgl+input+*::before {position: absolute; top: -3px; right: -.1em;
   margin-right: -2px; content: url(../lgl.png); z-index: 2;}

h5.add+input+*::before {position: absolute; top: -7px; right: -.1em;
  margin-right: -2px; content: url(../bb.png); z-index: 2;}

support: quite good.

IE9+, Chrome, Opera (Presto & WebKit), Safari, and Firefox handle my CSS‐only “show/hide addendum” solution as intended. So we're good to go right away in new browsers.

Old browser versions like IE8 don't support the CSS selectors used, but don't create serious problems since they don't hide any content.

Quite a difference between what end‐users with old and new browsers experience, but no‐one can complain that anything is missing so we're good to go in old browsers too.

I conclude that another step can be taken up the ladder of coding for latest browser versions, and pretty much ignore getting “same appearance and behavior” in older versions.

Now I can draw the line below IE9 – ignore all older and less capable browsers, and can't see that I am causing any real problems for any visitor by doing so.

The working “show/hide Addendum” button is below navigation at bottom of this page, ready to be tested. Whether or not it will be used on other pages on site is not yet decided.

sincerely  georg; sign

Hageland 30.oct.2013
last rev: 04.nov.2013


side notes.

gaining some…

Moving what I call “presentational behavior” from markup + javascript + CSS, to markup + CSS, does of course make the design process easier for a dedicated CSS guy like me. Being able to focus entirely on writing efficient markup and styles is definitely a gain.

…and maybe losing some?

Slightly more, and in places more complex, markup + CSS, may be seen as a drawback. When all is done right – which it should be anyway – this is not a serious problem though.

Apart from that I don't see any losses, and javascript can of course be thrown into the mix whenever there's no other option – which isn't very often when designing in/for the latest browser versions.

mixed emotions.

Having spent years in computer programming, it may be seen as strange that I choose to avoid javascript for presentational purposes whenever possible. Well, front‐end coding isn't programming in that sense in my opinion, and I am not into making web browsers perform visual tricks just for the fun of it.

Lots of functionality javascript is well suited for, and even more I probably haven't even thought of. Not much of it has a place in visual web design the way I see it, so, again, whenever possible I reserve javascript for tasks for which there is no markup + CSS option.

the better tool.

I have grown quite fond of my CSS Sledge­hammer, and may at times try to use it for tasks better tools are made for. It is however specially made for controlling the presentational layer in web design, so I am not taking it too far now.

At times I resort to “pretty dirty CSS tricks” to get browsers to perform to my liking, so when I at other times “play nice” I am really, really proud of myself.

Always have to make sure “clean CSS coding” doesn't become a habit though, as that will prevent me from performing true in‐depth testing of browsers and their many bugs – which is a very interesting hobby and in a sense my mission in web development.

styling simpler tasks.

Now and then I want to pack some additional information into a small space anywhere on a page, were it stays out of the way until someone gets interested and wants to check up on it. Then “Simple Notes” comes handy…

This is “Simple Notes” for web pages, where for instance the “body” of a single paragraph gets shown or hidden with a click on top of the note.
The CSS solution behind “Simple Notes” is basically the same as for the "show/hide Addendum" function described in the main article.

This is another example of markup + CSS performing simple presentational tasks that previously was reserved for javascript.

Especially when it comes to coupling status of <INPUT> directly to present­ational behavior via CSS, I see many practical uses. INPUT type=radio and INPUT type=checkbox lend themselves particularly well to cases where we want to modify visual details and behavior with a mouse­click.

Here follows a couple of ways to implement “Simple Notes” for “Q & A” (and similar) lists…

input=radio accordion:
  • A: this is “Simple Notes” for web pages, where in this case the “body” of a single list-item gets shown with a click on top of the list-item.
  • A: “Simple Notes” can be used to build up regular “Q & A” pages with accordion function­ality with markup + CSS alone. And there are of course lots of other tasks for which CSS accordions come handy.
  • A: yes, “Simple Notes” can be nested, like here.
    • A: the CSS selector‐chain is sequenced to repeat “show/hide” action one level past actual level, and this “overshot” means the HTML selector‐chain in theory can be repeated down as many levels as one wants, one level at a time, without making any CSS changes.
    • A: yes, there are. Since INPUT can not be turned from unchecked to unchecked in CSS, there are some functional weaknesses.
    • A: dunno, but at least it is an option if anyone can come up with practical uses for it.
  • A: how should I know … I just work here.

With INPUT type=radio an extra (empty) item is needed (on each level) if one wants to hide all regular items. Doesn't matter where that extra (empty) item is placed in the sequence, but I chose to add it with a suitable text at the bottom of the list.

input=checkbox accordion:
  • A: this is “Simple Notes” for web pages, where in this case the “body” of a single list-item gets shown or hidden with a click on top of the list-item.
  • A: “Simple Notes” can be used to build up regular “Q & A” pages with accordion function­ality with markup + CSS alone. And there are of course lots of other tasks for which CSS accordions come handy.
  • A: yes, “Simple Notes” can be nested, like here.
    • A: the CSS selector‐chain is sequenced to repeat “show/hide” action one level past actual level, and this “overshot” means the HTML selector‐chain in theory can be repeated down as many levels as one wants, one level at a time, without making any CSS changes.
    • A: yes, there are. Since INPUT can not be turned from checked to unchecked in CSS, there are some functional weaknesses.
    • A: dunno, but at least it is an option if anyone can come up with practical uses for it.
  • A: how should I know … I just work here.
  • Hope you like my answers.

With INPUT type=checkbox each item must be opened and closed individually. I added a suitable text at the bottom anyway.

INPUT type=checkbox works in my opinion best for the “Simple Notes” examples shown above.
INPUT type=radio is on the other hand perfect for looping CSS slideshows and such.

accessi­bility.

Accessibility with these markup + CSS implemen­tations is something I at the moment am not one hundred percent sure of.

Logic, and past experiences with off‐screen hiding techniques, tells me no new barriers to total access has been built here. However, I am not accessi­bility challenged, and have no special tools with which to test the finer details.

sideshow…

The simple “show/hide” examples above are of course just sideshows on this page, but that's what you get when there is a lot of unused space on a page once the main article is written – and the author is bored.

I may write another article about simple CSS “show/hide” methods, and one about how to use similar methods to modify parts of designs with the click of a button. Right now I am a bit tired of the whole “presentational behavior” issue and need a break.


www.gunlaug.com advice upgrade advice upgrade navigation