Fresh CSS constructs move web design beyond ticky-tacky little boxes

The World Wide Web’s decades-long tyranny of box design is finally coming to an end. A new set of CSS features – including the shape() function, and the border-shape and corner-shape properties – offers web designers and their AI agents a broader palette for laying out content in a more fluid manner. When the World Wide Web …

[Anonymous Coward]

What kind of rectangle is next?

One box -> Frames -> iFrames -> Tables -> Divs -> Divs but Grids -> One box.

MARTY! MARTY! SOMETHING HAS TO BE DONE ABOUT YOUR GRIDS!

[Paul Herber]

I'd go for the PythagarOS, it's all based on triangles.

[Pete 2]

Hip to be square

> So there's no reason today why a web page has to be square

I eagerly await my non-rectangular computer monitor, TV or cinema screen!

[that one in the corner]

Re: Hip to be square

>> So there's no reason today why a web page has to be square

> I eagerly await my non-rectangular computer monitor, TV or cinema screen!

>> A shape can enlarge or shrink when the mouse hovers over it

Your non-rectangular, shape-changing monitor.

Luckily, we already have the growable laptop monitor, it won't be at all frustrating when it starts to chug away every time you mouse over the web page[1].

Next year, the Origami Monitor bends and folds to show you the glory of the web page the way the designer[2] intended. Hey, look, a new way for the manufacturer to boast that they are bringing you Space Age Technology On Your Desk[3].

[1] "Nonsense, I have to press a button to unfurl the screen" - until some LLM throws enough junk code at the problem that some of it sticks to the motor driver

[2] who is the important one in this relationship, after all

[3] ok, the fine-tuning waggle may be cruder, less precise and over a larger range of motion

[Anonymous Coward]

Re: Hip to be square

And if you find one, CSS is way ahead of you: https://www.w3.org/TR/css-round-display-1/

I must point out this one remains in "idea" stage - it's in draft, untouched for ten years and is unlikely to ever be implemented.

[Anonymous Coward]

Oh goody

As if most corporate web pages weren't crap enough already, some fuckwit launches yet another layer of enshittification.

Has anyone tried to view a typical motor vehicle manufacturers website? They are fucking awful already.

[Al fazed]

Re: Oh goody

The same can be said for el Reg, since the last make over it's damn near impossible to read on my mobile phone, as I have done for some years. Is it the CSS that's enshitified this IT news organ, no it was the fucking devs.................

What happened to Web Accessibility Standards like ARIA ?

Do el Reg devs even know what it is ?

Bollox.............the lot

ALF

[that one in the corner]

Re: Oh goody

And I've just found out that they have removed the very helpful feature that told you when your comment contains malformed HTML and stopped you posting it until the missing quotes character had been fixed.

[Philo T Farnsworth]

Re: Oh goody

“It wasn’t the airplanes… it was beauty killed the beast.”

[Fruit and Nutcase]

Re: Oh goody

We'll be back to the equivalent of multiple coloured, flashing fonts of home brew web pages.

I'm just glad to be of an age where the grim reaper is catching up and I can look forward to eternity without all this

[Rafael #872397]

Feh!

Bring back the blink tag!

[breakfast]

Much as I hate to disagree with the traditional grumps of the comment section...

This is pretty cool!

I know it's fun to be an old man yelling at clouds, but being able to get these effects in a few lines of CSS rather than reams of Javascript (if they're even possible) is a real improvement and I'm sure inventive designers will figure out how to do some very smart things with it.

[that one in the corner]

Re: Much as I hate to disagree with the traditional grumps of the comment section...

Absolutely, some very smart inventive designers will do some wonderful things.

