home

programming

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">

resources