Can you nest @media and @support queries?

Yes, you can, and it doesn’t really matter in what order. A CSS preprocessor is not required. It works in regular CSS.
This works:
@supports(–a: b) {
@media (min-width: 1px) {
body {
background: red;
}
}
}
And so does this, the reverse nesting of the above:
@media (min-width: 1px) {
@supports(–a: b) {
body {
background: green;
}
}
}

You can keep going with the nesting, if it ever makes sense:
@media (min-width: 2px) {
@media (min-width:
… Read article
The post Can you nest @media and @support queries? appeared first on CSS-Tricks.

Link: https://css-tricks.com/can-you-nest-media-and-support-queries/

A responsive grid layout with no media queries

Andy Bell made a really cool demo that shows us how to create a responsive grid layout without any media queries at all. It happens to look like this when you change the size of the browser window:
I think this is a wonderful layout technique that’s just 6 lines (!) of CSS.
.auto-grid {
–auto-grid-min-size: 16rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(–auto-grid-min-size), 1fr));
grid-gap: 1rem;
}
What this shows us is that we don’t have to write a million media … Read article
The post A responsive grid layout with no media queries appeared first on CSS-Tricks.

Link: https://andy-bell.design/wrote/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/

Finally, a CSS Only Solution to :hover on Touchscreens

There have been problems with the :hover pseudo-class ever since the first web browser was installed on a touchscreen device. Of course, there were solutions, but none were the solution. With the new Level 4 Media Queries, this issue seems like it’s solved for good.

‘Uhm… What’s the Problem Again?’
So let’s say you simply added a :hover styling to an element of your webpage, so it gets some styling when the mouse hovers over it. Easy.

Hovering on desktop. Source: https://proper-hovering.glitch.me

Link: https://dzone.com/articles/finally-a-css-only-solution-to-hover-on-touchscree?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Look Ma, No Media Queries! Responsive Layouts Using CSS Grid

Not only has CSS Grid reshaped the way we think and build layouts for the web, but it has also contributed to writing more resilient code, replacing “hacky" techniques we’ve used before, and in some cases, killing the need to rely on code for specific resolutions and viewports. What’s so cool about this era in web development is that we’re capable of doing more and more with fewer lines of code.
In this article, we’ll start dipping our toes into … Read article
The post Look Ma, No Media Queries! Responsive Layouts Using CSS Grid appeared first on CSS-Tricks.

Link: https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/

Where Do You Nest Your Sass Breakpoints?

I love nesting my @media query breakpoints. It’s perhaps the most important feature of Sass to me. Maybe I pick a method and do it like this:
.element {
display: grid;
grid-template-columns: 100px 1fr;
@include breakpoint(baby-bear) {
display: block;
}
}
That’s straightforward enough. But what if my element has several sub-elements and the breakpoint affects them as well? There are different approaches, and I’m never quite sure which one I should be doing.

I could duplicate the breakpoint for … Read article
The post Where Do You Nest Your Sass Breakpoints? appeared first on CSS-Tricks.

Link: https://css-tricks.com/where-do-you-nest-your-sass-breakpoints/

Dark modes with CSS

With the introduction of dark mode in macOS, Safari Technology Preview 68 has released a new feature called prefers-color-scheme which lets us detect whether the user has dark mode enabled with a media query.
That’s right. If this becomes a little bit more supported in other browsers, then we might potentially soon have a way to toggle on night modes with a few lines of CSS!

Recently Mark Otto described how we can start using prefers-color-scheme today in order …
The post Dark modes with CSS appeared first on CSS-Tricks.

Link: https://css-tricks.com/dark-modes-with-css/

How to create a logo that responds to its own aspect ratio

One of the cool things about is that it’s literally its own document, so @media queries in CSS inside the SVG are based on its viewport rather than the HTML document that likely contains it.
This unique feature has let people play around for years. Tim Kadlec experimented with SVG formats and which ones respect the media queries most reliably. Sara Soueidan experimented with that a bunch more. Jake Archibald embedded a canvas inside and tested cross-browser compatibility that …
The post How to create a logo that responds to its own aspect ratio appeared first on CSS-Tricks.

