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…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

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


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2022-12-09T04:50:04+00:00) » inset is an upcoming shorthand for the top, right, bottom and left CSS atributes (#tilPost). Retrieved from https://www.scien.cx/2020/04/04/inset-is-an-upcoming-shorthand-for-the-top-right-bottom-and-left-css-atributes-tilpost/.
MLA
" » inset is an upcoming shorthand for the top, right, bottom and left CSS atributes (#tilPost)." Stefan Judis | Sciencx - Saturday April 4, 2020, https://www.scien.cx/2020/04/04/inset-is-an-upcoming-shorthand-for-the-top-right-bottom-and-left-css-atributes-tilpost/
HARVARD
Stefan Judis | Sciencx Saturday April 4, 2020 » inset is an upcoming shorthand for the top, right, bottom and left CSS atributes (#tilPost)., viewed 2022-12-09T04:50:04+00:00,<https://www.scien.cx/2020/04/04/inset-is-an-upcoming-shorthand-for-the-top-right-bottom-and-left-css-atributes-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » inset is an upcoming shorthand for the top, right, bottom and left CSS atributes (#tilPost). [Internet]. [Accessed 2022-12-09T04:50:04+00:00]. Available from: https://www.scien.cx/2020/04/04/inset-is-an-upcoming-shorthand-for-the-top-right-bottom-and-left-css-atributes-tilpost/
CHICAGO
" » inset is an upcoming shorthand for the top, right, bottom and left CSS atributes (#tilPost)." Stefan Judis | Sciencx - Accessed 2022-12-09T04:50:04+00:00. https://www.scien.cx/2020/04/04/inset-is-an-upcoming-shorthand-for-the-top-right-bottom-and-left-css-atributes-tilpost/
IEEE
" » inset is an upcoming shorthand for the top, right, bottom and left CSS atributes (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2020/04/04/inset-is-an-upcoming-shorthand-for-the-top-right-bottom-and-left-css-atributes-tilpost/. [Accessed: 2022-12-09T04:50:04+00:00]
rf:citation
» inset is an upcoming shorthand for the top, right, bottom and left CSS atributes (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2020/04/04/inset-is-an-upcoming-shorthand-for-the-top-right-bottom-and-left-css-atributes-tilpost/ | 2022-12-09T04:50:04+00:00
https://github.com/addpipe/simple-recorderjs-demo