The point of centering an element horizontally is to make sure that the content you’re viewing is directly in front of you. Browsers with a sidebar shift the content to the right, assuming the sidebar is on the left, which I’ve come to dislike! Others have expressed the same preference, hence this little snippet on my website.
> The point of centering an element horizontally is to make sure that the content you’re viewing is directly in front of you.
That's an awfully big assumption. For starters, you're assuming that the browser window itself is centered on the screen, and that the device is centered in front of the user.
I don't think this is the point of centering an element horizontally at all, and the result you have created here is not at all what I as a user want.
I use Firefox with a vertical tabs extension open all the time. Occasionally (rarely, mind) I run into sites that don't bring their full content into view unless I hide the tabs list.
Guess they think like the OP.
I used Tree Style Tabs until recently, and never experienced this. Also now with the native vertical tabs I've never seen this.
It almost never happens. And when it does it may be some other broken calculation. But I did run into sites that I can only guess did their layout based on the whole window and had stuff go under the tree style tab.
As a rule, you should not add functionality to a website to compensate for browser misfeatures. People who want the browser to work differently can get a different browser: that's why we call them "user agents". Making the web all complicated like this mainly serves to make it harder for people to use alternative browsers, or for browsers to change their misfeatures without breaking compatibility.
Fair enough, that criticism resonates. I've decided to keep this behaviour only in the extension and have reverted it from the blog. Thanks!
Thank goodness
I don't usually use browsers sidebars, but when I do I mentally compensate for it. The viewport is in fact the part of the web page I expect to be the full width, and what things should be centered on.
The same way the vertical centering counts the viewport height only, not the url bar and the tab bar.
The point of centering an element horizontally is to give equal space either side. Because you consider that to look best visually with your design. It has nothing to do with where it is in front of you, or anything other than placement in the space you have. Given a width for your content where should it sit. If you don't like the effect with a browser sidebar, don't limit the width with a browser sidebar.
This all sounds like a really elaborate way of not taking advantage of the fact that modern windowing operating systems don't require windows to be full screen, and allow you to position the sides of your browser window wherever you want them to be.
I salute your dedication to understanding and fixing a problem that bothers you - but I must add my voice to those who think that this is not a good design for general use. The viewport is the region within which content should be positioned, and thus within which they should be centred. By your logic, left-aligned content in a browser with a left sidebar should be deliberately covered.
Stop worrying about what's happening outside the viewport. Your website has no right to care or even know what's happening outside the viewport.
Anyone got a Tampermonkey script or tiny extension to re-override this to make such sites actually center in the viewport, like I prefer?
Joke’s on you: my browser window isn’t centered.
Ah but see, exploiting a Chromium API has let us know you've got this second screen on the side, so we're centering the div on your overall work space.
PS: if you switch from the touchpad to a wireless mouse, we'll move the div accordingly
1. Neither of my screen is to the side of the other.
2. The demo doesn't even work, the div stays centered in the viewport, not the program window when I open a side bar (Firefox).
3. Rarely does my browser even cover the center of my workspace, so it would be impossible to center anything in the center of my view without forcibly moving the program window from within the website.
Challenge accepted:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_...
https://developer.mozilla.org/en-US/docs/Web/API/Window/move...
So the website also wants to my monitor, and chair position and the angle from which I am looking? Got it.