Direct link to the article Interaction Media Features and Their Potential (for Incorrect Assumptions)

Interaction Media Features and Their Potential (for Incorrect Assumptions)

The Media Queries Level 4 Interaction Media Features — pointer, hover, any-pointer and any-hover — are meant to allow sites to implement different styles and functionality (either CSS-specific interactivity like :hover, or JavaScript behaviors, when queried using window.matchMedia), depending on the particular characteristics of a user’s input device.
Avatar of Patrick H. Lauke
Patrick H. Lauke on (Updated on )
Direct link to the article Responsive Styling Using Attribute Selectors

Responsive Styling Using Attribute Selectors

One of the challenges we face when implementing class-based atomic styling is that it often depends on a specific breakpoint for context. We can prefix each breakpoint. This works well until we start adding multiple classes. That’s when it becomes difficult to keep a track what relates to what and where to add, remove. or change stuff.
Avatar of Jakob E
Jakob E on
Direct link to the article Solving Sticky Hover States with @media (hover: hover)

Solving Sticky Hover States with @media (hover: hover)

Direct Link

Mezo Istvan does a good job of covering the problem and a solution to it in a blog post on Medium. If you tap on something that has a :hover state but you don't leave the page then, on a mobile device, there is a chance that :hover state "sticks." You'll see this with stuff like jump-links used as tabs or buttons that trigger on-page functionality.
Avatar of Chris Coyier
Shared by Chris Coyier on