Browser Tag to the Rescue

When you need to customise your layout to target a specific browser platform, then the browser tag is just what you will need.

Recently we came across an issue where an encrypted, password protected PDF, on Safari, with and older copy of Acrobat Reader and the latest version of OSX would not prompt the user for a password. Yep, took us a while to work out that there was nothing we could do to encode the file differently or work around the issue.

We needed to add a message to users to alert them that they may have to upgrade Adobe PDF Reader if they ran in to difficulties. However, we didn’t want to worry everyone, so we had to make the message appear only for Safari on OSX. Luckily, we have the browser tag.

Here is what we did. Firstly, we used the browser tag to target only mac platforms.

1{% browser platform: mac %}
23{% endbrowser %}

Then we added another browser tag to target Safari only and inside that, we added our upgrade warning.

1{% browser platform: mac %}
2{% browser platform: safari %}
3Warning, you may have to upgrade Acrobat Reader if you run in to problems.
4{% endbrowser %}
5{% endbrowser %}

This is just what the browser tag was intended for. In fact, you can target a wide range of platforms and versions in case you need to do something a little specific for a particular platform just like we had to do. Have a look over at the browser tag documentation for the list of platforms.

user_agent tag

As a side note, there is also our user_agent tag that lets you supply a regex to apply to the HTTP_USER_AGENT header to give you the ultimate control over browser detection, but regular expressions can be hard to get right some days!

by Craig Sullivan

29 Oct 2012