Browsers

Portable Editions of Legacy, Current and Upcoming Popular Browsers

If you are careful of how your new website looks on legacy, current or upcoming browsers, below is a list containing download links to past, current and upcoming versions of several popular browsing platforms.

Browsers marked with [P] are portable editions and can be used along with other versions. [L] means the latest (as of July 2010) official release.

You may also visit http://browsershots.org/ or http://crossbrowsertesting.com/ for detailed online compatibility tests with 50+ websites.

Happy testing!

CSS Optimization Tips and Tricks

1. Group selectors that share same property values. This will not only decrease the size of your stylesheets, but will make them more maintainable as well. 

2. Use shorthand properties, instead of separately defining each property for font, margin, padding, border, background, etc: 

element
{
	font-size: 11px;
	font-weight: normal;
	font-style: italic;
	font-family: Arial, Verdana, Sans-serif;
	line-height: 22px;
}

… Is the same as: 

element
{
	font: normal italic 11px/22px Arial, Verdana, Sans-serif;
}

3. Don’t apply property values that are native to the element, for example: 

h1
{
	font-weight: bold;
}

4. Use CSS sprites to reduce the number of server requests. 

5. If you are using CSS reset, it is needless to reset border, margin or padding on elements that do not have such by default, for example: 

div, span
{
	padding: 0;
	margin: 0;
}

6. Learn CSS specificity and make full use of it. Writing CSS with cascade in mind will both reduce your stylesheets and markup. 

7. Crunch your stylesheets on the server or manually. This can decrease their size up to 30-40% or even more depending on how the original stylesheet has been organized. 

8. Arguable: Remove the semi-column at the end of the last property value of the selector. This does not have negative implications on any browser, but spoils the normal flow of the code. 

9. Arguable: Do not use single or double quotes when specifying URLs for background, @import or @font-face. According to some, using quotes for specifying URLs may trigger issues with IE. 

10. If your website utilizes a couple of stylesheets, merge them before sending to the client in order to reduce server requests. If you cannot merge them, deploy them on the page with a single .css file that registers the rest of stylesheets via the @import url directive. 

11. If a property value is 0 you do not need to specify unit, as null is null in any language and measurement system: 

padding: 0; is the same as padding: 0px;

12. Optimize hex color values when possible, for example: 

#000 is the same as #000000
#369 is the same as #336699
red is the same as #ff0000

… But also have in mind that: 

#cf is not the same as #cfcfcf

13. Do not use element types for class and ID selectors, for example: 

div#mydiv is the same as #mydiv
div.myclass is the same as .myclass

14. Do not redeclare inherited values. 

15. Use descendant selectors rather than specifying classes for the children. 

16. Combine property values, for example: 

element
{
	padding: 10px 10px 10px 10px; /* top right bottom left */
}

… Is the same as: 

element
{
	padding: 10px;
}

If horizontal and vertical values differ, like: 

element
{
	padding: 4px 8px 4px 8px;
}

… You can couple them like that: 

element
{
	padding: 4px 8px; /* top|bottom - left|right */
}

If left and right values are the same, but top and bottom differ: 

element
{
	padding: 4px 6px 8px 6px;
}

… You can optimize the selector even further like: 

element
{
	4px 6px 8px; /* top left|right bottom */
}

17. Don’t use images for elements that can be styled with pure CSS. 

18. If you comment your code, keep comments short and up to the point. Don’t comment what is obvious. 

19. If an element (such as <td /> or <option />) normally resides in the context of certain parent (such as <table /> or <select />) you can save a couple of bytes if you change your selector from:

table tr td
{
 /* properties */
}

… To simply:

td
{
 /* properties */
}

12. Do not evaluate JavaScript expressions in CSS a lá IE style, e.g:

element
{
 width: expression(document.documentElement.offsetWith > 600 ? "600px" : "auto" ); /* This may stall or even crash the browser. */
}

13. Create your own CSS reset and add only elements that you are actually using on the website instead of all possible tags.

14. If you don’t care about IE6, use the CSS3 attribute selectors, for example:

input[type="text"]
{
 color: green;
}
input[type="password"]
{
 color: red;
}

15. Always register external stylesheets or add the <style /> tag in the <head /> section of the page.

16. Avoid using inline styles.

17. If you have version-specific styles for IE, use conditional comments to load these as external stylesheets instead of using CSS hacks.

18. Refrain from using the Microsoft proprietary CSS filters unless this is really needed. These are tightly connected with Direct X and users with older machines, OS or video cards may have serious problems when viewing pages with IE.

Debugging IE6 issues in the shell of IE8

As the debugging tool of IETester is quite clumsy and limited, we can debug issues with IE6 directly in the shell of IE8. The only requirement is that we have Internet Explorer Developer Toolbar installed on our machine. Here we go:

1. All versions of IE prior to 8 trigger quirks mode despite of the DTD you are using if the XML prolog is added above it, so add it *:

<?xml?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2. Open IE Deveoper Toolbar and switch the rendering engine from IE8 to IE7 in order to trigger quirks mode via XML prolog.

3. Now your IE8 will behave exactly like IE6 with all its quirky stuff and you are ready to start fighting the hell out of it.

* Instead of adding the XML prolog, you can also switch the document mode from IE8 to Quirks Mode using IE Developer Toolbar.

CSS Hack for Safari and Google Chrome: Redux

