codem - blog

Posts Tagged ‘internet explorer’

Cufón and the flash of unstyled text

A quickie but a goodie. Cufón’s great for embedding fonts into web pages without having to resort to images or Flash. In some cases there is a Flash Of Unstyled Text (FOUT) when the page is loading, with the default pre-replaced text rendered in a web font shining through for a split second.

I tried all the recommended options including Cufon.now() and a visibility CSS trick but neither seemed to work. Eventually I came up with this solution, which only involves removing a class added to Cufón targets. All your offscreen rules happen in a CSS file and not in Javascript.

In your  stylesheet add this class rule (which is applied to every HTML element you wish to have Cufón-ised) e.g <h2 class=”cufonised”>

 .cufonised { text-indent : -9000px; }

After your Cufon.replace javascript (which I place in a document.ready event handler), add this JS:

jQuery('.cufonised').removeClass('cufonised');

…which resets the text-indent style and shows the Cufón-ised text (i.e the “Cufon.replace()” happens off-screen to the left). visibility : hidden/visible doesn’t seem to work in IE here, so we resort to text-indent.

For non JS enabled browsers and devices, use a noscript tag to reset the style and show the un-Cufón-ised text

<noscript><style type="text/css"> .cufonised { text-indent : 0px; } </style></noscript>

After all that you should have a well behaved Cufón replacement happening cross browser.

cache this, Internet Explorer

In my last post about the vagaries of Internet Explorer, I touched upon a technical solution we’d implemented to get Internet Explorer respecting our cache directives.

As we are using Apache,  its mod_expires module should be loaded with which we can specify for how long the user agent should cache the images. In this case we use a LocationMatch to specify the paths as a regular expression to where our assets are located:

<LocationMatch "^(/path/to/images|/another/path/to/images)">
   FileETag All
   <IfModule mod_expires.c>
     ExpiresActive On
     ExpiresByType image/jpg "access plus 14 days"
     ExpiresByType image/jpeg "access plus 14 days"
     ExpiresByType image/gif "access plus 14 days"
     ExpiresByType image/png "access plus 14 days"
   </IfModule>
</LocationMatch>

In this instance, we’re telling the client to cache  jpg, png and gif images for 14 days and we are also ETag-ing these files  – another useful measure to force the point on IE.

Even with this in place, it wouldn’t be Internet Explorer without having to deal with yet another of its quirks. If you gzip or deflate content in Apache but exclude images from this compression (for obvious reasons), Internet Explorer will refuse to cache those uncompressed images if a Vary header is being sent to the client. Luckily both mod_gzip and mod_deflate have workarounds for this :

mod_deflate (for Apache 2)

 SetOutputFilter DEFLATE
 SetEnvIfNoCase Request_URI  \.(?:gif|jpe?g|png)$ no-gzip dont-vary
 SetEnvIfNoCase Request_URI  \.(?:exe|t?gz|zip|gz2|sit|rar)$ no-gzip dont-vary

mod_gzip (for Apache 1.3)

 mod_gzip_on    Yes
 mod_gzip_send_vary    Off
 mod_gzip_dechunk  Yes
 mod_gzip_item_include file      \.(html?|txt|css|js|php)$
 mod_gzip_item_include mime      ^text/.*
 mod_gzip_item_include mime      ^application/x-javascript.*
 mod_gzip_item_exclude mime      ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

The relevant entries here that turn off the Vary header are “mod_gzip_send_vary Off” for mod_gzip and “dont-vary” for mod_deflate. You’ll know it’s working when you start seeing Expires, Cache-Control and no Vary headers when requesting images in the relevant locations.

With this in place, Internet Explorer speeds up no-end! The flip-side of that from a development point-of-view is that more people will hang on to their crusty old browser for longer. Patience is required for the next 6 months or so.