inset is an upcoming shorthand for top, right, bottom and left

This post is part of my Today I learned series in which I share all my learnings regarding web development.

Today I was reading CSS Findings From The New Facebook Design, written by Ahmad Shadeed. I didn't know about a new CSS property the article mentions.

The new CSS Logical Properties and Values Level 1 specification comes with lots of new CSS properties that make styling dependent on logical rather than directional conditions. New properties like margin-inline-start aim to replace margin-left . They take, for example, left and(!) right aligned languages into consideration. The addition of logical properties is another step forward to make the web as a platform more adjustable to user preferences. It means that margins, paddings, borders and others can follow the language preference. Left margins can become right margins and vice-versa. That is excellent news!

I wasn't aware of the new inset property. inset is a shorthand that corresponds to the top , right , bottom , and/or left properties. Developers can use this new CSS property to shorten common absolute positioning declarations. It follows the same syntax that developers know from margin / padding declarations.

.element { position : absolute ; inset : 0 ; inset : 1em 2em ; inset : 1em 2em 3em ; inset : 1em 2em 3em 4em ; }

⚠️ The browser support of inset is not great yet (Firefox only), but PostCSS has you covered on that front.