As body:nth-of-type(1) and body:first-of-type are supported by FireFox 3.5x, the hack that I wrote about in this post cannot be used anymore. You may try the following one, which targets only Google Chrome and Safari:

@media screen and (-webkit-min-device-pixel-ratio:0)
{
 div
 {
  color: red; /* The text will appear red only in Safari and Google Chrome */
 }
}

The Mystery of c:\fakepath Unveiled

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

Have you tried to manipulate the string that is returned by the value attribute of a file upload input (<input type="file" />) under Internet Explorer 8? Did you get the strange c:\fakepath string? Relax - there is nothing wrong with your code, and although this is quite confusing, it has its justifiable reasons. Here is a screenshot of a file input control manipulated with JavaScript:

FakePath

According to the specifications of HTML5, a file upload control should not reveal the real local path to the file you have selected, if you manipulate its value string with JavaScript. Instead, the string that is returned by the script, which handles the file information is c:\fakepath.

This requirement is already implemented in Internet Explorer 8 – the real path to the file will be shown only if the page that contains the control is added to the trusted sites collection of the browser.

Below is some code to play with. Notice that this will not work on localhost pages. The page should be uploaded on a production server.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>Testing the FakePath String</title>
</head>
<body>
<form id="Form1" action="" method="post">
<input type="file" /><input type="button" onclick="alert(this.previousSibling.value);" value="select file and press the button" />
</form>
</body>
</html>

More Cool Stuff

CSS Hack for Internet Explorer 8

Notwithstanding the improvements in the CSS support in Internet Explorer 8, there may be cases when a CSS hack for that particular browser is necessary. Here is one that works in IE8 Standards Compliance Mode:

.classnameOrElement
{
 
color /*\**/: blue\9
}

And another one that will be applied in all IE versions:

.classnameOrElement
{
 color: blue\9
}

Using the IE8 X-UA Compatibility Meta Tag Properly

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

Internet Explorer 8 is out, with a couple of rendering modes, that will take time to handle. As you know, IE8 renders pages in standards compliance mode by default, and the X-UA compatibility tag has been a good idea of Microsoft, as it gives a chance to developers who have not optimized their websites for IE8 to put things to work with less effort.

Did you try it already? If it is something new to you, it works like that:

1. Add the following meta-tag in the head section of your webpage above any linked files (i.e, above <link>…</link> and <script>…</script> tags)

<meta http-equiv="X-UA-Compatible" content="IE=7" />

If the tag is below link or script tags, the fix will not work.

2. Reload the page, and the meta tag will force IE8 to use the rendering engine of IE7, and your webpages will look as they did before, until you find a solution for the issues you have noticed when IE8 was released.

If your pages behave as expected under IE8 then you should use the IE8 meta tag.  This will ensure that your code will continue to run properly after the next browser upgrade:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

In summary, the compatibility UA-X meta tag is a good and legal trick to be comfort with your visitors.

Do not hesitate using it.

More Cool Stuff

Better Image Scaling and Resampling in Internet Explorer

Oddly enough, but the image scaling by using bicubic interpolation is turned off in Internet Explorer. All other browsers have this turned on by default, because this is the only normal and expected behavior. Due to this badly chosen default, sometimes the images in Internet Explorer are not displayed as smooth as in other browsers. To fix this you may use the vendor-specific CSS property -ms-interpolation-mode:

img
{
-ms-interpolation-mode: bicubic;
}

… in your CSS reset file or ordinary stylesheets.

Setting Opacity and Other Filters in Internet Explorer 8

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

It was expected that Internet Explorer 8 will support the standard “opacity” property of CSS, but it seems that its developers have decided not drop the support for filters yet, which is not that bad, though, as it still lacks support for <canvas> scripting.

However, there is a great difference between the filter support in IE8 and its previous versions. The CSS filters support in Internet Explorer 5.5 – 7.0 is added as follows:

element
{
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}

or

element
{
filter: alpha(opacity=80);
}

In Internet Explorer 8, the approach is already (finally!) vendor-specific (a lá -moz- for FireFox, -webkit- for Safari and -o- for Opera) and the value is a string in quotes:

element
{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

The entire article on the new Microsoft vendor extensions can be found on the official Internet Explorer blog.

More Cool Stuff

The 32 External CSS Files Limitation of Internet Explorer and More

Recently, a client of mine complained that certain css files included in his webpage do not load in Internet Explorer. I took a look at his code and noticed that he had tried to register more than 40 external stylesheets in the <head>...</head> section of his webpage, which reminded me of a less known limitation in Internet Explorer. Some people call it a bug, but I prefer calling it a rational limitation, and here it goes:

The max number of external CSS files that can be loaded in a single webpage via the <link /> tag, or included via the @import url directive is 32. Any css file beyond this limit will not be parsed.

And yet another limitation, which is even less known – the max filesize of an external stylesheet that can be loaded by Internet Explorer should not exceed 288Kb.

These are not fixed in Internet Explorer 7 and 8 beta, and this gives me a reason to believe that IE developers are well aware of this, and such limitation is not a bug at all, but as I mentioned before - a rational limitation, as things in web development should be within reasonable limits.

So, please, please, avoid including that many files and keep the size of your stylesheets within a reasonable and maintainable length and size. The “cascading” in Cascading Style Sheets delivers all that is necessary to write reusable, scalable, maintanable and beautiful code.

Visit http://acidmartin.wemakesites.net – the home of Acid.JS – The AJAX Tools and Widgets Library