Blog

Who remembers CSS Zen Garden? I do. As if it was yesterday... I remember first gazing my sights on a simplistic but visually stunning webpage demonstrating what all websites in the future could look like.

CSS Zen Garden broke the norm of the websites we were used to seeing at the time - crowded blocky tabular-based layouts that lacked personality. It was a revelation and a turning point in web design standards!

As described within the content of every CSS Zen design, its ethos was clear:

The Road To Enlightenment

Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers.

We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP, and the major browser creators.

The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.

CSS Zen Garden pathed The Road To Enlightenment for me in an entirely different manner - deciding my career.

Having completed my degree in Information Systems at university in 2006, I was at a crossroads as to which IT field I should specialise in. University seems to prepare you for anything apart from how to apply yourself when you exit the final doors of education into the real world.

CSS Zen Garden changed the trajectory of my career. Originally, I considered entering the field of Consulting to then changing my mindset into garnering interest as a Web Developer instead. This has had a lasting effect. Even after 18 years, I am still involved in Web Development. I tend to focus more on backend functionality rather than look and feel.

The CSS Zen Garden community spawned a variety of other designs from talented Web Developers that encompassed a design flair. But the design that started it all, 001, will always hold a special place in my heart. The unforgettable Japanese elements - the Itsukushima Shrine, water lilies, and a blossom tree.

All the designs have stood the test of time and even through the age of modern web browsers and high-resolution screens, they still present a timeless look that fills me with nostalgia.

Every post on this site is written in markdown since successfully moving over to GatsbyJS. Overall, the transition has been painless and found that writing blog posts using the markdown syntax is a lot more efficient than using a conventional WYSIWYG editor. I never noticed until making the move to markdown how fiddly those editors were as you sometimes needed to clean the generated markup at HTML level.

Of course, all the efficiency of markdown does come at a minor cost in terms of flexibility. Out of the minor limitations, there was one I couldn't let pass. I needed to find a way to position images left, right and centre as majority of my previous posts have been formatted in this way. When going through the conversion process from HTML to markdown, all my posts were somewhat messed up and images were rendered 100% width.

HTML can be mingled alongside the markdown syntax, so I do have an option to use the image tag and append styling. I wouldn't recommend this from a maintainability perspective. Markdown is platform-agnostic so your content is not tied to a specific platform. By adding HTML to markdown, you're instantly sacrificing the portability of your content.

I found a more suitable approach would be to handle the image positioning by appending a hashed value to the end of the image URL. For example, #left, #right, or #centre. We can at CSS level target the src attribute of the image and position the image along with any additional styling based on the hashed value. Very neat!

img[src*='#left'] {
float: left;
margin: 10px 10px 10px 0;
}

img[src*='#center'] {
display: block;
margin: 0 auto;
}

img[src*='#right'] {
float: right;
margin: 10px 0 10px 10px;
}

Being someone who doesn’t delve into front-end coding techniques as much as I used to, I am amazed at the type of things you can do within CSS. I’ve obviously come late to the more advanced CSS selectors party.

I came across a really strange issue yesterday whilst testing a site build in Internet Explorer 6, 7 and 8. For some reason, my anchor link text was not accepting a hover state colour change even though I set the required styles within my style sheet. All other browser accepted the hover styling without any issue.

I decided to create another site in Visual Studio and added the same styling to my links and it worked. After comparing the difference between the original and new style sheet, the only difference was:

/* Original Stylesheet */
body
{
    font-family: Arial;
}

/* New Stylesheet */
body
{
    font-family: Arial, sans-serif;
}

By simply adding “sans-serif” to the font family allowed the hover styles to work correctly in all browsers. I have no idea why making this change resolved my issue.

We have been using Cascading Style Sheets for many years now and it has been a god send to help break us away from table based layouts and create an aesthetically pleasing site. I was quite surprised to find out that the CSS 2.1 standard has been around for 11 years. We have moved on considerably over this duration of time and even though some recent browsers are adopting CSS3 already, why do we continue to use CSS2.1?

The only answer to this question I can think of is due to the continued use of legacy browsers such as IE6. If we look at the current browser trends (below), the amount of IE6 users have decreased over the year from 18.5% to 14.4%. So this is a decrease by around 4%, which is good but not great.

(http://www.w3schools.com)

Looking back at all the sites I have created over the year, I still find myself applying workarounds to give IE6 and current browsers the same viewing experience. So 14.4% of IE6 users still has a major impact on general web design.

Generally, companies are probably to blame for the continued use of IE6. Big companies are sometimes slow to change and especially if using the web is not at the business core they don’t see any reason to move forward. In addition, they see IE6 as a more secure browser.

Can I see a final nail in the IE6 coffin sometime in the future? Unfortunately, No. Microsoft have extended their support for IE6 to 2014. So for now IE6 users still have 5 years to upgrade. Lets just hope Microsoft doesn’t make the same mistake and renew IE6 support for another 5 years after 2014!

We as users of the Internet need to move with the time. If we don’t, sites will continue to be restricted to the confines of yesteryear which is no good to anybody. Legacy browsers such as IE6 need to be phased out via end of life programmes and allow newer browsers to flourish.