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…

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?


Reply to Stefan
Print Share Comment Cite Upload Translate
CITATION GOES HERE CITATION GOES HERE
Select a language: