Webdesign is hell

I am still in love with Syntax, the theme I’ve recently chosen for my blog and webpage, but the first rift appeared between us. The lovely minimalist menu icon (the same used by Chrome, a little square with three horizontal bars — you can check it on Syntax’s homepage) is apparently too subtle for some of my readers. I had to change it for something more… explicit.

A little CSS magic should be enough to change the abstract icon for a concrete “menu” tag written vertically :

@media screen and (min-width: 801px) {
  #toggle-nav:before {
    content: "menu";
    font-family: Merriweather, Georgia, "Times New Roman", serif;
    text-align: center;
    display: block;
    width: 4em;
    height: 2em;
    padding-top: 0.5em;
    -webkit-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

@media screen and (max-width: 800px) {
  #toggle-nav:before {
    content : "menu";
    padding-top: 0.2em;
    padding-bottom: 0.6em;
  }
}

And indeed it works. Sort of.

Menu button wrongly rendered on Internet ExplorerGetting the rotation right was a nightmare, since different browsers require different names for the properties. My first attempt included the declaration writing-mode: tb-rl; because every CSS snippet for vertical text I’ve found on the web seemed to include it. And it worked all right. Well, except on Internet Explorer (isn’t that a surprise ?) on which it resulted on a double rotation.

The code snippet above contains three independent pieces of magic :

  • CSS media queries : the @media { } rule comprehends other CSS rules conditional to the page being rendered on specific media. In my example, the #toggle-nav:before rules are to be interpreted only if the page is rendered on a screen at specific widths ;
  • CSS :before pseudo-selector : the :before (and its counterpart :after) pseudo-selectors allow inserting new content inside the specified elements. In my example, new content will be inserted inside all elements with id toggle-nav, before any child elements already there (:after would insert new content after any child elements already there). The new content is textual (<tags> are interpreted as plain text), but its formatting may be specified by other declarations in the rule. In my example, I’m inserting the content “menu” and specifying some details about fonts, size, text alignment, padding, etc. ;
  • CSS transforms : the transform property allows specifying various geometric transformations, and the transform-origin property allows specifying the origin point (the “pivot”) of the transformation. In my example, I am asking for a 90 degrees clockwise rotation, around the left lower corner (0% horizontal, 100% vertical) of the element. Those properties sometimes require browser-dependent synonyms.

Now everything seems to work, at least on Safari (OS X), Firefox (OS X and Windows), IE (Windows), and Chrome (OS X). Of course, each combination of OS–browser renders the button in a slightly but irritatingly different way. I’ll attribute to wisdom and spiritual growth  — instead of jadedness and laziness — that I’ll simply throw up my hands, instead of spend a sleepless night trying to make it perfectly right.

More worrisome than slight rendering inconsistencies is the fact that the button is behaving erratically on Chrome for Windows in one of the computers I’ve tested : sometimes it responds, sometimes it freezes. But since it worked on all other computers, I’m brushing it off to the fact that this one computer also had 5 or 6 plugin toolbars installed. I know : blaming the environment is the classical debugger’s fallacy, but in this case it might be justifiable.

If you are trying to read this blog and can’t use the menus, or if the rendering is horrible in your device–OS–browser, please drop me a note.

Edit 5/mar : I’ve expanded the explanation of the code snippet above and adopted a more rigorous CSS nomenclature.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s