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;
/* 👆 is the same as `top: 0; right: 0; bottom: 0; left: 0;` */
inset: 1em 2em;
/* 👆 is the same as `top: 1em; right: 2em; bottom: 1em; left: 2em;` */
inset: 1em 2em 3em;
/* 👆 is the same as `top: 1em; right: 2em; bottom: 3em; left: 2em;` */
inset: 1em 2em 3em 4em;
/* 👆 is the same as `top: 1em; right: 2em; bottom: 3em; left: 4em;` */
}
⚠️ The browser support of inset is not great yet (Firefox only), but PostCSS has you covered on that front.
Logical properties and inset are a very useful addition, because who isn't tired of typing top, right, bottom and left all the time?
Top comments (0)