TIL: inset is a shorthand for top, right, bottom and left

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; 
  /* :point_up_2: is the same as `top: 0; right: 0; bottom: 0; left: 0;` */
  inset: 1em 2em; 
  /* :point_up_2: is the same as `top: 1em; right: 2em; bottom: 1em; left: 2em;` */
  inset: 1em 2em 3em; 
  /* :point_up_2: is the same as `top: 1em; right: 2em; bottom: 3em; left: 2em;` */
  inset: 1em 2em 3em 4em; 
  /* :point_up_2: 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 your 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?