Re:Centering in CSS
by mikepurvis on Friday December 18, 2020 @01:23AM
(#25464414)
Hands up for anyone else who remembers how much worse this was in the CSS 2.1 days when it had to be hacked using `display: inline-block` and tricks involving negative margins.
[ Parent
| on HN ]
Re:Centering in CSS
by FriedrichN on Friday December 18, 2020 @03:06AM
(#25464930)
Absolutely. I remember how it was to make your website work in IE6 and later in IE7's Frankenstein compatibility mode.
All those dirty hacks you needed to do to make stuff work make me so thankful for today's wonderful CSS, even when it frustrates me.
After fighting years against IE6¹, when IE7 came bantering in with its Compatibilty Mode, I gave up and moved to backend work. Spending weekend-allnighters to get this one rounded-corner-drop-shadow working is depressing.
¹ a real-life lesson in monopolism: IE6 was around for over 14 years!
Stuff like 99% support flexbox and high % for grid makes working with layout so good.
Only wish "gap" property would be adopted easier to make working collapsing flex rows way easier.
Even the basic things like :last-child selector is good quality-of-life improvement.
inline-block was cheating. Plus, for a long time after it was "released" you couldn't rely on browsers actually implementing it. I always used `margin: 0 auto` and if you know the height of an element, you can set the top to be 50%, and use a negative margin half its height.
Re:Centering in CSS
by mikepurvis on Friday December 18, 2020 @01:35AM
(#25464465)
I'm really hazy going back this far, but wasn't it that it worked in Firefox and Opera, but then IE could be handled using magic HTML comments that served it special separate rules? I know sometimes IE's vendor-specific CSS "expressions" system could be used to compute properties like max-width and so-on that it didn't otherwise support, and it was nice to be able to do that without requiring a JS polyfill.
There were conditional comments for loading IE specific things. And I remember IE6 having .htc files (html components), csspie is the one I remember
Re:Centering in CSS
by npsomaratna on Friday December 18, 2020 @02:17AM
(#25464634)
Reminds me of having to use (CSS) floats to position stuff. CSS grid and flexbox have made positioning (in particular, vertical positioning) so easy.
Floats and clearfixes everywhere
The horror:
*:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
I still remember using `display: table` and `display: table-cell` for getting vertical alignment as well.