HTML And CSS

I recently had a comment on my how to check and uncheck a checkbox with jQuery post suggesting to use a convuluted method to make the text alongside a checkbox toggle its state. I suggested using <label>s instead which is much easier and not reliant on Javascript but it got me thinking that perhaps a lot of people don’t know about the very useful <label> tag, hence this post.

The ID attribute in HTML tags has a limited set of allowable characters and a web page will not validate if invalid characters are used. This post summarizes what is allowed. Note that this post is specific to HTML4.

Internet Explorer’s conditional comments can be useful for applying different style sheets to older versions of Internet Explorer without having to hack your style sheets up too much. There are several different ways to target versions of Internet Explorer with condition comments by making the code between the conditions look like a regular HTML comment to other browsers. It is also possible to target particular versions of IE and also let all other browsers access the code between the comments. This post looks at how to do this, using a Javascript include file as an example.

If you wanted to include a Javascript library, like jQuery for example, for only Internet Explorer 6.0 and higher, and also all other browsers, you could do something like this:

<!--[if gte IE 6]>
<script language="javascript" type="text/javascript" src="/js/jquery-1.2.3.js"></script>
 <![endif]-->
 
 <![if !IE]>
 <script language="javascript" type="text/javascript" src="/js/jquery-1.2.3.js"></script>
 <![endif]>
 

The first condition says that for Internet Explorer 6 and higher use the code between the tags and include the Javascript file; older versions will ignore the code and not include the file. The second condition says all non Internet Explorer browsers should use this code and include the file.

The only problem with the above example is you end up having to put the same <script> tag in twice and use up more space than is necessary. Fortunately it’s possible to combine the two into a single conditional comment like so:

<!--[if gte IE 6]><!-->
 <script language="javascript" type="text/javascript" src="/js/jquery-1.2.3.js"></script>
 <!--<![endif]-->
 

The same code example again, but this time with emphasis so you can see the additional parts added to the first conditional comment in the first example:

<!--[if gte IE 6]><!-->
 <script language="javascript" type="text/javascript" src="/js/jquery-1.2.3.js"></script>
 <!--<![endif]-->

This works the same way as the first example above but is more concise and only requires the <script> tag to be in the HTML code once.

It can be useful to have an offsite link icon next to external links on a web page. This is easy to implement using CSS without having to add any additional elements to your anchor tags or additional image tags to the HTML source.

A useful CSS technique is to apply multiple CSS classes to a single element; this is something I didn’t know was possible when I first started with CSS several years ago and I often find people do not realise it can actually be done.