HN Theater @HNTheaterMonth

> A static layout will never know how to reflow itself when the window size changes; it needs code to define that behavior.

This is no longer true. CSS grid solves this completely.

https://youtu.be/7kVeCqQCxlk

I am still blown away by how powerful CSS grid is.

https://youtu.be/7kVeCqQCxlk

It's sad it doesn't get more use. Potwntially this is because CSS frameworks hide all this away and nobody is really learning CSS anymore but I wouldn't really know. I'm not really that exposed to the web front end side of things.

⬐ pjmlp

Originally contributed by Microsoft, based on XAML grid.

https://alistapart.com/article/the-story-of-css-grid-from-it...

⬐ gog

https://caniuse.com/#feat=css-grid

This is probably the reason. There are still browsers out there that don't support it 100% to the spec.

⬐ mcv

Not a lot, though. Edge, Chrome, Firefox, Safari, Opera, iOS and Android all support it. Nobody cares about Opera Mini and Blackberry, and the sooner we cut IE11, the better. It's never going to support most of the modern standards.

⬐ detritus

“Recent-ish versions of Chrome, Firefox, Safari, Opera, iOS and Android all support it”. According to my stats, there's a load of old Chrome & Safari versions using my site that would be tripped up by its use, sadly.

I'm keeping a beady eye on my stats, awaiting the day and can make a site entirely with CSS Grid.

⬐ onychomys

It's not that nobody cares about Opera Mini, it's instead that OM users (like me!) have come to accept that some sites will behave in a weird way on the browser, and so it might be necessary to switch to a different one. It's the tradeoff we make to get all of the good things that come along with OM usage.

⬐ tenaciousDaniel

It's not on the blackberry browser, so that's gonna be a no for me! :p

⬐ dictum

There's no reason to not use CSS Grid, except for not knowing it well enough — and there's no reason not to learn it.

Of those, only IE11 is relevant, as it's a desktop browser, on wider and taller viewports.

Most of these browsers are mobile browsers on devices with narrow viewports, so even the default `display: block` fallback may be sufficient. If you have margins/paddings/widths etc which only make sense in the CSS Grid version, you can set these properties inside an `@supports` query https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

For IE11, it's a choice of presenting visitors with a slightly worse layout, to match the browser (https://philipnewcomer.net/2014/04/target-internet-explorer-... or, if you use Sass or PostCSS, using mixins that output CSS Grid properties with Flexbox as fallback.

Its bugs are well-documented, and most have workarounds https://github.com/philipwalton/flexbugs. Even inline-block can serve as a fallback, if you can avoid whitespace around tags in the markup (https://css-tricks.com/fighting-the-space-between-inline-blo...)

A reasonable fallback doesn't need to match CSS Grid exactly. The whole point of media queries and responsive web design is that the website won't look exactly the same on all devices; it will look and work as good as it needs to look in that specific device.

⬐ folkrav

My last workplace's policy was to fully support the last couple version of Edge, Firefox and Chrome, but for IE11, it was "it won't be utterly unusable". That approach is becoming more and more commonplace, too. Reasonable fallbacks doesn't mean being perfect, either. I'll be honest anyway, most people still using IE11 these days are either literally stuck with it, or a pretty used to half the sites they visit to be a bit broken.

⬐ Theodores

> It's sad it doesn't get more use.

This is basic HTML5 literacy. At the end of the day the new HTML5 and CSS features do not fit into out dated work practices and the excuses that go with it. Web content creators and developers should be familiar with all of this stuff and not kidding themselves that the 'sea of divs is the way to go because we do really important projects and need to have polyfills back to IE6'.

Not using the new tags and not using CSS grid is a bit like only eating fast food and no longer knowing how to use a knife and fork. When I look at div soup I know that the team behind the page have not got it yet. None of the div soup HTML is maintainable. It is dated. So any 'wow you can use the details/summary' article comes across to me as 'wow, you have learned to wipe your own nose!' This whole industry needs to get to grips with the lingua franca of the web, focus on document structure, use the stuff that works in evergreen browsers and move away from big up front visual design made into div soup to content driven design. It is that simple and excuses are pathetic.

⬐ rangerpolitic

I am hopeful for CSS grid. I am hopeful that we can properly return to the principle of separating concerns. I am so tired of dealing with sites that have HTML littered with divs and spans solely for the purposes of layout and styling.

