CSS Only Mustard Cut

Cutting the Mustard without Javascript. Also known as CSSCTM (CSS Cut-the-Mustard).

Read the SitePoint article.

I hope to keep this repo up to date with any new 'cuts' or related techniques as and when they're developed or suggested.

Please raise issues for any problems, ideas or 'cuts'.

~AK

The Original Cut

<!--
    IE 9+, FF 8+, Opera 12, Chrome 29+, Android ~4.4+
    Chrome 29+, Opera 16+, Safari 6.1+, iOS 7+, Android ~4.4+
-->
<link rel="stylesheet" href="your-stylesheet.css" media="
    only screen and (min-resolution: 0.1dpcm),
    only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
">

Test page

Edge fails with the line breaks in place. Remove line breaks in production.

The M3 Cut (Much More Modern)

<!--
    Print (Edge doesn't apply to print otherwise)
    IE 10, 11
    Edge
    Chrome 29+, Opera 16+, Safari 6.1+, iOS 7+, Android ~4.4+
    FF 29+
-->
<link rel="stylesheet" href="your-stylesheet.css" media="
    only print, screen and (min-width: 1vm),
    only all and (-ms-high-contrast: none), only all and (-ms-high-contrast: active),
    only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none),
    only all and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0),
    only all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm)
">

Can I Use (Yay, Flexbox!)

Test page

To remove IE 10 and 11 support, remove the 2nd line (only all and (-ms-high-contrast: none), only all and (-ms-high-contrast: active),).

Note that if you're combining the links media queries into one I tried putting in line breaks to make it more readable, but this cause IE9 to ignore the query and apply the styles, so DON'T ADD LINE BREAKS.

• For some reason I can't recreate the above. Something else may have been the cause of this problem.

M3+9

I recently discovered that the Edge print fix for the M3 cut actually let IE9 through, so if you need IE9+ support (instead of 10+), then use this:

<!--
    Print (Edge doesn't apply to print otherwise), IE9
    IE 10, 11
    Edge
    Chrome 29+, Opera 16+, Safari 6.1+, iOS 7+, Android ~4.4+
    FF 29+
-->
<link rel="stylesheet" href="your-stylesheet.css" media="
    only print,
    only all and (-ms-high-contrast: none), only all and (-ms-high-contrast: active),
    only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none),
    only all and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0),
    only all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm)
">

The EM2 Cut (Even More Modern)

<!--
    Print (Edge doesn't apply to print otherwise)
    Edge, Chrome 39+, Opera 26+, Safari 9+, iOS 9+, Android ~5+, Android UCBrowser ~11.8+
    FF 47+
-->
<link rel="stylesheet" href="your-stylesheet.css" media="
    only print,
    only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none),
    only all and (min--moz-device-pixel-ratio:0) and (display-mode:browser), (min--moz-device-pixel-ratio:0) and (display-mode:fullscreen)
">

Can I Use

Test page

Note that:

• Android ~5+ is according to caniuse, though it works on ~4.3+ if using Chrome or Samsung
• Android UCBrowser 11.8+ is according to caniuse though currently untested. Does not work on Android UCBrowser 11.3.2

---

Note the Android versions aren't certain because it actually depends on the WebKit version that's being used. For example, I've seen the styles actually work on an Android 4.3 device (emulated) because it was using a modern enough version of WebKit. So far, I've been unable to determine at exactly which version support starts but it appears to be somewhere between 535.19 and 537.36. It's complicated.

---

TNG Cut (The Next Generation)

<!--
    Print, Edge 12? - 18
    Edge 79+, Chrome 58+, Opera 45+, Safari 10+, iOS 10+, Android Webview/Chrome 58+, Samsung Internet
    FF 47+
-->
<link rel="stylesheet" href="your-stylesheet.css" media="
    only print, screen and (min-width: 1vm),
    only all and (color-gamut: srgb), only all and (color-gamut: p3), only all and (color-gamut: rec2020),
    only all and (min--moz-device-pixel-ratio:0) and (display-mode:browser), (min--moz-device-pixel-ratio:0) and (display-mode:fullscreen)
