CSS Logical Properties

Kunal Singh

Oct 5, 2021

CSS Logical Properties

What are logical properties

CSS logical properties are properties which are used to design element on the basis of a particular logic. This logic is usually related to the writing-mode/language of the content etc.

According to MDN Docs

CSS Logical Properties and Values is a module of CSS introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings.

Example


/* Physical Dimensions */
section{
margin-top:2px solid;
margin-bottom:2px solid;
}

/* Logical Directions */
section{
margin-block:2px solid;
}

To go further you have to understand the two types of flow we have in CSS.

1. Block Flow

Block flow is perpendicular to the flow of the text. Usually [for English] it is the vertical flow. So when you use display:block the element takes up the entire width and renders the next element below.

2. Inline Flow

Inline flow is parallel to the flow of the text. Usually [for English] it is the horizontal flow. So when you use display:inline the element takes the minimum width and the next element is rendered adjacent to it.

The box model will give you a good idea of this

CSS Box Model


/* The logical properties can be used with margin padding width height border etc */

section{
margin-block:10px; /* shorthand for margin block start and end */
margin-inline:20px; /* shorthand for margin inline start and end */
/*
For explicity selecting single dimension use :

margin-block-start | margin-block-end | margin-inline-start | margin-inline-end
*/

}

/* similarly for all other properties */

Why CSS Logical Properties

The more you use logical properties the more you will realize how easy ,intuitive and robust your UI has become after adding them 🚀.

Okay enough theory let me share an example with you.

Consider a paragraph with which has a margin left of 20px. Now if you were to make the website multilingual and had converted it into Arabic[right to left language] or Japanese[top to bottom language] not only will this margin cause the UI to break but also make the user experience terrible.

I know it can be difficult getting your head around these new properties let alone using them in your projects 😁. Lets consider an even simpler example.

We all had a margin in the left side of the note-book since we write in English[left to right]. Now if someone is writing in Arabic[right to left] this margin is useless. css logical properties simply suggests us to use margin-inline-start instead of margin-left , So when the writing starts from ◀left the margin will be added to ◀left and when the language starts from right▶ the margin is added to right▶. Same for Top🔝 to bottom bottom languages as well.

In summary if you start using logical properties in your css. You will have a more accessible UI which works across different languages and writing modes.

See the Pen Logical Properties CSS Examples by Kunal SIngh (@singhkunal2050) on CodePen.

Example of CSS Logical Properties

Here you just have to remember the rules for block and inline flow. These are paired up with start and end. When you use something like margin-block-start or margin-block-end. You can also use margin-block which adds margin to the start and end of the block, same applies for inline flow as well.

min-height , max-height , min-width , max-width , border-block , border-block-color , border-block-end , border-block-end-color , border-block-end-style , border-block-end-width , border-block-start , border-block-start-color , border-block-start-style , border-block-start-width , border-block-style , border-block-width , border-color , border-inline , border-inline-color , border-inline-end , border-inline-end-color , border-inline-end-style , border-inline-end-width , border-inline-start , border-inline-start-color , border-inline-start-style , border-inline-start-width , border-inline-style , border-inline-width , border-start-start-radius , border-start-end-radius , border-end-start-radius , border-end-end-radius , border-style , border-width , margin-block , margin-block-end , margin-block-start , margin-inline , margin-inline-end , margin-inline-start , padding-block , padding-block-end , padding-block-start , padding-inline , padding-inline-end , padding-inline-start

I hope you learned something new today if you did then please share this post with your friends who might find this useful aswell. Have any questions? Feel free to connect with me on LinkedIn Twitter @singhkunal2050. You can also write me here.

Happy Coding 👩‍💻!

Recommendations

Are You Still Using Basic CSS? Here Are 7 Tricks to Get Ahead of the Curve

#css

Bored of the same old CSS? Unleash 7 hidden gems to take your designs to the...

Dec 27, 2023

Easiest way to store your logs in a file WITHOUT chaging the source file(node)

#productivity

Often, developers face challenges when dealing with a flood of logs in the...

Dec 21, 2023

Build Your Own Pinterest-Style Masonry Grid: A Step-by-Step Guide

#css

,

#web

,

#layout

Create a masonary grid layout with left to right content flow, supporting...

Dec 10, 2023

Using git diff and git apply to Share Local Changes with Peers

#git

,

#productivity

,

#software_engeneering

,

#dev

git diff and git apply are two powerful Git commands that can be used to share...

Nov 12, 2023

React Portals: Render Components Outside the current DOM Hierarchy

#react

,

#web

The createPortal API in React allows you to render child elements into a...

Jul 27, 2023

Cloning Made Easy: Try degit and Clone Directories within Repos.

#git

,

#productivit

Have you ever faced the dilemma of wanting just a small portion of a repository,...

Jul 19, 2023

Debugging Web Apps with Browser Dev Tools: 6 Amazing Tricks

#browser

,

#debugging

,

#web

Debugging web applications can be a challenging task, with errors like...

Jul 13, 2023

Controlled Versus Uncontrolled Components in React

#react

,

#forms

Understanding State Management Within Forms Comparing controlled and...

Nov 5, 2022

Format Numbers, Dates and Currencies with the Intl Object in Javascript

#javascript

,

#html

,

#web

Intl object can be used to format data into commonly used formats of dates,...

Sep 13, 2022

Image Masking on Hover Using CSS Clip Path and Javascript

#javscript

,

#css

,

#html

Image Masking can be used to add fancy hover highlight effects to images for...

Jul 23, 2022

Recreating CSS Tricks Fancy Grid Hover Effect

#html

,

#css

,

#UI

,

#recreation

CSS Trick had a simple yet cool grid layout which I found dope. So lets try to...

May 21, 2022

File Explorer Recursive React Component

#react

,

#javascript

,

#web

How to create a recursive folder Component using react.

Apr 16, 2022

Add Google Fonts to Your React & NextJS + TailwindCSS Project (Next 14)

#css

,

#tailwindcss

,

#react

,

#nextjs

,

#tailwind

,

#design

Use Google Fonts in Your TailwindCSS Projects

Apr 6, 2022

Event Delegation in Javascript

#javscript

,

#css

,

#html

,

#web

,

#performance

Handling multiple Events in Javascript with minimal CPU Usage

Mar 6, 2022

A Simple Web Accessibility Trick that you most probably missed!

#html

,

#css

,

#web-accessibility

,

#user-experience

Imagine that you cannot use the mouse and have to Navigate a Website with the...

Dec 23, 2021

Top Terminal Commands I Use For Productivity

#linux

,

#cli

,

#terminal

The whole point of development is solving problems. But very often we Developers...

Nov 3, 2021

Fluid Typography in CSS 💧

#css

,

#html

,

#typography

CSS Best Practices in Fluid Typography

Aug 15, 2021

CSS Units in a Nutshell 🐚

#css

,

#html

Are you still writing your css units in pixels and percentages? if you are then...

Aug 8, 2021

Master Markdown in 5minutes ⌚

#markdown

,

#documentation

Markdown is a lightweight markup language for creating formatted text using a...

Aug 1, 2021

What is JAMStack ✨

#jamstack

Jamstack stands for Javascript APIS and Markup and it is based on this idea of...

Jul 31, 2021

+

Check my latest Blog Post

Are You Still Using Basic CSS? Here Are 7 Tricks to Get Ahead of the Curve

Read Now
Oh My Gawwdd!!!!!!!

Wow you have been viewing my site since 20 seconds!

+
+