Today I Learned - Rocky Kev

TIL Logical Properties

POSTED ON:

TAGS: css Internationalization

Logical, flow relative properties and values are linked to the flow of text, rather than the physical shape of the screen. Learn how to take advantage of this newer approach to CSS.

Adjust your styles from physical properties to logical ones like padding-inline, margin-inline, inset-inline, and now the browser will do the adjusting work.

The benefit:

For that sweet sweet Internationalization, you want to avoid directional words like "left", "right", "top", and "bottom".

English is written from left to right and top to bottom, but not all languages are written this way. Some languages like Arabic and Hebrew read from right to left, and some Japanese typefaces read vertically instead of horizontally. To accommodate these writing modes, logical properties were introduced in CSS.

These shorthands for *-start and *-end are really nice.


/* Don't */
label {
  margin-right: 0.5em;
}

/* Do */
label {
  margin-inline-end: 0.5em;
}

Via:

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')