Skype toolbar meta tag… preventing Skype from messing up your UI

I’ve previously documented the method used to prevent IOS devices from formatting numbers.

Users on other platforms, notably Windows, have Skype installed and it too can cause some headaches with your UI as it inserts elements to decorate phone numbers.

For users that have the Skype Toolbar enabled, the following META tag will prevent it from doing a lot of damage!

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

REFERENCES:

HTML cleartype meta tag?

This tag allows for activation of ClearType in Mobile IE for smoothing fonts.


<!--[if IEMobile]><meta http-equiv="cleartype" content="on" /><![endif]-->

NOTE: Future use of this approach is questionable, as MSIE10 dropped support of conditional comments, and HTML5 validators (in general) do not “like” the http-equiv values as they are not standardized

REFERENCES:

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:

HTA/.hta files

HTA/.hta files are a technology that Microsoft implemented in it’s browsers MSIE 5-9 to support rich web applications, MSIE 10 and newer do not implement it and must be forced into MSIE 9 compatibility mode.

Most often HTA was/is used to hide the browser controls (chrome) from the user to provide dialog windows.

EXAMPLE:

<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=9" />
<!-- does not work in 10 or above, so force it back down -->
<hta:application id="example"
applicationname="example"
border="1"
caption="no"
icon="icon.ico"
navigable="no"
scroll="no"
showintaskbar="no"
singleinstance="yes"
sysmenu="no"
windowstate="normal">
</hta:application>
</head>
</html>

Apache MIME Type:

AddType application/hta .hta

REFERENCES:

Google ChromeFrame

There was some debate back when this was first revealed in 2009, but the use of ChromeFrame is still relevant for some organizations that are stuck on older browsers for legacy applications.


<meta http-equiv="X-UA-Compatible" content="chrome=1" /><!-- this is for all versions of IE -->
<meta http-equiv="X-UA-Compatible" content="chrome=IE6" /><!-- this is for IE6 and lower -->
<meta http-equiv="X-UA-Compatible" content="chrome=IE7" /><!-- this is for IE7 and lower -->
<meta http-equiv="X-UA-Compatible" content="chrome=IE8" /><!-- this is for IE8 and lower -->
<meta http-equiv="X-UA-Compatible" content="chrome=IE9" /><!-- this is for IE9 and lower -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE6" /><!-- this is for IE9 and lower, passes Edge to others -->

NOTES:

  1. Installation can be done without Administrative rights on the Windows OS.
  2. Installation will append the ‘chromeframe’ version to the ‘User-Agent’ HTTP header sent by the browser to allow it to be parsed.

REFERENCES:

MSIE iframe frameBorder=”0″ attribute is case sensitive?

No, you are not going crazy… MSIE 6 and 7 are case sensitive for the ‘frameBorder‘ (and a few other attributes).
It seems that the JavaScript attribute names are expected to be used in the HTML, should you expect them to behave and look properly you’ll have to make some small changes to support, this is even more important when using JavaScript to update or change attributes.

<iframe... frameBorder="0"></iframe>

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:

Cloudflare CDN (Content Delivery Network)

Best practices for web applications often call for the use of a CDN. Those of you that have worked with YSlow! are likely very accustomed to seeing warnings for this reason. I’ve found that CloudFlare is very easy to setup, and for basic services costs absolutely nothing. In addition to the obvious performance advantages of using a CDN to offload much of your network traffic, it also has the advantage of improved security.

CDN’s work by caching a copy of your static content at several locations around the world, making it closer and faster for your users.

Implementation takes only minutes as it requires that you:

  1. create a (free) account,
  2. retrieve your existing DNS values from your current provider,
  3. determine direct vs. CDN “cloud” routing for each subdomain,
  4. change your DNS records to point to the CloudFlare DNS servers

Some additional advantages I’ve seen since implementing:

  • Site remains available in limited capability to users during server outages or upgrades.
  • Simplified network configuration as all requests can be sent outside of the LAN for users local to the servers
  • IPv6 dual-stack support

REFERENCES:

X-Download-Options:noopen to download files

There are a couple of steps required to force a browser to save/download content instead of displaying it in the browser window.


X-Download-Options: noopen
X-Content-Type-Options:nosniff
Content-Disposition: attachment; filename=example.txt
Content-Type: text/plain

NOTE: MSIE also supports a poorly documented proprietary META tag…

<meta name="DownloadOptions" content="noopen|nosave" />

REFERENCES:

X-Content-Type-Options: nosniff

To prevent XSS/CSRF exploits in MSIE8 and newer, it’s often best to close as many attack vectors as possible. An easy one to implement is an HTTP Header to prevent MSIE from “sniffing” the content to change it when incorrect.

Example: we would not want an HTML page intentionally served with ‘text/plain’ to be rendered as HTML.


X-Content-Type-Options: nosniff
Content-Type: text/plain

This could be added programatically to pages in your application, via a servlet or servlet filter or added to the httpd.conf file.

Apache2 example: httpd.conf

<IfModule headers_module>
Header set X-Content-Type-Options nosniff
</IfModule>

REFERENCES: