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

CSS Grid changes everything [video]

youtube.com

Post reply on HN
Print view View original

71–80 of 90 posts

Re: CSS Grid changes everything [video]

#71

Post by poxrud »

ausjke wrote: post #41
gkilmain wrote: post #23

Earlier quoted context omitted.

The speaker suggests serving up mobile layout for older browsers and this is the pattern we are following at my company.

what does 'serving up mobile layout' exactly mean? Thanks. yes grid is awesome but how to deal with polyfill is the question

I think it means make your containers 100% width blocks and stack them on top of each other vertically.

I will be taking the approach of creating a "good enough" layout for older browsers and a superior layout to modern browsers using "@supports" feature query.

Re: CSS Grid changes everything [video]

#72

Post by dredmorbius »

Animats wrote: post #14

Tables. They're back!

Disclaimers: I'm not principally a UI/UX designer, though I (re)write a hell of a lot of CSS because so much of it completely sucks.

Tables overload what should be a data-definition element with layout semantics. And, yes, there's an argument that might be made, I suppose, that Grid (which I'm only just learning of from this video) might recreate some of the sins of table-based layouts. Especially of "pixel-perfect" layouts.

And, yes, I can see clients or frameworks which, say, assign a grid to Every. Damned. Paragraph. In. A. Page.

You cannot out-wit stupid, it's far too smart for that.

But the positive here is that you're getting the gridding of tables with the flexibility of semantic positioning. And that could be useful.

And unless you're dealing with a truly supergenius-level idiot, you might be able to deal with broken Grid layout by just dropping the Grid-based CSS entirely. Tools such as Reader Mode or Pocket (or similar) should have an easier time parsing this sort of thing.

Though really, if you want to fix HTML truly, insisting on standards-compliant formatting and imposing a penalty (Web search still seems to be the gatekeeper role here) on Really Bad Design might address some of that.

Though there's a horribly large amount of Very Bad Structural Page Design. Including much of it from, oh, just to select a publisher at random: Google.

Re: CSS Grid changes everything [video]

#73

Post by dredmorbius »

Animats wrote: post #47
jordanlev wrote: post #46

Earlier quoted context omitted.

Wrong. Tables impart meaning to user agents (browsers, screen readers, google bots, etc) and as a side effect they have a default visual style that is useful for some layouts in some limited situations (but without any kind of fine-grained detail that most modern designs call for -- ESPECIALLY when making responsive designs that work across different screen widths). CSS Grid, on the other hand, is a tool specifically…

Yeah, yeah, I know the hype. It's just another grid-based layout system. Now if it was a full constraint system, that would be more impressive.

Such as?

Re: CSS Grid changes everything [video]

#75

Post by Bromskloss »

iteriteratedone wrote: post #53
Bromskloss wrote: post #39

Earlier quoted context omitted.

I love not having to care about whether websites I make work on broken or incapable browsers! :-)

So you like being lazy ... a technical challenge comes your way and you hope others fix it for you. This is the hipster frontend engineer attitude. Not to be mistakened for real frontend engineers who create robust sites for paying customers. Enjoy your world and ill enjoy the enterprise dollars. I like coding. I dont complain about the challenge.

> Not to be mistakened for real frontend engineers who create robust sites for paying customers.

Customers with old browsers? Eww! You keep them; I'm better off without customers. :-)

Re: CSS Grid changes everything [video]

#76

Post by Bromskloss »

kybradeck wrote: post #56
bajsejohannes wrote: post #42

Any idea why the grid is 1-indexed instead of 0-indexed?

I believe it's so that you can use -1 to refer to the last gridline. If it was 0-indexed there would be no way to target that final gridline, or there would be a one-off error when using negative numbers. Example: https://css-tricks.com/things-ive-learned-css-grid-layout/#a...

Couldn't you still use -1 to refer to the last grid line (or was it grid element)? Python does it, for example.

Re: CSS Grid changes everything [video]

#77

Post by Animats »

dredmorbius wrote: post #73
Animats wrote: post #47

Earlier quoted context omitted.

Yeah, yeah, I know the hype. It's just another grid-based layout system. Now if it was a full constraint system, that would be more impressive.

Such as?

For a good example, see sketch mode in Autodesk Inventor. Not just boxes - curves.

Re: CSS Grid changes everything [video]

#78

Post by shripadk »

rhencke wrote: post #35
shripadk wrote: post #30

Earlier quoted context omitted.

Semantic tags are required from an accessibility point of view. If not, there wouldn't even be a need for a tag. Might as well just use with display:table. Actually you could just about use for everything! But by doing so, you are alienating those who use screen readers to browse your site.

That's not true, though. Semantic tags may make it easier to be accessible, but they are absolutely _not_ required. WAI-ARIA defines the mechanisms to make existing webpages accessible, and they do not require using tags for their semantic meaning - quite the opposite. You use role attributes for this. For example: Click me. is perfectly accessible, and will be interpreted as a button, though semantically it's a div.

WAI-ARIA has its limitations. When it comes to tables (which is the example I provided) there are no roles for demarcating headers (), body () and footers (). Instead there is a generic "rowgroup" role which doesn't indicate to the person using a screen reader if the row belongs to a header or body or footer. Also, without a header demarcation, it becomes the responsibility of the disabled user to keep a count of the table cells to be able to associate content with headers (which the blind user will have to assume is the first rowgroup). Complex tables (which have multiple header rows with some cells merged) are simply inaccessible to the user.

WAI-ARIA complements semantic tags. It doesn't contain replacement for all semantic tags. It doesn't stop at the table tags. How would you represent , , , using WAI-ARIA such that the screen reader picks up the intent? Also imagine trying to replace the or elements with tags. You would have to use _contenteditable_ and then implement all the semantic features yourself. It's just not worth the effort and the end result will be buggy.

Re: CSS Grid changes everything [video]

#79

Post by _betty_ »

ataylor32 wrote: post #62
_betty_ wrote: post #59

Earlier quoted context omitted.

what's wrong with giving older browsers a different experience?

One scenario I can think of is a non-IE user telling an IE user to go to a particular website and click the button that's at the top of the right sidebar. For the IE user, it might be a stacked layout where the sidebar actually appears under the main content. I would call this a nuisance more so than a major issue, but nevertheless it is something to consider.

you'd have the same issue between a desktop and mobile user. i don't see it as an issue at all.

Re: CSS Grid changes everything [video]

#80

Post by _betty_ »

JeanMarcS wrote: post #64
_betty_ wrote: post #59

Earlier quoted context omitted.

what's wrong with giving older browsers a different experience?

I think it depends of if you need trafic from those browser or not. Because if you do, you'll have to maintain several version, or increase your time on working on it to do gracefull degradation (which is of course a good way to do, but more expensive)

but that's kind of the beauty of css grid, the gracefull fallback is basically mobile view which you already put effort into.
Post reply on HN