> Hacker News as viewed by the Mac. Surprisingly readable given that MacWeb doesn’t support CSS.
Say what you will about table based layouts, but they sure are backwards compatible.
Say what you will about table based layouts, but they sure are backwards compatible.
Could you give an example? I've done "tables" in CSS, and most of the time you're using DIV to manage most of the positioning, which is non-semantic.
If there was a CSS table replacement which defaulted back to something which looked like a table in HTML, I'd be impressed.
If you're building a navigation area, a callout, or some similar semantically significant sidebar, take a look at https://html.spec.whatwg.org/multipage/dom.html#sectioning-c... for the nav and aside elements.
But even if you use a div, as long as the semantic content makes sense without the div, you're fine. For instance, put one div with your article content starting with an appropriate heading tag, and another div for your navigation. Without the CSS, it still makes sense to have a section for content and a section for navigation.
Also, there is actually CSS markup to make something look like a table, if that's what you want; see http://caniuse.com/#feat=css-table for instance.
Still valid after all these years.
<table style='height: 100%; width: 100%'>
<tr><td align=center valign=center>
<h1>Hello world</h1>
The following button should be centered:<br>
<button>Button</button>
</td></tr>
</table>
[NOTE: This example has a bug in it. See the subsequent comments]
<table style='height: 100%; width: 100%'>
<tr><td align=center valign=center>
<h1>Hello world</h1>
The following green square should be centered:<br>
<div style='width: 30px; height: 30px; background: green'></div>
</td></tr>
</table>
The devil is in the details. I believe if you try it you will find it is nowhere near as easy as you imagine.
Not at all. "display: table" (and the related "display: table-cell" and similar) mean that you've written something which is not semantically a table, but which should use the browser rendering conventions of a table. That's a perfectly reasonable distinction.
Otherwise, would you suggest that every use of "font-family: sans-serif" is cheating and essentially conceding that you should have been using a <font> tag all along?
Yes, if your intent is to use font-family as an example in an argument for using CSS.
> and essentially conceding that you should have been using a <font> tag all along?
No, I'm saying that a font tag and a font-family style are equivalent. One is as good as the other.
You should read this:
http://blog.rongarret.info/2009/02/on-semantics-of-html.html
So, there's a major difference between using font-family and a <font> tag, and a major difference between using display: table* and <table>/<tr>/<td> tags. And for the same reason, you shouldn't use class="sidebar" if what you mean is class="navigation" (or for that matter <nav>). Let alone class="big-red-button" when what you mean is class="delete".
To use an example from that article: sure, <p> is not as semantically significant as <section> or <h1>, but it's a lot more semantic than, say, <br/><br/>, which I've seen used between paragraphs. "This is a paragraph" is more semantically useful than "this has an indent on the left and 1.4x line spacing"; "this is a heading" is more semantically useful than "this is 24pt and bold".
I completely agree. But HTML+CSS does not achieve that goal, at least, it didn't when that post was written.
Here's a working example that doesn't use tables: https://jsfiddle.net/q8zxxr3b/
Or, here's the inline example:
<div style="display: flex; height: 100%; flex-direction: column; align-items:center; justify-content: center;">
<div style="text-align: center;">
<h1>Hello world</h1>
The following green square should be centered:<br />
<div style="display: inline-block; width: 30px; height: 30px; background: green;"></div>
</div>
</div>