![]() ![]() These are all very hacky though it’d be nice to come up with a way of just fixing the JS we want to use above, so it actually works properly.įortunately a helpful comment from Han mentions some interesting current browser behaviour that might help us out, while examining compatibility issues with fixing this for real: Meanwhile Chris Coyier has suggested capturing the scroll position and resetting it, and I think there might be a route through if you change the element’s id to something else and back at just the right time too. Ian Hansson has a clever trick where you position: fixed and hide the targeted element, to control the scroll, but depend on its :target status with sibling selectors. There’s a few ways we might be able to work around this. We need a way to disable jumping around, but still update the hash in a way that :target will listen to. Right now we can disable jumping around, but it breaks :target. The spec doesn’t actually cover this case and every single browser currently has this crazy behaviour (although both the spec authors and browser vendors are looking at fixing this). You end up with #tab-1 in the URL, but doesn’t match :target. The URL updates, but the :target selector matching doesn’t! This disables the normal behaviour on every #hash link, and instead manually updates the hash and the browser history. Our JavaScript enhancement looks something like this: When you do have JavaScript, we can enhance them further, to tune the exact behaviour and polish that as we like. In environments where JavaScript isn’t available the tabs still work fine they swap, and the browser jumps down to the tab you’ve opened. ![]() With a tiny bit of JS on top we still retain the benefits that a CSS-based approach gives us (page appearance independent of any logic, defined declaratively, completely accessible, and with minimal page weight) and then progressively enhance it to improve the UI polish only when we can. JavaScript, in our beautiful CSS-only UI? Sadly yes, but it’s important to understand why this is still valuable. ![]() We can fight that behaviour though, with a little extra JavaScript. This is because links to #hash links not only update the URL, but also scroll down to the element with the corresponding id on the page. It’s functionally fine, and in some cases this behaviour might be ok too, but for many it isn’t exactly what you want. Try - you’ll have to scroll back up after hitting each tab. If you try to do this in any page longer than the height of your browser though, you’ll quickly discover that this can jump around, which can be annoying. Implementation is super easy, and works in 98% of browsers, right back to IE9. All with working history and linkability, because the URL is just updating like normal. Click another link, that part of the page disappears, and a different part is shown. Click a link, the page updates, and that part of the page is shown. There’s lots of fun uses for this, but an obvious one is tabs. All of a sudden you can add links that apply a style to one part of the page on demand, with just simple CSS. If you’re on for example, div:target would match and not. :target is a CSS psuedo-class that matches an element if its id is the hash part of the URL. Turns out there is a way to make this work almost perfectly, despite these bugs, and get perfect CSS-only accessible linkable history-tracking tabs for free. The #hash links involved jump you around the page by default, and disabling that jumping breaks :target in your CSS, due to poorly defined behaviour in the spec, and corresponding bugs in every browser. ![]() CSS-only tabs are a fun topic, and :target is a delightfully elegant declarative approach, except for the bit where it doesn’t work. ![]()
0 Comments
Leave a Reply. |