Table of Contents
Today we will take a look at something that is really sound of very close future. This CSS module was not fully released yet, but it is so awesome that it has to be mentioned. It is something what could be born if CSS slept with Modernizr. Weird?
If you don’t know Modernizr, you have probably no clue what am I talking about. For short – to not waste your time by talking about it again, it is a JavaScript library for testing which features (properties) are supported by browser that loaded your site. You can find more about this subject in previous posts here and here.
To help you create an idea how support query work and look, imagine classic media query. In its most basic form, syntax start with “at” sign, followed either by media type (print, screen, tv etc.) or straight ahead by brackets with property (min-width, max-width, min-height, max-height, orientation etc.). Between media type and brackets must be “and” keyword. It looks like this:
CSS:
@media (property: value) { ... }
@media (min-width: 480px) {
.wrapper {width: 80%;}
}
@media media-type and (property: value) { ... }
@media screen and (orientation: landscape) {
article {
width: 75%;
font-size: 1.2em;
}
}
OK, that were media queries. CSS support queries are very similar. They have similar syntax and works on similar logic. It says browser, through conditions, what content it have to render and what not. As the name says, this condition is based on support. If browser supports that particular property, render the block of code inside curly brackets. To give you some example … Imagine flexbox:
CSS:
@supports (display: flexbox) {
ul {
display: flex;
justify-content: center;
}
}
@supports not (display: flexbox) {
ul {
margin: auto;
width: 50%;
}
}
-note: Yep, you can use “not” keyword to declare instructions for browser about what to if the property is not supported.
-note: You can also use “or” keyword to test multiple properties, like:
@supports (box-shadow: 2px 2px 5px #eee) or (text-shadow: 1px 1px 3px #eee) { ... }
In example above, if browser support flexbox, it will use code inside brackets and render unordered list appropriately. Otherwise, it will skip it. It works like Modernizr, but without any need for JavaScript and managing classes appended to <html> tag.
However, you don’t have to use the same property for support testing and then inside the curly brackets.
CSS:
@supports (transition: all .25s) {
nav {
background: blue;
color: #fff;/*white*/
}
}
Support
Even if it is a music of the future, you can already try it. Feature queries are, according to data from caniuse (odkaz) site, supported by Firefox from version 30, Chrome version 31, Opera version 23 and Android browser 4.4. IE and Safari are out of the game for now.
Summary
I don’t know how about you, but in my opinion, it sounds amazing! With feature queries we will be able to have even bigger control over the layout and so can give users much better experience from visiting our sites. AD
If you want to test feature queries online, you can visit site like Codepen or Dabblet.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
Hi how about the browser compayibility? Is media queries supported by most major browsers?
This is answered in Support part at the end. Firefox support feature queries from version 30, Chrome version 31, Opera version 23 and Android browser 4.4. IE and Safari don’t support it.