Tag: CSS

How to Selectively Hide or Display Elements Based on the Web Browser Using CSS

I recently encountered a situation in which a feature I wanted to add to my website was not supported in Internet Explorer because it relied on third-party JavaScript code that is not supported in Internet Explorer. The feature was trigged by pressing a button. The page was displayed properly but when the button was pressed nothing happened. The console revealed the reason why nothing happened when the button was pressed. The third-party JavaScript code uses a language feature not supported by Internet Explorer.

I decided that the simplest solution was to hide the button for Internet Explorer and display it for all other web browsers.

A quick Google search suggested that this was easy. The article How To Create an IE-Only Stylesheet suggested that all I need to do is use conditional comments as follows.

<!--[if !IE]><!-->
<p>This paragraph should be hidden in Internet Explorer and visible in all other web browsers.</p.
<!--<![endif]-->

While this does work for older versions of Internet Explorer, it does not work for Internet Explorer 10 and Internet Explorer 11 as discussed in Conditional comments are no longer supported.

After giving this some thought, I decided that it might be possible to do this using CSS, as follows.

if (IsInternerExplorer()) {
.hidden-for-ie-visible-for-others {
    display:none !important;
}
else {
.hidden-for-ie-visible-for-others {
    display:block;
}
}

The problem is that CSS does not support if/else statements.

The Quest for a Solution

I found several good resources such as How to Target Internet Explorer 10 and 11 in CSS that showed how to do the if part. It can be done as follows.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.hidden-for-ie-visible-for-others {
    display:none !important;
}
}

Unfortunately, the How to Target Internet Explorer 10 and 11 in CSS does not provide any information on how to do the else part. I was at a loss for how to do the else part until I thought to do a Google searc for css not Internet Explorer. This led me to the StackOverflow question Apply CSS to all browsers except IE using media query. The accepted answer suggests that the @supports rule can be used to detect all browsers except Internet Explorer as follows.

@supports not (-ms-high-contrast: none) {
   /* Non-IE styles here */
}

Unfortunately, -ms-high-contrast is not supported for older versions of Internet Explorer; it was added in Internet Explorer 10. Therefore, if we were to make use of both the @media technique and the @supports technique the hidden-for-ie-visible-for-others class would be defined for Interner Explorer 10 and Internet Explorer 11 and for most other browsers but it would not be defined for older versions of Internet Explorer.

The Solution

Fortunately, the CSS Specificity feature provides a solution. CSS properties are calculated using Precedence Rules. A simple description of these Precedence Rules is as follows.

  1. Inline css (html style attribute) overrides css rules in style tag and css file.
  2. A more specific selector takes precedence over a less specific one.
  3. Rules that appear later in the code override earlier rules if both have the same specificity.
  4. A css rule with !important always takes precedence.

Source: What is the order of precedence for CSS?

Therefore, the hidden-for-ie-visible-for-others class can be defined as follows.

/* Define the hidden-for-ie-visible-for-others class for old
versions of Interner Explorer. */
.hidden-for-ie-visible-for-others {
    display:none;
}
/* Define the hidden-for-ie-visible-for-others class for
Interner Explorer 10 and Interner Explorer 11. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.hidden-for-ie-visible-for-others {
    display:none !important;
}
}
/* Define the hidden-for-ie-visible-for-others class for
other modern browsers. */
@supports not (-ms-high-contrast: none) {
.hidden-for-ie-visible-for-others {
    display:block !important;
}
}

Then you can use the hidden-for-ie-visible-for-others class as follows.

<p class="hidden-for-ie-visible-for-others">This paragraph should be hidden in Internet Explorer and visible in all other web browsers.</p.

Using a select element to change the active stylesheet for a web page.

This article discusses the use of a select element to change the active stylesheet for a web page. It also provides step by step instructions on how to create the select element.

  • Add a link element to the head of your web page. Set the rel attribute to “stylesheet,” the href attribute to the URL of the default stylesheet you wish to use for your web page, and the id attribute to a unique value.

    Code Example:

    <link
  rel="stylesheet"
  href="https://www.w3.org/StyleSheets/Core/Swiss"
  id="W3C-Core-Styles" />
  • Add the select element. Set the value attribue of each option element to the URL of the stylesheet and the contents of each option element to the text you wish to be displayed for the combo box.

    Code Example:

    <select id="SeclectW3CCoreStyle">
