With the rapid emergence of new and feature rich browsers, we find ourselves building web sites that work better in more recent versions of the browsers as opposed to their predecessors. You could spend a lot of development time and money and build sites that work in ALL browser versions, old and new. But sometimes this may not be worth it. This is when you have to draw the line, and build sites that only work in browser version x and higher. And you to have convey this message to your users that browse to your site using an older browser version.
So, how do you gracefully communicate the message to the user, and offer alternatives?
In this blog I will demonstrate how to display a message to users browsing with Internet Explorer version 7 (or earlier).
Used to hide the <div> tag that stores the message that is displayed to the user.
Snippet 1 – This is where we check for Internet Explorer 7 (or earlier) browser versions
Snippet 2 – This is where we will store the message that we want to display to the user. Note that the <div> tag containing the message is hidden using a CSS class.
This is the code to display the message using SharePoint’s modal window. Note that the “hidden” class is removed in the code above.
Shown below is a screenshot of the message that is displayed to the user in a SharePoint modal window:
Credit to my esteemed colleague, Greg Ostrowski, who helped with the above approach. You can read his recent blog on Underused CSS3 styles.
Attached is a zip containing a custom master page and style sheet with the above code. Enjoy!
A few notes on the custom master page:
- It is based on the out-of-the-box SharePoint 2013 ‘seattle.html’ file.
- Minified jQuery 1.10.2 version hosted on Google CDN is used.
- CSS file referenced resides in a folder in the masterpage gallery.