- Web Developer
- Posts
- CSS Layout Properties You Might Not Know About
CSS Layout Properties You Might Not Know About
CSS Writing Modes, CSS Logical Properties, Dynamic Viewport Units, Media Queries Range, @container style/size queries, Anchor Positioning, and Break Rules
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:
Reply