CODEWITHSUNDEEP
javascripthtmlcssbrowserbrowser-support
rap-2-h
rap-2-h

Reputation: 32008

Display a browser compatibility alert via CSS (grid support)

I can detect browser support and display an "alert" (a styled div) about compatibility for CSS grids with JS:

function isUpToDate() {
  var div = document.createElement('div')
  div.style.display = 'grid'
  return div.style.display === 'grid'
}

if (!isUpToDate) {
  displaySomethingAboutBrowserCompatibility()
}

Is there a way in raw CSS to do this kind of thing: drawing a div with CSS rules that makes the div only visible if grid is not supported?

Upvotes: 2

Views: 843

Answers (3)

mccambridge
mccambridge

Reputation: 1022

It depends. You could theoretically use @supports. ~The only problem with that is that @supports doesn't have enough browser support for you to rely on it.~

edit: @Quentin's answer shows you can do the inverse of this to have supported browsers turn off the message, which is a great solution to my browser support objection.

If you have a compelling reason not to use JS and don't mind this not working in all versions of IE and older versions of every browser, you could do something like

@supports not (text-align: center) {
    .myTextAlignCenterNotSupportedDivMessage {
        display: block;
    }
}

But this wouldn't be my approach. It wouldn't be dismissible. You couldn't use LocalStorage to remember their choice. Etc.

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 273086

Yes, simply use grid properties to style a div in order to make it invisble and if grid is not supported it will be visible.

Here is an idea. Open this using an old IE browser to see the result.

.box {
  display:grid;
  grid-template-columns:0px;
  grid-template-rows:0px;
}
.box * {
 overflow:hidden;
}
<div class="box">
<div>I am a div inside a grid, if you see me than you cannot use grid</div>
</div>

Upvotes: 1

Quentin
Quentin

Reputation: 943651

You can use @supports for this.

Display the warning by default, and hide if it the feature you want is supported.

div {
   display: block;
   margin: 1em;
   text-align: center;
   border: solid red 4px;
}

@supports(display: grid) {
    .grids { display: none; }
}

@supports(display: fakedisplay) {
    .fakedisplay { display: none; }
}
<div class="grids">Grid is not supported</div>

<div class="fakedisplay">Fake Display is not supported</div>

Upvotes: 2

Related Questions