According to the promise – and the dream of web designers and developers – the new version of Internet Explorer will be more compatible with the rest of browsers (Chrome, Firefox, Opera, Safari) than the old versions. But even if it is true, we cannot forget that our customers require a website that works in IE7 and IE8 too.
Below are, first, the solutions that I found to websites that we will create in the future, and then, solutions for the ready-made websites.
Future websites
The IE versions work differently from each other and differently from other browsers. It makes our job harder: we spend hours making layouts consistent in all browsers.
To try to solve our IE7/IE8/IE9 headaches all at once, I suggest that we always put a META tag in the websites to make IE8 and IE9 render pages like IE7. Thus, we have to think about just one IE versions: 7.
Add to that, I suggest that we make a specific CSS file for Internet Explorer, so we will avoid using hacks.
We will have other CSS files applied for all browsers and this specific CSS applied only in IE - conditional stylesheet (read more about that here: CSS-Tricks).
IE9 solution
The META tag that we will use was created just to IE8 emulate IE7, so I don't know if it will work fine in IE9. The fact is: using this META tag, IE9 emulate IE7 and I didn't find any difference between the three versions of IE yet - I tested all pages of IPass project (that use the META tag) in IE9 and everything looks fine.
Thus, in theory, everything that works in other IE versions, will also work in IE9. BUUUUT, if the things don’t work as we wish, we have the new CSS hack for IE9 only. Here it goes:
.selector
{
property: value\9;
}
Already created websites
When customers start to report problems and request IE9 compatibility with other browsers, we must analyze what is happening and see if we can solve it using the simple CSS hack aforementioned – this is not the best solution, but it is a fast way to solve problems and it is suitable for ready-made websites.
If some customer report huge problems, we will have to set the META tag (if it is not already being used) and specific CSS for IE. Then, check how it will affect the layout in IE7 and IE8 and, maybe, disapply hacks that we were using before.
Don’t forget the good practices!
All these new practices cited don’t exclude the previous ones: the use of base and reset CSS files. It is important always use these files to make sure that the problems between browsers will be avoided.
It is also important search for alternatives to improve the HTML and CSS. And, based on that, below is a list of known good practices that are easy to follow.
• Standardize the names and the capitalization rules of classes, ID's, ...
It is important to name classes, ID's and div's according to their function rather then to their style, to avoid problems in case of a layout change.
It is interesting to follow Camel Casing practice - the same capitalization rule used by our develop team. Bellow is a short explanation of what it is.
"Camel Casing convention capitalizes the first character of each word except the first word, as in the following examples: propertyDescriptor, ioStream, htmlTag."
-> Source: Brad Abrams - MSDN Blogs.
-> Source: Brad Abrams - MSDN Blogs.
• Grouping CSS values
This practice saves lines of code and makes the CSS easier to understand.
Instead of use:
.myClass
{
padding-top: 2px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 6px;
}
Group values into a single line of code. Use:
.myClass
{
padding: 2px 5px 3px 6px;
}
• Name content place holders correctly.
Do not let the Content Place Holders with the automatically name set by Visual Studio (ContentPlaceHolder+NumberOfContent).
Always name them according to their function - using short and concise names -, then they will be easily identifiable when editing HTML in Visual Studio and when adding content in Sitefinity.
• Sort the selectors' properties.
I like to organize the properties in a logic way:
.selector
{
[background];
[size];
[spacing and positioning];
[borders];
[text properties];
}
This practice affects only the organization of CSS file and facilitates the search for properties, without affecting the file working. It would be nice talking about this practice to define if this is the most logical organization that we can do.
All these tips and patterns will help us to work with all Internet Explorer versions and other browsers. Over time, we will realize what can be improved and, then, we can post here about possible changes and new good tips :)
