Category Archives: 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