‘CSS X’

https://www.w3.org/blog/2020/03/css-x/

86 42 6 years ago

akersten2• 6 years ago

This article is a masterwork in expanding a single sentence ("CSS gets a new conceptual version every few big modules") into an absolute saga.

As I was reading through I was worried I was about to read an article about how some big company was going to recreate CSS from the ground up because there's too much cruft or something. A relief!

runawaybottle2• 6 years ago

All I could think as I read it was ‘What am I reading here, and should I be terrified?’.

I live in fear reading through anything new in the frontend space.

Any further developments in this space needs to come full circle with web components. The WASM army have begun marching recently too.

The horror! The horror!

uallo• 6 years ago

"CSS gets a new conceptual version every few big modules"

Where in the article does it say anything like that? The article does not present any decision in that regard at all. It summarizes the history of CSS and the discussion about whether or not to (re-)introduce some kind of global CSS versioning. It presents some suggestions and concerns from the community. But it does not introduce anything.

akersten2• 6 years ago

It's the last sentence, which one could be excused for not enduring the rest of the article before reaching:

, a precise definition of ‘CSS X’ isn’t even needed. Every three years of so, some people should pick a couple of interesting new modules that were added in that period and start writing about them, under the heading ‘CSS 4’, then ‘CSS 5’, etc. ‘CSS X’ is defined as those two or so modules, plus whatever was in the previous version and a loosely defined set of other modules.

I said "conceptual" because it's just some person's opinion about versioning, and the article does say the CSS working group doesn't really care for versioning at all. Either way, my opinion was that the article is about 95% too long, I'm making no other claims.

benrbray• 6 years ago

Leading the web to its full potential

Meanwhile, that W3C logo is sporting a radial gradient + inner shadow + drop shadow combination straight out of 2004!

maxharris2• 6 years ago

I used to get really angry at CSS because of all of the things that made it a bad fit with component-based systems like React. It made me so unhappy that I worked full-time for about nine months on this project, which was a React-like component system that rendered to canvas. https://github.com/maxharris9/layout

I got pretty far! But I gave up working on it when I realized that I was going to be pushing this boulder uphill for years.

So what changed? I picked up Swift and SwiftUI, and it turns out that some of the ideas that I had were the same ones the SwiftUI folks went with!

For all the web has given us, I think its APIs are holding us back now. I still think we need something open and decentralized that competes with the App store and Play store, but one that offers apps that use basically the same APIs and technology that the native apps use.

Last thing: I know Apple cripples browsers on their platforms. I've run into all those issues personally in my work! That still doesn't make the web the right thing. Here's James Mickens telling us how to fix the browser's busted architecture: https://www.youtube.com/watch?v=1uflg7LDmzI

untog2• 6 years ago

Improvements like web components encapsulating CSS make it a much better fit for component development. Just a shame React doesn’t support the API like other frameworks do.

runawaybottle2• 6 years ago

I thought React team was working to support web components?

filleduchaos3• 6 years ago

This is part of why it bemuses me to see web developers cling so hard to using HTML/CSS beyond the browser. I'd much sooner tangle with a proper UI SDK designed from the start to support applications than fight with a layout/painting engine that relies on a document model. The sheer inability of CSS to handle dynamic heights should be frustration enough for anyone.

franga20002• 6 years ago

One big reason I often go with HTML rather than any kind of actual UI framework, especially for prototypes or ad-hoc interfaces, is that's it makes it so much easier to do dumb things that weren't intended, aren't versitile or accessible, but I don't care.

I can put a div in a div, border-radius=50%, position=relative,absolute, add a single event handler and that's a digital joystick. Run a local single-exe websocketify and you can control anything from a CNC router to an army of drones.

I dislike Electron* as much as the next guy and steer clear of npm like my life depends on it, but there's no single thing that's more universal and easy to hack on than a simple HTML file.

deergomoo5• 6 years ago