⬐ danijelb

Before CSS layouts, HTML tables were (ab)used for layout and were functionally very similar to what CSS grid is now, except responsive of course. In hindsight, maybe tables for layout weren't wrong.

⬐ haste410

I currently still use tables everyday in my job as an email dev. Tables might not be "wrong" but they have serious limitations that have to be worked around.

⬐ remify

Well it worked. Kind of.

What a lot of developers need to understand is that HTML shouldn't be use for layout. HTML should be use for semantic and information structure.

⬐ Frondo

The problem is that, yes, this is the ideal, but when the ideal ran up against the real world usage of these tools, two things happened, one inevitable and the other just a bad choice:

1) a small, extremely vocal group of devs kept reminding us this while the rest of us used the standards "wrong" and did fancy layouts and things,

2) seeing how most of the world used the tools we had, the standards folks didn't give us good layout tools or application development tools, they gave us CSS and it took browser vendors like Microsoft to give us XHR.

Oh what I'd give for the standards folks to have taken some time to look at the world being built around them, and then given us a better way to do that, instead of "HTML shouldn't be used for layout" for years.

I feel like, had things gone in a different direction, web development now would be as easy as VB/Delphi/Lazarus (hell, even tcl/tk) once made desktop app development. Instead, we get the soup of languages, build tools, and the confusing mess of modern web dev.

Sigh.

⬐ chii

So then what is used for layout? Don't say CSS, because CSS depends (somewhat) on the html.

⬐ TeMPOraL

> What a lot of developers need to understand is that HTML shouldn't be use for layout. HTML should be use for semantic and information structure.

That was the great lie of the 2000s. It was oft repeated, but almost never adhered to. CSS Zen Garden was cool, but the typical attempt at "separating content from presentation" almost universally resulted in a div soup that was even worse than table layouts. If a div exists only to hang a class off it, so that it can be targeted in CSS, it's a part of layout, not semantic/information structure.

In a perfect world, in which most websites were not actively user-hostile, we could have separation of layout from content. It would include relinquishing control over rendering back to the users. It would require to stop obsessing so much over colors and layouts and custom controls. The very concept is anathema to the modern web, though.

⬐ Domenic_S

> div soup

At my last job we called it "divarrhea"

⬐ dmix

> If a div exists only to hang a class off it, so that it can be targeted in CSS, it's a part of layout, not semantic/information structure.

Thanks, I've always thought this intuitively but never seen it written out.

Just as any academic theory hitting the reality through actual implementation, the theory should be more of a guiding force instead of a rigid structure to follow.

Much like how the military learned to plan battles (No battle plan ever survives contact with the enemy - Helmuth von Moltke the Elder) by giving troops higher-level objectives, rather than planning every single step of the attack, such as exactly where they should walk and hide, and expecting them to follow it to a T.

This is how I approach most programming/web design theories... including BEM.

CSS Grid Changes Everything - https://youtu.be/7kVeCqQCxlk

The speaker is good but I think I like it just because it fixes the relationship between HTML and CSS.

I came across them from this video, when I heard the "it's almost like ASCII" part (I had it on in the background) something clicked in my head and I had to drop everything to try it out.

https://youtu.be/7kVeCqQCxlk?t=1039

Watch on for the 'crazy response design' part.

I am still amazed.

⬐ jsgo

Thanks for that. At work, they push site should look the same across all browsers very heavily (well, desktop = desktop, tablet = tablet, mobile = mobile). I’m going to try and share this video with one of the guys that dictates design a bit and see if I can convince to get away from all of the hacks built into it that end up breaking little edge cases which then requires browser specific hacks. It’s a longshot, but he likes bleeding edge so fingers crossed.

This is incredibly compelling stuff though. First thing in a while I’ve seen that has left me floored.

You don't need to worry about UC browser if you aren't in China (that knocks several other browsers > 1% "global" share too). Opera Mini + IE11 is ~5.5% unsupported.

One recommendation from the video the other day was also very good in this regard: https://youtu.be/7kVeCqQCxlk?t=23m45s

Create something that works on mobile, then use grid to build outwards. Then you get reasonable views on unsupported platforms (the mobile-centric view, and most platforms that don't support grid are Mobile) and grid works where it can / needs to.

IE11 will -never- support grid. Don't let that hold you back! (Unless you're specifically developing for an IE11-rich market)