Link: https://medium.com/9elements/building-a-responsive-image-e4c6229fa1f6

Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First

A month ago I explored the importance of relying on Interaction Media Features to identify the user’s ability to hover over elements or to detect the accuracy of their pointing device, meaning a fine pointer like a mouse or a coarse one like a finger.
But it goes beyond the input devices or the ability to hover; the screen refresh rate, the color of the screen, or the orientation. Making assumptions about these factors based on the width of the …

Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First is a post from CSS-Tricks

Link: https://css-tricks.com/mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first/

Touch Devices Should Not Be Judged By Their Size

Front-end developers and web designers live in an insane multi-device reality.
A few months ago, the Red Hat UXD team discussed how to design enterprise applications for mobile environments. Sarah and Jenn, my talented colleagues, pointed out that touch devices should not be judged by their size alone.

Assumptions are beguiling. If only we could agree on certain boundaries, then wouldn’t web design be so much easier to control?” – Jeremy Keith, Resilient Web Design
Today, there is …

Touch Devices Should Not Be Judged By Their Size is a post from CSS-TricksFront-end developers and web designers live in an insane multi-device reality.
A few months ago, the Red Hat UXD team discussed how to design enterprise applications for mobile environments. Sarah and Jenn, my talented colleagues, pointed out that touch devices should not be judged by their size alone.

Assumptions are beguiling. If only we could agree on certain boundaries, then wouldn’t web design be so much easier to control?” – Jeremy Keith, Resilient Web Design
Today, there is a new layer of complexity to the already complicated world of interaction design and front-end development.
The hardware industry has created massive touchscreen TVs, really large tablets (like the iPad Pro), and even huge touch desktop PCs (like the new, jaw-dropping Surface Studio). This means we can no longer assume that a small viewport is a touch screen and a large viewport isn’t. Sometimes large screens are touch, requiring the user to use their finger, and small screens have a stylus.
Responsive viewport media queries are great but they’re not enough.
We can detect a touch screen with JS tools like Modernizr, but CSS has a hidden gem that is smarter and more flexible.
Interaction Media Features
Thanks to the W3C CSS Working Group and the CSS community, we have a cleaner solution.
On the Media Queries Level 4 Working Draft, there is a spec for Interaction Media Features that includes three definitions:

Pointing Device Quality
Hover Capability
Rare Interaction Capabilities

These provide the capability to query a document based on the presence and accuracy of the user’s pointing device and whether it has the ability to hover over elements.
Let’s take a closer look at each one:
Pointing Device Quality: The pointer Feature
The pointer media feature is used to query about the presence and accuracy of a pointing device such as a mouse. If a device has multiple input mechanisms, the pointer media feature must reflect the characteristics of the "primary" input mechanism, as determined by the user agent." – W3C
The key word here is "accuracy" of the pointing device.

A mouse or a drawing stylus is very accurate and defines the value of fine.
A finger or a Kinect peripheral isn’t, and takes the value of coarse.

Therefore, we can adapt our UI elements to the user’s pointer capabilities. This is useful for making hit areas larger, if the user’s main input mechanism is a finger.
/* The primary input mechanism of the device includes a pointing device of limited accuracy. */
@media (pointer: coarse) { … }

/* The primary input mechanism of the device includes an accurate pointing device. */
@media (pointer: fine) { … }

/* The primary input mechanism of the device does not include a pointing device. */
@media (pointer: none) { … }
An example use case for this query is to size the click area of a checkbox or radio.
Hover Capability: The hover Feature
The hover media feature is used to query the user’s ability to hover over elements on the page. If a device has multiple input mechanisms, the hover media feature must reflect the characteristics of the "primary" input mechanism, as determined by the user agent." – W3C
It’s important to notice that it only evaluates the primary input mechanism. If the primary input mechanism is not able to hover, but the secondary input can, then the query will resolve to none:
For example, a touchscreen where a long press is treated as hovering would match hover: none." – W3C

A touch screen device, where the primary pointer system is the finger and can’t hover, will take the value of none.
A device where the primary input is a mouse and can easily hover parts of the page takes the value of hover.

