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

161–170 of 280 posts

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

#161

Post by tinco »

tannhaeuser wrote: post #157
tinco wrote: 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…

I don't get what your point is with mentioning CSS shapes and `content`.

What I am talking about is CSS Zen Garden and the movement around it of frontend web developers professionalizing, rejecting table layouts and non-standard browser features.

This was enabled by CSS being barely powerful enough, and people creative enough to make it work. Eventually the movement won, non-IE browsers won market share and the way was paved for a more healthy evolutionary path of the web which has yielded these new features.

You look at CSS from a perspective that it's hard, as if there exists a solution somewhere that is easier. Before CSS there were simply the less powerful HTML features, the 'easier' but less semantic and non-adaptive tools like Flash or SVG, and the always present and expertise requiring method of simply imperatively coding the styling in WinForms or whatever.

CSS was absolutely crucial.

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

#162

Post by scoot »

TeMPOraL wrote: post #112
andybak wrote: post #93

Earlier quoted context omitted.

There was a particularly extreme trend back then (well - probably more during the 90s) where websites were mainly big Photoshop images sliced up into a lot of nested tables of dizzying complexity. Screen readers off course struggled with that as it was rather hard to determine the order of the content. I'm not sure how much trouble they have with more minimal use of tables for presentation.

> where websites were mainly big Photoshop images sliced up into a lot of nested tables of dizzying complexity Replace "nested tables" with "nested divs", and this is exactly how web development today still looks, at least if your company employs a designer. Slicing is still a thing.

Then fire your designer and hire one who is competent for the job.

Sliced images were an ugly hack for the shortcomings of early CSS (or no CSS if you go back further still).

There's been no excuse for a very long time now.

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

#163

Post by bobwaycott »

jfoutz wrote: post #28
ddebernardy wrote: post #17

Earlier quoted context omitted.

OP is likely referring to vertical rhythm in typography: https://zellwk.com/blog/why-vertical-rhythms/

rhythm, or perhaps repetition is one of the core tenants of graphic design. Once you start looking for it, you'll see it lots of places. It's kind of like the wilhelm scream sound effect. It's not hard to find strong examples, but most stuff is divided into a natural harmonic, 1/3 1/4 or 1/5. movie posters are an easy example. Anywho, google helps a bit, [1]. So, yes, you're absolutely right. it's just quite a bit mo…

Nerdy nit: you mean to use the word tenets, not tenants. :)

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

#164

Post by forgottenpass »

iamben wrote: post #129
orbat wrote: post #39

Earlier quoted context omitted.

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…

Nothing. But tables are for tabular data.

And webpages are a document presentation format. If jamming applications into documents made the web an application platform, than jamming grid layouts into tables made them a grid widget.

Calling a SPA a "page" is a larger and more ridiculous lie than calling the table tag a grid layout widget. Anyone still committed to the table tag lie should move all their apps out of the browser today.

Web developers can work around the table tag, but not the fact they're jamming apps into documents. So one of these lies is taken more seriously than the other.

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

#165

Post by BugsJustFindMe »

swalsh wrote: post #120

My first experience as a young kid in the 90's doing web design was taking the msn.com home page (I thought it looked nice back then) looking at the source, and learning. Turns out layout was done using tables. Cool, putting it into practice though it was really really hard. The primary force you were always fighting against was inconsistency between browsers. You might get everything perfect in IE, then load it in N…

The primary force you were always fighting against was inconsistency between browsers.

None of the things you're complaining about are table's fault, though. In the 90s browser vendors didn't target cross-functionality nearly as much as they do now. They could have easily made tables work even better with a modicum of intent instead of plunging us into 2 decades (!!!) of unintelligible nested div hacks that still after all that time weren't up to the task until some arbitrary number of years from today when this feature is actually widespread enough to deploy.

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

#166

Post by kuschku »

TeMPOraL wrote: post #110
yellowapple wrote: post #61

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…

OK, so tables have semantics of tabular data. But the shit ton of semantically meaningless divs that are sprinkled around the structure to provide hooks for CSS declarations in the "usual" style of doing layouts is somehow better? It's much larger, much less readable, much less obvious, and breaks the "separation of content and layout" rule even stronger than tables. So again, why is this better? And yes, I've been i…

The divs are sprinkled just to say "this is a block, it can be moved or arranged however wished", and styling within the block is done separately.

It’s not intended to do anything more or less.

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

#167

Post by emodendroket »

leppr wrote: post #48
orbat wrote: post #39

Earlier quoted context omitted.

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

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.

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

#169

Post by e12e »

einr wrote: post #79
e12e wrote: post #69

Earlier quoted context omitted.

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-e…

I look forward to trying modern flexbox and grid layouts. I have not had the privilege (?) to work with either yet; our customers are not necessarily on the bleeding edge of browser releases so I have to stay a little behind the curve. Hence, a lot of div soup and ridiculous indentation levels. Honestly, for what I'm doing (a pretty complex web app with an almost desktop-style GUI with a bunch of buttons, text inputs…

> for what I'm doing (a pretty complex web app with an almost desktop-style GUI with a bunch of buttons, text inputs and checkboxes everywhere)

Right. There's different contexts between an application an a (hyper)text document.

What's good semantic markup for one, will generally be bad for the other.

It's admirable (and desirable) to strive for adaptive layout and accessibility in applications - but they need a different type of framework than documents made for browsers. The browsers straddle this divide rather uncomfortably - being in part hypertext document browsers, and in part virtual machines for running general applications.

Approaches like web components[1] might help us move toward a standardised reality for "applications that happen to run in the browser", while css and html are still (more and more anachronistically) (hypertext) document markup and layout tools.

If you want to make a Web page/site (like alistapart.com) that's great. Swim with the current and draw inspiration from stuff like css zen garden[2]. With flex box, you can burn[4] most of the old complicated grid layout stuff, and comparatively easily make great sites.

That doesn't really help if you're a "front-end developer" making "apps" though. Even the few that make an effort to color within the lines are still fighting the browsers and the standard, trying to fit a code-on-demand app into a REST shoe[3].

[1] https://www.webcomponents.org/

[2] http://www.mezzoblue.com/zengarden/alldesigns/

[3] https://news.ycombinator.com/item?id=13500635 (I've said it before - the true tragedy isn't that too few read Fielding's thesis and never understood REST - It's that so many ignore that he covered a lot of other architectures that are more suitable for many applications than REST is)

[4] https://philipwalton.github.io/solved-by-flexbox/demos/grids...

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

#170

Post by mbrock »

edmccard wrote: post #108
mbrock wrote: post #71

Earlier quoted context omitted.

I think the lack of such a clear distinction is part of the web's success. For example, is Facebook a web page or a web app?

>For example, is Facebook a web page or a web app? Is this a trick question? :) On the scale from pages to apps, where one end is someone's static geocities page about their cats and the other end is, let's say, github: Facebook is definitely an app.

It's kind of a trick question in that my point is that it is a more of a scale than a binary opposition, and that the ability to mix document-like parts with program-like parts is what made the web so incredibly successful.
Post reply on HN