'Browser Update' Warnings
Standard member
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
Site director
.We do have this addon:
Browser Detect - Composr
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
Become a fan of Composr on Facebook or add me as a friend. Add me on on Mastodon. Follow me on Minds (where I am most active). Support me on Patreon
- If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
- If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
- If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
- If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Standard member
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;
}
Site director
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
Become a fan of Composr on Facebook or add me as a friend. Add me on on Mastodon. Follow me on Minds (where I am most active). Support me on Patreon
- If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
- If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
- If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
- If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
1 guest and 0 members have just viewed this.
