CSS media queries are not just max-width
We recently published a brand new website for our company, Mabiloft, with a completely redesigned clean layout and a lot of new gorgeous illustration and animations.
While our designer did an amazing job thinking and drawing the website, a big assignment for us developers was to keep the layout clean and complete for every device, from the big 2K screen we coded on, to the old iPhone 4 and his 3.5 inches display.
Few weeks ago the website was almost ready and I was surfing around it, to be sure it was all the way it was thinked to be.
I noticed the layout on the home page was broken on our iPad. I quickly changed some CSS rules and fixed it, but… then the layout was broken on every laptop with a small display.
Searching for a solution I found out I could make both layout perfect using only CSS media queries, without touching the JavaScript code.
In fact, before then, I mostly used CSS media queries to make a layout responsive, but using max-width and min-width.
Now I found out that CSS media queries are not just max-width: there are a ton of them. And some of them can be really useful on everyday life.
So, what are these useful media queries I am talking about? You may have heard about some of them. I also selected a few that are pretty new and can be useful if you want your website to have that small detail that makes the difference.
Viewport dimensions media queries
Yes, I’m talking about width, height, min-width, min-height, max-width and max-height.
Did they need presentation? I’ll be fast.
These features are used to set different styles for different screen sizes. They are super useful to build a responsive system.
Since the width and height features can set styles only for exact viewport size, it’s more likely you’ll use the max- and min- prefixes. For example, this code will apply styles if the viewport height is more than 320 pixels.
But you can also mix these features to handle a size range.
The following example show how the max-width feature can be used to change the background color based on the viewport width.
Orientation
Orientation is a nice media feature that let you make changes based on the orientation of the display. It can have two values: portrait and landscape.
But what does the browser consider portrait and what landscape? The portrait value will trigger changes everytime the height of the viewport is bigger than the width. Similarly, if the width is bigger than the height, the viewport will be “landscape”.
For example, this code produces the following result:
Aspect ratio
This is similar to the orientation media feature, but more accurate. You can set rules for the exact aspect ratio you need. For example, you can set different layout rules for 16/9 phones and new 18/9 phones.
This feature can also be prefixed with max- and min- to handle a range of aspect ratios.
Hover and pointer
Ok, I will try to explain these media feature as simple as I can, since they are kind of useful.
Both hover and pointer feature refers to the primary input mechanism of the website. A mouse, for example. Or a finger, if you are using a smartphone to surf the website. To refer to all the input mechanisms you can use the any-hover and any-pointer features.
Now, what they practically do?
The hover (and any-hover) features let the browser know if the primary input mechanism can hover elements.
You can use it in this way:
- hover: hover, if the primary input mechanism can hover elements;
- hover: none, if the primary input mechanism can’t hover elements, or there is no primary pointing input mechanism.
When should I use this? For example when you want to handle hover animation on mobile devices where the input mechanism (the finger), can’t hover elements.
The pointer (and any-pointer) features let the browser know if the primary input mechanism has a pointing device (for example, a mouse) and how accurate it is.
You can use it in this way:
- pointer: coarse, if the primary input mechanism includes a pointing device of limited accuracy;
- pointer: fine, if the primary input mechanism includes an accurate pointing device;
- pointer: none, if the primary input mechanism does not include a pointing device.
This is useful for example to expand click area on devices with non accurate pointing device.
Here they are!
Note that the following are experimental features and their support is very limited at this moment.
Inverted colors
The inverted-colors feature is useful if you need to apply some styles when the system colors are inverted.
Why should I invert my system colors? Usually it’s pretty useful if you need to increase the readability.
Also keep in mind that it’s a good practice to increase font-size and decrease the font-weight when you invert colors. That’s a nice thing you could do with this media feature!
There’s only a couple of values for this feature:
- inverted: to apply styles if the colors are inverted;
- none: to apply default styles.
Here’s an example! When colors are inverted, text size will increment.
Please note that at this moment this feature is supported by Safari only (on both macOS and iOS). An always updated list of supported browser can be found here.
Prefers color scheme
This is one of my favorite feature, and I hope it will slowly become popular.
The feature allows developers to set different styles to elements if the color scheme changes. Both Windows and macOS let users change the system theme from light to dark and viceversa, iOS 13 introduced this feature as well and Android Q will bring this functionality to Android users too.
Also the browser support is decent. At this moment latest versions of Google Chrome, Mozilla Firefox and Safari support this feature. On mobile devices all major browsers support it too, except for Opera. An always updated list of supported browser can be found here.
Well, the values for this feature are pretty intuitive:
- light: to apply styles if the user prefers a light theme;
- dark: to apply styles if the user prefers a dark theme;
- no-preference: to apply default styles.
See how cool this feature can be in the example below!
Prefers reduced motion
This is also very important. I personally love animations and transitions, and I think that the right animation can really make the difference for the user experience. But not everyone likes animations, and, most important, some people can suffer vestibular disorders, that causes motion sickness and vertigo. I found a useful article that explains it very well here.
So, on most important desktop and mobile OS there is an accessibility option to handle this disorder reducing the system motion. The prefers-reduced-motion handle this option.
This feature can have two values:
- reduce: to apply styles if the user doesn’t want animations and transitions. This is generally used to disable them;
- no-preference: to apply normal styles.
Check this feature in the example below:
Browser compatibility for this is quite good. At this moment only Edge and IE don’t support it. An always updated compatibility table can be found here.
Conclusions
It has been a fun experiment for me, I learned some new features that I will probably use a lot more now.
I would have liked to talk about some more examples, like the light-level feature, that can be used to test the ambient light level, but most of the newly introduced media features still have zero support from browsers, so… it’s not time yet. By the way, the complete list of features can be found here.
Code examples
You can see live examples here. The code is open source on Github, so feel free to check it out!
Who we are?
We are a team of young developers and designers based in Padua, Italy.
We make mobile applications and websites, and we are always ready to create something great!
Our website | Dribbble | Instagram | Linkedin
Are you interested on what we do? Drop us a few lines!
