Useful tips and pieces of knowledge I've learned today* (TIL):
:empty vs whitespace
The CSS pseudo-class
:emptycan be used to style elements that have no children. A comment in HTML will not count as a child but any whitespace will.
Order of transforms
The order in the
transformproperty matters. The transform functions are applied from left to right. This can lead to different visual effects (e.g. scaling an element before moving it with translate).
The CSS property
isolationcan be used to let an element create a new stacking context. That's it sole purpose and is super helpful when working with multiple
z-indexvalues within a sealed off component.
roundas value for the CSS property
background-repeat, the background image will be repeated without clipping.
You can use
prefers-color-schemewithin a media query to detect if the user uses a light or dark system theme. This is especially powerful in combination with CSS custom properties (variables) for custom themes.
The line for
text-decorationcan be set to double, dotted, dashed or wavy. It's also a shorthand for
X-UA-Compatible meta tag
You can drop the X-UA-Compatible meta tag if you only have to support the latest browsers (IE11 and/or Edge). It's recommended to use when you have to support IE8 or IE9.
Browsers are smart enough to not download a font if you don't apply a defined @font-face to a font-family.
"Imprint" is not the correct translation for Impressum. It's a German legal term and has no translation. Use the word Impressum instead.
If you want to animate certain elements (like a path) within a SVG, you need to add
transform-box: fill-boxto the element, otherwise it won't use the bounding box as the reference box.
I had to use this property for the animated rabbit eyes in my logo. Works in every browser except Edge.
You can specify eight values for border-radius to create organic looking shapes. You can even animate it to make it real fancy!
* May or may not have been today. 🧐