<option
  value="https://www.w3.org/StyleSheets/Core/Chocolate">
Chocolate
</option>
<option
  value="https://www.w3.org/StyleSheets/Core/Midnight">
Midnight
</option>
<option
  value="https://www.w3.org/StyleSheets/Core/Modernist">
Modernist
</option>
<option
  value="https://www.w3.org/StyleSheets/Core/Oldstyle">
Oldstyle
</option>
<option
  value="https://www.w3.org/StyleSheets/Core/Steely">
Steely
</option>
<option
  value="https://www.w3.org/StyleSheets/Core/Swiss">
Swiss
</option>
<option
  value="https://www.w3.org/StyleSheets/Core/Traditional">
Traditional
</option>
<option
  value="https://www.w3.org/StyleSheets/Core/Ultramarine">
Ultramarine
</option>
</select>

    Typically, I add this select element, along with a lable and the Set Style button, to the footer at the bottom of the page.

  • Add a Set Style button, as follows.

    Code Example:

    <input
  id="SetW3CCoreStyleButton"
  onclick="SetStyle('SeclectW3CCoreStyle', 'W3C-Core-Styles')"
  type="button"
  value="Set Style" />
  • Add the following JavaScript code to a script element in your page or to a .js file on your website.
    function isEmptyOrSpaces(str){
  if (str == null){
    return true;
  }
  if (str.length == 0){
    return true;
  }
  if (str.trim() === ''){
    return true;
  }
  return false;
}

function SetStyle(selectStyleElementId, linkElementId){
  console.log(
    "SetStyle('" + selectStyleElementId
    + "', '" + linkElementId
    + "') called.");
  let seclectStyleElement =  document.getElementById
    selectStyleElementId);
  if (!seclectStyleElement){
    console.log(
      "Could not find the '" + selectStyleElementId
      + "' element.");
    return false;
  }
  let seclectedStyle = seclectStyleElement.value;
  if (isEmptyOrSpaces(seclectedStyle)){
    console.log("Could not get the selected style.");
    return false;
  }
  let linkElement = document.getElementById(linkElementId);
  if (!linkElement){
    console.log(
      "Could not find the '" + linkElementId
      + "' element.");
    return false;
  }
  linkElement.setAttribute("href", seclectedStyle);
  return true;
}

This example is fully functional. It does lack one key feature, the ability to store the selected style in a cookie. The article Store and Retrieve Cookies demonstrates the use of the localStorage.setItem and localStorage.getItem functions.

Modify the SetStyle function by adding the folloing line just above the ‘return true;’ line at the bottom of the function.

window.localStorage.setItem(
  "SeclectedStyle", seclectedStyle);

Note that the localStorage object is only supported on modern web browsers. That said, the Local storage with Window.localStorage page provides JavaScript code to emulate the feature for older browsers.

The next step is to set the style and the selected item in the select element when the web page loads. To acomplish this you need to add the following function.

function SetStyleFromCookie(selectStyleElementId, linkElementId){
  console.log(
    "SetStyleFromCookie('" + selectStyleElementId + "', '" + linkElementId + "') called.");
  let seclectedStyle = window.localStorage.getItem(
    "SeclectedStyle");
  if (isEmptyOrSpaces(seclectedStyle)){
    console.log(
      "Failed to get the value of the 'SeclectedStyle' cookie. Using the default value.");
    seclectedStyle = 'https://www.w3.org/StyleSheets/Core/Swiss';
  }
  let linkElement = document.getElementById(linkElementId);
  if (!linkElement){
    console.log("Could not find the '" + linkElementId + "' element.");
    return false;
  }
  linkElement.setAttribute("href", seclectedStyle);
  let seclectStyleElement =  document.getElementById(selectStyleElementId);
  if (!seclectStyleElement){
    console.log("Could not find the '" + selectStyleElementId + "' element.");
    return false;
  }
  seclectStyleElement.value = seclectedStyle;
  return true;
}

Finally, use the following code to call the SetStyleFromCookie function when the web page is loaded.

window.addEventListener('DOMContentLoaded', (event) => {
  SetStyleFromCookie('SeclectW3CCoreStyle', 'W3C-Core-Styles');
});

References

To see this code in action, go to Using a select element to change the active stylesheet for a web page.