I would need something like this:
if {
@supports not(display: grid) {
window.alert("Please use a different browser.");
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>So if CSS grid is not supported by a browser, it should show a JavaScript alert. I know how it would work with just CSS, but I need a JavaScript or jQuery solution, without any HTML in the HTML section. How is it possible to do that?
You're making this too complicated 😀
if (document.documentElement.style.grid === undefined) {
alert("Please use a different browser.");
}
In modern browsers, grid is a property of the style of every element. If it's undefined, then the browser doesn't support it.
You can create an element which is normally hidden, but becomes visible if grid is not supported. Please check out https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
For example you have an element warning-message with display: none; and
@supports not (display: grid) {
#warning-message {
display: block;
}
}