{"id":19200,"date":"2016-10-03T11:30:20","date_gmt":"2016-10-03T16:30:20","guid":{"rendered":"https:\/\/getflywheel.com\/?p=19200"},"modified":"2023-10-19T16:14:17","modified_gmt":"2023-10-19T21:14:17","slug":"css-feature-queries-how-to","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/css-feature-queries-how-to\/","title":{"rendered":"How to Use CSS Feature Queries"},"content":{"rendered":"\n

The world of web design is ever-changing and it\u2019s exciting to keep up with new design trends in CSS. If you are an early CSS adopter, you may already be looking forward to using things like CSS Grid Layouts, CSS Blend Modes, or something with typographic flexibility that allows an easy way to create drop caps with CSS.<\/p>\n\n\n\n

With so many new advances in CSS, it\u2019s exciting to know that new ways of designing websites are in the realm of possibility. Traditionally, designers would have to wait to build sites with these new techniques because of the browser support problem. You don\u2019t want to build your clients a site that most browsers can\u2019t support, right? This can often be disappointing for those who are \u201cdesigning ahead,\u201d but not all hope is lost. More often than not, there is a way to create a good experience for all users, no matter what browser they are using. There\u2019s not much we can do to force the desired browser support of our clients, but there are ways we can bring our designs to life, even with limitations. That\u2019s where CSS Feature Queries come in.<\/p>\n\n\n\n

How to Account for Uneven Browser Support in Web Design<\/h2>\n\n\n\n

Do the terms \u201cgraceful degradation\u201d and \u201cprogressive enhancement\u201d ring a bell? They are probably two terms that you use regularly when discussing ways to help with the limitations of older browsers. Even if you do not call these approaches by name, you\u2019ve probably most certainly put the concepts of these into action.<\/p>\n\n\n\n

Before diving into CSS Feature Queries, it\u2019s important to understand common ways of addressing browser inconsistency. These two approaches have been around much longer and offer two different ways of design thinking.<\/p>\n\n\n\n

Graceful Degradation<\/h2>\n\n\n\n

Aside from sounding like a band name from the 90s, graceful degradation uses the idea of providing all the bells and whistles in more modern browsers, but will \u201cdegrade gracefully\u201d to a lower level of functionality in older browsers.<\/p>\n\n\n\n

It is tempting to go for the \u201cwow\u201d factor all the time by using all the new shiny CSS attributes that you can, but it\u2019s important not to lose focus on what\u2019s most important, which is the actual site content. That is why your visitors are there; they need to be able to easily view and interact with the site content. In the older browsers, the experience may not be as nice, but it will provide your users with an adequate basic functionality so they can still view the content of the site without having things appear broken or missing on the page.<\/p>\n\n\n\n

Progressive Enhancement<\/h2>\n\n\n\n

Basically, progressive enhancement is just like graceful degradation, except backwards. The approach is similar, but it does things the other way around. A basic user experience is planned out for all browsers so there is consistency with how things are rendered at a basic level, to ensure content can adequately be viewed and the user can perform any needed tasks with what is provided. More advanced functionality is then built in and will be available to the browsers that can render it.
A good way to think about it is that graceful degradation starts complex with a goal of providing a simple experience when needed. Progressive enhancements starts simple and then adds on to that with the desired feature-rich experience.<\/p>\n\n\n\n

Modernizer<\/strong><\/p>\n\n\n\n

Modernizer is the most widely adopted tool in a progressive enhancement. Modernizr<\/a> is a JavaScript library that checks if a browser supports next generation web technologies. I won\u2019t get into all the technical details here, but basically Modernizer checks if a feature is available in the browser and returns true<\/code> or false<\/code>. This allows developers to test for some of the new technologies and provide fallbacks for browsers that do not support them. It becomes necessary to note when polyfills<\/a> are needed.<\/p>\n\n\n\n

It\u2019s a good solution, but Modernizer requires JavaScript, which is small in size but yet still slower than only using CSS. And although it isn\u2019t common, what happens if JavaScript doesn\u2019t execute? That kind of defeats the purpose, which makes Feature Queries a pretty attractive option for handling browser inconsistencies.<\/p>\n\n\n\n

CSS Feature Queries<\/h2>\n\n\n\n

CSS Feature Queries are a way to perform a browser-native method of feature detection. These queries analyze whether or not a browser has properly implemented a CSS property. Essentially, the browser \u201creports\u201d on whether or not a certain CSS property or value is supported. The result determines whether or not to apply a block of CSS or not.<\/p>\n\n\n\n

When using CSS Feature Queries, being in either the graceful degradation or progressive enhancement mindset is helpful. Designers can take a graceful degradation approach when certain features are not supported. Stylesheets will use the new features when available but will degrade gracefully when those features are not supported by the browser.<\/p>\n\n\n\n

For the most part, there is pretty good browser support for CSS Feature Queries. Keep in mind that they are currently not supported in all browsers, particularly older versions of Internet Explorer. Be sure to reference Can I Use<\/a> to get current information. Don\u2019t be discouraged with the lack of IE support for Feature Queries. When doing your site planning, think of the overall CSS plan and what will not have support and go from there.<\/p>\n\n\n\n

Feature Query Examples<\/h2>\n\n\n\n

To fully understand CSS Feature Queries, it is helpful to see them in action by writing small tests in your CSS to see whether or not a particular feature is supported. This will help you write and apply CSS based on what is (or isn\u2019t) supported by a browser and optimize your page for the available set of features.<\/p>\n\n\n\n

CSS Grid Layouts<\/strong><\/p>\n\n\n\n

Let\u2019s take CSS Grid Layouts for example. They\u2019ve been a hot topic in the web design community, but because they are not mainstream yet, we can use Feature Queries to test them. We will be using the @supports<\/code> rule and targeting the browsers with grid support. You might notice the syntax of a Feature Query (the @<\/code> symbol) is a lot like a Media Query, so that makes them easy to write and remember.<\/p>\n\n\n\n

If the browser understands display: grid<\/code>, in the CSS Feature Query declaration, the styles inside the brackets will be applied. If not, it will be skipped over to our fallback.<\/p>\n\n\n\n

\/\/ fallback code for older browsers (and those that do not support Feature Queries)\n.content {\nheight: 400px;\nbackground-color: purple;\ncolor: white;\n}\n\/\/ start grid CSS\n\n@supports (display: grid) {\n.content {\ngrid-column-start: 3;\ngrid-column-end: 4;\ngrid-row-start: 3;\ngrid-row-end: 4;\nbackground: #f5c531;\nheight: 400px;\n}\n}<\/code><\/pre>\n\n\n\n
As you can see, there are different styles specified, depending on if the browser supports grid layouts or not. Only experimental browsers understand display: grid<\/code> currently, so they will display the following:<\/p>\n\n\n\n
\"Example
How a browser that supports CSS grid layouts would render the code.<\/figcaption><\/figure>\n\n\n\n
As for older browsers, they will display the fallback, which has a purple background:<\/p>\n\n\n\n
\"How
How a browser that does not support CSS grid layouts would render the code.<\/figcaption><\/figure>\n\n\n\n
Text customization with drop caps<\/strong><\/p>\n\n\n\n
Drop caps are a pretty nifty CSS capability that give an extra elegance to typography. This property tells the browser to letter bigger, like how drop caps are typically designed. For example, the first letter in the first word of a paragraph could be the size of five lines of text. The letter could be bold, with a small margin on the right side.<\/p>\n\n\n\n
However, they are not universally supported, so it\u2019s best to come up with a fallback that is styled similar to what a supported browser would show. In this example, we\u2019ll use the same color, bold style, and serif font for the design. We can account for the initial-letter<\/code> limited support by creating this default style as the fallback.<\/p>\n\n\n\n
Let\u2019s look at an example to create a drop cap with a different approach rather than using initial-letter<\/code>. (This will be your fallback code.)<\/p>\n\n\n\n
\"a<\/figure>\n\n\n\n
p::first-letter {\nfloat: left;\nfont-size: 5em;\nline-height: 1;\nfont-weight: bold;\nmargin-right: .2em;\ncolor: #00FFFF;\nfont-family: serif;\n}<\/code><\/pre>\n\n\n\n
That works, but you can create drop caps more efficiently by utilizing CSS Feature Queries and using the full potential of CSS with initial-letter<\/code>. Here\u2019s what that would look like:<\/p>\n\n\n\n
@supports (initial-letter: 5) or (-webkit-initial-letter: 5) {\np::first-letter {\n-webkit-initial-letter: 5;\ninitial-letter: 5;\ncolor: #00FFFF;\nfont-weight: bold;\nmargin-right: 0.5em;\nfont-family: serif;\n}\n}<\/code><\/pre>\n\n\n\n
Notice something a little different here? We have some logic in our Feature Query with or<\/code>. Currently, initial-letter<\/code> is only supported in Safari 9, so this requires a -webkit<\/code> prefix. It\u2019s also a good idea to include the unprefixed version (browser support will increase in the future). Keep in mind when you\u2019re experimenting, you can use or<\/code>, and<\/code>, and not<\/code> in your Feature Queries.<\/p>\n\n\n\n
Here is what is rendered from a browser that supports the initial-letter<\/code> property:<\/p>\n\n\n\n
\"Screenshot<\/figure>\n\n\n\n
New image effects<\/strong><\/p>\n\n\n\n
There are so many new image effects that can be done with CSS. Browser support varies of course, but some of these new effects are pretty cool. Who would have thought overlays weren\u2019t just a Photoshop layer anymore? Let\u2019s take a look at mix-blend-modes<\/code> and how they can be applied to images, when supported.<\/p>\n\n\n\n
Other than determining whether or not a browser supports a specific feature, Feature Queries are a tool for bundling together CSS declarations so that they\u2019ll run as a group. The following example looks complex, but once it is broken down, it will make more sense.<\/p>\n\n\n\n
Here is a simple HTML snippet that has a class applied on the <article><\/code> tag.<\/p>\n\n\n\n
&amp;amp;amp;lt;article class=&amp;amp;quot;feature-img&amp;amp;quot;&amp;amp;amp;gt;\n&amp;amp;amp;lt;img src=&amp;amp;quot;example-img.jpg&amp;amp;quot; \/&amp;amp;amp;gt;\n&amp;amp;amp;lt;\/article&amp;amp;amp;gt;<\/code><\/pre>\n\n\n\n
The CSS:<\/p>\n\n\n\n
@supports (mix-blend-mode: overlay) and ((background: linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0))) or (background: -webkit-linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0)))) {\n\n.feature-img {\nbackground: -webkit-linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0));\nbackground: linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0));\n}\n.feature-img img {\nmix-blend-mode: overlay;\n}\n}<\/code><\/pre>\n\n\n\n
As you already know, the condition must include both a property and a value. In the example above, you\u2019re checking for the mix-blend-mode<\/code> property and the overlay<\/code> value for that property. Some older Android browsers require the -webkit-<\/code> prefix for linear gradients, so this has been included in the @supports<\/code> block. Keep in mind that when you group a number of conditions together, the correct use of parentheses is necessary.<\/p>\n\n\n\n
Specifically, this block is looking for browsers that allow the for the mix-blend-mode<\/code> of overlay and the ability to render a linear-gradient<\/code>. If that is supported, the image will have an overlay with a gradient applied to it, giving it a red color.<\/p>\n\n\n\n
\"The
The original image is shown on the left. When a browser has support for mix-blend-mode: overlay<\/code> it applies a red overlay to the image with a gradient.<\/figcaption><\/figure>\n\n\n\n
For browsers that don\u2019t have mix-blend-mode<\/code> support, you would use this syntax with not<\/code>. There would be some styles applied, but very limited in comparison to those in the query above.<\/p>\n\n\n\n
@supports not(mix-blend-mode: overlay) {\n.feature-img img {\nopacity: 0.5;\nfilter: alpha(opacity=50);\n}\n}<\/code><\/pre>\n\n\n\n
\"The
The original image is shown on the left, which has no CSS applied to it. The image on the right is what browsers that do not support mix-blend-mode: overlay<\/code> will show.<\/figcaption><\/figure>\n\n\n\n
If you have not used CSS Feature Queries before, this is a good introduction to the possibilities of taking this approach. There are so many cool new things happening with CSS, and CSS Feature Queries allow for a way to utilize some of the new capabilities that are not yet fully supported.<\/p>\n","protected":false},"excerpt":{"rendered":"
The world of web design is ever-changing and it\u2019s exciting to keep up with new design trends in CSS. If you are an early CSS adopter, you may already be looking forward to using things like CSS Grid Layouts, CSS Blend Modes, or something with typographic flexibility that allows an easy way to create drop…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":147122,"template":"","resource-topic":[912],"resource-role":[896],"resource-type":[916],"class_list":["post-19200","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nHow to Use CSS Feature Queries<\/title>\n<meta name=\"description\" content=\"If you are an early CSS adopter, you may already be looking forward to using things like CSS Grid Layouts, CSS Blend Modes, and more.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use CSS Feature Queries\" \/>\n<meta property=\"og:description\" content=\"If you are an early CSS adopter, you may already be looking forward to using things like CSS Grid Layouts, CSS Blend Modes, and more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/css-feature-queries-how-to\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-19T21:14:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/10\/CSS-code_1200x627-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"627\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/10\/CSS-code_1200x627-1.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/css-feature-queries-how-to\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/css-feature-queries-how-to\/\",\"name\":\"How to Use CSS Feature Queries\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2016-10-03T16:30:20+00:00\",\"dateModified\":\"2023-10-19T21:14:17+00:00\",\"description\":\"If you are an early CSS adopter, you may already be looking forward to using things like CSS Grid Layouts, CSS Blend Modes, and more.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/css-feature-queries-how-to\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/css-feature-queries-how-to\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/css-feature-queries-how-to\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use CSS Feature Queries\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use CSS Feature Queries","description":"If you are an early CSS adopter, you may already be looking forward to using things like CSS Grid Layouts, CSS Blend Modes, and more.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Use CSS Feature Queries","og_description":"If you are an early CSS adopter, you may already be looking forward to using things like CSS Grid Layouts, CSS Blend Modes, and more.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/css-feature-queries-how-to\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-10-19T21:14:17+00:00","og_image":[{"width":1200,"height":627,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/10\/CSS-code_1200x627-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/10\/CSS-code_1200x627-1.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/css-feature-queries-how-to\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/css-feature-queries-how-to\/","name":"How to Use CSS Feature Queries","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2016-10-03T16:30:20+00:00","dateModified":"2023-10-19T21:14:17+00:00","description":"If you are an early CSS adopter, you may already be looking forward to using things like CSS Grid Layouts, CSS Blend Modes, and more.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/css-feature-queries-how-to\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/css-feature-queries-how-to\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/css-feature-queries-how-to\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Use CSS Feature Queries"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/10\/CSS-code1_343x245.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Developer","topic":"<strong>Topics:<\/strong> Performance","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/19200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/147122"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=19200"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=19200"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=19200"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=19200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}