Live data from Hacker News

CSS Grid changes everything [video]

youtube.com

31–40 of 90 posts

Re: CSS Grid changes everything [video]

#31

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 and !". Except that, uh, "header" and "footer" themselves are layout terms. They're just a metaphor for a document as a body (" ") with the head at the top and the feet at the bottom. It's not like the contents of a tag have anything to do with feet. We call it "semantic…

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 very heavily[0]. They are not just literally aside the regular flo…

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

Re: CSS Grid changes everything [video]

#32
post #25

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…

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

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.

Re: CSS Grid changes everything [video]

#34

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 and !". Except that, uh, "header" and "footer" themselves are layout terms. They're just a metaphor for a document as a body (" ") with the head at the top and the feet at the bottom. It's not like the contents of a tag have anything to do with feet. We call it "semantic…

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

Re: CSS Grid changes everything [video]

#35

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 and !". Except that, uh, "header" and "footer" themselves are layout terms. They're just a metaphor for a document as a body (" ") with the head at the top and the feet at the bottom. It's not like the contents of a tag have anything to do with feet. We call it "semantic…

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.

Re: CSS Grid changes everything [video]

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

Re: CSS Grid changes everything [video]

#37
post #35

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.

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.

Re: CSS Grid changes everything [video]

#38

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 and !". Except that, uh, "header" and "footer" themselves are layout terms. They're just a metaphor for a document as a body (" ") with the head at the top and the feet at the bottom. It's not like the contents of a tag have anything to do with feet. We call it "semantic…

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

Re: CSS Grid changes everything [video]

#39

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…

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

Re: CSS Grid changes everything [video]

#40

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/

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/

Post reply on HN