HTC/.htc files

What is it? Internet Explorer 5-9 introduced behaviors. Behaviors are a way to add behaviors to XML (or HTML) elements with the use of CSS styles.

Why avoid it? The behavior attribute is only supported by Internet Explorer.

What to use instead? Use JavaScript and XML DOM (or HTML DOM) instead

MSIE 5-9 support a scripting (VBScript/JScript) technology called HTML Components (HTCs) to aid in DHTML behaviors. Support was dropped in MSIE 10, you will have to force the browser into MSIE 9 compatibility to use these.

Mozilla? it has a similar proprietary implementation.
http://dean.edwards.name/moz-behaviors/

Included CSS style:

<style type="text/css">
h1 { behavior: url(example.htc) }
</style>

Inline CSS style:

<p style="behavior:url(hilite.htc)">Hello World</p>

Apache MIME Type:

AddType text/x-component .htc

REFERENCES:

CSS Cursors

The use of CSS cursors within your browser based application or website is a great way to add feedback to the user to increase usability. This is increasingly important for AJAX applications that may be “busy” even when the user is not directly taking action within their browser.

These are all easily appended to classes in your CSS files:

  • default
  • auto
  • inherit
  • pointer
  • crosshair
  • text
  • help
  • move
  • progress
  • wait
  • e-resize
  • ne-resize
  • n-resize
  • nw-resize
  • w-resize
  • sw-resize
  • s-resize
  • se-resize

Partial (CSS3) support in current browsers:

  • none
  • all-scroll
  • context-menu
  • cell
  • vertical-text
  • alias
  • copy
  • no-drop
  • not-allowed
  • col-resize
  • row-resize
  • ew-resize
  • ns-resize
  • nesw-resize
  • nwse-resize

NOTE: for very old browser, you can also set several attributes to allow for the supported one to be used.

.example {
cursor:hand;/* IE5-IE5.5 only support (dropped in IE9) */
cursor:pointer; /* IE6 and later */
}

REFERENCES:

Conditional Comments cause CSS to block

Here’s an odd one…. I’ve found that if you use the common method of using Conditional Comments to separate MSIE specific CSS, you’ve likely added a performance problem without knowing it… that is, in addition to the network connection and time required for the different CSS files.

It turns out that the standard use of this approach blocks the other downloads until the main CSS is loaded.

The solution is both simple and painless to implement…. a quick solution to this is to add an empty conditional comment early on, that is, before the main content (CSS) is loaded.. This works for all approaches, such as those where comments surround the <body> or various <link>, <style> or <script> tags.

UPDATE:
Personally, I like to do this immediately after the DOCTYPE and before the <html> tag. Additionally, since IE10 dropped support for this technique, I’ll just target IE 9 and below for any developer that comes after me.


<!DOCTYPE html>
<!--[if lte IE 9]><![endif]-->
<html lang="en">
...

REFERENCES:

MSIE Conditional Comments

This approach is useful in building standards based websites and allows you to prevent it from being “polluted” by various hacks used to support MSIE. MSIE5 and newer support the use of Conditional Comments and thus allow the developer to include additional files or markup for specific versions of the browser. Other browsers will see the content as an HTML comment and thus ignore it.


<!--[if IE]><style type="text/css">@import "/css/IE=Fixes.css";</style><![endif]-->
<!--[if lt IE 5.5000]><style type="text/css">@import "/css/IE50Fixes.css";</style><![endif]-->
<!--[if IE 5.5000]><style type="text/css">@import "/css/IE55Fixes.css";</style><![endif]-->
<!--[if IE 6]><style type="text/css">@import "/css/IE60Fixes.css";</style><![endif]-->
<!--[if IE 7]><style type="text/css">@import "/css/IE70Fixes.css";</style><![endif]-->
<!--[if IE 8]><style type="text/css">@import "/css/IE80Fixes.css";</style><![endif]-->
<!--[if IE 9]><style type="text/css">@import "/css/IE90Fixes.css";</style><![endif]-->
<!--[if lt IE 7]><script type="text/javascript" src="/wiki/skins/common/IEFixes.js"></script><![endif]-->

REFERENCES:

CDATA markup of XHTML script and style tags

Ideally all JavaScript and CSS definitions should be external to the content of an HTML page, in some cases it’s simply not practical. If you’ve migrated to XHTML markup of your page, this can often lead to XML validation errors. The use of a CDATA escape can fix most issues, though you may have to cleanup some of the actual code to resolve other issues, particularly with some special characters that are expected to be encoded.

Here are a few examples of CDATA implementation in HTML tags:

<script type="text/javascript">
/* <![CDATA[ */
...
/* ]]> */
</script>

<script type="text/javascript">// <![CDATA[
...
// ]]>
</script>

<style type="text/css">
/* <![CDATA[ */
...
/* ]]> */
</style>

Override HTML style attribute specificity with CSS

I’ve recently run into a problem when attempting to create a CSS file for print media because some local JavaScript on the page was manipulating the style attributes on the page. Due to specificity issues, it can be very difficult to “correct” the elements to provide proper output. Here’s a new (to me) trick that I just found.

You can override the local style attribute (and any manipulated at runtime with JavaScript) by adding the the [style] modifier to your CSS declaration.

div#someid[style] {
/* your CSS here */
}

Hide Focus attribute and CSS

This is an odd MSIE proprietary attribute (‘hidefocus‘) that is used to remove the dotted border (outline) of the focused elements, usually links or images, in the page. Modern CSS is much more robust and should be used in most cases for valid HTML.

The example below requires you to add the class specifically to elements, but your design may allow for you to do so for as elements of larger components of your design.

<style type="text/css">
.hidefocus:focus {
outline: none;
}
</style>

<a href="#" class="hidefocus" hidefocus="true">Some link</a>

NOTE: You should still provide some sort of visual focus mechanism for accessibility purposes, even when you prevent the default behavior.

REFERENCES:

Prevent resizing of HTML textarea in browser

Newer versions of Webkit based browsers (Safari & Chrome) as well as Firefox now allow users to resize HTML <textarea> elements by default. This can have unpredictable results on your user interfaces. Thankfully, you need only add a simple CSS attribute to prevent this newly default behavior.

textarea {resize:none;}

REFERENCES:

MSIE7+ image resizing interpolation

MSIE7 and later by default use an image resizing algorithm that means that scaled down images can look blocky and rasterized. To solve this and make them smoother, we simply enable a much better resizing algorithm that is available in MSIE that produces results similar to what you’d expect from most image editing software.


/* bicubic resizing for non-native sized IMG */
<style type="text/css">
img { -ms-interpolation-mode: bicubic; }
</style>

Replacing deprecated use of HTML ‘nobr’ tags and ‘nowrap’ attributes

It’s not uncommon to find yourself working on applications that were often build before the widespread adoption of CSS. Alongside legacy <table> based designs, the use of various mechanisms to prevent word-wrapping are often implemented.

I’ve found that the following allows for low-risk transition between technologies…

<style type="text/css">
table.nobr tr th, table tr.nobr th, table tr th.nobr, table thead.nobr tr td, table tbody.nobr tr td,
table.nobr tr td, table tr.nobr td, table tr td.nobr, table thead.nobr tr td, table tbody.nobr tr td,
.nobr {white-space:nowrap;}
</style>

With the above approach, you can apply class="nobr" to any element directly, for <table>‘s I’ve taken it a little further and allowed for the class to be set at various levels in the heirarchy to fill various needs.