Now, what percentage of web writers are very smart and inventive and in a position to apply that to the site they are told to publish by the marketing department? When you stumble across that page, your jaw will drop in admiration (assuming it isn't so beautifully subtle that you don't even realise what you're looking at).

Meanwhile, all the other URLs that befoul the browser...

[Anonymous Coward]

Re: Much as I hate to disagree with the traditional grumps of the comment section...

My earlier comment about the internet clusterfuck that is most automobile makers websites still stands. Do you REALLY want the enshittification to get worse?

[Anonymous Coward]

It's cool toys for webmonkeys, alright

The thing is, the 'web came into being as a medium for information exchange. And this is one of many, many more barriers to exactly that. Coolness notwithstanding.

That doesn't have to be a problem, but in practice it is. So the medium becomes less and less suitable for that boring old information exchange. It's like you have to upgrade your glasses with GPUs and things just so you can keep reading the same old text from the same old paper. Not usually a problem when its adverts that fail to render properly, but it can get right sticky if you can no longer read government announcements, penalty notices, and so on. Given the drive to "digital first" with an implied "digital only -- to come", this is a serious problem that needs serious consideration. And perhaps an actual standard, rather than that "living standard" malarkey that effectively means google is playing a Madagascar song in the W3C's room.

So the problem is not coolness, or lack thereof. The problem is going to be demands put upon every comer wanting to see the information offered, and no graceful degradation because... while possible, it just doesn't happen. Instead the webmonkeys tend to get passive-aggressive and grey out your screen entirely, imploring you to "upgrade your browser". This is going to pour more oil on that dumpster fire.

But, sure, the features it claims to offer sound totally cool.

[find users who cut cat tail]

Re: It's cool toys for webmonkeys, alright

The only recourse seems to be requiring accessibility aggressively – at least for anything ‘official’. I have seen a bunch of sites that either complained my Firefox was too old or rendered/worked weird – but were fine in links [the text browser]. Because of accessibility.

The older I am the less I care about your slightly darker grey on slightly lighter grey buried under full-screen banners – now with curves! Let me read the text, let me make it big and high-contrast and let me do the thing I came to do on your website.

[breakfast]

CSS should be an accessibility tool

Accessibility is way easier to achieve with CSS than with Javascript-based solutions because the appearance should be broadly separate from the content of the page that one needs to access. Removing or switching out a stylesheet is easy, figuring out how to bypass a bunch of weird JS rendering rules that are different on each site is not.

Stylesheets should be making your content look good without interfering with what it actually says.

[nijam]

Re: CSS should be an accessibility tool

> Stylesheets should be making your content look good without interfering with what it actually says.

Nobody in our business should use the word "should".

[Snake]

Re: very smart things to do with it

The grumps are pointing out that JS creating a render on, even a modern browser, is going to be far more resource intensive. Read as: if you think your stupid Chrome browser is a memory hog now, just WAIT until you have 5 tabs open with rendered CSS JS shape objects, several of them per page knowing the all too-obvious low-IQ web designer. Watch your fans spin up as the xPU's render silly things for no reason at all, 'just because we can!'. And just add that custom shape render time to the overall render time of the entire page, never-you-mind the background loading of embedded ads and trackers.

Wait for it: using the shape() function to create custom-shaped containers that match the outlines of embedded images, making the many individual items contained in a single photo perfectly clickable. It'll only take 3GB of browser RAM and 25% xPU resource per page, plus take 23+ seconds per page load to draw.

What's the problem??

[breakfast]

Re: very smart things to do with it

If it's done in CSS you can presumably just disable the stylesheet and not have to worry about the fact your rendering engine seemingly can't handle SVGs. What's the problem??

[Snake]

Re: disable stylesheet

And exactly how common-knowledge is THAT? Rather silly to even suggest it, maybe 0.0001% of users know about it and how to do it??

[PRR]

Re: very smart things to do with it

> Wait for it: using the shape() function to create custom-shaped containers that match the outlines of embedded images, making the many individual items contained in a single photo perfectly clickable.

That's been around for, like decades? https://www.w3schools.com/tags/tag_map.asp

"The <map> tag is used to define an image map. An image map is an image with clickable areas....The <map> element contains a number of <area> elements, that defines the clickable areas in the image map."

Yeah, hand-extracting the coordinates for MAP was too-too tedious, but there were apps then, and now "AI" would eat it up.

[Anonymous Coward]

The biggest mistake we made with the www was to hand it to 'designers' rather than authors.

[Al fazed]

bollox

Or to devs who know how to use AI, but I assume are purely Apple fans, so that is what you get, arrogant twats......................

Look your text is grey, not black...........why are you hiding the content you trendy M_Fer ?

ALF

[Brewster's Angle Grinder]

It'll be a while yet...

"while border-shape and corner-shape are still being implemented and considered experimental"

For which read, Blink only browsers.

Progress on the corner-shape is ongoing in the other-browsers - but, when that arrives, it'll only give you kinkier corners.

And nothing is happening with border-shape on either Firefox or Webkit

(And I'm currently required to support Safari 16.4. Which means not even shape() for me unless there is a fallback.)

[MattieD]

Remember when content was king?

I think a lot of web designer seem to have forgotten the entire reason for a website is - in most cases - to convey information to the visitor. They don't care about gradiented-this, round-cornered-that, or shape-changing-boxes - they want to get the information they've visited the site for.

We don't want - or need - a visual assault (and several additional hundred MBs of RAM used) when we visit a site. Sometimes - if not always - simplicity is the key.

[Pete 2]

Re: Remember when content was king?

>Remember when content was king?

Ahhh, the good old days of gopher <wipes tear from eye>

[Brave Coward]

Re: Remember when content was king?

Well, considering what were most of the esthetic choices of personal sites in the late '90 / early '00, one may tend to slightly disagree with that opinion.

[that one in the corner]

Re: Remember when content was king?

> esthetic choices of personal sites

But *personal* websites were - are - all about communicating *YOU* to the rest of the world.

Including, as in the sites you reference, "I am not thinking about the reader, this is all about me, Me, ME!" or, on the happier side, "I wouldn't know tasteful graphic design if it bit me on the arse, but considering this WWW thing is only a couple of years old now and nobody has really got enough experience to know when to stop, that is not something I can really be blamed for; but at least I'm having a go."

Sadly, that last reading of the situation is no longer a valid excuse, so any atrocities (with or without the new CSS features) you come across now...

[John 110]

Is it just me who's having flashbacks to the Simpsons episode where Homer builds a website....

[Anonymous Coward]

Not really layout

CSS makes the disctinction between layout (where things are) and shape (how they look). These are all "shape", in that they effect how things appear on the page but not how they're laid out. Everything is still rectangles, just with fancy clipping.

Now if you want text to follow a shape, you'll be needing shape-outside which has been widely supported for a long time.

[Filippo]

If the whole point of HTML/CSS was to separate content from layout, can I have a button in my browser that turns one of those "modern" websites where 98% of my screen is whitespace, and turns it into a website where I can actually read an entire sentence without having to scroll?

[myhandler]

So just like what you could do with QuarkXPress 35 years ago?

But everything is now done with Artificial Slopalopolis via ThisMonthsCoolFramework (™) so who gives a flying fig.

[Bebu sa Ware]

"the grid-defined layouts of academic papers, newspapers, and magazines."

Never occurred to the wubyou-wubyou-wubyou clowns that that form had evolved, selected for readabilty, ease of comprehension and coherence.

My first thoughts seeing this, were those of Dorothy Parker: "What fresh Hell can this be?"

In principle you could override the site's stylesheet(s) in your browser (that's part of what the "cascading" meant) but in practice not so or at least not very effectively as the lashings of ghastly java/ecma-script usually makes the content unreadable.

Years ago when SGI was still a going concern, I used a modified version of a site's stylesheet to fix the unreadable dark shit brown text colour on a black background (to black on off white.) The browser supported per site overrides.

I suspect the worst sins of web page layout arose from the limited resolution and size of monitors at the time — 1024x728 and 36cm (14") was pretty much the best you could expect for a long time.

Monitors 4K and 80cm (32") are probably now just as common and could display a tabloid format newsheet layout but even in desktop mode you still get a layout suited to 16cm (6½") phone.

The sins of web typography can only have arisen from profound physical or asthetic blindness.

_{Oddly I find dark mode nearly impossible to read. I assume it is due to the aging eyes.}

[My other car WAS an IAV Stryker]

Re: "the grid-defined layouts of academic papers, newspapers, and magazines."

...and BOOKS!

I'll keep my rectangles, thank you -- the books, the shelves, etc. My books will outlast everything digital (if they don't get burned in some civil / apocalyptic war).

[nijam]

Re: "the grid-defined layouts of academic papers, newspapers, and magazines."

> My books will outlast everything digital (if they don't get burned in some civil / apocalyptic war).

More likely to be stolen, slurped, then shredded by an AI megacorp.

[Wily Veteran]

> shape() has been used to create ticket stubs, chat bubbles, and other assorted page flotsam.

Flotsam is the debris and cargo that has floated free from a wrecked or sinking ship. Seems to be an appropriate metaphor indeed.

Content? We don't need no stinking content, look at the cool DESIGN!

[trevorde]

Can't wait to see what LINGsCARS does with this!