✨ Some modern CSS features you should check out right now if you haven't already! ✨
Here are four of my favorite recently added features in CSS, introduced during the past year and slowly getting stable across all browsers.
👍2
⌨️ Anchor Positioning in CSS!!
The CSS Anchor Positioning API is still under development and considered experimental. Browser support is limited, but there's a polyfill available for wider implementation.
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
⌨️ Flexbox auto-margin
For aligning items of a flexbox along the cross axis, we have the align-self property. Have you wondered why we don't have an equivalent justify-self for flexbox? 🤔
It is because justifying an individual item doesn't make that much sense. What happened to the neighboring elements, let's say, if you apply justify-self: end to an element?
👉 Instead CSS allows you to define the value 'auto' for margin to create this desired effect.
When you define margin: auto, it means, create a margin that is as large as the available free space.
This helps us to kind of push the element away from all the other elements in the flexbox!
For aligning items of a flexbox along the cross axis, we have the align-self property. Have you wondered why we don't have an equivalent justify-self for flexbox? 🤔
It is because justifying an individual item doesn't make that much sense. What happened to the neighboring elements, let's say, if you apply justify-self: end to an element?
👉 Instead CSS allows you to define the value 'auto' for margin to create this desired effect.
When you define margin: auto, it means, create a margin that is as large as the available free space.
This helps us to kind of push the element away from all the other elements in the flexbox!
👍2❤1
🖐 8 Super useful HTML tips & tricks that every Developer should know about
👍1