Wednesday, 30 October 2013

how to kill internet explorer by using css

When we started our re-design process earlier in March 2013, we decided to change a few wordings on our webpage (e.g. changing "Thomann Cyberstore" to "Musikhaus Thomann" n stuff). To bypass our quite complicated deploy process for different language files, some developers in our team came to the great idea to transform the first letter of buttons to uppercase using css (which was a requested behaviour by our UX-designer). Later that day we had customers reporting crashes of their browser (Internet Explorer, obviously) and so we started investigating.

To cut a long story:
Using a CSS selector with the pseudo-class :first-letter and assigning the text-transform: uppercase; property really isn't a good idea, unless you care for, at least, a minor useable site for IE users (You can see an explanation/demo here). It somehow crashes all the lonely and unloved Internet Explorer's below and including version 9.

Fun fact: IE10 was the only version the responsible developer tested before going live. Success!

We also reported this bug to Microsoft, but I guess they're right; it has a limited impact, because transforming a first letter to uppercase by using CSS is simply a bad idea. Period.

No comments:

Post a Comment