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

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

#31

Post by arca_vorago » Sat, Feb 11, 2017, 6:06 PM UTC

I never understood why people think the "holy grail layout" is a sticky footer. Do they really have pages with so little content that it's an issue?

I have decided for me at least that a fixed footer and header is what I consider my "holy grail layout" with just a center with no columns. Lately I've been trying to play with css grid to port over my previous layouts, but without much luck so far.

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

#32

Post by enraged_camel » Sat, Feb 11, 2017, 6:17 PM UTC

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.

Government is one such audience. The K-12 system is another.

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

#33

Post by olavk » Sat, Feb 11, 2017, 6:22 PM UTC

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

CSS only needs additional elements in case you need to apply structures which is not already present in the HTML. To layout something as a grid you need two levels of grouping: what delimits a cell and what delimits a row. Free-from dt/dd sequences does not contain this information, since there may be multiple dt per dd and vice versa. If dt/dd could only appear in pairs (like in your example) you could say there is an implicit structure, but this is not necessarily the case.

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

#34

Post by olavk » Sat, Feb 11, 2017, 6:34 PM UTC

arca_vorago wrote: post #31

I never understood why people think the "holy grail layout" is a sticky footer. Do they really have pages with so little content that it's an issue? I have decided for me at least that a fixed footer and header is what I consider my "holy grail layout" with just a center with no columns. Lately I've been trying to play with css grid to port over my previous layouts, but without much luck so far.

The point of a footer is that it is at the bottom of the canvas regardless of the size of other content. If it is not at the bottom of the canvas, then you get something else at the bottom - like a colored box of unknown dimensions. Which means the footer is not the footer anymore.

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

#35

Post by olavk » Sat, Feb 11, 2017, 6:39 PM UTC

c-smile wrote: post #19

bromuro wrote: post #14

Earlier quoted context omitted.

It's called `display: block` - in sake of consistency :)

`display:block` does not define layout model of element content so I suspect it is not an intent of the author. This div { display:block } div > * { display:block; } is closer but still far from ideal: e.g. it will force all tables to lose their display:table; or lists to lose display:list-item; As far as I understand author is looking for div { flow:vertical; } But that's available only in Sciter.

I'm not sure I understand what you are trying to achieve differently from regular display:block?

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

#36

Post by codedokode » Sat, Feb 11, 2017, 6:48 PM UTC

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 did when I was a beginner developer and wanted to understand CSS better. MDN doesn't help much if you want to understand for example how element dimensions are calculated, and W3C has a detailed description [1]. I haven't seen a better explanation yet.

[1] https://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and...

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

#37

Post by codedokode » Sat, Feb 11, 2017, 6:53 PM UTC

toxican wrote: post #21

tangue wrote: post #10

Earlier quoted context omitted.

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

It is interesting that when XHTML was popular most people actually made and served HTML pages (with content type text/html) even if they had a XHTML doctype. That is why this standard was dead from the beginning. Though personally I like the idea of not displaying the page if there is any error in the code.

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

#38

Post by [deleted] » Sat, Feb 11, 2017, 6:59 PM UTC

arca_vorago wrote: post #31

I never understood why people think the "holy grail layout" is a sticky footer. Do they really have pages with so little content that it's an issue? I have decided for me at least that a fixed footer and header is what I consider my "holy grail layout" with just a center with no columns. Lately I've been trying to play with css grid to port over my previous layouts, but without much luck so far.

[deleted]

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

#39

Post by robin_reala » Sat, Feb 11, 2017, 7:12 PM UTC

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

Not that I diagree with your premise, but in this particular example the WHATWG HTML Living Standard now allows containing divs around dt/dd pairings[1] and browers support this fine.

[1] https://html.spec.whatwg.org/multipage/semantics.html#the-dl...

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

#40

Post by c-smile » Sat, Feb 11, 2017, 7:18 PM UTC

olavk wrote: post #35

c-smile wrote: post #19

Earlier quoted context omitted.

`display:block` does not define layout model of element content so I suspect it is not an intent of the author. This div { display:block } div > * { display:block; } is closer but still far from ideal: e.g. it will force all tables to lose their display:table; or lists to lose display:list-item; As far as I understand author is looking for div { flow:vertical; } But that's available only in Sciter.

I'm not sure I understand what you are trying to achieve differently from regular display:block?

Consider following markup:

   
     some text
     firstsecond

There is no way in CSS at the moment to define content flow of the div above. The only possible way is to define `display` on its children.

Say, you want that div to replace content vertically as if all children are blocks and text runs are wrapped into anonymous paragraphs:

   
     some text
     first
     second

That's impossible in modern CSS without redefining `display` in children. But usually you cannot blindly say

   div > * { display:block;}

What if some child uses `display:flex` ?

Problem is that `display` defines how element is replaced among its siblings. But not how its children are laid out.

At some point it was a proposal to add `display-model` css property. So you can have

   div { display: block; display-model:flex | table | etc }

Without it we have ugly semi-solution of combinatorial explosion:

   div { display: flex; }
   div { display: inline-flex; }
   div { display: table }
   div { display: inline-table; }
   div { display: grid; }
   div { display: inline-grid; }
   ...