(photo by Lauro
I have been quite busy these past two weeks with a front-end project for a client. I can't say who yet but the "user-agent" matrix they had tells me that they maybe sticklers, making sure the Web pages we are developing for them work and look good across different browsers.
So, in the last two weeks I was transported back to the year 2000 when I was developing Web pages for IE5.5, IE6, and Netscape. Trust me, those were not the greatest times to be front-end developers.
Internet Explorer, in particular, was the bane of Web developers who happen to be working on projects where Web pages need to look consistent across different browsers. If the little annoying differences between IE and Netscape don't kill you, then the little annoying differences between IE5, IE5.5, and IE6 will.
If it appears that I'm singling out Internet Explorer as cause for the grief of front-end developers around the world, then you are not mistaken because I am and the past two weeks reminded me of why I abhorred developing Web pages for IE.
Luckily, things have changed, thanks to the availability of robust debugging tools, not to mention, the establishment of standards like those from the W3C.
So it's still annoying but it's not as hard anymore. Allow me to share the things that have helped me these past few days.
- YUI CSS Foundation.
When you are confronted with an Adobe psd file, you often wonder and
stare at it for a few minutes to about an hour deliberating how you're
going to build the Web page. You consider the structure of the page and
the css styles you want to use.
If you're still contemplating on using tables, then you really should
go back to the year 2000 because it makes more sense now a days to use
"tableless" div based css to structure your pages.
Whether you are a novice or a professional, you are going to love YUI's CSS Tools, in particular, the CSS Grid.
It is actually just one CSS file but it allows you to, as the developer
page boasts, create 1000 page-combination layouts with just a 4kb style
sheet file. Amazing!
Furthermore, the preset templates are
guaranteed to work across what Yahoo calls A-Grade browsers. At
present, Yahoo considers IE7, Firefox 2 and Safari 3 A-Grade. Not only
is most of the foundation work done for you, you can also rest assured
that what you are using is compatible across the major Web browsers.
So don't build your css from scratch, start with the YUI CSS Grid tool.
If you're not convinced, open your Google home page in Firefox and
inspect the page elements with firebug. If you have read the YUI
developer page for the CSS Grid, you will notice that, yes, Google uses
it on your Google personal home page.
- On having layout
Have you had cases where the background image on an
HTML element looks okay on Firefox but seems misaligned on IE? What
about instances where elements float properly on Firefox but don't on
IE? If you have been developing pages on the front-end long enough, I'm
sure you will answer yes to both questions.
I came across this article entitled "On having layout" and it tries to explain in detail how and why many of these problems could be solved by simply giving the element "layout".
So what exactly does layout mean. According to the article,
"'Layout' is an IE/Win proprietary concept that
determines how elements draw and bound their content, interact with and
relate to other elements, and react on and transmit application/user
Take note, it's an IE/Win proprietary concept.
Some HTML elements like table, img, or input have layout by default but
a div does not. Since we're building our page mostly on div elements,
you can see why these so called "rendering issues" are such a pain and
why there are those who just give up and go back to using tables.
However, it's not hard to give a div element "layout". One way
suggested by the article is by setting dimensions like height or width
for the div element.
Read the article for more information and tips on giving "layout" to HTML elements and avoiding those "rendering issues" on IE.
- Doc Types and Quirksmode
Back in the day, it was each browser to itself and, as
a result, Web development was horribly time consuming and consistency
across different browsers was hard to manage.
There's no doubt about it, there was a need to define standards and the browser makers need to stick to it.
However, standards solved one problem but it also created another one.
If browser makers were to suddenly release standards-compliant versions
of their browsers, many many Web pages that don't follow the standard,
but rather the quirks of the browsers, will suddenly become broken.
Enter the doctype. The doctype allows a developer to choose between 2 modes. The article I found explains that,
"...all browsers needed two modes: quirks mode for the old rules, strict mode for
the standard. Explorer Mac was the first browser to implement the two modes, and Explorer Windows 6, Mozilla,
Safari, and Opera followed suit. Explorer 5 Windows, as well as older article browsers like Netscape 4, are
permanently locked in quirks mode.
Quirksmode.org has a detailed description of the two modes and how they affect different aspects of the page in different browsers.
Wouldn't it be amazing if you can include a file of some sort on your page and it would instantaneously make your page work consistently across all versions of IE? Well, look no further because there is such a file and it's Dean Edwards's IE7.js.
So, what is IE7.js?
behave like a standards-compliant browser. It fixes many
CSS issues and makes transparent
PNG work correctly under
IE5 and IE6.
It's really a great solution that works but I ended up not using it because:
- Load time for me was slow. I figured out later on that it was due to how css was defined. It seems that if you use a lot of wild card selectors it slows down execution time of the script. I was using extjs for this project and I just couldn't change all the css to not use wild card selectors.
Early last week Caroline asked me if I could actually write this blog entry knowing that IE was the subject without swearing. I think I did a pretty good job, don't you think? :-)