7 ms·
> main { Why not target <body> instead? <main> should not have content that is shown on other pages, like headers, footers, and sidebars, but it makes sense to
by theandrewbailey 8y ago
> main {
Why not target <body> instead? <main> should not have content that is shown on other pages, like headers, footers, and sidebars, but it makes sense to have this CSS affect those areas.
- JoshuaRLi 8y agoOooooh. Good point. Currently, I have header (which has the post title, and date) nested in article, nested in main. Nesting the header inside the article makes sense to me, but you're (and other people on the internet/s.o., as I am now seeing) suggesting that header should be outside main. I agree, and making those changes would mean I can switch from main to body in my css. The main complaint I have is then article and main seems redundant. What are your suggestions? Semantic HTML5 is hard :(
- Eiriksmal 8y agoThe semantics are only suggestions, not hard and fast rules. If you aren't adding top nav sections or site-wide footers, your current approach is fine. If you do want to experiment with those, you'll find the (correctly-constrained!) body content looks funny with copyright footers floating in space somewhere to the left or right of the main text.
- theandrewbailey 8y agoFrom my understanding, a document can have a header, footer, and/or multiple articles[0], with each article potentially having a header/footer specific to the article[1]. Presumably, the article(s) should be contained in a <main>. [0] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ar... [1] https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Headers_and_Footers https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Usin...
- brlewis 8y agoAn earlier screen-reader discussion suggested that <main> is of interest to screen-reader users. I presume that's because it generally doesn't repeat navigation that exists on every page. https://news.ycombinator.com/item?id=18758847 https://news.ycombinator.com/item?id=18758847
- ChristianBundy 8y agoYep, I think the priorities should be <html> and <body>. Here's mine, which centers the content both horizontally and vertically via flexbox: html { display: flex; align-items: center; justify-content: center; min-height: 100%; } @media screen { body { max-width: 40rem; margin: 1rem; } } It's not perfect, but it works well for simple websites (e.g. https://colorclock.hashbase.io/ https://colorclock.hashbase.io/).
- sucrose 8y agoI cannot access your website: ERR_SSL_PROTOCOL_ERROR
- extra88 8y agoWhat's your browser? They're using a Let's Encrypt wildcard certificate. It works for me in various current browsers but also in Firefox 3.6.27 for Mac (from 2012).
- cimmanom 8y agoIIRC, the way browsers interpret margins and widths on the <body> element isn't consistent; and they may not support overriding block properties on the <html> element at all. Or maybe they do now, but that certainly wasn't cross-browser-friendly until very recently.
- SquareWheel 8y ago>IIRC, the way browsers interpret margins and widths on the <body> element isn't consistent I know IE5.5 doesn't allow resizing of the body, but it was fixed in IE6. If you're using flexbox it's probably not your chief concern anyway.
- ChristianBundy 8y agoYeah, I should mention that this is only for browsers that support flexbox (https://caniuse.com/#feat=flexbox https://caniuse.com/#feat=flexbox) with little regard for browsers that are behind on their updates. Thanks for pointing this out!