SMASHINGMAGAZINE.COM
Its Time To Talk AboutCSS5
We have been talking about CSS3 for a long time. Call me a fossil, but I still remember the new border-radius property feeling like the most incredible CSS3 feature. We have moved on since we got border-radius and a slew of new features dropped in a single CSS3 release back in 2009.CSS, too, has moved on as a language, and yet CSS3 is still in our lexicon as the last official semantically-versioned release of the CSS language.Its not as though we havent gotten any new and exciting CSS features between 2009 and 2024; its more that the process of developing, shipping, and implementing new CSS features is a guessing game of sorts.We see CSS Working Group (CSSWG) discussions happening in the open. We have the draft specifications and an archive of versions at our disposal. The resources are there! But the develop-ship-implement flow remains elusive and leaves many of us developers wondering: When is the next CSS release, and whats in it?This is a challenging balancing act. We have spec authors, code authors, and user agents working both interdependently and independently and the communication gaps are numerous and wide. The result? New features take longer to be implemented, leading to developers taking longer to adopt them. We might even consider CSS3 to be the last great big marketing push for CSS as a language.Thats what the CSS-Next community is grappling with at this very moment. If you havent heard of the group, youre not alone, but either way, its high time we shed light on it and the ideas coming from it. As someone participating in the group, I thought I would share the conversations were having and how were approaching the way CSS releases are communicated.Meet The CSS-Next CommunityBefore we formally meet the CSS-Next group, its worth knowing that it is still officially referred to as the CSS4 Community Group as far as the W3C is concerned.And that might be the very first thing you ought to know about CSS-Next: it is part of the W3C and consists of CSSWG members, developers, designers, user agents, and, really, anyone passionate about the web and who wants to participate in the discussion. W3C groups like CSS-Next are open to everyone to bring our disparate groups together, opening opportunities to shape tomorrows vision of the web.CSS-Next, in particular, is where people gather to discuss the possibility of raising awareness of CSS evolutions during the last decade. At its core, the group is discussing approaches for bundling CSS features that have shipped since CSS3 was released in 2009 and how to name the bundle (or bundles, perhaps) so we have a way of referring to this particular era of CSS and pushing those features forward.Why We Need A Group Like CSS-NextLets go back a few years. More specifically, lets return to the year 2020.It all started when Safari Evangelist Jen Simmons posted an open issue in the CSSWGs GitHub repo for CSS draft specifications requesting a definition for a CSS4 release.This might be one of the biggest responses if not the biggest response to a CSSWG issue based solely on emoji reactions.The idea of defining CSS4 had some back-ups by Chris Coyier, Nicole Sullivan, and PPK. The idea is to push technologies forward and help educators and site owners, even if its just for the sake of marketing.But why is this important? Why should we care about another level or CSS Saga? To get to that point, we might need to talk about CSS3 and what exactly it defines.What Exactly Is CSS3?The CSS3 grouping of features included level-3 specs for features from typography to selectors and backgrounds. From this point on, each CSS spec has been numbered individually.However, CSS3 is still the most common term developers use to define the capabilities of modern CSS. We see this across the web, from the way educational institutions teach CSS to the job requirements on resumes.The term CSS3 loses meaning year-over-year. You can see the dilution everywhere. The earliest CSS3 drafts were published in June 1999 before many of my colleagues were even born and yet CSS is one of the fastest-growing languages in the current webscape.What About The CSS3 Logo?When we look at job postings, we run into vacancies asking for knowledge of CSS3, which is over 10 years old. Without an updated level, were just asking if youve written CSS since the border-radius property came out. Furthermore, when we want to learn CSS, a CSS3 logo next to educational materials no longer signals current material. It kind of feels like time has stood still.Heres an example job posting that illustrates the issue:But thats not all. If you do a Google search on Learn CSS and check the images, you might be surprised how many CSS3 logos you can spot:About 50% of the images show the CSS3 badge. To me, this clearly signals:People want badges or logos to aid in signaling skills.The CSS3 brand has made a large impact on the web ecosystem.The CSS3 logo has reached the end of its efficacy.CSS3 had still has a huge impact on the ecosystem. The same logo is trying to say it teaches Flexbox all the way to color-mix() a spread of hundreds of CSS features.What Exactly Does Modern CSS Mean?CSS3 and HTML5 were big improvements to those respective languages weve come a long way since then. We have features that people didnt even think were possible back in 2012 (when we officially spoke of CSS3 as a level).For example, there was a time when people thought that containers didnt know anything and it never be possible to style an element based on the width of its parent. But now, of course, we have CSS Container Queries, and all of this is possible today. The things that are possible with CSS changed over time, as so beautifully told by Miriam Suzanne at CSS Day 2023.We do not want to ignore the success of CSS3 and say it is wrong; in fact, we believe its time to repeat the tremendous success of CSS3.Imagine yourself 10 years from now reading a modern CSS feature that was introduced as many as 10 years ago. It wouldnt add up, right? Modern is not a future-proof name, something that Geoff Graham opined when asking the correct question, What exactly is Modern CSS?Naming is always hard, yet its just something we have to do in CSS to properly select things. I think its time we start naming [CSS releases] like this, too. Its only a matter of time before modern isnt modern anymore. Geoff GrahamThis is exactly where the CSS-Next community group comes in.Lets Talk About CSS ErasThe CSS-Next community group aims to align and modernize the general understanding of CSS in the wider developer community by labeling feature sets that have shipped since the initial set of CSS3 features, helping developers upskill their understanding of CSS across the ecosystem.Why Isnt This Part Of The Web Platform Baseline?The definition of what is current CSS changes with time. Sometimes, specs are incomplete or havent even been drafted. While Baseline looks at the current browser support of a feature in CSS, we want to take a look at the evolution of the language itself. The CSS levels should not care about which browser implemented it first.It might be more nuanced than this in reality, but thats pretty much the gist. We also dont want it to become another modern CSS bucket. Indeed, referring to CSS3 as an era has helped compartmentalize how we can shift into CSS4, CSS5, and beyond. For example, labeling something as a CSS4 feature provides a hint as far as when that feature was born. A feature that reaches baseline meanwhile merely indicates the status of that features browser implementation, which is a separate concern.Identifying features by era and implementation status are both indicators and provide meta information about a CSS feature but with different purposes.Why Not Work With An Annual Snapshot Instead Of A Numbered Era?Its fair to wonder if a potential solution is to take a snapshot of the CSS feature set each year and use that as a mile marker for CSS feature releases. However, an annual picture of the language is less effective than defining a particular era in which specific features are introduced.There were a handful of years when CSS was relatively quiet compared to the mad dash of the last few years. Imagine a year in which nothing, or maybe very few, CSS features are shipped, and the snapshot for that year is nearly identical to the previous years snapshot. Now imagine CSS explodes the following year with a deluge of new features that result in a massive delta between snapshots. It takes mental agility to compare complete snapshots of the entire language and find whats new.Goals And Non-GoalsI think Ive effectively established that the term CSS alone isnt clear or helpful enough to illustrate the evolution of the CSS, just as calling a certain feature modern degrades over time.Grouping features in levels that represent different eras of releases even from a marketing standpoint offers a good deal of meaning and has a track record of success, as weve seen with CSS3.All of this comes back to a set of goals that the CSS-Next group is rallying around:Help developers learn CSS.Help educators teach CSS.Help employers define modern web skills.Help the community understand the progression of CSS capabilities over time.Create a shared vernacular for describing how CSS evolves.What we do not want is to:Affect spec definitions.CSS-Next is not a group that would define the working process of or influence working groups such as the CSSWG.Create official developer documentation.Making something like a new version of MDN doesnt get us closer to a better understanding of how the language changes between eras.Define browser specification work.This should be conducted in relevant standardization or pre-standardization forums (such as the CSSWG or OpenUI).Educate developers on CSS best practices.That has much more to do with feature implementations than the features themselves.Manage browser compatibility data.Baseline is already doing that, and besides, weve already established that feature specifications and implementations are separate concerns.This doesnt mean that everything in the last list is null and void. We could, for example, have CSS eras that list all the features specced in that period. And inside that list, there could be a baseline reference for the implementations of those features, making it easier to bring forward some ideas for the next Interop, which informs Baseline.This leaves the CSS-Next group with a super-clear focus to:Research the communitys understanding of modern CSS,Build a shared understanding of CSS feature evolution since CSS3,Grouping those features into easily-digestible levels (i.e., CSS4, CSS5, and so on), andEducate the community about modern CSS features.Wed Likely Start With The CSS5 EraA lot of thought and work has gone into the way CSS is described in eras. The initial idea was to pick up where CSS3 left off and jump straight into CSS4. But the number of features released between the two eras would be massive, even if we narrowed it down to just the features released since 2020, never mind 2009.It makes sense, instead, to split the difference and call CSS4 a done deal as of, say, 2018 and a fundamental part of CSS in its current state as we begin with the next logical period: CSS5.Heres how the definitions are currently defined: CSS3 (~2009-2012):Level 3 CSS specs as defined by the CSSWG. (immutable)CSS4 (~2013-2018):Essential features that were not part of CSS3 but are already a fundamental part of CSS.CSS5 (~2019-2024):Newer features whose adoption is steadily growing.CSS6 (~2025+):Early-stage features that are planned for future CSS.Uncle Sam CSS Wants You!We released a request for comments last May for community input from developers like you. Weve received a few comments that have been taken into account, but we need much more feedback to help inform our approach. We want a big representative response from the community! But that takes awareness, and we need you to make that happen. Anything you can do to let your teams and colleagues that the CSS-Next group is a thing and that were trying to solve the way we talk about CSS features is greatly appreciated. We want to know what you and others think about the things were wrestling with, like whether or not the way were grouping eras above is a sound approach, where you think those lines should be drawn, and if you agree that were aiming for the right goals.We also want you to participate. Anyone is welcome to join the CSS-Next group and we could certainly use help brainstorming ideas. Theres even an incubation group that conducts a biweekly hour-long session that takes place on Mondays at 8:00 a.m. Pacific Time (2:00 p.m. GMT).On a completely personal note, Id like to add that I joined the CSS-Next group purely out of interest but became much more actively involved once the mission became very clear to me. As a developer working in an agency, I see how fast CSS changes and have struggled, like many of you, to keep up.A seasoned colleague of mine commented the other day that they wouldnt even know how to approach vanilla CSS on a fresh website project. There is no shame in that! I know many of us feel the same way. So, why not bring it to marketing terms and figure out a better way to frame discussions about CSS features based on eras? You can help get us there!And if you think Im blameless when it comes to talking about CSS in generic modern terms, all it takes is a quick look at the headline of another Smashing article I authored this year!Lets get going with CSS5 and spread the word! Let me hear your thoughts.ResourcesCSS-Next Group HomepageCSSWG Drafts Issue #4770: Lets Define CSS 4CSS-Next Issue #92: Initial CSS Level Categorization
0 Комментарии
0 Поделились
269 Просмотры