Hasty Treat - New CSS Logical Properties

Episode Summary

Executive Summary: The episode explains CSS logical properties, a newer approach that replaces physical directions like top/left/right/bottom with flow-based terms like block and inline. Wes and Scott argue this makes CSS more adaptable for right-to-left and vertical writing systems, easier to share across languages, and more aligned with modern layout concepts like Flexbox and Grid.

Main Topics: Introduction to CSS logical properties: The hosts frame the episode around a new CSS feature set that changes how developers think about spacing, sizing, and positioning by using logical directions instead of physical ones. Block vs. inline flow: They explain the foundational mental model: block corresponds to vertical flow in English layouts, while inline corresponds to horizontal flow, and these concepts can adapt to different writing directions. Mapping old CSS properties to new ones: The discussion maps familiar properties to logical equivalents, such as margin-top becoming margin-block-start and margin-left becoming margin-inline-start. Broader layout properties affected: They note that the logical model applies to borders, padding, text alignment, floats, and sizing, including width/height becoming inline-size/block-size. Internationalization and multilingual web design: A major motivation is supporting right-to-left and vertical writing systems, especially for sites that need to work across languages like Japanese and Arabic with less hacky CSS. Adoption, status, and browser support: The hosts discuss the feature’s maturity, noting it is a working draft but already supported in current browsers, and encourage developers to start experimenting. Learning resources and staying current: They recommend following Elad Schechter and Adam Argyle for high-quality CSS updates and reference material, highlighting the value of watching experts in the field.

Key Arguments: Logical properties make CSS more future-proof by describing layout in terms of document flow rather than fixed screen directions. Using block/inline terminology reduces hacks needed for right-to-left or vertically written content and makes multilingual sites easier to maintain. The new model parallels Flexbox and Grid, so developers who already think in start/end terms may adapt quickly. Width/height, margins, borders, padding, floats, and text alignment all gain logical equivalents, creating a more consistent system. Although the syntax feels more abstract at first, the hosts argue it will become the preferred default as browsers and tooling support it. Because the feature is already implemented broadly, developers can begin using it despite its working-draft status.

Data Points: Browser support status: Latest Edge and every browser have implemented this - The hosts say CSS logical properties are supported broadly even though the spec is still a working draft. Spec status: Working draft - They describe CSS logical properties as not fully finalized yet. Example border value: 2px solid green - Used in an example: border-block: 2px solid green to show top and bottom borders.

Pivotal Quotes: "This is CSS logical properties." — Scott Tolinsky: Scott introduces the main topic at the start of the episode. "If you use this stuff out of the gate, when it comes time to translating your website to something that reads in a different direction, it's going to be much easier to do that." — Wes Bos: Wes explains the practical benefit of adopting logical properties early. "Block is top and bottom. Inline is left and right." — Scott Tolinsky: A simplifying summary of the core mental model for English-language layouts.

Implications: Developers building internationalized sites can reduce direction-specific hacks and write CSS that adapts more naturally to different reading systems. Over time, logical properties may become the default way to think about layout.