This article introduces some CSS layout properties you may not be familiar with, including CSS Writing Modes, CSS Logical Properties, Dynamic Viewport Units, Media Queries Range, @container style/size queries, Anchor Positioning, and Break Rules.

CSS Writing Modes

The writing-mode property in CSS sets whether text lines are laid out horizontally or vertically and the block's progression direction. When setting this for the whole document, it should be applied to the root element (i.e., the html element of the HTML document).

/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

This property can be set for left-to-right (LTR, like English and most other languages) or right-to-left (RTL, like Hebrew or Arabic).

Here’s a clear comparison:

CSS Logical Properties

CSS Logical Properties provide a set of properties based on the document's content flow direction, rather than the physical direction used in traditional properties (like left, right). They automatically adapt to different writing modes, such as left-to-right (LTR) or right-to-left (RTL) languages.

margin-block-start vs. margin-top

The margin-block-start CSS property defines the logical block start margin, which maps to the physical margin depending on the writing mode, directionality, and text orientation.

margin-block-start: Sets the margin at the block start. In horizontal writing modes (LTR), it's equivalent to margin-top, but in vertical writing modes, it adjusts based on the edge.

It corresponds to margin-top, margin-right, margin-bottom, or margin-left depending on the values of writing-mode, direction, and text-orientation.

Related properties include margin-block-end, margin-inline-start, and margin-inline-end, which define other margins for the element.

padding-inline-end vs. padding-right

Similarly, for padding, the padding-inline-end sets the padding for the inline end position. In LTR modes, it's equivalent to padding-right, but in RTL modes, it's equivalent to padding-left.

border-inline-start vs. border-left

For borders, the border-inline-start defines the border at the inline start position. In LTR writing modes, it's equivalent to border-left, while in RTL modes, it becomes border-right.

Dynamic Viewport Units (lvh, lvw, lvmin, lvmax vs. vh, vw)

The traditional vh and vw units define sizes as a percentage of the viewport. For example, "100vh" is 100% of the viewport height, and "50vw" is 50% of the viewport width.

However, the problem with vh and vw units is that your app doesn't always have access to the full viewport, especially on mobile devices, where browser controls (like the address bar) take up space. This means a "100vh" element can overflow, causing part of the content to be hidden when browser controls are visible. You could work around this with height: calc(100vh - <location bar height in px>), but that could break if the browser updates.

Now, this issue can be solved with new viewport units:

Subscribe to Premium to read the rest.