⬐ PunchTornado

very few people aren't in china. all projects i received lately test their site from china and want to expand there

⬐ bpicolo

That really seems like the billion+ dollar long tail. Either way, the mobile-first with grid on top strategy works out there.

⬐ dictum

Sometimes I wonder if 80% of CSS-related snark is coming by way of not understanding media queries.

⬐ adventured

Most North American, South American, European and African small businesses have zero business relationships when it comes to selling into China. EU exports to China, for example, are a mere ~$210b - with zero growth for several years - vs the $17t size of the EU economy. That's about 1/3 smaller than the size of Canadian imports from the US.

So it very much depends on your use case, as always. Mostly what China is looking to do is export and acquire, they've shown a very low interest in importing in any broad sense. Most businesses around the world will never have meaningful access to selling into China, unless their economic approach radically changes.

⬐ pjmlp

Speaking from Germany point of view, lots of companies do care about specific browser versions, some of them are only now transitioning to IE 11 on their minimum requirements RFPs.

⬐ ravenstine

That is until your boss's boss from up above complains that the web app you've built for them isn't working on their Windows 7 computer. I would normally agree with quickly dropping support for the old web, but then I'm forced to balance that with the dirtiness of mobile/feature detection for CSS, in which case I would choose to use the CSS that will just work for the situation at hand.

⬐ WorldMaker

1) IE11 correctly handles `@support (display: grid) {}` (in that it recognizes it does not support it, because IE11's spec-inconsistent implementation is prefixed), which means CSS feature detection for grid works and is easy.

2) IE11 has an -ms- prefixed implementation of grid, it's just somewhat inconsistent with the final spec. That said, it's also rather feature complete comparatively, so if you must support IE11, and must give it grids, there is an option to use IE11's native grids as a terrible fallback.

3) Windows 7's extended support ends January 2020. There is less than two years left of security patches left for Windows 7. If your company isn't already planning to migrate to something more recent than Windows 7, time is ticking.

To add to the mix: https://www.youtube.com/watch?v=7kVeCqQCxlk

⬐ Someone1234

If you need to support IE 10, 11, or Edge then Grid is broken. Microsoft's browsers follow an older spec than Chrome/Safari/Firefox. Microsoft are going to fix Grid in Edge 17, but no release date yet.

Unfortunately this is my life right now. When Chrome and Firefox dropped support for NPAPI a lot of enterprise customers intentionally moved their users back to IE 11. The loss of NPAPI has ironically increased IE 11's market-share, talk about unintended consequences...

I understand why they didn't but part of me wishes Microsoft had enabled NPAPI in Edge just so we'd at least get modern web standards even if NPAPI is bad and insecure. Instead IE 11's life is now another five years at minimal or until the last Java Applet, ActiveX control, or Flash page disappears.

https://caniuse.com/#feat=css-grid

⬐ ko27

I thought that the current version of Edge (16) supports CSS grid fully. Your link even confirms that.

⬐ teleclimber

Yes I have EdgeHTML16 and my grid-based sites look good.

⬐ ryangallen

He talks about that in the video: https://youtu.be/7kVeCqQCxlk?t=1324

⬐ Bromskloss

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

⬐ iteriteratedone

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.

⬐ Bromskloss

> 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. :-)

⬐ wtetzner

You seem to be making a lot of assumptions.

For all you know, they build websites or applications that don't have any need to run on older browsers, or at the very least, there are diminishing returns.

There's always an opportunity cost. While you're building support for older browsers, they could be adding valuable functionality to their software.

Which is more valuable depends on the situation.

⬐ Jordanpomeroy

How do you feel about his advice to people in your position? He suggested that you start with a design for mobile that works on a wider screen. Then use grid to achieve responsive designs. He also suggests that responsive design comprehends browser and browser version (ie don’t always look the same across all browsers). Interested I your thoughts.

⬐ None

None

⬐ daotoad

I've used grid with IE11. You need to add some extra prefixing noise to your css. The way you identify grid elements is different and it sucks to duplicate the layout information.

But it most definitely works.

⬐ cvsh

It doesn't with IE10 though. And there's no way to fall back to flex or another column system.

Which means, if you need to support IE10, you need a whole parallel set of styles. There's no graceful degradation when it comes to overall site layout, unless you're willing to serve the single-column mobile version to older browsers.

