css
A properly-written web page should still be readable without CSS.
alternate styles
It’s possible to have alternate stylesheets in a webpage:
<link rel="stylesheet" href="main.css" title="default">
<link rel="alternate stylesheet" href="alt.css" title="alternate">
<link rel="alternate stylesheet" href="contrast.css" title="high contrast">
selectors
Selector for external links:
a[href^="http"] { ... }
feature queries
You can use @supports to conditionally apply rules and integrate features based on browser support. For example, I use the following for grid masonry:
@supports (grid-template-rows:masonry){
.gallery{grid-template:masonry/5fr 5fr}
}
media queries
This isn’t definitive and certain scenarios may call for more specific screen size values but generally this is what I go with as a starter:
/* mobile styles */
@media screen and (min-width:30em) {
/* tablet styles */
}
@media screen and (min-width:60em) {
/* desktop styles */
}
misc
input:not(:in-range) {color:red}
<input type="number" min="0" max="5">