Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
Published at
Updated at
Reading time
2min
This post is part of my Today I learned series in which I share all my web development learnings.

I read Ahmad Shadeed's article CSS Findings From The New Facebook Design, and learned about the inset CSS property. It saves a lot of keystrokes when positioning elements!

The CSS Logical Properties and Values Level 1 specification includes many new CSS properties that make styling dependent on logical rather than physical 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 more adjustable to user content preferences. Margins, paddings, borders and others properties can follow the language preference. Left margins can become right margins and vice-versa. That is excellent news!

Suprisingly, the Logical Properties spec also introduced a new CSS property that still considers physical dimensions. inset is a shorthand that corresponds to the top, right, bottom, and/or left CSS properties. 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;` */
}

When this article was published inset wasn't really supported, but today all major browsers support the shorthand for absolute positioning! 🎉

MDN Compat Data (source)
Browser support info for inset
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
87878766Nei14.1NeiNon

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?

Related Topics

Related Articles