There are a few scenarios where we might need to change the level of a heading (–). As an example, we create a component with a , but then we use the component in a different context where it needs to be a . I know, I know, that’s what component props are for, but the headingoffset HTML attribute is another option.

Another example: the heading hierarchy is wrong, but we don’t have full control over the HTML. headingoffset might be able to fix that too, depending on the HTML that we do have access to.

Firefox Nightly 153 shipped headingoffset behind the dom.headingoffset.enabled flag, so we’re a way off, and it isn’t really usable until all web browsers support it, but it’s well worth a look now.

HTML has been gobbling up swathes of what used to be JavaScript’s remit. This page lists a bunch of dynamic functionality that we can now achieve with just HTML.

My website is html/css only right now and I would prefer to keep it that way even though this is simple to implement with js.

The heading offset content attribute allows us to offset heading levels for descendants.

This feature is brand new and currently available only in Firefox Nightly, behind a flag.

https://cyberpunk.lol/@vantablack/114756539405197662

The element is currently only available in Chrome 144+, but Mozilla and WebKit have positive positions on the new element, so it's likely they'll implement it as well.

I'm used to 1366x768 screens, and when I first started making my personal website it was based on that resolution… it wasn't until one day I checked it on a 1920x1080 screen that I noticed how weird the design got because of vertically centered elements and so… I made some @media (min-width: 1601px) hacks to scale some stuff so the site would look more or less the same on bigger resolutions, but it was a sloppy solution…

I made another site later, and I was worried about scaling, so I started using 1920x1080 resolution at 150% zoom (I have bad eyesight and struggle to read on 1920x1080, so I'm actually at 1280x720 now, but at least it's the same aspect ratio). For the site to scale, I started using viewport values for everything, including font sizes… but if the aspect ratio changes wildly, the site looks crappy :P

So right now I was banging my head around how to have a visually pleasing website for someone with bad eyesight like me, but still have it scale correctly on any resolution for mainstream usage (as I scale down for myself, lots of sites I visit get crumpled visual elements when they are using absolute positions, z-index, and so), and I decided to letterbox my site content and force the aspect ratio on any resolution so the site will always look the same, no matter the screen. I'm using JS to scale font-size according to the letterbox width, and all other elements will use % values… I don't know, but so far it's sounding like I just made the site future-proof as well (for new resolution changes). The site is scaling with window size, it sucks that you can't zoom it with the browser (so it might be bad for people with even worse eyesight, but I do plan to put a +- button for font-size though, what's comfortable for me to read might not be for everyone), but the normal zoom works on mobile...

This is a test page I just made (ratio at 16:8 to compensate a bit for taskbar and browser stuff): https://pirahxcx.neocities.org/aspectratiottest

What do you all think of the idea? Perhaps there was an easier solution, though?

cross-posted from: https://lemmy.bestiver.se/post/826297

Comments