inset is an upcoming shorthand for the top, right, bottom and left CSS atributes (#tilPost)

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 welcome addition to CSS, because who isn't tired of typing top, right, bottom and left all the time?