Live data from Hacker News

CSS Grid – Table layout is back. Be there and be square

developers.google.com

201–210 of 280 posts

Re: CSS Grid – Table layout is back. Be there and be square

#201

Earlier quoted context omitted.

The (theoretical) issue here is that a "table" has a certain semantic meaning ("a container for tabular data"), and that using a table for something outside that semantic meaning can introduce confusion, be it for fellow programmers (including your future self!) or for those who are interpreting your page in weird ways (robots, people using screen readers, etc.). In the few times I actually bother with frontend "desi…

w.r.t. avoiding div and class, how do you make sense of the element rule mapping? There's definitely enough specificity to make such a mapping, but I just end up with a big bowl of spaghetti. EDIT: I guess I'm mostly talking about class, HTML5 semantic elements takes over much of the utility of divs in this usecase.

I usually just base it on whether or not an element is a direct child of some other element. For example, the header of the page itself will usually have a different style than the header of an article or aside or something, so I can use CSS' child selectors for that.

This often does indeed result in a bowl of spaghetti, but said bowl is in CSS rather than HTML. Things like SASS/SCSS help tremendously.

Re: CSS Grid – Table layout is back. Be there and be square

#202

Earlier quoted context omitted.

The (theoretical) issue here is that a "table" has a certain semantic meaning ("a container for tabular data"), and that using a table for something outside that semantic meaning can introduce confusion, be it for fellow programmers (including your future self!) or for those who are interpreting your page in weird ways (robots, people using screen readers, etc.). In the few times I actually bother with frontend "desi…

I have 30,000 unique visitors to my website every day. The number who care whether HTML tags are being outside their semantic purity is zero.

Great! If it ain't broke, don't fix it. If you don't have users with screen readers and don't have any issues with search engines parsing your web page, then you do you.

Re: CSS Grid – Table layout is back. Be there and be square

#203
post #75

Earlier quoted context omitted.

Most divsoup-layouts are not semantic at all, either.

Exactly this. How are DIVs more semantic than TABLE? And who is reading the source? Your developers and a web spider. The web spider doesn't care (I wrote one and getting it to parse DIV content and TABLE content wasn't much effort) As far as I am aware no spider is looking at the DIV and gathering semantic information from it. Sure, it may look at the TABLE and initially assume it has tabular data in it, but a tiny…

> And who is reading the source? Your developers and a web spider.

Or blind people using a screenreader?

DIVs aren't entirely semantic, but table is semantically wrong for how it's being used. It'd be like if I asked you to "get me the pencil off that thingie" and pointed at a chair with a pencil on it. As opposed to "get me the pencil off that table" while pointing at the same chair with a pencil on it.

Re: CSS Grid – Table layout is back. Be there and be square

#205
post #48

Earlier quoted context omitted.

It's neither flexible nor semantic. Flexibility is what allowed webpages to be "responsive" before media-queries even existed, and semantics is what allows accessibility, search engines, and other html parsing tools ("readability" in Firefox and Safari, ...) to function better. The only advantage it has is that it's old and predictable. That's why it's still used to format emails for instance, it's reliable and works…

I mean, it is semantic, if you want a table. One of the most baffling things to me is people trying to use not-tables when they're literally trying to display tabular data.

I laughed when I had to make a minor change to an old web application, and found our tabular, scientific data was being displayed in a series of DIV and SPAN elements, with the CSS table styles applied to them.

I changed it to a real TABLE, since that's far more accessible -- most users can cut and paste into their spreadsheet, and a screen reader might give options to avoid reading out all the data.

Another time, a web developer changed all my Homo sapiens to Homo sapiens.

Re: CSS Grid – Table layout is back. Be there and be square

#206
post #125

Earlier quoted context omitted.

Originally, it was not known that HTML pages would be so finely designed. It is not a naieve dichotomy, it is an attainable ideal that has had a very positive effect on the state of the web. We owe huge thanks to this movement that lead both to the demise of proprietary browser extensions (like flash) and to the awesome technologies in browsers today such as these CSS features, new HTML elements and transport protoco…

These things, while beneficial, don't owe their existence to CSS. Instead, introducing eg. CSS shapes or `content: ` (as two extreme examples) was the way of least resistance/guerilla tactics, as opposed to putting the functionality into SVG proper, or aligning the layout box model better with the DOM model, resp. Now what we're left with is a way overcomplicated mess for generations to clean up. There's a reason Moz…

> There's a reason Mozilla spent the better part of the decade to come up with a new web renderer.

That had nothing to do with the fact that HTML and CSS are independent.

Tables are way way more complicated than anything in CSS. In fact, tables are unspecified.

This [1] is a work in progress draft and incomplete. You'll be forgiven if your eyes glaze over while reading it.

[1]: https://dbaron.org/css/intrinsic/

Re: CSS Grid – Table layout is back. Be there and be square

#208

I don't know how to say it politely but what has been achieved by using ad-hoc syntax such as this gem (and similar complex CSS syntax): display: grid; grid-template-rows: 150px [nav-start] auto 100px [nav-end]; grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end]; CSS fans for some reason seem to think that its somehow better to have rendering/presentational properties in an ad-hoc language. Ori…

You say "css fans" like we have a choice in the matter :)

I am a fan of building websites, and css is the only way to achieve that. Yeah it sucks, but it's all we got. Grid spec solves a LOT of problems so even if the syntax is ugly, it's existence in the world is beautiful.

Re: CSS Grid – Table layout is back. Be there and be square

#209
post #144

Earlier quoted context omitted.

I got tired of this exact thing, so I started making an informational site: http://www.lightentheweb.com/ It's very very not ready yet, but I'd appreciate some pointers or PRs.

You could add http://vanilla-js.com/ ? :D

Haha, that's too light, I think :) I'm planning on having articles on how to do things that you're currently using libraries for with vanilla JS, though.

Re: CSS Grid – Table layout is back. Be there and be square

#210

Earlier quoted context omitted.

These things, while beneficial, don't owe their existence to CSS. Instead, introducing eg. CSS shapes or `content: ` (as two extreme examples) was the way of least resistance/guerilla tactics, as opposed to putting the functionality into SVG proper, or aligning the layout box model better with the DOM model, resp. Now what we're left with is a way overcomplicated mess for generations to clean up. There's a reason Moz…

> There's a reason Mozilla spent the better part of the decade to come up with a new web renderer. That had nothing to do with the fact that HTML and CSS are independent. Tables are way way more complicated than anything in CSS. In fact, tables are unspecified. This [1] is a work in progress draft and incomplete. You'll be forgiven if your eyes glaze over while reading it. [1]: https://dbaron.org/css/intrinsic/

This is not a tables-vs-CSS thing. Hey, I'm looking forward to servo and applaud Mozilla devs for it; but the reason they found it worthwile to invent an entire new programming language for implementing it certainly is telling about CSS's insane complexity.
Post reply on HN