Tag: browser

DNS Prefetching

DNS is much like a phone book for the internet. For each domain name (or subdomain like ‘www’), there is an IP address that resembles a phone number. Getting the matching number for each domain can take some time and make your site appear slow, particularly on mobile connections. Fortunately, you can pre-request this information and speed up your site in most cases.

To enable a domains DNS lookup to be performed in advance of the request, you can add a single line to the <head> section of your page.

<link rel="dns-prefetch" href="//giantgeek.com" />

If you want to explicitly turn on (or off) this behavior, you can add one of the following, or their HTTP Header equivalents:

<meta http-equiv="x-dns-prefetch-control" content="on" />
<meta http-equiv="x-dns-prefetch-control" content="off" />

This is supported in all modern browsers:

  • Firefox 3.5+
  • Safari 5.0+
  • MSIE 9.0+

If should be noted that a similar method can be used to prefetch as page, but I will save that for a different article:
<link rel="prefetch" href="http://www.skotfred.com/" />

REFERENCES:

CSS -moz-opacity, -ms-filter, -khtml-opacity

I recently stumbled upon the use of this CSS element in some older code and document it here for future reference.

  • Gecko 1.9.1 (Firefox 3.5 – final release of June 30, 2009) and later do not support -moz-opacity. By now, you should be using simply opacity.
  • Prior to version 9, Internet Explorer does not support opacity, rather it supports filter instead.
  • IE supports also the extended form progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).
  • IE8 introduced -ms-filter, which is synonymous with filter.
  • Similar to -moz-opacity, -khtml-opacity has been dead since early 2004 (release of Safari 1.2).
    Konqueror never had support for -khtml-opacity and had been supporting opacity since version 4.0.

REFERENCES:

Overriding MSIE’s Friendly Error Message screens

IE overrides several HTTP error status pages but it has a size threshold. Only if the error page send by the server has a large enough body then IE decides it’s meaningful and displays it.

Usually to be safe you should make error pages that are larger then 512 bytes. The threshold varies per HTTP status code. You can look at what your thresholds are currently set to. In IE 5 and greater the settings are stored in the registry under [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\ErrorThresholds]

Err Size(bytes):

  • 400 512
  • 403 256
  • 404 512
  • 405 256
  • 406 512
  • 408 512
  • 409 512
  • 410 256
  • 500 512
  • 501 512
  • 505 512

REFERENCES:

Do Not Track (DNT) HTTP Header

Over the past year there have been many capabilities added to web browsers to allow users to indicate their willingness to be tracked across various sites for web advertisements. While the implementation by individual hosts is optional, the user can sent the request to identify their personal preference. Tracking can be relevant to allow for more “targeted” ads tailored to each user.

Firefox 4.0 betas added an "X-Do-Not-Track:1" HTTP Header. Later implemented Firefox 5.0 betas as "DNT:1". Safari and MSIE9 have also added support. Recently Firefox 9.0 exposed this attribute to JavaScript as navigator.doNotTrack, with a value of “yes” when set.

REFERENCES:

HTTP ETag Header

These are useful for some advanced caching behavior, but there are cases where you might find them unnecessary for static files (in particular). Most network analysis tools will call attention to this header value, and while it seems like a trivial amount of bandwidth to send from the server to the client, the real reason for the negative score is more likely related to the behaviors that it causes in the client.

It should be noted that the default value used for the ETag is based upon the ‘inode’ of the file, as such it’s IS problematic in clustered server environments. I’ve shown the correction for this below.

Adding the following to your Apache http.conf file is a start:


# Change ETag to remove the iNode (for multi-server environments)
FileETag MTime Size

#Remove ETag from all static content, this could be done globally without the FilesMatch, but we want better control.
<FilesMatch "\.(html|htm|js|css|gif|jpe?g|png|pdf|txt|zip|7z|gz|jar|war|tar|ear|java|pac)$">
<IfModule header_module>
Header unset ETag
</IfModule>
</FilesMatch>

REFERENCES:

Cheers.

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:

Browser capabilities comparison testing

Browsers tend to evolve quickly, but they often do not offer the same capabilities cross-platform. As a result of this, there are many standard tests available to the developers of browser software to test for compliance with modern web standards.

Before making use of a specific capability in your web application, it’s often best to determine which browsers can support it.

Avoid CSS Expressions

MSIE5 added support for CSS expressions or “Dynamic Properties”, however MSIE8 ‘deprecated’ their use and prevents their use in Standards Mode.

While powerful because this allowed you to script your CSS dynamically, there were two primary problems.

  1. Performance – the expression could fire literally hundreds or thousands of times on a page when scrolled or resized.
  2. Security – this represented an attack vector and exposed XSS

REFERENCES:

Rupee

I’ve done a lot of Internationalization(I18N) and Localization (L10N) work in my various development positions. One particularly troubling area is currency support. Support of number formats is generally well supported (or can be accomplished with some trivial input translation). However, the tricky area come with support for currency symbols, western currencies such as USD (US$) and CAD(C$) and the Euro (EUR or €) are well supported across character sets and fonts some are not. One particular item is for the Indian Rupee (INR). Ubuntu 10.10 is the first operating system to ship with a font that supports this character ₹

Unicode = &#x20b9;

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 */
}