3 ms·
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 brows
by shiomiru 3y 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-descendants 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.
- assimpleaspossi 3y agoThe `<center>` element has been obsolete for 20 years and more. https://html.spec.whatwg.org/dev/obsolete.html#non-conforming-features https://html.spec.whatwg.org/dev/obsolete.html#non-conformin...
- shiomiru 3y agoI 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).
- assimpleaspossi 3y agoNone 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.
- shiomiru 3y agoSorry, 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.