There may be an incredible neighborhood effort occurring in quest of a brand new emblem for CSS. I used to be a bit skeptical at first, as I by no means actually thought-about CSS a “model.” Why does it want a emblem? For starters, the present emblem appears… a bit dated.
Displayed fairly prominently is the quantity 3. As in CSS model 3, or just CSS3. Relying in your IDE’s chosen icon pack of selection, CSS file icons are sometimes solely the quantity 3.
To provide an extremely glossed-over historical past of CSS3:
- Earliest draft specification was in 1999!
- Adoption started in 2011, when it was printed because the W3C Suggestion.
- It’s been used ever since? That may’t be proper…
CSS is actually not caught in 2011. Check out all of the options added to CSS previously 5 years (warning, scrolling animation forward):
(Courtesy of Alex Riviere)
Looks as if this stems primarily from the discontinuation of model numbering for CSS. As of late, we largely reference newer CSS options by their particular person specification stage, comparable to Selectors Degree 4 being the present Selectors specification, for instance.
A much more normal commentary on the “progress” of CSS could possibly be having a look at options being applied — issues like Caniuse and Baseline are nice for seeing when sure browsers applied sure options. Equally, the Interop Venture is a gaggle consisting of browsers determining what to implement subsequent.
There are ongoing discussions in regards to the “eras” of CSS, although, and the way these could also be a approach of framing the best way we check with CSS options.
Chris posted about CSS4 right here on CSS-Tips (5 years in the past!), discussing how profitable CSS3 was from a advertising perspective. Jen Simmons additionally began a dialogue again in 2020 on the CSS Working Group’s GitHub about defining CSS4. Figuring out that, are you no less than considerably shocked that we now have blown proper by CSS4 and are technically utilizing CSS5?
The CSS-Subsequent Neighborhood Group is main the cost right here, one thing that member Brecht de Ruyte launched earlier this yr at Smashing Journal. The aim of this group is to, effectively, decide what’s subsequent for CSS! The group defines the CSS variations as:
- CSS3 (~2009-2012): Degree 3 CSS specs as outlined by the CSSWG
- CSS4 (~2013-2018): Important options that weren’t a part of CSS3, however are already a elementary a part of CSS.
- CSS5 (~2019-2024): Newer options whose adoption is steadily rising.
- CSS6 (~2025+): Early-stage options which are deliberate for future CSS.
Take a look at this slide deck from November 2023 detailing the necessity for outlining stronger versioning. Their targets are clear for my part:
- Assist builders study CSS.
- Assist educators train CSS.
- Assist employers outline fashionable net skil…
- Assist the neighborhood perceive the development of CSS capabilities over time.
Circling again round to the emblem, I’ve to agree: Sure, it’s time for a change.
Again in August, Adam Argyle opened a difficulty on the CSS-Subsequent challenge on GitHub to drum up concepts. The thread is lively and ongoing, although seems to be honing in on a launch candidate. Let’s check out some proposals!
Nils Binder, from 9elements, proposed this beautiful design, riffing on the “cascade.” Notice the river-like “S” form flowing by way of the design.
Chris Kirk-Nielson pitched a neat interactive emblem idea he put collectively some time again. The suggestion performs into the “CSS is Superior” meme, the place the content material overflows the wrapper. Whereas playful and recognizable, Nils raised a superb level:
Relating to the reference to the ‘CSS IS AWESOME’ meme, I initially chuckled, in fact. Nonetheless, on the identical time, the meme additionally represents CSS as one thing quirky, unpredictable, and stuffed with bugs. I’m unsure if that’s the precise message that must be repeated within the emblem. It feels prefer it reinforces the recurring ‘CSS is damaged’ mantra. To magnify: CSS is subordinate to JS and one way or the other damaged.
Wow, is that this the top of an period for the acquainted meme?
It’s trying that approach, as the present candidate builds off of Javi Aguilar’s proposal. Javi’s design is being iterated upon by the group, it’s shaping up and appears nice hanging with associates:
Javi describes the design issues within the thread. Personally, I’m a fan of the colour selection, and the softer form differentiates it from the extra inflexible JavaScript and Typescript logos.
As talked about, the dialogue is ongoing and the design is actively being labored on. You’ll be able to try the newest variations in Adam’s CodePen demo:
Or if testing design information is extra your pace, have a look in Figma.
I believe the factor that impresses me most about neighborhood initiatives like that is the collaboration concerned. You probably have opinions on the design of the emblem, be happy to chime in on the dialogue thread!
As soon as the variations are outlined and the emblem finalized, the one factor left to resolve on can be a mascot for CSS. A chameleon? A peacock? I’m certain the neighborhood will select properly.
