CSS Grid – Table layout is back. Be there and be square • Hacker News Board

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

#191

Post by njharman » Tue, Jan 31, 2017, 4:34 PM UTC

sangnoir wrote: post #137

bshimmin wrote: post #131

Earlier quoted context omitted.

I'm glad someone else said it. I particularly like that they've introduced a new unit, `fr`, and can't even decide what it stands for. I've been writing CSS since about 1996; for some reason, I feel like it all started to go downhill, fast, with the background gradient syntax.

> I feel like it all started to go downhill, fast, with the background gradient syntax I'll take background in CSS over tiled 1px-wide gradient background images any day . The responsibilities being piled to CSS keep increasing, but I believe it is being done in good faith to at improve/formalize what people in the wild are already doing with hacks. Remember DHTML?

Dude! I had so forgot about making those 1px by however long/high images, over and over as size of things changed.

CSS/HTML is a complicated mess. But anyone who thinks it used to be better needs to take off the rose tint glasses.

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

#192

Post by tannhaeuser » Tue, Jan 31, 2017, 4:34 PM UTC

mbrock wrote: post #171

lenkite wrote: post #147

Earlier quoted context omitted.

CSS would have been so simple if it had just adopted a plain LISP syntax. It is so difficult to memorise all the special and inconsistent syntax for every new thingamajig that browser vendors choose to introduce. Need to painfully look up a CSS reference if you haven't used that special rule in more than a week as it just doesn't seem to get retained (at-least for me) into long term memory.

Could you give an example of how such a Lisp-like syntax would look, to show the improvement?

Not the one you asked, and purely for historic reasons, but DSSSL, the precursor of XSLT and CSS, was Scheme:

    ; rule associated to document's element class
    (element (section header)
       (make paragraph
          font-family-name: "Helvetica"
          font-weight: 'bold
          font-posture: 'oblique
          (process-children)
       )
    )

    ; rule associated to a particular element uniquely identified with an id:
    (id ("ref34")
       (make paragraph
          font-family-name: "Helvetica"
          font-weight: 'bold
          font-posture: 'oblique
          (process-children)
       )
    )

[1]: http://dsssl.netfolder.com/DSSSL-markup-Rules.htm

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

#193

Post by mullsork » Tue, Jan 31, 2017, 4:37 PM UTC

HalfwayToDice wrote: post #89

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 "screen readers" argument is cargo cult in 2017.

Is it really?

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

#194

Post by martin-adams » Tue, Jan 31, 2017, 4:41 PM UTC

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.

After using Bootstrap I found myself in a nested div situation. Row + Column + Content/Cell.

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

#195

Post by usaphp » Tue, Jan 31, 2017, 4:42 PM UTC

njharman wrote: post #191

sangnoir wrote: post #137

Earlier quoted context omitted.

> I feel like it all started to go downhill, fast, with the background gradient syntax I'll take background in CSS over tiled 1px-wide gradient background images any day . The responsibilities being piled to CSS keep increasing, but I believe it is being done in good faith to at improve/formalize what people in the wild are already doing with hacks. Remember DHTML?

Dude! I had so forgot about making those 1px by however long/high images, over and over as size of things changed. CSS/HTML is a complicated mess. But anyone who thinks it used to be better needs to take off the rose tint glasses.

Remember back in the days you had to use rounded corners images and JS hacks to get a result that border-radius does today. Nightmares.

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

#196

Post by ashark » Tue, Jan 31, 2017, 4:42 PM UTC

phkahler wrote: post #168

cm2187 wrote: post #2

So basically 15 years late, CSS finally solves this problem. And coming to CSS in 15 years: adaptive design!

Next up: Revival of the tag!

I seriously wish it'd survived and been enhanced. Much AJAX in practice is used to replicate the effect of s, but slower, buggier, and with more battery drain.

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

#197

Post by usaphp » Tue, Jan 31, 2017, 4:44 PM UTC

tannhaeuser wrote: post #192

mbrock wrote: post #171

Earlier quoted context omitted.

Could you give an example of how such a Lisp-like syntax would look, to show the improvement?

Not the one you asked, and purely for historic reasons, but DSSSL, the precursor of XSLT and CSS, was Scheme: ; rule associated to document's element class (element (section header) (make paragraph font-family-name: "Helvetica" font-weight: 'bold font-posture: 'oblique (process-children) ) ) ; rule associated to a particular element uniquely identified with an id: (id ("ref34") (make paragraph font-family-name: "Helv…

And how is that making it better than CSS? It looks more complicated and still has to use all the same attributes.

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

#198

Post by yoz-y » Tue, Jan 31, 2017, 4:45 PM UTC

kagamine wrote: post #117

yoz-y wrote: post #107

Earlier quoted context omitted.

How could this be done better though? Unless using a DSL it seems to me that this problem is quite complex to begin with.

It is, but it also illustrates the problem of drawing a simple diagram for the web. It was in response to user mattmanser's illustration of diabolical nested tables and user einar's nested divs. HTML is problematic for anything complex. I suppose the best way to represent the data is to not use HTML at all, but instead use an image (SVG? for scalabilty) or a big PDF that opens a new tab? I googled for a solution that…

I would say that best for drawing diagrams in html pages would be to use a DSL like plantuml or dot and some javascript library to transform it into a SVG image.

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

#199

Post by yellowapple » Tue, Jan 31, 2017, 4:54 PM UTC

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…

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

No, it's not, as I thought I made plainly clear in my comment. HTML5 introduced a smorgasbord of new tags to avoid that.

You're right that a lot of modern web development fashion is silly, but there are alternatives besides just sticking to tables for everything.

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

#200

Post by tannhaeuser » Tue, Jan 31, 2017, 4:59 PM UTC

usaphp wrote: post #197

tannhaeuser wrote: post #192

Earlier quoted context omitted.

Not the one you asked, and purely for historic reasons, but DSSSL, the precursor of XSLT and CSS, was Scheme: ; rule associated to document's element class (element (section header) (make paragraph font-family-name: "Helvetica" font-weight: 'bold font-posture: 'oblique (process-children) ) ) ; rule associated to a particular element uniquely identified with an id: (id ("ref34") (make paragraph font-family-name: "Helv…

And how is that making it better than CSS? It looks more complicated and still has to use all the same attributes.

I don't advocate using it, I just posted it for historical reference (actually I'm hesitating to post anything LISP here because that will easily derail a thread into becoming off-topic).

But what the snippet shows is how eg. the DOM is traversed explicitly, as opposed to CSS's multiple implicit measurement and layout passes over the DOM. CSS sure is more compact, but doesn't begin to reveal anything like the above snippet.