Hacker News new | ask | show | jobs
by shiomiru 859 days ago
It's all the more ridiculous because browsers can in fact center divs (block boxes), in an incredibly straightforward way, using the <center> tag. And all browsers implement this using a vendor-specific CSS rule (e.g. text-align: -moz-center). They must be able to do this, because real websites use it, and there is no other way to implement it using CSS.

And yet it's not standardized[1], so if you implement it in a new layout engine you're left with reverse-engineering what other browsers do (a classic).

[1]: OK, I lied. It is standardized... in the HTML standard. https://html.spec.whatwg.org/multipage/rendering.html#align-...

Notice how it's not a stylesheet, not a presentational hint, just prose. It's because standard CSS can't do what browsers could since before its invention.

1 comments

The `<center>` element has been obsolete for 20 years and more.

https://html.spec.whatwg.org/dev/obsolete.html#non-conformin...

I mean exactly that it's not obsolete, because there is no standard CSS property that could have obsoleted it. (Even though every browser does have one; it's just vendor-prefixed.)

Ok, maybe this will make my point clearer:

    <center style="background-color: green">
    <div align=right style="width: 10ch">
    hello
    </div>
    </center>
To replicate this in standard CSS:

    <div style="background-color: red">
    <div style="text-align: center; margin: 0 auto 0; width: fit-content">
    <div style="text-align: right; width: 10ch">
    hello
    </div>
    </div>
    </div>
Or you can switch out of flow layout:

    <div style="background-color: red; display: grid; place-content: center">
    <div style="text-align: right; width: 10ch">
    hello
    </div>
    </div>
Ok, one semantic div less. But why can't I do this?

    <div style="block-align: center /* would act like text-align: -moz-center */">
    <div style="width: 10ch; block-align: right /* would act like text-align: -moz-right */">
    hello
    </div>
    </div>
If my browser understands the first variation, then getting it to understand the last one is in all likelihood not much effort; it's just substituting properties.

The only reason it doesn't, is that the property does not exist in the standard. So you have to use non-semantic centers instead of semantic divs, but that's frowned upon, so you have to use grid layout even though you aren't making a grid, just centered flow.

I just wish it were standardized, considering it's already implemented in all browsers (in the forms text-align: -moz/-webkit-center).

None of that has anything to do with the fact that the HTML standard--written and edited by all the major browser vendors--has declared the <center> element as obsolete.
Sorry, but if this is the only thing you were pointing out, then I don't see how your comment is related to mine?

<center> was marked obsolete because it's not semantic HTML, and centering stuff is the task of CSS, not HTML. It was not marked obsolete because a block-level text-align-like property would be useless.

My comment was lamenting the fact that standard CSS does not provide a compatible alternative, despite widespread implementation of the feature. Saying <center> is obsolete does not resolve this issue.