we finally learned to center a div, then browsers added sidebars

chrismorgan | 13 hours ago

Accessibility tip/request: please use the document scroll area, don’t place your own element inside it and make that the scroll area. Otherwise, keyboard navigation is all broken to begin with, and mouse-based scrolling will only work when the pointer is inside your scroll area, rather than the entire document as is expected.

orion_moonclaw | 11 hours ago

Discord still logs you out when you have vertical tabs enabled in firefox and close the browser because they try to detect devtools to hide your client token 🙃

terinjokes | 9 hours ago

Oh, it's my use of Tree Style Tabs that is causing this? It's been an annoyance for years!

Riolku | 6 hours ago

Maybe it's just me, but as a huge vertical tabs fan, I would rather sites not try to be fancy and just treat the visible space as the viewport.

ubernostrum | 22 hours ago

After opening and closing the Safari sidebar (Safari on iPadOS), the "centered" content div of this site does not stay centered.

Also, the post claims that centering used to be done by:

.thing {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

when my (admittedly quite old) memory is that the traditional approach was to set a width on the div in some reasonably scalable unit and then both margin-left and margin-right to auto.

[OP] seg6 | 21 hours ago

Quite often, when people mention "centering the div" they mean x and y, the dead center, hence the snippet in the opener.

As for Safari, it might be one of WebKit’s iPadOS sidebar/resize bug, thank you for the report!

bensheldon | 20 hours ago

Another old timer (I guess, sigh). I also read this as "[horizontal] centering".

https://caniuse.com/mdn-css_properties_translate

FIGBERT | an hour ago

My slightly less old memory is that you can achieve the last bit with a unified statement: margin-inline: auto. That and nesting might be fav two updates to CSS: clean and useful.

creesch | 14 hours ago

Oh interesting, showing the example where it remained at the window center invoked a strong "no thats wrong" feeling in me. To me the sidebar is now encouraging on the centered content territory making it a distraction.

To be frank, I also don't like vertical tabs and sidebars in general for that reason. This just made it worse to me as well.

majaha | 16 hours ago

Did you make this an extension, or is this active on your site by default? It's not entirely clear from your post. You mention the extension before you actually introduce it.

If your site is meant to be centring the div by default in my normal web browser, it's not working for me in Firefox, Chrome, or Edge on Windows.

[OP] seg6 | 11 hours ago

Initially, I had it implemented on the website as well, separately from the extension, but I decided to revert that (as it forces the behavior on everyone viewing) and just keep it in the extension.

m_eiman | 7 hours ago

Can't see the page, blocked due to self-signed certificate plus something else that decided that I shouldn't see it even when I approved the cert. Oh well.

[OP] seg6 | 6 hours ago

$ openssl s_client -connect seg6.space:443 -servername seg6.space </dev/null 2>&1 | grep -E 'issuer=|Verify return code'
issuer=C=US, O=Google Trust Services, CN=WE1
Verify return code: 0 (ok)

Not self-signed. I don't know what you're talking about. Whatever decided you shouldn’t see it was apparently protecting the site from you.

m_eiman | 3 hours ago

Yes, looks like the company Fortinet VPN/router/whatever has decided that the domain is Very Dangerous.

dasm | 7 hours ago

In firefox mobile in horizontal view the website is unreadable. Yes, it's centered, but it is maybe 25% wide of the all screen.

apropos | 2 hours ago

I would note that this behaviour does not occur when "Expand sidebar on hover" is turned on in Firefox's sidebar implementation. (Which is very nice, and a welcome upgrade from prior sidebars.)