There has never been a CSS4. There will never be a CSS4. CSS4 is not a thing that exists.
While referring to all new CSS as CSS3 worked for a short time, it doesn’t reflect the reality of where CSS is today. If you read something about CSS3 Selectors, then what is actually being described is something that is part of the CSS Selectors Level 3 specification. In fact CSS Selectors is one of the specifications that is marked as completed and a Recommendation. The CSS Working Group is now working on Selectors Level 4 with new proposed features plus the selectors that were part of Level 3 (and CSS 1 and 2). It’s not CSS4, but Level 4 of a single specification. One small part of CSS.
Many people are waiting for CSS4 to come out. Where is it? When will it arrive? The answer is never. CSS4 will never happen. It’s not actually a thing.
So CSS3 was a unique one-off opportunity. Rather than one big spec, break them into parts and start them all off at “Level 3” but then let them evolve separately. That was very on purpose, so things could move quicker independently.
The problem? It was almost too effective. CSS3, and perhaps to a larger degree, “HTML5”, became (almost) household names. It was so successful, it’s leaving us wanting to pull that lever again. It was successful on a ton of levels:
- It pushed browser technology forward, particularly on technologies that had been stale for too long.
- It got site owners to think, “hey maybe it’s a good time to update our website.“
- It got educators to think, “hey maybe it’s a good time to update our curriculums.“
It was good for the web overall, good for websites taking advantage of it, and there was money to be made along the way. I bet it would be staggering to see how much money was made in courses and conferences waving the CSS3 flag.
I am proposing that we web developers, supported by the W3C CSS WG, start saying “CSS4 is here!” and excitedly chatter about how it will hit the market any moment now and transform the practice of CSS.
Of course “CSS4” has no technical meaning whatsoever. All current CSS specifications have their own specific versions ranging from 1 to 4, but CSS as a whole does not have a version, and it doesn’t need one, either.
Regardless of what we say or do, CSS 4 will not hit the market and will not transform anything. It also does not describe any technical reality.
Then why do it? For the marketing effect.
I think he’s probably right. If we all got together on it, it could have a similar good-for-everybody bang the way CSS3 did.
If it’s going to happen, what will give it momentum is if there is a single clear message about what it is. CSS3 was like:
- border-radius
- gradients
- animations and transitions
- transforms
- box-shadow
Oh gosh, it’s hard to remember now. But at the time it was a pretty clear set of things that represented what there was to learn and they were all fairly exciting.
What would we put under the CSS4 flag?
- Flexbox? (Too old?)
- Grid
- Everything new with color (like this and this)
- Independent transforms
- Variable fonts
- Offset paths
- Let’s get nesting done!
- Houdini stuff? (Not ready enough?)
- Shadow DOM selectors?
Lemme just say I will personally spearhead this thing if container queries can get done and we make that a part of it.
What else? Can we add to the list? Wanna refute anything on my list?
Custom properties for sure!
I just want a :parent() selector, like closest() in jquery
“I just want a :parent() selector, like closest() in jquery”
We have that already:
div:has(> a)selects all parent divs of anaWe definitely do not have that already in CSS. There is an MDN page for it (listing no browser support), but I’m not sure if we ever got a parent selector that this would actually be it.
A useful reference for keeping track of what’s been happening in CSS are the “Snapshots” put out by the working group on an approximately annual basis.
The latest published version can be found here: https://www.w3.org/TR/CSS/
As I write this, it’s “Snapshot 2018”, finally published in January 2019. There’s talk in the group of getting a Snapshot 2020 published before the year’s half done.
There’s been some discussion of using these as the basis for marketing CSS using a year-based version system, similar to what ECMAScript now does.
If you (Chris or anyone else) has suggestions about how to better highlight what’s newly stable & ready to go in CSS, and get people excited about CSS 2020, I’m sure the group would love to hear it.
Hey that’s awesome! I like that is isn’t some brand new concept that you somehow have to get the whole community behind, it’s something that’s already being done. Just needs a little marketing crack behind it. If it were me, I’d hire a content strategist and a designer, and get them going on a microsite or landing page that delivers with crystal clarity what “CSS2019” is. I could get behind that. The snapshot landing page as-is is too dry.
If you want more marketing friendly names, how about following car manufacturers? People seem to understand the concept already:
Let’s call the collection of CSS specifications that have status “Recommendation” at the start of the year 2020 as “CSS 2020” .
(And if you are unhappy that it takes years to get to “Recommendation” level, try to fix the CSS workgroup process.)
This is a much better solution to just going with “CSS4”. But it still has problems. Firstly, people just don’t care about CSS the way they used to. People are more excited about other things in the industry. I’m not trying to denigrate CSS or anything. I’m just being realistic.
Something like HTTP/2 is way more exciting to tech people than “the latest version of flexbox”. React Hooks are way more exciting than Grid Layout. GitHub Actions are way more exciting than CSS hyphens. A package manager or module bundler that’s easy to use is way more exciting than new pseudo-classes or pseudo-elements. I could go on… Again, I love CSS and always will, but it’s limited in its potential to “amaze and impress”.
I just think the whole thing surrounding “CSS3” happened for a reason and it’s something we will not be able to replicate, no matter how hard we try. It’s kind of like trying to make a plant grow by yanking up on its stem.
Houdini? Heck yes! Let’s get it done. Only been waiting … 3-4 years for it to drop.
Why just maybe on Grid? I’d say Grid and Custom Properties (and maybe support queries?) are defining features of our favorite non-existent version :D
There should be CSS4 and it should look like Sass.
element queries
@.element (max-width = 200px) { … }
@.element (min-width = 201px) and (max-width=400px) { … }
Variables in css are a big thing worth mentioning
PARENT SELECTORS! This is a must needed thing!
In thinking about this and Louis’ contrary post, I am in agreement with you and PPK. Here’s the thing, CSS3 and HTML5 were not originally a marketing thing, but in the end they became one. Many features that were not technically part of that spec got lumped under the labels as they came to represent all that was new in each (much like ES6 became synonymous with new features in JavaScript, even after it had been renamed and we’d moved on to new yearly specs).
I think it helps because it gives people’s minds something to organize a bunch of new concepts around. It’s not, to me, so much about getting people excited about CSS as giving them a way to bring together a bunch of disparate feature specs into an umbrella around “what’s new in CSS” that we can organize content (courses, posts, videos, tutorials, etc) around.
Anyway, that’s my initial reaction off the top of my head.
As I explained in my post, that happened naturally. That’s why it worked. Trying to force it won’t work.
I seriously doubt we’ll ever see container queries. It feels like if it were going to be done it would have happened already.
Parent selectors would be nice.
Placeholders or variable based rules, something like the sort of functionality we might expect from less or similar.
Conditional selectors maybe?
If (condition) rule type stuff.
If CSS was made somewhat closer to a Turing complete language we could do a lot smarter stuff with it.
Some way to apply a CSS rule on to canvas drawn elements (CSS to web gl) bridge or something.
I see definite pros and cons to the “CSS4” Idea. Yes, from a “marketing standpoint” yeah, it’s great, but thinking long-term, if we announce a “CSS4” when it is an inaccurate term, do we not paint ourselves into a corner? What happens in a few years, when they start expecting CSS5?
CSS of all levels Rocks!
Kudos to all the wonderful individuals working behind the scenes to give us a safer, cleaner, living web, plus a stress-free way to generate our web pages.
Here’s an OLD SCHOOL CHALLLENGE:
In the early days of the web, it would take a page of code to run a video, an hour to centre an icon (no FA here), and a really clever person to make a drop-down multi-level menu — all of it done without a net (No ‘Siri’, so you’d have to buy a book to learn ‘how to’).
Challenge:
Let’s see if we could cut it as coders back in the day. Let’s familiarise ourselves with the 1×1 gif, and tags, stacking < >, and see if we can put out an eye-popping page using only the CSS of the web’s inception.
Expected Outcomes:
Respect for 1G coders and the ‘old’ net, and bow-down appreciation for the amazing CSS developers who work their butts off to make it easy for we puny coders! :)
we have a problem!
https://css4-selectors.com/selectors/
http://html6test.com/index.html
Some updates on things here.
There has been lots more discussion on the thread since then though. I had to bow out for now, I don’t think I’m cut out for huge conversations like that.
There is a community group now. I tried to apply to be a member a few weeks ago but I never heard back.
Rachel did a writeup of it and is still decidedly not a fan.
I’m sure the global pandemic isn’t helping, but it feels to me like this is losing steam anyway.
As a lover of CSS and someone who was sight impaired I was very excited about all the markup around text-to-speech. Finally! Tools to add accessibility for adding depth and dynamics to text-to-speech. Except the people who made the screen readers (who get enough money for the damn things) refused to support it, the browser makers didn’t add in-browser text to speech report and then after quite a while the whole thing was deprecated.
I think this is a travesty so if true accessibility (not just for the blind but for any other groups) could be pushed in such a way that browser makers start supporting it and the traditional text-to-speech companies would be faced with the choice of supporting markup or going extinct I would be very grateful.
A push for better accessibility overall, not just in the area of text-to-speech but in support of braille and of other accessibility features for other disabilities gets my vote.
Alexa and Audible are both classic examples of how something that is accessible for those who are disabled can also be extremely convenient and popular for the general public.
Not sure how we’d do it yet, but it would be great to see more CSS support for multi-dimensional graphics or text treatment. Such as taking a flat image or piece of text and making it 3D etc. Not really talking about text shadows, but actually changing the shape of the letters or parts of a graphic/icon.