Codebank

The font-synthesis CSS property lets you specify whether or not the browser is allowed to synthesize the bold, italic, small-caps, and/or subscript and superscript typefaces when they are missing in the specified font-family. This is mostly important when fonts are included in a way where each weight is a separate file included using @font-face with the font-weight specified as normal, or if a font only has a single weight (i.e. a display font where bold and/or italics don’t exist).

Setting font-synthesis: none; tells the browser not to create fake versions of bold/italics if they don’t exist. A way to apply this across all your styles is to include this rule:

html {
	font-synthesis: none;	
}

Article here

A technique using grid layout to handle the layout of multiple blocks on a page that need to wrap at different points as the browser size changes, using only a couple of lines of code and no media queries (a technique called ’RAM’)

display: grid;
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));

For a CSS-only methode to provide smooth scrolling action to anchors, you can add the following:

html {
	scroll-behavior: smooth;
}

It is good practice to also respect the users wishes if they want to avoid fast movement, so you can disable for those users by also adding:

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

This fixes issues where overflow hidden doesn’t work on elements in Webkit browsers (e.g. using border-radius to crop the edges of a video). Apply this mask to the containing overflow:hidden element.

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

p:empty { display: none; }

For when you want to remove a <br> so text runs inline. Using display: none; also removes the space, so if you are collapsing sentences this method is better (found in conversation here).

br {
	content: " ";
	
	&:after {
		content: " ";
	}
}

When rotating a block element with borders on two edges by 45º (e.g. to create a chevron shape), sometimes where the borders meet there is a white gap. Adding a translate3D value (in particular having the Z value) seems to fix this.

transform: translate3D(0, 0, 0) rotate(45deg);

.scroll {
	overflow-y: scroll; /* has to be scroll */
	-webkit-overflow-scrolling: touch;
}

For when you have a link in your page styled as a block element, and the area of the link is not clickable in IE. Turns out adding a transparent background somehow makes it clickable.

.lte9 & {
	/* Hack because IE doesn't show link as clickable */
    background: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

A sure telltale sign is if, when you have a border added, you can click the border but not the interior area. No idea why this happens, probably because IE...