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

121–130 of 280 posts

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

#121

Post by TeMPOraL »

drinchev wrote: post #115
TeMPOraL wrote: post #104

Earlier quoted context omitted.

Because they're much simpler than the usual div-based layouts, and so the frontend dev will get bored out of their brains?

Tables are meant to be used for ... tables. Not layout. The downsides are enormous. From hard-to-find bugs through SEO-penalty to code-maintainance [1]. I lived the time when there was no CSS at all. Back then we used tables for everything. I'm happy those times are over. 1: http://stackoverflow.com/questions/83073/why-not-use-tables-...

Most of the raised in the accepted answer to that SO question can in fact be applied equally well to div/css layouts as they're practiced in the wild. CSS Zen Garden is awesome and all, but I'm yet to see a fronted professional who does things that way.

For instance, arguments about ease of change (single place to modify) are irrelevant, because in both cases the single place to modify is the code that renders the layout.

Also, personally I'm not buying the whole separation of layout from content thing. It's an implicitly understood fact people seem reluctant to admit out loud: form is a part of content too! These are not orthogonal things.

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

#123

Post by pjmlp »

pilif wrote: post #49
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…

> it should be available for 95%+ of users within a year only if you don't have enterprise customers. Those will continue to run IE11 for the foreseeable future as IE11 will remain supported in Windows 10 until 2025. While Microsoft is pushing Edge as an IE replacement, Edge is still lacking features and looks too different from IE for companies to feel comfortable pushing it to their users without retraining them.

IE11 ?!

You lucky guys, we still have to support older versions for some specific customers.

But even better was Safari for Windows, on a very specific case around three years ago.

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

#124

Post by shadowfiend »

kagamine wrote: post #78
einr wrote: post #60

Earlier quoted context omitted.

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

That's a problem for sure but last week I looked into creating a family tree with the basics of HTML and CSS and the following nested lists seems to be the best solution according to forums. Now, try to add into these nested lists some siblings(the people kind) and some new branches as you discover people in census reports from 100 years ago. Now add in a newborn. Is this the best we can do? (apologies, but I haven't…

Lifted from there, but with broken indentation :) In fact with correct indentation, you see that this goes down 4 levels (instead of the seeming 14 the current rendering seems to indicate). That's significantly better, and once you get used to the structures of lists it's actually relatively straightforward to understand a list like that. Moreover, it's trivial for a computer to understand a list like that as nested lists of lists.

Side note: the top-level div isn't really necessary; you can just apply the `tree` class directly to the `ul` with a small tweak or two to the CSS.

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

#125

Post by tinco »

tannhaeuser wrote: post #119

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…

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 protocols.

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

#126

Post by extra88 »

return0 wrote: post #50
mullsork wrote: post #42

Earlier quoted context omitted.

Except anyone with accessibility requirements, no? As far as I know tables are horrible for anyone with a screen reader. Can you annotate tables somehow to work for accessibility purposes?

The problem with screen readers is summarized "Screen readers assume the content inside a table is tabular". Are divs better just because they are undefined? It seems to me that the problem would more easily be solved by adding some attributes to skip tabular treatment or to add captions, rather than ditching tables altogether. Table elements like could even be used to identify and access parts of the UI pages.

Using tables for layout is so commonplace, I think most screenreader makers basically gave up and don't treat a table as a table unless it includes headers (). Of course people who choose to use tables for layout also skip using more semantic elements, have a lot less flexibility to make layout changes (because their choices are expressed in HTML instead of CSS), and have a lot more trouble making their designs responsive.

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

#127

Post by monk_e_boy »

drinchev wrote: post #115
TeMPOraL wrote: post #104

Earlier quoted context omitted.

Because they're much simpler than the usual div-based layouts, and so the frontend dev will get bored out of their brains?

Tables are meant to be used for ... tables. Not layout. The downsides are enormous. From hard-to-find bugs through SEO-penalty to code-maintainance [1]. I lived the time when there was no CSS at all. Back then we used tables for everything. I'm happy those times are over. 1: http://stackoverflow.com/questions/83073/why-not-use-tables-...

You won't get penalised for using tables as layout in regards to SEO.

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

#128

Post by andreareina »

yellowapple wrote: post #61
return0 wrote: post #47

Earlier quoted context omitted.

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 "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.

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

#129

Post by iamben »

orbat wrote: post #39
supersan wrote: post #32

Makes you wonder why HN won't budge with those tags in the source code. One day I hope to see "Table layouts are back with tags" and the HN programmers would have saved themselves so much work.

What, exactly, is the problem with the tag in the first place? Been a long, long time since I last touched HTML

Nothing. But tables are for tabular data. Laying out a page using a table to divide it up and make it look pretty (or in lots of cases, lay it out so it performs some kind of sales based task) doesn't make much sense. Hence the preferred CSS route, even if the markup is just as verbose (as mentioned in this thread).

Web apps aside [sigh], if one was to disable CSS (and thus all the blocks making it look pretty), the page should still make sense. An H1 as the main header, copy in paragraphs, headers dividing up the content, blockquotes, navigation in lists - and tabular data in tables (etc, etc).

It doesn't always work like that in practice, but that's the aim.

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

#130

Post by monk_e_boy »

dom0 wrote: post #75
leppr wrote: 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…

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 bit of logic fixes that.

Post reply on HN