What's new in CSS since about 2017?

HTML & CSS
1

I left the frontend-dev field around 2017 and Flexbox was the new thing, which I played with.

I need to get updated again, so what other new things should I learn for CSS?

1 Like
2

Just off the top of my head, but I’m sure I’m missing a LOT

  • Grid
  • Custom Properties
  • clip-path
  • aspect-ratio
  • Multiple ways to deal with color
  • Animations/Transitions/Transforms - I think they were there before, but have been added to greatly.
  • filers/blend-mode
  • accessibility tools to reduce some of the song and dance
  • ::has, ::not, ::is, ::where selectors
2 Likes
3

It only has an archive of the last three years, but this survey of industry professionals (participants) is always an interesting read

2 Likes
4

It’s also worth looking into:

  • container queries
  • new functions like min(), max() and clamp()
  • the gap property for Flexbox and Grid
  • new scrolling properties like scroll-snap
  • individual transform properties
  • new focus selectors such as :focus-visible
  • ::marker, which let’s you style list bullets etc!
  • accent-color and color-scheme
  • forced-color modes
  • text decoration improvements such as text-underline-offset
  • color fonts
  • dynamic viewport units like lvh/lvw, svh/svw and dvh/dvw
  • media query range syntax:
    @media (360px <= width <= 820px) {

}
  • the new @layer rule (which helps you control the cascade)
  • the @supports rule
  • subgrid as an enhancement of Grid layout
2 Likes
5

These days you’ll never learn “all of CSS” but you should be aware of what you can use even if you have to look up the specific details each time.

CSS grid is probably the first thing to become familiar with but not to forget flex as they do different things (although they can do the same things at times).

There’s so much that’s new that you can’t remember all the specific details but as long as you are aware of what they are you can easily look up the the exact css needed.

In most cases sites can be done without having to use every new fangled property if constructed wisely. However, it’s good to know what’s available when you have tricky situations. The posts above list most of the interesting properties so it’s good to know what they are and what they do and then you can look for them when you need them.:wink:

1 Like
6

I’m in a similar boat of coming back to CSS after not being very actively involved with it for some years. The two things I’ve found most interesting and worth learning first are Flexbox and Grid (as Paul mentioned above). There are lots of great resources for learning them (such as videos on YouTube by people like Kevin Powell), but if I were to recommend one resource for starting with each, it would be these:

2 Likes
7

Love Kevin Powell!

His Youtube channel is great, and a combination of short tips and longer, more in-depth studies. He also has several good courses, some free, others have a cost which I found worth the money.

2 Likes
8

This was also discussed on a recent Syntax podcast. Lot’s of good info here.

2 Likes
9

This and the subsequent pages will help you get up-to-date in no time: https://www.w3schools.com/cssref/css4_pr_accent-color.php. It is the first page of a long list of pages with all the old and new CSS properties plus their values and editable examples.

You should also go through:

Some people don’t like W3Schools but I think it is great, despite that it sometimes says that something is not supported by MS Edge. That has changed since Edge started using the Chromium engine.

2 Likes