@what about (this: fake code I) { made-up :: that's not valid at all? } html { background: rebeccapurple; beep: boop; color: white; color: color(display-p3 0.9975 0.7295 0.8147); }
You can use it and not use it at the same time, because it works and it doesn’t work at the same time. It’s Quantum CSS! It’s Magic! – Jen Simmons, Intro to Resilient CSS
/* IE6 and below */* html #uno { color: red }/* IE7 */*:first-child+html #dos { color: red }/* IE7, FF, Saf, Opera */html>body #tres { color: red }/* IE8, FF, Saf, Opera (Everything but IE 6,7) */html>/**/body #cuatro { color: red }
/* IE6 */#once { _color: blue }/* IE6, IE7 */#doce { *color: blue; /* or #color: blue */ }/* Everything but IE6 */#diecisiete { color/**/: blue }/* IE6, IE7, IE8, but also IE9 in some cases :( */#diecinueve { color: blue\9; }
<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="css/ie7.css" />< ![endif]--><!--[if IE 6]> <link rel="stylesheet" type="text/css" href="css/ie6.css" />< ![endif]-->
<!--[if lt IE 7]> <html class="ie6"> <![endif]--><!--[if IE 7]> <html class="ie7"> <![endif]--><!--[if IE 8]> <html class="ie8"> <![endif]--><!--[if gt IE 8]><!--> <html> <!--<![endif]-->
.no-cssgradients .header { background: url("images/glossybutton.png");}.cssgradients .header { background-image: linear-gradient(deeppink, rebeccapurple);}
No Fallback Needed Silent Override Support Queries Selector Queries Preference Queries Media Features
No Fallback Needed Silent Override Support Queries Selector Queries Preference Queries Media Features
No Fallback Needed Silent Override Support Queries Selector Queries Preference Queries Media Features
No Fallback Needed Silent Override Support Queries Selector Queries Preference Queries Media Features
No Fallback Needed Silent Override Support Queries Selector Queries Preference Queries Media Features
CSS (Motion) Remedy @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-delay: -1s !important; animation-duration: 1s !important; animation-iteration-count: 1 !important; background-attachment: initial !important; scroll-behavior: auto !important; transition-duration: 0s !important; }}
No Fallback Needed Silent Override Support Queries Selector Queries Preference Queries Media Features
/* touch screens */@media (hover: none) and (pointer: coarse) { }/* stylus-based screens */@media (hover: none) and (pointer: fine) { }/* gesture-based screens (Wii controller, Kinect) */@media (hover: hover) and (pointer: coarse) { }/* mouse & touch pad */@media (hover: hover) and (pointer: fine) { }
More Resources Resilient Web Design by Jeremy Keith Layout Land Resilient CSS by Jen Simmons Grid By Example by Rachel Andrew The Lean Web by Chris Ferdinandi Mozilla Developer Videos by [several of us]