'Browser Update' Warnings
Posted
#3769
(In Topic #751)
Is there a better way than this?
Recently I detected some issues with browser compatibility with my website. Some content doesn't show correctly on older browsers, so I decided to implement a global error system that will recommend to the user that an upgrade is recommended for the best experience.Code
{+START,IF,{$IN_STR,{$BROWSER_UA},Firefox}}
{+START,IF,{$LT,{$REPLACE,fox/,,{$SUBSTR,{$BROWSER_UA},{$STRPOS,{$BROWSER_UA},fox/},6}},58}}
For the best possible experience, please
<a href="https://mozilla.org/en-US/firefox/" target="_blank" title="{!LINK_NEW_WINDOW}"><u>update your Firefox to the latest version</u></a>.
{+END}
{+END}
{+START,IF,{$IN_STR,{$BROWSER_UA},MSIE}}
{+START,IF,{$LT,{$REPLACE,MSIE ,,{$SUBSTR,{$BROWSER_UA},{$STRPOS,{$BROWSER_UA},MSIE},7}},11}}
For the best possible experience, please
<a href="https://microsoft.com/en-us/download/internet-explorer.aspx" target="_blank" title="{!LINK_NEW_WINDOW}"><u>update your Internet Explorer to the latest version</u></a>.
{+END}
{+END}
{+START,IF,{$IN_STR,{$BROWSER_UA},Chrome}}
{+START,IF,{$LT,{$REPLACE,Chrome/,,{$SUBSTR,{$BROWSER_UA},{$STRPOS,{$BROWSER_UA},Chrome},9}},63}}
For the best possible experience, please
<a href="https://google.com/chrome" target="_blank" title="{!LINK_NEW_WINDOW}"><u>update your Google Chrome to the latest version</u></a>.
{+END}
{+END}
The above works like this:
- Each major browser has its own IF statement to first check what kind of browser the visitor is using. I use $BROWSER_UA to return the browser information (name and version), then use $IN_STR to check if the name of each browser exists in $BROWSER_UA
- Once found, I'm using $SUBSTR to extract the simplified name and version of the browser (since $BROWSER_UA returns a bunch of different info I don't need)
- Then I'm using $STRPOS to find the position of the browser version (required to extract the version number from the browser name)
- Once I get the version number, I use $REPLACE to remove the name of the browser (since we already know the users browser from our IF statement) so all that remains is the version number.
- Lastly, the use of $LT is required to compare the current version that I extracted with the latest available version of that browser. If the current version is less than (or older), a message is displayed to the user, recommending them to download the latest version.
The way I did it is slightly complex and may not work for very early (or single digit) browser version numbers. I was just wondering if there was a better or easier way to do it.
Last edit: by Joe
Posted
Moderator
.We do have this addon:
Browser Detect
A browser_upgrade_suggest block to advise the visitor on doing an upgrade from old versions of IE or other browsers. If you would like to show the message as a Composr warning (at the top of the screen), use attach='1' in the parameters. Licence ------- GPL Additional credits/attributions ------------------------------- Chris Schuld
I haven't personally tested it in ages though.
EDIT: I did just have to fix a few issues, will update addon alongside our next wave of releases https://github.com/ocproducts/composr/commit/104841f7dfb99b4de724fea51b9a50f249dc509d
Last edit: by Chris Graham
Posted
While I got you here, I'm having some issues with configuring browser-specific CSS in one area. I'm using background-clip to display gradients in my H1/H2 tags. All my browsers seem to support it pretty well with the exception of MSIE, and despite what W3Schools claims, this property isn't supported in IE versions older than v11. So along with displaying the message about upgrading the users browser, I wanted to display these heading tags differently for visitors using older versions of IE.
I surrounded some CSS in Tempcode that shouldn't display if there's an old version of IE being used. The below code just displays a block filled with the gradient colors and no text (in MSIE), as if it's totally ignoring all the Tempcode surrounding it.
I'm not sure why all Tempcode is commented out in the CSS. I did comment out the Tempcode as the rest of the CSS follows the same pattern.
EDIT: I had to uncomment the Tempcode in my example due to a problem with it not showing here otherwise, but it is commented out in my CSS
Code
h1 {
{+START,IF,{$NOT,{$AND,{$IN_STR,{$BROWSER_UA},MSIE},{$LT,{$REPLACE,MSIE ,,{$SUBSTR,{$BROWSER_UA},{$STRPOS,{$BROWSER_UA},MSIE},7}},11}}}}
background-image: linear-gradient(to bottom,#ffffff,#c8c7cc);
background-image: -o-linear-gradient(to bottom,#ffffff,#c8c7cc);
background-image: -webkit-linear-gradient(to bottom,#ffffff,#c8c7cc);
background-image: -ms-linear-gradient(to bottom,#ffffff,#c8c7cc);
background-image: -moz-linear-gradient(to bottom,#ffffff,#c8c7cc);
background-clip: text;
-webkit-background-clip: text;
-moz-background-clip: text;
color: transparent;
{+END}
{+START,IF,{$AND,{$IN_STR,{$BROWSER_UA},MSIE},{$LT,{$REPLACE,MSIE ,,{$SUBSTR,{$BROWSER_UA},{$STRPOS,{$BROWSER_UA},MSIE},7}},11}}}
color: #c8c7cc;
{+END}
font-size: 5em;
font-family: 'Impact', sans-serif;
text-transform: uppercase;
border-bottom: 1px solid #ffffff;
}
Posted
Moderator
If you really do need to target different CSS to IE, you can put it in the no_cache.css CSS file, which is an exception to the above rule, or you can use CSS hacks, or you can put a CSS class on the <body> element that indicates the browser type somehow and then include that in your CSS selectors as a kind of override.
Tempcode is commented in CSS (and JavaScript) so that syntax highlighters and IDEs can work with the code smoothly. The commenting is ignored by Composr.
Last edit: by Chris Graham
3 guests and 0 members have recently viewed this.