⬐ _betty_

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

⬐ JeanMarcS

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)

⬐ _betty_

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

⬐ ataylor32

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.

⬐ _betty_

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

⬐ ataylor32

I think the average computer user knows that websites often look different on computers vs. phones, so they might be confused when a website looks different than normal on a computer. Like I said, I would only call this a nuisance. Certainly not a big deal.

⬐ Sammi

The only two Windows version you can run into Microsoft supported versions of IE 10 any more are on Windows Server 2012 and Windows Embedded 8: https://support.microsoft.com/en-us/gp/microsoft-internet-ex...

Who in the world has that as a significant user base?

⬐ Dangeranger

Jen Simmons and Rachel Andrew have done really great work on making CSS Grid sensible to comprehend. I cannot recommend their resources enough.

- http://labs.jensimmons.com/

- https://gridbyexample.com/

⬐ mhink

In addition to these, the article "A Complete Guide to Grid" on CSS-Tricks [1] is an excellent reference to use after you've become familiar with the concepts.

1: https://css-tricks.com/snippets/css/complete-guide-grid/

⬐ callahad

Also worth checking out Jen's new, twice-weekly YouTube Channel, Layout Land: https://www.youtube.com/layoutland

⬐ yawgmoth

I personally benefited from http://cssgridgarden.com/

⬐ foxhop

cool! I'm stuck on level 28...

update: solved it

⬐ None

None

⬐ codemati

Just went through this - intuitive and helpful. I'll also add http://flexboxfroggy.com/

⬐ maddyboo

And I'm sure everyone knows the original (?) inspiration for these cute little games: http://cssdiner.com/

⬐ msoad

I worked with CSS Grids back in 2010 when I was working on a Windows 8 app. Since then I hated any other constraint resolver including Box Model, iOS Auto Layout and Flexbox model.

CSS Grid is so intuitive you forget how difficult this problem has been in the history of UI engineering

⬐ blueside

The intuitiveness of CSS Grid is the major appeal for me.

I've worked with Flexbox for the last few years and still regularly have to look up the Flexbox reference pages. Perhaps it's just me, but I have found the whole Flexbox naming scheme anything but intuitive.

⬐ Scooty

I've had the opposite experience. I haven't floated anything in years, and I'm constantly running into problems that I can quickly solve using simple combinations of flexbox, margin, and padding.

