I’d like to share some very useful HTML development tools that I’ve found.

The latest versions of CSS allow some very interesting commands to be used allowing some very useful features. Unfortunately as with all new features, the older browsers (particularly IE)  don’t support them and can leave a very professional website looking, well, not so professional when those features aren’t appearing.

There is a very useful tool called PIE, this is a ‘behaviour’ that you can add to CSS that tells the older browsers what to do with commands that they don’t understand. Basically you need to have the file PIE.htc on your website (ideally for speed of access and reliability although you could link to a remote copy as well) and add to the CSS styles that use it ‘behaviour: url(/PIE.htc). This now allows the older browsers access to a list of CSS commands that previously would be ignored.

One particular affect that you need to be aware of here is that in the server setup, you need to set the MIME type for .htc files, which is not added as standard on a lot of server setups. On IIS, you can do this in the MIME types settings in the IIS setup, on Apache hosting you can just add the line ‘AddType text/x-component .htc’ to the .htaccess file in the root folder of the site. Basically this just tells the browser what type of file .htc files are and what to do with them.

After that you can now add a load of new CSS commands:

border-radius is probably the most useful, you express it like this:
border-radius: <top-left> <top-right> <bottom-left> <bottom-right>

This allows you to round the corners of any div. Now I can hear some people thinking, “well why bother with this when I can just use a graphic with rounded corners?”. There are several very good reasons, number one is going to be load speed, you can just use a background tile meaning the graphical load is much lower. The second issue this works around is site zoom and text zoom. In order to do rounded corners that work with both forms of zooming, you end up with quite a complex structure that doesn’t always work in all browsers without a lot of work. Our previous examples of this required 9 separate divs just to create the rounded corner affect, requiring 8 graphics (4 corners, 4 tiles). Not impossible but far more difficult than it needed to be.

Of course this isn’t a perfect solution, older versions of Firefox, Safari and Chrome aren’t supported by PIE, but this is fine because they actually have been supporting these features for quite a while under their own tags, it’s only been IE which hasn’t supported them. To make sure they work in all browsers we need to add the following lines:

-moz-border-radius:
-webkit-border-radius:

Use the same settings as for the border-radius command and the rounded corners should now look correct in all browsers from IE5 to the latest and greatest browsers.

I’m not going to go into a great amount of detail about the other functions, but there are many useful tools there such as box-shadow and a gradient shadow that can be implemented.

For full details of PIE, including the download of the files please visit: http://css3pie.com/

-Steven Lockey
Web Developer, Search Engine Optimiser

The support that new browsers offer Front End Developers these days allows us to build more visually appealing web sites. Every modern browser from the much revered Firefox 3 through to IE (nuff said) 7 support the use of the .png.

More specifically, modern browsers support the alpha channel of .png’s. This is the part of the image that allows for a transparent effect, letting the viewer see part of what is behind the image. Common effects that this image format are useful for are things like drop shadows or smooth gradient effects. The reason they are so desirable in the eyes of the Front End developer is accessibility. They allow background colours or images to be changed without worrying about changing half of the rest of the graphics along with it. This makes a potentially lengthy amendment into a formality.

So what’s the problem?

The problem with IE6 is that it does not support the alpha-transparency property that other more modern browsers have addressed. This can be overcome in a tiresome method of browser hacking and combersome use of another image format called the .gif file. The .gif file was used as the default option before .png’s came along (as well as the .jpg format) while they support transparency to an extent, they do not support the alpha channel of the file. This also has an impact on the accessibility of the site and doubles up the amount of editing required to make a design change that involves a .png. Also, it is not possible (from the front end anyway) to serve up two separate images in, say, a blog post or other dynamically generated content. I’m sure you could run something server side that recognised .png’s and replaced them with a jpg, but this is overly complicated and unnecessary if it can be done more quickly.

While you can use a .png in your design on IE6, you will get a pretty odd looking result. Due to the settings a .png requires to produce its transparent appearance, IE6 will put a grey tone in place of the area that should be transparent (or translucent, depending on the gradient or apha setting).

Other quirks

There are so many different ‘.png fixes’ out there that while they work in very basic situations, as soon as you use them on slightly more complicated designs such as one with a repeating background or a background that isn’t the same size as the element it is styling, they start to behave strangely. In the latter situation, the image should stay off to one side but instead would just stretch the image until it fitted into the space the element covered. The following example shows what happens when you try to use a .png with a dodgy fix in an unordered list item.

