I'm writing a CSS book

JavaScript archives Compatibility Thidrekssaga QuirksBlog Donations CSS book Politics Mobile About COH

contact

What is CSS4?

If we want CSS4 to be a thing it is necessary to define it a little more. However, that does not mean it’s necessary to divide all existing CSS modules into CSS3 and CSS4 buckets. This article discusses these issues, and goes through some of the feedback to my original article.

Responses

My article led to a few responses. Louis Lazaris disagrees with me, and thinks we should stick to the individual modules, as we do today. I leave it to Dan Q to summarise my disagreement:

Nobody’s going to buy a book that promises to teach them “CSS3 Selectors Level 3, Fonts Level 3, Writing Modes Level 3, and Containment Level 1”: that title’s not even going to fit on the cover. But if we wrapped up a snapshot of what’s current and called it CSS4… now that’s going to sell.

In a comment, Ilya Streltsin points out that there are too many CSS modules, which makes them less suitable for high-level teaching and marketing. A list of twelve modules is inherently more boring than “CSS4.”

Still, Louis isn’t entirely wrong. We need to say something about what CSS4 is. Chris Coyier and Timothy Miller have some ideas that I’ll get back to below.

I think we should pick two or so modules that would become poster children for “CSS4,” mostly to raise awareness and enthusiasm among web developers who don’t follow CSS too closely.

CSS4 is undefined

Picking two or so modules is not the same as going through all of CSS and deciding which parts are CSS3 and which are CSS4. Therefore Johan Ronsse’s fears are unfounded:

As a teacher of sorts, I for one don’t want to explain the difference between CSS3 and CSS4 to junior web devs. There is simply no point. CSS is just CSS. We should be happy that it’s stable. We should be happy that we dropped the 3.

CSS modules are not CSS3 or CSS4; they’re just CSS. The term “CSS4” is meant to draw people to your teaching, but once you have their attenton you largely drop the term and just teach them what they need to know.

Instead of attempting to define it, we should airily refer to CSS4 but be rather vague about what it means exactly. That allows people to project their own feelings and ideas onto it. CSS4 is here, and it means whatever you want it to mean. Now come and learn. It’s cool!

Remember: this is a marketing exercise; not a technical description of CSS.

Setting minds at ease

Nonetheless, in order to prove that CSS4 is cool we need a few example modules. “Learn CSS4! It allows you to do X and Y!” Which modules should we pick?

When I was a history teacher, long ago, I learned one valuable trick: when writing tests for students, always start with a simple question that all of them know the answer to. The purpose is to put the students’ minds at ease and make them feel they know at least something about the topic.

For instance, if they have to learn the chapter on the French Revolution, start the test by asking “In which year did the French Revolution take place?” The chapter prominently states the answer, 1789, in the first two paragraphs, so you can be reasonably certain that almost all students have actually learned this by heart. So they’ll sigh a breath of relief, give the correct answer, and gain more confidence for the rest of the test.

I feel we should do something similar f0r CSS4. One of the modules we tout as “CSS4” should be one that even people who’re not all that good in CSS have used and know a little bit. That’ll make them feel that they already know something about the subject, so the rest shouldn’t be too hard. It will draw them in.

CSS4 — the known parts

Chris Coyier created a draft list, and Timothy Miller added a few ideas. The first module Chris mentions is Flexbox, but he notes it may be too old. Sadly, I must concur. Flexbox would have been a brilliant “set-your-mind-at-ease-CSS4-is-not-as-hard-as-you-think” module, because almost everyone has heard of it, and plenty of people who are otherwise not terribly into CSS have used it.

Unfortunately it’s really too old: if we’d use it as our poster child people might lose the suspension of disbelief that’s necessary for the CSS4 trick to work. “Huh? Flexbox? But that’s been around for ages!”

Grid is the obvious next option. It’s not too old, and some people have heard of it and use it. On the other hand, I learned doing research for the book that there are some web developers who feel they don’t have to learn Grid because they already know Flexbox. And both are for layout, right? So why learn two?

As an argument this does not make any sense, but the fact that this ideas is floating out there means using Grid as a poster child might backfire. (I’m not sure; I’m just guessing here. But my gut feeling says that Grid is the wrong module.) Update: I changed my mind: grid should definitely be part of CSS4.

For now I settled on CSS custom properties (or variables) as my choice. They are in use, but they’re not yet old news. More importantly, custom properties allow local scope in CSS, and that is quite important to JavaScripters and might draw them to the right articles and teachings.

I’m not quite sure yet if this is the best module — I’m open to arguments. But I have to say something, and this is where I stand right now.

CSS4 — the unknown parts

In addition to the well-known set-your-mind-at-ease module we should also have soemthing that’s really, really new. The idea would be to tout two modules as “CSS4.” People would lose their fear after recognizing custom properties, while the other module would intrigue them, and they’d be excited to learn about it.

But which module? I’m not sure. Chris mentions Houdini, CSS nesting, variable fonts, and offset paths as possibilities. Timothy adds media queries level 4 to the list. Chris also says:

Lemme just say I will personally spearhead this thing if container queries can get done and we make that a part of it.

Container queries would be suitable. Developers who predominantly use JavaScript would like to have them.

Unfortunately they’re not there yet. So although they’re an excellent choice for a future module (“CSS4 will eventually include container queries”), they won’t help us right now.

So ... does anyone have a useful suggestion for a new CSS module that is not well known yet, applies to more than just a subset of CSS, and that we can start teaching right now? (Lack of general applicability is my problem with variable fonts and offset paths.)

Houdini? I’m afraid its complexity will detract from learning simple CSS, so I’m not sold. Level 4 media queries? I feel there’s too little difference with level 3.

So I don’t know right now. I’ll continue to think about this, and meanwhile I’d appreciate hints and ideas.