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

The Anti-Hero of CSS Layout – “display:table” (2014)

colintoh.com

Post reply on HN
Print view View original

21–30 of 60 posts

Re: The Anti-Hero of CSS Layout – “display:table” (2014)

#21

Post by toxican »

tangue wrote: post #10
codedokode wrote: post #7

Earlier quoted context omitted.

That is because people who do HTML markup are usually not developers. They are either wannabe developers or just incompetent people hired to reduce costs. They would never waste their time on reading something complicated as W3C standards and understanding concepts like semantic markup.

I'm curious about who read w3c standards, even on HN. I don't. Even MDN (which I consider as fork of w3c for humans) can be quite confusing so let's not judge people on this.

I don't think I've ever actually read the standards and I've been doing this 12 or so years now. I just kind of picked up on what was considered kosher and what wasn't over time. And then when having a "XHTML STRICT" badge in your footer was all the rage, I learned a bit more by having to tweak my code to earn it.

imo, there are a lot of different paths to being a good developer. Personally I find scouring over the standards or some dry reference site to be about the most painful way.

Re: The Anti-Hero of CSS Layout – “display:table” (2014)

#22

Post by twhb »

c-smile wrote: post #17

The only problem with display:table is that it still requires additional markup to organize elements in tables. Consider this definition list: Term1 Term1 defintion Term2 Term2 defintion and the task of organizing it into two columns table: dt's in first column and dd's in second. Impossible either with display:table & co. or with display flex. At the same time in Sciter[1] I can define that layout as dl { flow: row(…

It's already a good idea to add elements where logical, even when unnecessary, to aid styling, scripts, coder comprehension, and sometimes automated comprehension, and to reduce likelihood it must be edited later. One could argue that rows always form logical units - certainly in the above example - and thus should always be wrapped. WHATWG does permit wrapping dt-dd groups in divs.

Re: The Anti-Hero of CSS Layout – “display:table” (2014)

#23

Post by crocodileJS »

blueside wrote: post #18
bgrohman wrote: post #9

For what it's worth, the author mentioned that CSS Flexbox would also work, but the market share of IE 9 was too high at the time for him to use. That was 2014, and now the market share of IE (especially IE 9) is drastically lower. https://www.w3counter.com/trends http://caniuse.com/#feat=flexbox

depending on your audience, most of the time you still can't use flexbox today due to ie9/10. it's really something that after all these years, in 2017, microsoft browsers still find a way to hold back web features.

What audience is that? Who are these people relevant to? Microsoft isn't holding back anything, they can't force these people to update their software. If everyone keeps supporting them, they never will have a reason to update.

Re: The Anti-Hero of CSS Layout – “display:table” (2014)

#24

Post by allover »

Waterluvian wrote: post #13
olavk wrote: post #2

It is fascinating how a perfectly sensible rule-of-thumb "you shouldn't use html tables for something which is not semantically a table" gradually morphed into various superstitions like "you shouldn't use html tables" or "you shouldn't use tables for layout" or even "you shouldn't use tables". I don't think people have a hard time understanding that you shouldn't use the -element for something which is not a quote.…

Largely because I'm relatively new to all of this and probably don't know better, but I've found success just using divs for all layout and doing it myself. Which is a smell to me, but I just can't help but find that every time I have consistent results and expected behaviour. Div and flexbox for everything. It actually reminds me of another smell I have with django: write my own serializers and views rather than usi…

You're very lucky to be new to this! If you have success with div and flexbox for everything, then I'm guessing you're not supporting old IEs. You're lucky to have skipped the years of pain in which flexbox simply wasn't an option (for many devs that have to support IE it's still not).

Re: The Anti-Hero of CSS Layout – “display:table” (2014)

#25

Post by Touche »

blueside wrote: post #18
bgrohman wrote: post #9

For what it's worth, the author mentioned that CSS Flexbox would also work, but the market share of IE 9 was too high at the time for him to use. That was 2014, and now the market share of IE (especially IE 9) is drastically lower. https://www.w3counter.com/trends http://caniuse.com/#feat=flexbox

depending on your audience, most of the time you still can't use flexbox today due to ie9/10. it's really something that after all these years, in 2017, microsoft browsers still find a way to hold back web features.

There's a polyfill that works well enough.

Re: The Anti-Hero of CSS Layout – “display:table” (2014)

#26

Post by olavk »

achairapart wrote: post #4
olavk wrote: post #2

It is fascinating how a perfectly sensible rule-of-thumb "you shouldn't use html tables for something which is not semantically a table" gradually morphed into various superstitions like "you shouldn't use html tables" or "you shouldn't use tables for layout" or even "you shouldn't use tables". I don't think people have a hard time understanding that you shouldn't use the -element for something which is not a quote.…

On the other hand, there are cases where HTML Tables put great challanges to user experience. First to come to mind: A table with many rows displayed on a tiny mobile screen. The most common solution is to let the table overflow horizontally. There are other complex solutions, most of them fall in the CSS-Hack category. In this case, to have a CSS table that can be something else on a tiny screen (via media queries)…

But you don't choose between HTML tables and CSS tables - they are independent concerns, HTML is semantics, CSS is presentation. HTML table elements just have display:table as the default style (in the default browser style sheet). You can override this in a style sheet as with any other style. And conversely, you can apply display:table to any element regardless of HTML semantics.

It is true older browsers had partially hardcoded presentation so you couldn't always override the default CSS of certain elements (table elments and form controls were especially notorious for hardcoded presentation). But I believe this is not an issue in modern browsers.

Re: The Anti-Hero of CSS Layout – “display:table” (2014)

#27

Post by SippinLean »

toxican wrote: post #20
Waterluvian wrote: post #13

Earlier quoted context omitted.

Largely because I'm relatively new to all of this and probably don't know better, but I've found success just using divs for all layout and doing it myself. Which is a smell to me, but I just can't help but find that every time I have consistent results and expected behaviour. Div and flexbox for everything. It actually reminds me of another smell I have with django: write my own serializers and views rather than usi…

In terms of results, responsiveness, and flexibility, doing it with a div (or some other block-level element) and flexbox is the best way to do it. In terms of standards and tabular data, doing it with a table is probably more correct, but I think the benefits of flexbox outweighs any concerns about that.

>In terms of standards and tabular data, doing it with a table is probably more correct

I haven't tested it, but I assume you could fake the semantic part of a "CSS table" with something like `role=grid`

Re: The Anti-Hero of CSS Layout – “display:table” (2014)

#28

Post by olavk »

tangue wrote: post #10
codedokode wrote: post #7

Earlier quoted context omitted.

That is because people who do HTML markup are usually not developers. They are either wannabe developers or just incompetent people hired to reduce costs. They would never waste their time on reading something complicated as W3C standards and understanding concepts like semantic markup.

I'm curious about who read w3c standards, even on HN. I don't. Even MDN (which I consider as fork of w3c for humans) can be quite confusing so let's not judge people on this.

MDN is nice, but the W3C standards for HTML and CSS are actually pretty easy to read.

Re: The Anti-Hero of CSS Layout – “display:table” (2014)

#29

Post by [deleted] »

crocodileJS wrote: post #23
blueside wrote: post #18

Earlier quoted context omitted.

depending on your audience, most of the time you still can't use flexbox today due to ie9/10. it's really something that after all these years, in 2017, microsoft browsers still find a way to hold back web features.

What audience is that? Who are these people relevant to? Microsoft isn't holding back anything, they can't force these people to update their software. If everyone keeps supporting them, they never will have a reason to update.

[deleted]
Post reply on HN