Life After Explorer: Unlocked CSS Features After IE’s EOL

So, since this hall-of-famer was the “last line of defense” between front-end developers around the globe and new CSS features being born each year, we’ll take a look at some that were unlocked and can now be used without the special support of the iconic browser.

Many of the features would find their place on this list, but I’ve decided to list “only” twelve, with simple examples for most of them. Hey, it’s January and a great time to share things.

1) Position: sticky

I believe most front-end developers had to create sticky navigation (or similar elements) on the website. In that case, it was mission impossible to do it without using relative and fixed positioning of an element, in combination with some others to make it happen.

Now, we have something that acts as a “relative positioned element” until it crosses a specified threshold, at which point it is treated as a “fixed positioned” one. As the sub-headline suggests it’s called “position: sticky”. When using it, just don’t forget to add some of the positioning values (top, right, left or bottom) to make it work. It will stick to its nearest ancestor that has a “defined overflow” property.

2) Feature queries (@supports)

This property would be handy back in the old Internet Explorer days, when all of the features from this list weren’t available. It allows us to check whether the browser supports a feature. If it does, we can choose what to use. The syntax is simple - a feature query consists of the @supports rule, followed by the property name and value you would like to test for.

@supports (property: value) {
        // some beautiful scss
}

Concrete example:

@supports (position: sticky) {
        position: sticky;
}

Also, we can add a logical operator such as or, and or even not:

@supports not (position: sticky) {
        position: fixed;
}

@supports (position: sticky) or (position: fixed) {
        // apply some css rules
}

3) Inset 

Are you familiar with this block of code?

top: 0;
left: 0;
bottom: 0;
right: 0;

Ever thought of having a shortcut for all four properties at once? Welcome to 2023! A great time to be alive!
So, there it is, all of the above can be replaced with this simple line of code:

inset: 0; -> value applied to all four properties
inset: 5px 10px; -> top/bottom - left/right
inset: 5px 10px 15px; -> top - left/right - bottom
inset: 5px 10px 15px 20px; -> top - left - right - bottom

4) overscroll-behavior

If you ever stumbled upon a scroll container whose scrolling is propagated to his ancestor scroll container, you have dealt with scroll chaining.

What does this mean, exactly? Well, if you are inside an element that has its own scrolling (for example vertical) and you scrolled to its bottom, the next parent element up will start to scroll in that direction. If you have never noticed such behavior, it’s fine, because it usually happens by default..

With the overscroll-behavior feature you can choose whether an element will use that effect or not. Its value can be set to auto (default), contain and none.

5) accent-color

Remember those form checkboxes, radio inputs, range elements or even progress bars that you needed to add some color to? Well, for some (many actually) cases you can now throw away all of those :before and :after elements that you used to accomplish that.
The accent-color property will re-tint the accented color of those form controls provided by the browser’s default styles with a custom color value.

6) :focus-within

Indeed, there comes a time when the website main navigation can be built only with css (yes, without any javascript help). That’s one example of what can be achieved with this css feature. The other one would be highlighting the entire form when only one of its inputs is focused.

The :focus-within is the pseudo-class that matches an element if that exact element or any of its descendants are focused.

7) aspect-ratio

Tired of using element’s parent padding to achieve certain size proportions? Remember that every image needed to have an aspect ratio of exactly 16:9, regardless of its width? Now imagine that you have a css feature that does exactly that. All you need to do is specify the aspect-ratio of an element and define its width or height.

8) CSS Grid

For years now we’ve been lucky to have flexbox and use it to create all sorts of layouts. Now, another fantastic tool has become a part of our arsenal, something that’s even better in a combination with flexbox. Yes, it is CSS Grid, which you have probably already used and are familiar with.

CSS Grid is a two-dimensional grid-based layout system that allows us to create user interfaces in a much different way than we did until now. The core of this system is based on aligning the elements of a “grid” parent into rows and columns. Nothing more, nothing less.

There are many ways to define a grid layout since there are 20+ grid properties that can be used. In the example below, I covered a couple of them just to demonstrate what can be done. The used properties are:

display
grid-template-columns
grid-auto-flow
grid-template-rows
grid-template-areas
gap
align-content
repeat()

For the complete guide to CSS Grid I highly recommend checking the css-tricks post on this link and here is the cheat sheet if you’re in a hurry ;) https://grid.malven.co/

9) shape-outside

Another great property to have up your sleeve if your designer decides to put you in the hot seat.

The shape-outside CSS property defines a shape around which content should wrap. The shape may be non-rectangular, or even a more complex one… and the funny thing is - it won’t work unless the float has been used on the element. So, yes - back to basics! ;)

10) max-content / fit-content / min-content

These properties represents the intrinsic width or height of the content:

min-content - this means that the content will wrap whenever possible and become as small as it can be (the length of the longest word)
max-content - content will not wrap at all, even if it causes overflow
fit-content - content will use the available space as much as possible, but never more than max-content

11) @layer

If you’re out there having trouble because your css specificity conflicts escalated… don’t panic, we got you covered!

CSS layers are something that has been around in CSS since the very beginning. Basically, they make overriding the styles defined in the browser much easier since they define their own hierarchy that completely ignores specificity.

There are 3 different layers in CSS that defines how all styles work:

1. Browser styles
Those are the browser’s default styles. This is why some elements look different between multiple browsers (for example buttons).

2. User styles
Generally, these are custom styles that users can use and inject into the browser, but it is not supported by browsers anymore so we can freely ignore it.

3. Author styles
The layer in which any CSS code written by you lives.
CSS layers are ordered (in the same order as written above), which means that every style in the next layer will have priority over the previous one (whose styles will be overridden then).

For example, if browser styles have defined a special selector such as #section.section.awesome-section, it could be easily overridden in author styles by just adding some styles to the generic selector section.

So, what’s the catch with the new @layer feature that we can use now? Well, it allows the creation of new custom CSS layers. That way we can better organize our code and deal with specifics much easier.

It’s pretty simple to create new layer, we only need to write down a @layer keyword and add a layer name to it:

@layer first {
        // some code
}
@layer second {
        // some code
}

The order of layers will be defined by how they are ordered in the code. There’s also a way to predefine the order of all created layers by simply adding one line of code:

@layer second first third fourth;

This line of code must come before you define any of your layers.

12) Filter

And last but not least… filter!

Except for applying some graphical effects to an element, this property can come really handy in some specific cases. For example, when we need to change the color of an non-inline .svg image (or other types of images). All we need is to have the desired color written in filter code and apply it to the element.

There are many great sites and tools that can convert standard color codes to filter code, but I wholeheartedly recommend this one: https://angel-rs.github.io/css-color-filter-generator/

.svg-image {
        filter: brightness(0) saturate(100%) invert(88%) sepia(36%) saturate(794%) hue-rotate(358deg) brightness(102%) contrast(105%);
}

The example above will set the color of an svg image to “yellow”.

With the start of the new year, it was great to dive in and check out all the unlocked features. Although, I must admit, a couple of things that we mentioned here still aren’t supported by just one mobile browser (with a pretty limited usage), but that shouldn’t deter us from using them.

Right now, I hope you’re in a pretty good spot with your updated CSS arsenal. New features will keep coming, there are some pretty cool ones on the way, it’ll be pretty fun to see how they’ll pan out (such as subgrid, :has, masonry, etc.)

Now go out there and build!