Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

developers.google.com

Post reply on HN
Print view View original

61–70 of 280 posts

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

#61

Post by yellowapple »

return0 wrote: post #47
TurboHaskal wrote: post #31

I still use plain old tables in 2017. Number of unhappy customers: 0

I do to, sometimes. I wonder if there is any thought given to making tables responsive rather than reinventing the wheel here.

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 "design", my goal is usually for my actual HTML to contain as few hints about how said HTML should be displayed as possible, and to let CSS handle the display specifics. This usually means that I don't touch `div` and I don't touch `class` unless absolutely necessary. CSS provides more than enough selectors for "absolutely necessary" to be false in the vast majority of cases.

Of course, this ain't for everyone. Some people stick with tables. Some people use div/class for everything. Some people just treat Javascript like the new Postscript and generate pages on the fly. You do you. However, these tend to have their share of downsides, among them being a tendency to deviate strongly from the semantics of HyperText documents.

Tables ought to be responsive anyway, though, even if that just means "add a horizontal scrollbar if the screen is below a certain size". I'm pretty sure that's already possible through CSS, but it involves overriding a lot of the work the browser does for you, and unless the data encapsulated by that table is indeed meant to be tabular, you're probably better off with divs (or better yet, with more specific HTML elements).

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

#62

Post by pjmlp »

lomnakkus wrote: post #40
mhd wrote: post #19

If we all had something like Display Postscript, this layout thingamajig would be delegated to libraries, and we wouldn't have to ask the browser deities to bestow new gifts upon us. Good adaptive layout would be closer to a new version of jquery and less Windows XP Service Pack 51.0.2b. (We also would have more sites that looked liked late 90s Flash, but then again, we're moving that direction anyway, just with more…

While that would probably work fine for display and layout, but it doesn't work so well with the semantic document model that the web is built on. For example accessibility would suffer greatly unless every "jquery" (using your analogy) out there were to implement its own accessibility. (That's not to say things are absolutely peachy wrt. accessibility these days, but they'd get a lot worse if everybody had to implem…

That model died when JavaScript got added and Web 2.0 was born.

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

#63

Post by TheAceOfHearts »

matt4077 wrote: post #35

This is excellent. And with the fast pace of browsers, and the improved habits of users (or automatic updates), it should be available for 95%+ of users within a year (It's in the current Safari Technology Preview, so Safari should get it with the next macOS point update). This is also a good moment to remind people that you don't need Bootstrap and the like as much as you used to. Grids were 90% or the reason people…

Since you included the element in your list, something I wish browsers provided is a way to automatically format time elements based on user's preferences. I just want to provide the value in ISO8601, and let the browser take care of it.

Luckily, Intl.DateTimeFormat [0] seems to finally allow a reasonable degree of i18n in the browser. If you can live with the limited Safari availability, of course.

[0] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

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

#64

Post by e12e »

mhd wrote: post #58
ebalit wrote: post #38

Earlier quoted context omitted.

What would be the advantage over SVG ?

PostScript is a programming language.

Indeed: https://news.ycombinator.com/item?id=13529345 ("Hacking Printers Advisory 1/6: PostScript printers vulnerable to print job capture ").

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

#65

Post by rimantas »

aplummer wrote: post #53
DavidSJ wrote: post #43

Earlier quoted context omitted.

There's no problem. But sometime around 2003 it became trendy to do all layout in CSS, even when a table or a tag would do just fine.

No there is, try using a screen reader, it reads out the header in front of every cell, its really hard to understand vs a semantic document with css styling for people not living with disability.

Accessibility is dead, alas. It is extremely sad to watch what is happening with the web right now. All the good initiatives are being forgotten in the chase for the latest fad. "You were so excited that you could that you've forgotten to think if you should" can describe a lot of movement in this space.

Even without the accessibility in mind, go to http://csszengarden.com/ and try to replicate that with tables. Barely ten years have passed and the idea that not everything on the web is an app and sometimes it is nice to have ability to change the presentation without even touching the markup.

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

#67

Post by panic »

lomnakkus wrote: post #40
mhd wrote: post #19

If we all had something like Display Postscript, this layout thingamajig would be delegated to libraries, and we wouldn't have to ask the browser deities to bestow new gifts upon us. Good adaptive layout would be closer to a new version of jquery and less Windows XP Service Pack 51.0.2b. (We also would have more sites that looked liked late 90s Flash, but then again, we're moving that direction anyway, just with more…

While that would probably work fine for display and layout, but it doesn't work so well with the semantic document model that the web is built on. For example accessibility would suffer greatly unless every "jquery" (using your analogy) out there were to implement its own accessibility. (That's not to say things are absolutely peachy wrt. accessibility these days, but they'd get a lot worse if everybody had to implem…

I think there's a distinction to be made between "web pages" and "web apps". Web pages like news articles and blog posts fit well in the semantic document model of HTML. Web apps extend past this model -- something like DPS would make more sense for them.

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

#68

Post by rimantas »

BugsJustFindMe wrote: post #8
activatedgeek wrote: post #3

Why is this problem so hard when CSS does so much for node positioning? Why not create a simpler standard once and for all?

We had a simpler standard in 1995. It was called tables and it did this exceptionally well and more importantly was easy enough for even amateurs to understand. And then armchair demagogues decided that markup should no longer be used for markup, setting web layout back decades and creating the field of web designers whose major accomplishment was understanding stupid div hacks.

Your comment is the best example of the demagogue. Zero understanding of the issue, the problems that tables caused. But it was easy, right?

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

#69

Post by e12e »

einr wrote: post #60
mattmanser wrote: post #54

Earlier quoted context omitted.

That's the problem. This argument was over a decade ago and it's because it's a nightmare to work in tag soup. I still have to deal with tables for layout on mail templates, bloody Outlook, and that extra 2 layers of tag nesting you have to do on every level quickly turns the code into an incomprehensible mess, even with careful indentation. And if you're not very careful with indentation it turns into an utter night…

That's a problem to be sure, but sometimes I wonder if this is much better:

It's not. There were a few arguments against "table layout", some of which apply to hn as well IMNHO. Added tags without semantic value (just as your div-soup above also illustrates). Layout speed (in reality not much of an issue now - and also an issue with deeply nested tags with complex layout).

Both are fixed in modern html5 which moves (back) towards simple, semantic, document layout (html-body-article-heading-etc).

With flex-box layout it's also quite easy to have the article/main content come first (possibly preceded by a header) - followed by sidebars and footer -- all as their own "top-level" boxes/containers.

In a classic table layout, there's an extra top level element in addition to "body" - the surrounding table.

And finally table layout is generally verbose and messy for other types of content than tabular data.

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

#70

Post by martin-adams »

TurboHaskal wrote: post #31

I still use plain old tables in 2017. Number of unhappy customers: 0

Do you mean literal markup, or tables in CSS such as display: table

Using CSS surely can improve the screen reader experience by the markup not being actual tables.

Post reply on HN