Notes

Useful tips and pieces of knowledge I've learned today* (TIL):

  • :empty vs whitespace

    The CSS pseudo-class :empty can be used to style elements that have no children. A comment in HTML will not count as a child but any whitespace will.

    Source

  • Order of transforms

    The order in the transform property 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).

  • isolation

    The CSS property isolation can 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-index values within a sealed off component.

    Source

  • background-repeat

    When using round as value for the CSS property background-repeat, the background image will be repeated without clipping.

    Source

  • prefers-color-scheme

    You can use prefers-color-scheme within 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.

    Source

  • text-decoration

    The line for text-decoration can be set to double, dotted, dashed or wavy. It's also a shorthand for text-decoration-line, text-decoration-color, and text-decoration-style.

    Source

  • 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.

    Source

  • @font-face Fonts

    Browsers are smart enough to not download a font if you don't apply a defined @font-face to a font-family.

    Source

  • Impressum

    "Imprint" is not the correct translation for Impressum. It's a German legal term and has no translation. Use the word Impressum instead.

    Source

  • transform-box

    If you want to animate certain elements (like a path) within a SVG, you need to add transform-box: fill-box to 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.

    Source

  • Fancy border-radius

    You can specify eight values for border-radius to create organic looking shapes. You can even animate it to make it real fancy!

    Source

* May or may not have been today. 🧐