• @supports (prop: val) works like a bridge to newer features for those browsers which understand them.
  • Check support for CSS variables like so: @supports (--css: variables) { /* variable-dependent stuff goes here */ }
  • CSS variables can be reassigned (unlike Sass variables).
@supports (--css: variables) {
	html { 
	     	--color1:	navy;
		--color2:	red;
	html.help	{
		--color1:	teal;
		--color2:	maroon;
	body {
		color:	var(--color1);
  • If you need to test support for multiple things simultaneously, you can use compound @supports (prop: val) and (prop: val) statements or you can nest @supports statements.
  • Flex is really useful for getting things to line up. Both centre-alignment (e.g. a list of social media icons at slightly different dimensions) and also e.g. boxes in a row with variable content that all stay the same height.
  • margin-right: auto; e.g. on a logo which has nav links to right; or margin-top: auto; e.g. on a footer element, is very useful!
  • justify-content: flex-start is intelligent in that if the document language changed to a right-to-left language, your items (e.g. nav links) would automatically start from the right rather than the left.
  • CSS Grid is an amazing prototyping tool for quickly turning a design comp into a web page for closer evaluation.
  • With regard to which layout tool to use when, make rules for how your team approaches things, e.g. “grid for general layout; flexbox for components” in order to maintain consistency.

My next actions

  • Do partial-width borders underneath headings or other elements: background: linear-gradient(rgba(0,0,0,0.67), rgba(0,0,0,0.67)) no-repeat bottom left / 50% 0.5ch;
  • CSS variables are supported in all but IE11. Could start using for colours, based on a baseline of black and white but modern browsers getting the variable-driven colours?
  • Try writing-mode e.g. writing-mode: sideways-lr. See https://meyerweb.github.io/csstdg4figs/ for a reference for writing-mode (in combination with grid).
  • Experiment with clip-path and background-clip.