For the first year or so, I often had to look at this cheat sheet: (https://css-tricks.com/snippets/css/a-guide-to-flexbox/, but now it all feels very intuitive.

The one exception is `align-items: stretch` never works how I expect it to, and I usually end up with a combination of `flex-basis 100%` or `max-width: some px value` with `width: 100%;`

⬐ thinkloop

I haven't built a site in the last 5 years without flexbox and not a single time was I able to interact with it without referring to docs, then still randomly iterating through property values in the inspector until it looked right. That's basically my official process. Luckily the problem space is simple enough for that to be efficient, and only a couple of properties are needed 90% of the time.

⬐ ruairidhwm

The Wes Bos course on CSS Grid is free and excellent. Check it out: https://cssgrid.io/

⬐ joshfarrant

Was going to say the same thing. It's a great resource for getting to grips with Grid.

⬐ gmiller123456

I wonder if I'm alone in the opinion that whatever method is used to create a complex layout, the method needs to be Turing Complete. I can understand the appeal of being able to create some tags and not having to worry about what happens after that, but you really only end up with a good design if you're just trying to do something simple. We often see people so devoted to the idea of CSS they end up with something incredibly complicated that could have been done in just a handful of lines of code.

edit: Fixed spelling of "Touring"

⬐ tmalsburg2

It's "Turing complete", named after the mathematician and computer scientist Alan Turing.

https://en.wikipedia.org/wiki/Alan_Turing

⬐ eyesee

I disagree. It is possible to generate a wide variety of layouts using this and other purely declarative approaches. If producing a layout requires the use of "Turing-complete" semantics, then JavaScript is available for the purpose. I would argue if your layout becomes that complex you might consider simplifying.

There is a long-standing trend of adding scripting into declarative environments to allow greater capability. More often than not this becomes yet another avenue for exploitation by bad actors. As an industry we should learn from our mistakes and resist the use of executable code into static documents.

⬐ gmiller123456

I'd agree with you if web pages were "static documents", but they aren't and never were. They've always had to adjust to different screen sizes, and quickly became interactive applications, and now have to adjust to radically different pixel densities.

⬐ The5thElephant

And all of that works just fine with CSS. CSS has problems, but more to do with scoping or lack of a grid-based layout system (until now).

When I see devs saying "Just do it all in Javascript" I have to assume they aren't actually that familiar with CSS. First off Javascript simply manipulates CSS properties anyway when it comes to styling, and writing a system that completely ignores CSS and renders its own way is far more complex without any clear benefit.

⬐ dmitriid

Yeah. And then you actually want to create a layout that can display images properly, and you’re screwed.

There’s a reason all the “powerful CSS layouts” are all poor re-iterations of printed pages. Once you want actual layout, you end up carefully positioning everything with Javascript.

And by actual layout I mean things like Sencha (easily half of which still cannot be implemented in CSS without)

⬐ gmiller123456

I think you misunderstood my response, in what you were replying to I was just pointing out web pages are not static documents. I in no way intend to suggest that JavaScript can solve all of the problems with CSS, and also don't agree that the grid system will help much. IMHO the biggest thing missing from the CSS/HTML/JavaScript system is the ability to determine how much space is required to display certain text or elements, vs how much space is available to display them, and the ability to make decisions based on that (recursively) on how other elements are displayed.

⬐ pg_bot

As someone who recently converted to using CSS grid for my company, I can't imagine going back. It really reduces the mental overhead when building complex layouts and has made my code shorter and easier to understand.

⬐ ravenstine

Who is the target audience of your company? The reason I ask is that I highly doubt I could use CSS grid at my company(news outlet) without breaking the site for many of the users.

⬐ pg_bot

Medical practice management software. (we run the medical practices as well) If we made software that was accessible to the general public I would hesitate to only use CSS grid.

⬐ kybradeck

The video mentions that CSS Grids are used in the production site for the NYTimes. See https://open.nytimes.com/bootstrap-to-css-grid-87b3f5f830e4.

⬐ JepZ

It's funny, as six month ago I wasn't very fond of the whole "Grid is ready today" talk with ~65% of browsers supporting it. But actually I am glad that within 6 month that percentage seems to have risen by another 10% so that we have ~75% today: https://caniuse.com/#feat=css-grid

And when you take a closer look to the numbers you can see that in another 6 to 12 month the technology should be practically out there in every browser, as the few who will still not have it, will be some mobile browsers which will use the mobile first baseline variant anyway, if you follow the recommendations from the video.

Pretty cool stuff.

⬐ Animats

Tables. They're back!

⬐ dredmorbius

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.

⬐ wes-k

Also, being able to assign content to any span of cells within my CSS is a game changer.

⬐ kuschku

Soo, colspan=2 ?

⬐ jordanlev

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 for complex visual layouts which imparts no semantics on the content (so it is proper to use for non-tabular content).

⬐ Animats

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.

⬐ dredmorbius

Such as?

⬐ Animats

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

⬐ dredmorbius

Thanks.

⬐ Animats

It's worth trying Inventor (or Autodesk Fusion 360, which is basically a cloud-based Inventor with a free demo) to see a constraint system with a good GUI. Draw lines and make boxes, and if you end a line at an edge, the line endpoint is constrained to that edge. End a line at the endpoint of another line, and those points are constrained to be at the same place. If a line is drawn vertically or horizontally, it's constrained to stay vertically or horizontal. Drag a point or line, and everything else is adjusted, but as little as possible, to maintain the constraints.

Specify that two lines must be parallel, or perpendicular, or the same length, and those become constraints. Specify a dimension between two lines or points, and they stay that distance apart. A dimension can have an expression based on other dimensions, so if you need something to be twice the distance of something else, you can do that.

This goes beyond straight lines. You can have a circle or arc constrained to touch a line or another circle or arc. A curve can be constrained to be tangent to something else, for a smooth transition. Designers would love that.

The GUI won't let you add a constraint that conflicts with another constraints. There's no "constraint priority". All constraints are equal.

The GUI has a counter which shows how many degrees of freedom still need to be constrained. Little red arrows show you what can still move. When everything is constrained and nothing can move, the counter changes to "fully constrained", and the sketch is now rigid. But you don't have to go all the way to fully constrained if you don't want to. The system will do something reasonable if you don't.

Some sketch dimensions may be driven from another sketch. In the web world, this would correspond to adjusting to window size.

The CAD people deal with hard geometry problems, much harder than the ones web layouts face, and they have much better technology for doing it. It's even user-friendly.

⬐ detritus

You make some interesting points. My first thought is "how on earth would that be somewhat easy to describe in markup?"

for sure a GUI editor would be a beautiful thing to behold though!

⬐ Animats

It was very hard for the CAD and animation industries to figure out a good UI for editing geometry. It took about two decades. But it's now a solved problem. The web layout industry should look at that technology, which comes from an industry that has to deal with hard geometry problems.

⬐ detritus

i believe that web markup in any useful productive sense should be usefully creatable and editable by hand, outwith a graphical interface.

⬐ dredmorbius

One of the advantages of architectural design is that few building footprints vary greatly from instance to instance, or for the same instance, particularly over the course of a fraction of a second or so.

Or ... when that's happening, much more exciting things are going on.

I'm wondering just how complicated text really needs to be, and what the benefits of walking well outside gridded layout is.

A text is essentially a linear strand, wrapped. Some of those strands may present as sub-texts (tables, lists, call-outs, etc.), but you still have the concept of "how do I present a sequence of letters, arranged by words, sentences, paragraphs, etc., into some folded space?"

We've gone from tablets, rock walls, scrolls, etc., to generally codices (printed) or ... well, sort of a scroll-page hybrid for Web.

That said, interesting points, and I plan on digging into this a bit further.

⬐ bajsejohannes

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

⬐ gilrain

It's much more intuitive for non-programmers, which make up the majority of HTML/CSS users.

⬐ kybradeck

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...

⬐ None

None

⬐ Bromskloss

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

⬐ kybradeck

Yes, but that would mean the first gridline == 0 and the last gridline == -1, instead of the way the spec is written today, where the first gridline == 1 and the last gridline == -1. For me, consistency wins here.

⬐ cryptos

It looks like Bootstrap could be reduced to a pure UI component framework now.

⬐ wes-k

Have yet to dive in to CSS Grids and this really made it clear what pain it is solving. I'm super excited to start using this!

Also kudos to the speaker, Morten Rand-Hendriksen, that was a very enjoyable presentation!

⬐ TACIXAT

The first part of this video totally highlighted all the frustrations I've had with CSS. Super excited to try this on my project.

⬐ ronnier

Is there a good pollyfill for older browsers?

⬐ gkilmain

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

⬐ ausjke

what does 'serving up mobile layout' exactly mean? Thanks.

yes grid is awesome but how to deal with polyfill is the question

⬐ poxrud

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.

⬐ kinos

I assume design something akin to just all your elements in a straight line downwards.

⬐ esfandia

Reminds me of GridBagLayout in Java Swing. Can anyone here who has experience with both confirm this?

⬐ pvg

GridBagLayout is an AWT, not Swing thing. The most obvious difference seems to be that people actually like CSS Grid.

⬐ munificent

I giggle a little bit inside when web designers say "We shouldn't use meaningless tags that exist only for layout. We should use semantic ones, like <header> and <footer>!". Except that, uh, "header" and "footer" themselves are layout terms. They're just a metaphor for a document as a body ("<body>") with the head at the top and the feet at the bottom. It's not like the contents of a <footer> tag have anything to do with feet. We call it "semantic" simply because the metaphor is old enough that we've internalized it and no longer see it.

Not that I think this detracts from the talk at all. Fewer, cleaner tags is good, regardless of how they're spelled.

⬐ flooq

We call them semantic because they have extra technical meaning in HTML (built in WAI-ARIA roles for example). For example, browsers expose them as landmarks for screen readers.

That said there are a lot of similar examples of magical beliefs that are unfounded. Extra <div> tags rarely matter and "semantic" CSS values don't do anything.

⬐ 52-6F-62

They've also been industry standard in publishing for much longer.

⬐ awj

> Except that, uh, "header" and "footer" themselves are layout terms.

Doesn't that give them semantic meaning? When I see a "header" tag, that tells me something about its intended use. When I see a "div" tag ... I start reading ids and class names and hope for the best.

⬐ shripadk

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

⬐ rhencke

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:

    <div role="button">Click me.</div>

is perfectly accessible, and will be interpreted as a button, though semantically it's a div.

⬐ shripadk

WAI-ARIA has its limitations. When it comes to tables (which is the example I provided) there are no roles for demarcating headers (<thead>), body (<tbody>) and footers (<tfoot>). 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 <main>, <aside>, <header>, <footer> using WAI-ARIA such that the screen reader picks up the intent? Also imagine trying to replace the <input> or <textarea> elements with <div> 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.

⬐ gnud

And if you have a set of well-defined roles, why not create tags for them, and replace all the divs? Seems a lot simpler.

⬐ ams6110

They are semantic in that <header> differentiates content in a way that <tr> does not, even though it may also have layout implications.

⬐ threatofrain

I really don't see why we should have semantic tags to begin with, since semantics isn't obviously the psychological API by which future colleagues are going to operate on your code. Think about the interface by which colleagues wish to edit your code.

Do they care more about its structural position? Then name it by structural position. Do your teammates care more about a component's logical relation? Then name it by its logical relation. Do they care more about the actual content? Then name it the EULA component.

But one way or another, based on the modern way of web dev where an interface is divided into components, any team inheriting a project will need to understand Y components explaining X pages no matter what. Naming is helpful, but the distance from good naming to great naming won't be a big force multiplier.

⬐ commandlinefan

> We shouldn't use meaningless tags that exist only for layout.

Well, honestly, using HTML for around 90% of what it's used for these days is the roundest peg in the squarest hole to begin with.

⬐ ben174

It makes more sense when you think of “header” as newspapers think of “headline”.

⬐ vanderZwan

I do not see how the etymology of these words being a layout-metaphor argues against them having more semantic value now? The way you describe a footer makes it sound like the last block of text of any article (being at the bottom) is by definition the footer. Which is of course not the case: it is used for certain types of content.

Your own book uses <asides> very heavily[0]. They are not just literally aside the regular flow of the document (actually, about that, see the next paragraph), the type of content in them is different - it is reserved for tangential stuff like jokes or deeper information that would interrupt the pacing of the main narrative.

Aside about asides in your book: I bought the epub version when it came out, and although it was a symbolic purchase (I had read the whole thing already as you wrote it), I somewhat regret the format choice due to the sorry state of epub readers. Not all of them even support the aside tag. The one that does (the Firefox Epubreader extension) does not keep a margin for the aside but inlines them. This really disrupts the flow of the text. In traditional book layouts that use the full margin for the text, these asides would be printed as a smaller footnote at the bottom of the page. Surely with the right bit of code one could generate such a layout, based on the semantic meaning of <aside>. But like I said: epub readers are in a pretty sorry state. Should have gotten the pdf instead[1].

[0] http://gameprogrammingpatterns.com/introduction.html

[1] http://gameprogrammingpatterns.com/sample.pdf

⬐ munificent

> The way you describe a footer makes it sound like the last block of text of any article (being at the bottom) is by definition the footer. Which is of course not the case: it is used for certain types of content.

That's a fair point. Since, historically, the convention has already been established that the stuff we put at the bottom of the page in a footer tends to be stuff about "X", we can now say with some confidence that "footer" has the semantic "about X".

> They are not just literally aside the regular flow of the document (actually, about that, see the next paragraph), the type of content in them is different - it is reserved for tangential stuff like jokes or deeper information that would interrupt the pacing of the main narrative.

Right, they are both. They are physically off to the side because they are unnecessary for the main line of the narrative. The form and the function are in harmony (as they should be!).

"Aside" is another funny word because it's also a spatial word. I'm not sure how it entered use for print. I could see it being simply because the text is to the side.

But "aside" also means an "an utterance not meant to be heard by someone; especially : an actor's speech heard by the audience but supposedly not by other characters". That conjures up a delightful image for me of an actor literally stepping to the side, leaning towards the audience and muttering a joke to them. That's the picture I always have in mind with the asides in my book.

I could see it entering print from that etymology too.

> I bought the epub version when it came out, and although it was a symbolic purchase (I had read the whole thing already as you wrote it), I somewhat regret the format choice due to the sorry state of epub readers.

I really appreciate you buying a copy! I agree, ePUB is about the worst format. But it works on eReaders, which is nice. If you aren't limited to one of those devices, the PDF or web version is probably better. If you'd like me to send you the PDF version, email me and I'd be happy to hook you up.