Even layout aside (I'm hoping Houdini will eventually bring some form of constraint-based layout to browsers), HTML is the lamest UI toolkit going.

We've got a handful of basic form inputs, incredibly inflexible tables, and some semantic rectangles. That's basically it.

Even the form inputs can be a pain. It's insane to me that the only way to change the background colour of a checkbox is to hide it and build your own with CSS hacks (pseudo-elements etc.).

I guess the fact that any element needs to function purely from markup without any code severely hampers them, but I can't believe how much time we're all wasting having to build things as basic as pop-out menus by hand.

yagodragon• 6 years ago

I still think we need something open and decentralized that competes with the App store and Play store, but one that offers apps that use basically the same APIs and technology that the native apps use.

Take a look at Flutter(which is similar to swiftUI). I know Google is behind it but it's so damn good. The JS community spends so much time creating new tools on top of older tools to achieve simple things that should be trivial in 2020. Meanwhile, flutter is typescript+react+webpack+component library + a bunch of npm dependencies(because dart has a proper standard library) + advanced styling/layout and animation primitives inside the programming language + amazing IDE support + compiler that generates optimized AOT native code.

Flutter Web is a huge bet though because it completely throws away every web tech and builds UIs on top of <canvas>. That way you get the same API's you get on mobiles. The results are not good right now but alongside Microsoft's Blazor they are the only technologies competing with the broken web landscape.

toastal• 6 years ago

Sure the naming conventions for for versions are arbitary, but there's still a lot of exciting stuff in these pipelines regardless of name. I love how much the definition of "color" has expanded in CSS4. You can query on color gamut range and define your own color spaces. CSS5 is getting color operations based on lch so you don't have the gamma squaring issue that plagues Sass and Less. I like that the direction isn't just to copy these preprocessors but make it better from the start.

lykahb• 6 years ago

The version was useful when the browsers had incomplete support for CSS. It served as a milestone for browser makers to achieve. They could give a claim of their technological advantage, say 90% of the CSS3 features.

Now the CSS progress is more driven by the browsers than the W3C committee. Also, CSS does not affect the competition between browsers as much as before. So, as the flashy tech gets stable and boring, the need to give it marketable names goes away.

kumarvvr2• 6 years ago

I wish there was more done in CSS for generation of print documents.

I mean, precise sizing, pixel perfect placement, layouts, etc, that can be printed as PDF pages.

I know there are print related media settings, but they seem overly complex and paid libraries have cropped up, which abstract away the complexity, but charge to provide usability.

HTML & CSS, conceptually, are world class technologies. Separation of content and styling, theoretically, should be able to display / output documents for a wide variety of targets. However, media queries are based on screen pixel sizes. I don't know if its even possible, but I would love to define media for PDF documents, Word documents, etc.

scoopertrooper• 6 years ago

However, media queries are based on screen pixel sizes.

https://joshuawinn.com/css-print-media-query/

phonon• 6 years ago

https://books.idea.whatwg.org/

kumarvvr2• 6 years ago

Thank you for this. First time I have come across this. Looks very interesting.

_samjarman• 6 years ago

Like React-PDF or do you mean something else?

greggman3• 6 years ago

I'm glad there isn't. I wish more people making documents would get that I live on phones, tablets, notebooks, all with screens of varying sizes. I never print unless some government agency requires it and then I curse that my country is backward compared to say Estonia where rumor is everything is online.

danShumway7• 6 years ago

The print controls are really lacking, there are some good ideas that just kind of never got adopted or implemented. I was/am mildly hopeful that maybe EPUBs will force the web to up its game in those areas.

While we're on the subject of print, I am very jealous of the typographic controls that other platforms have. I get that more expensive text-justification algorithms wouldn't work for most apps, but especially for print, there are times that I don't really care about performance, and I would love to have an expensive text-justification algorithm and tools that rivaled something like LaTex.

As it stands, the prevailing advice about how to justify text on the web is, "don't".

earthboundkid2• 6 years ago

I think CSS would benefit from having an opt-in system for sane defaults. You can’t do a real project without a reset stylesheet of some sort, but why? They should define CSS4 and provide a script type=module style method for telling the browser to use it.

jhardy54• 6 years ago

CSS has no defaults. The defaults are added by your web browser.

earthboundkid2• 6 years ago

The distinction you are making does not meaningfully impact my proposal.

abhay07• 6 years ago

Off the topic. I don't see many website using 3d transform feature of CSS. I think it should be explored more. Has much potential.

‘CSS X’

Related Stories