I usually stick to jQuery because I’m used to it but after trying offerings from various people like http://jquery.andreaseberhard.de/pngFix/ or http://www.campbellsdigitalsoup.co.uk/about/png-fix/ (it was thanks to the latter that I found a better solution) I found a much better solution to the problem.

Its not a jQuery solution, however, it is also not reliant on any other framework. That means that there is little to no risk of any conflicts with jQuery. Yes I also know about the ‘no conflict’ rule that jQuery offers but trust me, having a solution that doesn’t require the developer to realise this, is much more desirable than having to realise it and make all the adjustments necessary to get it to work! The luscious javascript from http://www.dillerdesign.com/experiment/DD_belatedPNG/ allows you to deal with the problem of stretching and repeated backgrounds.

How to make it work

It’s fairly simple and best to restrict the usage of the script to IE6 by placing it in a conditional statement in the header.

<head>
<!-- other markup -->

<!--[if IE 6]>
<script type="text/javascript" src="/js/DD_belatedPNG.js"></script>
<![endif]-->
</head>

Follow this with the command to execute the .png fix either in the head of the document, just after the above javascript embed ..

<head>
<!-- other markup -->
<!--[if IE 6]>
<script type="text/javascript" src="/js/DD_belatedPNG.js"></script>
<script type="text/javascript">
 DD_belatedPNG.fix('.wrapper');
</script>
<![endif]-->
</head>

.. or as I do, add it into your jquery functions code. I do this for accessibility purposes to reduce the amount of code in the page, just good practice.

$(document).ready(function(){
 /* other scripts */

 // Browser check for IE6
 if ($.browser.msie && parseInt(jQuery.browser.version) == 6) {
 DD_belatedPNG.fix('.wrapper');
 }

});

The script currently doesn’t work on the body element of the page because of the way it detects the elements using siblings in the DOM (read more about that in the ‘Known issues’ section of the .png fix page).

Don’t over use it

Yes, this is a pretty flexible solution for IE6, however, personally, I never like to get carried away with over use of solutions that are not native to any particular browser. Javascript should not be relied upon 100% as it can, after all, be turned off like a light switch, making all your beautiful script and the hard work that went into it, absolutely pointless.

Over use of the .png in the above situation would mean your site will look awful with javascript turned off. Any professional will be automatically aware of this. I personally still try to use .jpg or .gif  (thanks compuserve) wherever possible in sites that I build.

How is this possible?

This can be in the form of a large image which is wrapped in a link like so:

<a href="/link-to-page.html">
 <img  src="/path/to/image.jpg" alt="tag for seo" />
</a>

This way, the whole image becomes clickable and increases the target area as desired. This is a perfectly valid solution.

Another way

To please SEO practitioners, designers and developers alike, areas of a Web site that appear to be made up of text, images and other xhtml elements should be exactly that wherever possible. It makes the design much more flexible, allowing direct editing of text if it were ever to change.

function(elmt){

 $(elmt).each(function(i){
 var hrefEle = $(this).find('a').attr('href');

 $(this).click(function(){
 location.href = hrefEle;
 });
 $(this).css("cursor","pointer");
 });

}

This script is the function I used to achieve this. When you call the function, you pass it the element you want to be clickable, this element needs to have a link somewhere inside it. The first thing the script does is to find the first link attribute within the chosen element via jqueries very useful find() and attr() methods. It then goes back to the original $(this) element and creates a click event, making the page navigate away to the link found previously.

Front End Developers have their work cut out to be sympathetic to all these browsers and to do a good job. There are many methods to acheive this such as:

• Online Browser testing tools
• Javascript Browser detection
• Browser specific css
• Browser specific hacks

The main tool that often gets neglected is approaching the Build of the Front End in the correct way. Personally I prefer to use Firefox as my default browser and always start my Build process using this browser. Firefox is extremely difficult to hack but it has the best rendering engine. It has also been built very much with the Web and the way it works in mind. Most Internet Explorer Browsers allow for a small but effective piece of code to target the Browser:

<!--[if IE]>
	<link href="css/ie.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 6]>
	<link href="css/ie6.css" rel="stylesheet" type="text/css">
<![endif]-->

This allows you to have a seperate file for specific Browsers. The rendering engine for various different browsers does differ and this is a useful thing to have.

Never get side-tracked and forget to test all browsers at every major step along the way. The best way is to just keep all the browsers you support open and when you finish a major structural section of the site, test, browser fix IE6 (a front end in joke – IE6 is a very old browser and notorious for breaking layouts) and you will not go too far wrong. Any issues that arise will need fixing at some point and this can be the difference between a professionally built site and one that has been thrown together.