Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
@supports

6 Articles
{
,

}
Direct link to the article Custom Styling Form Inputs With Modern CSS Features
@supports checkboxes custom properties forms inputs radio buttons

Custom Styling Form Inputs With Modern CSS Features

It’s entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don’t even need a single line of JavaScript or extra HTML elements! It’s actually gotten easier lately than it has …

Avatar of Aaron Iker
Aaron Iker on Feb 12, 2020
Direct link to the article Can you nest @media and @support queries?
@supports media queries nesting

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 …

Avatar of Chris Coyier
Chris Coyier on Aug 5, 2019
Direct link to the article Get a CSS Custom Property Value with JavaScript
@supports custom properties

Get a CSS Custom Property Value with JavaScript

Direct Link

Here’s a neat trick from Andy Bell where he uses CSS Custom Properties to check if a particular CSS feature is supported by using JavaScript.

Basically, he’s using the ability CSS has to check for browser support on a particular …

Avatar of Robin Rendle
Shared by Robin Rendle on Apr 11, 2019
Direct link to the article How @supports Works
@supports progressive enhancement

How @supports Works

CSS has a neat feature that allows us to test if the browser supports a particular property or property:value combination before applying a block of styles — like how a @media query matches when, say, the width of the browser …

Avatar of Chris Coyier
Chris Coyier on Feb 25, 2019
Direct link to the article Using Feature Detection, Conditionals, and Groups with Selectors
:not @supports at-rules

Using Feature Detection, Conditionals, and Groups with Selectors

CSS is designed in a way that allows for relatively seamless addition of new features. Since the dawn of the language, specifications have required browsers to gracefully ignore any properties, values, selectors, or at-rules they do not support. Consequently, in …

Avatar of Jirka Vebr
Jirka Vebr on Oct 19, 2018
Direct link to the article Using Feature Detection to Write CSS with Cross-Browser Support
@supports cross-browser CSS css testing feature detection modernizr react styled components

Using Feature Detection to Write CSS with Cross-Browser Support

In early 2017, I presented a couple of workshops on the topic of CSS feature detection, titled CSS Feature Detection in 2017.

A friend of mine, Justin Slack from New Media Labs, recently sent me a link to …

Avatar of Schalk Venter
Schalk Venter on Aug 29, 2018
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top