Blog

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.