">

---

PRM Cut (Prefers Reduced Motion)

<!--
    Print (Edge doesn't apply to print otherwise)
    Edge 79+, Chrome 74+, Firefox 63+, Opera 64+, Safari 10.1+, iOS 10.3+, Android 81+
-->
<link rel="stylesheet" href="your-stylesheet.css" media="
    only print,
    only all and (prefers-reduced-motion: no-preference), only all and (prefers-reduced-motion: reduce)
">

Can I Use

Test page

---

PCS Cut (Prefers Color Scheme)

<!--
    Print (Edge doesn't apply to print otherwise)
    Edge 79+, Chrome 76+, Firefox 67+, Opera 62+, Safari 12.1+, iOS 13+, Android 91+
-->
<link rel="stylesheet" href="mq-test.css" media="
    only print,
    only all and (prefers-color-scheme: no-preference),
    only all and (prefers-color-scheme: light),
    only all and (prefers-color-scheme: dark)
">

Can I Use

Test page

---

PC Cut (Prefers Contrast)

<!--
    Print (Edge doesn't apply to print otherwise)
    Edge 79+, Chrome 76+, Firefox 67+, Opera 62+, Safari 12.1+, iOS 13+, Android 91+
-->
<link rel="stylesheet" href="mq-test.css" media="
    only print,
    only all and (prefers-contrast: no-preference),
    only all and (prefers-contrast: more),
    only all and (prefers-contrast: less),
    only all and (prefers-contrast: custom)
">

Can I Use

Test page

Note I've been unable to verify the cut-off for Android as BrowserStack devices all work despite reported browser versions.

---

Mix and Match

For clarity, you can mix and match the queries for more customised support.

Print

only print

---

IE 9+, FF 8+, Opera 12, Chrome 29+, Android ~4.4+

only screen and (min-resolution: 0.1dpcm)

---

IE 10, 11

only all and (-ms-high-contrast: none), only all and (-ms-high-contrast: active)

---

Chrome 29+, Opera 16+, Safari 6.1+, iOS 7+, Android ~4.4+

only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)

---

Edge, Chrome 39+, Opera 26+, Safari 9+, iOS 9+, Android ~5+*, Android UCBrowser 11.8+**

[*] (according to caniuse, though it works on ~4.3+ if using Chrome or Samsung)

[**] (according to caniuse though currently untested. Does not work on Android UCBrowser 11.3.2)

only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none)

---

FF 29+

only all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm)

---

FF 47+

only all and (min--moz-device-pixel-ratio:0) and (display-mode:browser), (min--moz-device-pixel-ratio:0) and (display-mode:fullscreen)

---

UCBrowser (JS user-agent sniff*)

if (navigator.userAgent.indexOf('UCBrowser') > -1) {
  var link  = document.createElement('link');
  link.rel  = 'stylesheet';
  link.href = 'your-stylesheet.css';
  document.getElementsByTagName('head')[0].appendChild(link);
  // You may also want to add a class to be able to target these browsers in CSS:
  document.getElementsByTagName('html')[0].className += ' ucbrowser';
}

Opera Mini (JS user-agent sniff*)

if (navigator.userAgent.indexOf('Opera Mini') > -1 || navigator.userAgent.indexOf('OPiOS') > -1) {
  var link  = document.createElement('link');
  link.rel  = 'stylesheet';
  link.href = 'your-stylesheet.css';
  document.getElementsByTagName('head')[0].appendChild(link);
}

[*] So far as I'm aware it's not possible to disable JS in UCBrowser or Opera Mini, so if the 'sniffs' are placed in HTML rather than an external file, things aren't likely to go wrong.

---

IE8 (uses conditional comments)

<!--[if IE 8]>
<link rel="stylesheet" href="your-stylesheet.css">
<![endif]-->

Mentions

• https://alistapart.com/article/the-slow-death-of-internet-explorer-and-future-of-progressive-enhancement
• https://www.smashingmagazine.com/2019/03/web-on-internet-explorer-ie8/

Usage

• https://github.com/springernature/frontend-playbook/blob/master/practices/graded-browser-support.md