/* Primary input mechanism system can
hover over elements with ease */
@media (hover: hover) { … }

/* Primary input mechanism cannot hover
at all or cannot conveniently hover
(e.g., many mobile devices emulate hovering
when the user performs an inconvenient long tap),
or there is no primary pointing input mechanism */
@media (hover: none) { … }
A good use of this query is a drop-down menu.
Rare Interaction Capabilities: The any-pointer and any-hover Features
On devices that are both touch and have a mouse or a stylus, like the Microsoft Surface, the hover and pointer media query will evaluate the primary input mechanism only.
As Andrea Giammarc pointed out, his Dell XPS 13" touch takes the value of fine, even though it does have a touch screen because the primary input mechanism is a mouse.

@Real_CSS_Tricks FYI I have a touch screen and that method fails like a charm in Chrome. 😕
— Andrea Giammarchi (@WebReflection) February 5, 2017

If we want a device like that to take the value of coarse or hover, we can use the Rare Interaction Capabilities.
The any-pointer and any-hover media features are identical to the pointer and hover media features, but they correspond to the union of capabilities of all the pointing devices available to the user. More than one of their values can match, if different pointing devices have different characteristics. They must only match none if all of the pointing devices would match none for the corresponding query, or there are no pointing devices at all." – W3C
/* One or more available input mechanism(s)
can hover over elements with ease */
@media (any-hover: hover) { … }

/* One or more available input mechanism(s) can hover,
but not easily (e.g., many mobile devices emulate
hovering when the user performs a long tap) */
@media (any-hover: on-demand) { … }

/* One or more available input mechanism(s) cannot
hover (or there are no pointing input mechanisms) */
@media (any-hover: none) { … }

/* At least one input mechanism of the device
includes a pointing device of limited accuracy. */
@media (any-pointer: coarse) { … }

/* At least one input mechanism of the device
includes an accurate pointing device. */
@media (any-pointer: fine) { … }

/* The device does not include any pointing device. */
@media (any-pointer: none) { … }
Device Examples
Typical examples of devices matching combinations of pointer and hover:

pointer: coarse
pointer: fine

hover: none
smartphones, touch screens
stylus-based screens (Cintiq, Wacom, etc)

hover: hover
Nintendo Wii controller, Kinect
mouse, touch pad

W3C
Patrick H. Lauke has written a great guide about how each device type evaluates interaction media queries.
This is really cool, right? I hear you shouting: what about browser support?
Browser Support Isn’t Bad at All!
Even though this is a working draft, it has pretty good support.
My simple test proved successful on Chrome, Chrome for Android, Safari, Edge, Opera, Samsung browser, and Android Browser, but it didn’t work on FireFox, Opera Mini or IE.
See the Pen Touch screen test by Andres Galante (@andresgalante) on CodePen.
FireFox and IE represent only a bit more than 2% mobile/tablet browser market share. I couldn’t find information about touch TVs or other touch screen devices that are not mobile or tablets.
I think we are ready to use this feature, and as FireFox adds support for it and IE dies once and for all, we will have full support.
The "Cards Selection" Use Case
A month ago, we worked on implementing a multi-select cards component for the new version of PatternFly, an open source design system to which I contribute. It was a perfect case to use the hover and pointer media query.
To select a card, when the user hovers over it, a checkbox is displayed. If the user is not able to hover over elements, then we show the checkbox at all times.
To improve this interaction, we increased the hit area of the checkbox if the primary input mechanism is coarse.
See the Pen Multi select cards by Andres Galante (@andresgalante) on CodePen.
Firefox and IE will display default checkboxes at all times.
Size Isn’t Everything
Devices should be judged by their capabilities since, in the end, it is those capabilities that define them.
This is an underused feature, and it opens the door to exciting new challenges. I can’t wait to see what we, as a community, can do with it.
References
All the descriptions commented on the code are from Mozilla Developer Network.

Touch Devices Should Not Be Judged By Their Size is a post from CSS-Tricks

Link: https://css-tricks.com/touch-devices-not-judged-size/