└── README.md


/README.md:
--------------------------------------------------------------------------------
  1 | CSS Only Mustard Cut
  2 | ====================
  3 | 
  4 | Cutting the Mustard without Javascript. Also known as CSSCTM (CSS Cut-the-Mustard).
  5 | 
  6 | Read the [SitePoint article](http://www.sitepoint.com/cutting-the-mustard-with-css-media-queries/).
  7 | 
  8 | I hope to keep this repo up to date with any new 'cuts' or related techniques as and when they're developed or suggested.
  9 | 
 10 | Please raise issues for any problems, ideas or 'cuts'.
 11 | 
 12 | ~AK
 13 | 
 14 | 
 15 | The Original Cut
 16 | ----------------
 17 | ~~~html
 18 | <!--
 19 |     IE 9+, FF 8+, Opera 12, Chrome 29+, Android ~4.4+
 20 |     Chrome 29+, Opera 16+, Safari 6.1+, iOS 7+, Android ~4.4+
 21 | -->
 22 | <link rel="stylesheet" href="your-stylesheet.css" media="
 23 |     only screen and (min-resolution: 0.1dpcm),
 24 |     only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
 25 | ">
 26 | ~~~
 27 | 
 28 | [Test page](http://fall-back.github.io/test/support.html)
 29 | 
 30 | Edge fails with the line breaks in place. **Remove line breaks in production.**
 31 | 
 32 | 
 33 | The M3 Cut (Much More Modern)
 34 | -----------------------------
 35 | 
 36 | ~~~html
 37 | <!--
 38 |     Print (Edge doesn't apply to print otherwise)
 39 |     IE 10, 11
 40 |     Edge
 41 |     Chrome 29+, Opera 16+, Safari 6.1+, iOS 7+, Android ~4.4+
 42 |     FF 29+
 43 | -->
 44 | <link rel="stylesheet" href="your-stylesheet.css" media="
 45 |     only print, screen and (min-width: 1vm),
 46 |     only all and (-ms-high-contrast: none), only all and (-ms-high-contrast: active),
 47 |     only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none),
 48 |     only all and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0),
 49 |     only all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm)
 50 | ">
 51 | ~~~
 52 | 
 53 | [Can I Use](http://caniuse.com/#compare=ie+10,firefox+29,chrome+29,safari+6.1,opera+16,ios_saf+7.0-7.1,android+4.4) (Yay, Flexbox!)
 54 | 
 55 | [Test page](http://fall-back.github.io/test/support-m3.html)
 56 | 
 57 | 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),`).
 58 | 
 59 | <s>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.</s>
 60 |  - For some reason I can't recreate the above. Something else may have been the cause of this problem.
 61 | 
 62 | 
 63 | M3+9
 64 | ----
 65 | 
 66 | 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:
 67 | 
 68 | ~~~html
 69 | <!--
 70 |     Print (Edge doesn't apply to print otherwise), IE9
 71 |     IE 10, 11
 72 |     Edge
 73 |     Chrome 29+, Opera 16+, Safari 6.1+, iOS 7+, Android ~4.4+
 74 |     FF 29+
 75 | -->
 76 | <link rel="stylesheet" href="your-stylesheet.css" media="
 77 |     only print,
 78 |     only all and (-ms-high-contrast: none), only all and (-ms-high-contrast: active),
 79 |     only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none),
 80 |     only all and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0),
 81 |     only all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm)
 82 | ">
 83 | ~~~
 84 | 
 85 | 
 86 | The EM2 Cut (Even More Modern)
 87 | ------------------------------
 88 | 
 89 | ~~~html
 90 | <!--
 91 |     Print (Edge doesn't apply to print otherwise)
 92 |     Edge, Chrome 39+, Opera 26+, Safari 9+, iOS 9+, Android ~5+, Android UCBrowser ~11.8+
 93 |     FF 47+
 94 | -->
 95 | <link rel="stylesheet" href="your-stylesheet.css" media="
 96 |     only print,
 97 |     only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none),
 98 |     only all and (min--moz-device-pixel-ratio:0) and (display-mode:browser), (min--moz-device-pixel-ratio:0) and (display-mode:fullscreen)
 99 | ">
100 | ~~~
101 | 
102 | [Can I Use](https://caniuse.com/#compare=edge+12,firefox+47,chrome+39,safari+9,opera+26,ios_saf+9.0-9.2,android+62)
103 | 
104 | [Test page](http://fall-back.github.io/test/support-em2.html)
105 | 
106 | Note that:
107 | * Android ~5+ is according to caniuse, though it works on ~4.3+ if using Chrome or Samsung
108 | * Android UCBrowser 11.8+ is according to caniuse though currently untested. Does not work on Android UCBrowser 11.3.2
109 | 
110 | ---
111 | 
112 | 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.
113 | 
114 | ---
115 | 
116 | TNG Cut (The Next Generation)
117 | -----------------------------
118 | 
119 | ~~~html
120 | <!--
121 |     Print, Edge 12? - 18
122 |     Edge 79+, Chrome 58+, Opera 45+, Safari 10+, iOS 10+, Android Webview/Chrome 58+, Samsung Internet
123 |     FF 47+
124 | -->
125 | <link rel="stylesheet" href="your-stylesheet.css" media="
126 |     only print, screen and (min-width: 1vm),
127 |     only all and (color-gamut: srgb), only all and (color-gamut: p3), only all and (color-gamut: rec2020),
128 |     only all and (min--moz-device-pixel-ratio:0) and (display-mode:browser), (min--moz-device-pixel-ratio:0) and (display-mode:fullscreen)
129 | ">
130 | ~~~
131 | 
132 | ---
133 | 
134 | PRM Cut (Prefers Reduced Motion)
135 | -----------------------------
136 | 
137 | ~~~html
138 | <!--
139 |     Print (Edge doesn't apply to print otherwise)
140 |     Edge 79+, Chrome 74+, Firefox 63+, Opera 64+, Safari 10.1+, iOS 10.3+, Android 81+
141 | -->
142 | <link rel="stylesheet" href="your-stylesheet.css" media="
143 |     only print,
144 |     only all and (prefers-reduced-motion: no-preference), only all and (prefers-reduced-motion: reduce)
145 | ">
146 | ~~~
147 | 
148 | [Can I Use](https://caniuse.com/?compare=edge+79,firefox+63,chrome+74,safari+10.1,opera+64,ios_saf+10.3,android+81,and_chr+89,and_ff+86,samsung+11.1-11.2)
149 | 
150 | [Test page](http://fall-back.github.io/test/support-prm.html)
151 | 
152 | ---
153 | 
154 | PCS Cut (Prefers Color Scheme)
155 | -----------------------------
156 | 
157 | ~~~html
158 | <!--
159 |     Print (Edge doesn't apply to print otherwise)
160 |     Edge 79+, Chrome 76+, Firefox 67+, Opera 62+, Safari 12.1+, iOS 13+, Android 91+
161 | -->
162 | <link rel="stylesheet" href="mq-test.css" media="
163 |     only print,
164 |     only all and (prefers-color-scheme: no-preference),
165 |     only all and (prefers-color-scheme: light),
166 |     only all and (prefers-color-scheme: dark)
167 | ">
168 | ~~~
169 | 
170 | [Can I Use](https://caniuse.com/?compare=edge+79,firefox+63,chrome+74,safari+10.1,opera+64,ios_saf+10.3,android+81,and_chr+89,and_ff+86,samsung+11.1-11.2&compareCats=CSS)
171 | 
172 | [Test page](http://fall-back.github.io/test/support-pcs.html)
173 | 
174 | ---
175 | 
176 | PC Cut (Prefers Contrast)
177 | -----------------------------
178 | 
179 | ~~~html
180 | <!--
181 |     Print (Edge doesn't apply to print otherwise)
182 |     Edge 79+, Chrome 76+, Firefox 67+, Opera 62+, Safari 12.1+, iOS 13+, Android 91+
183 | -->
184 | <link rel="stylesheet" href="mq-test.css" media="
185 |     only print,
186 |     only all and (prefers-contrast: no-preference),
187 |     only all and (prefers-contrast: more),
188 |     only all and (prefers-contrast: less),
189 |     only all and (prefers-contrast: custom)
190 | ">
191 | ~~~
192 | 
193 | [Can I Use](https://caniuse.com/?compare=chrome+96,edge+96,safari+14.1,firefox+101,opera+82,and_chr+119,ios_saf+14.5-14.8,samsung+17.0,android+119,and_ff+119&compareCats=CSS)
194 | 
195 | [Test page](http://fall-back.github.io/test/support-ps.html)
196 | 
197 | Note I've been unable to verify the cut-off for Android as BrowserStack devices all work despite reported browser versions.
198 | 
199 | ---
200 | 
201 | Mix and Match
202 | -------------
203 | 
204 | For clarity, you can mix and match the queries for more customised support.
205 | 
206 | Print
207 | ~~~css
208 | only print
209 | ~~~
210 | ---
211 | 
212 | IE 9+, FF 8+, Opera 12, Chrome 29+, Android ~4.4+
213 | ~~~css
214 | only screen and (min-resolution: 0.1dpcm)
215 | ~~~
216 | ---
217 | 
218 | IE 10, 11
219 | ~~~css
220 | only all and (-ms-high-contrast: none), only all and (-ms-high-contrast: active)
221 | ~~~
222 | ---
223 | 
224 | Chrome 29+, Opera 16+, Safari 6.1+, iOS 7+, Android ~4.4+
225 | ~~~css
226 | only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
227 | ~~~
228 | ---
229 | 
230 | Edge, Chrome 39+, Opera 26+, Safari 9+, iOS 9+, Android ~5+*, Android UCBrowser 11.8+**
231 | 
232 | [*]  (according to caniuse, though it works on ~4.3+ if using Chrome or Samsung)
233 | 
234 | [**] (according to caniuse though currently untested. Does not work on Android UCBrowser 11.3.2)
235 | ~~~css
236 | only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none)
237 | ~~~
238 | ---
239 | 
240 | FF 29+
241 | ~~~css
242 | only all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm)
243 | ~~~
244 | ---
245 | 
246 | FF 47+
247 | ~~~css
248 | only all and (min--moz-device-pixel-ratio:0) and (display-mode:browser), (min--moz-device-pixel-ratio:0) and (display-mode:fullscreen)
249 | ~~~
250 | ---
251 | 
252 | UCBrowser (JS user-agent sniff*)
253 | ~~~javascript
254 | if (navigator.userAgent.indexOf('UCBrowser') > -1) {
255 |   var link  = document.createElement('link');
256 |   link.rel  = 'stylesheet';
257 |   link.href = 'your-stylesheet.css';
258 |   document.getElementsByTagName('head')[0].appendChild(link);
259 |   // You may also want to add a class to be able to target these browsers in CSS:
260 |   document.getElementsByTagName('html')[0].className += ' ucbrowser';
261 | }
262 | ~~~
263 | 
264 | Opera Mini (JS user-agent sniff*)
265 | ~~~javascript
266 | if (navigator.userAgent.indexOf('Opera Mini') > -1 || navigator.userAgent.indexOf('OPiOS') > -1) {
267 |   var link  = document.createElement('link');
268 |   link.rel  = 'stylesheet';
269 |   link.href = 'your-stylesheet.css';
270 |   document.getElementsByTagName('head')[0].appendChild(link);
271 | }
272 | ~~~
273 | 
274 | [*] 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.
275 | 
276 | ---
277 | 
278 | IE8 (uses conditional comments)
279 | ~~~html
280 | <!--[if IE 8]>
281 | <link rel="stylesheet" href="your-stylesheet.css">
282 | <![endif]-->
283 | ~~~
284 | 
285 | 
286 | Mentions
287 | --------
288 | 
289 | * https://alistapart.com/article/the-slow-death-of-internet-explorer-and-future-of-progressive-enhancement
290 | * https://www.smashingmagazine.com/2019/03/web-on-internet-explorer-ie8/
291 | 
292 | 
293 | Usage
294 | -----
295 | 
296 | * https://github.com/springernature/frontend-playbook/blob/master/practices/graded-browser-support.md
297 | 
298 | 
299 | ---
300 | 
301 | Other Techniques
302 | ----------------
303 | 
304 | ### TLS
305 | 
306 | All websites should by now be serving the pages over https. A security certificate is crucial in the modern age, but older browser do not support TLS and will refuse to load the page.
307 | This can be considered a natural 'cut' and can be factored in to your fallback support strategy without having to add any extra code.
308 | 
309 | [TLS 1.1](https://caniuse.com/tls1-1) is deprecated so shouldn't really be used, but [TLS 1.2](https://caniuse.com/tls1-2) and [TLS 1.3](https://caniuse.com/tls1-3) are stilll current (at time of writing) so if you're serving your site over these, use the CSS support tables as your starting point for your CSS 'cut'. You may find it's the only 'cut' you need.
310 | 
311 | 
312 | ### Feature Queries
313 | 
314 | Whilst it should be common practice to wrap bleeding-edge CSS in `@supports` blocks and provide sensible fallbacks for non-supporting browsers, it's possible to wrap your *entire* CSS in one, to bump up the baseline of browsers you're supporting. So for example if your layouts rely heavily on CSS subgrid and everything else is more widely supported, you can wrap all your CSS in a block like this:
315 | 
316 | ```
317 | @supports (grid-template-columns: subgrid) {
318 |     /* all your CSS here */
319 | }
320 | ```
321 | 
322 | Then [non-supporting](https://caniuse.com/css-subgrid) (older) browsers will be cut and you won't have to worry about them looking all broken (so long as you've followed the FallBack Philosophy and coded your HTML nicely (properly)).
323 | 


--------------------------------------------------------------------------------