Wandering Thoughts archives

2021-07-02

Dealing with CSS fixed position headers and footers in Firefox

I'll start with what I tweeted:

Does anyone know of a Firefox addon that finds CSS 'fixed' position elements and removes that to make them non-fixed elements? There are a number of addons that will hide fixed elements entirely, but I would rather have them remain visible but scroll offscreen as I scroll.

The Firefox addons I know for hiding CSS 'fixed' elements are Sticky Ducky - clean the fixed elements, which seems to offer multiple levels of dealing with them, Fixed width and CSS Annihilator, which has additional effects but can be used selectively, Hide Fixed Elements, and Unfixed! - Fixed Elements Remover. Additionally, on Twitter Martin Tournoij shared a bookmarklet for this, which could easily be changed to set 'position: inherit !important;' instead of its current 'absolute'.

The reason I'm interested in this is the usual one of the plague of fixed headers and footers. Until now, I've mostly been zapping them away temporarily or permanently with uBlock Origin. Since I'm now using Stylus to make visited links visible again, I've also used it to modify a few sites to de-fix these elements instead of just removing them, which sparked my interest in a more general solution. Always hiding fixed elements isn't what I want, since some of the navigation is actually useful; I just don't want them on screen taking up space all the time. If I want to navigate, I'm perfectly capable of scrolling up (or down, but headers are more common than footers).

In looking at various of the sites I use, it's clear that applying this universally would be a bad idea (especially universally hiding fixed position elements). Thus, the ideal addon would have a site list of some sort and only take effect on some sites, with a simple toggle for it (and perhaps an option to either de-fix or hide fixed elements for each site). Martin Tournoij's bookmarklet would be a great option if only there was a way to have convenient access to it in a Firefox setup where you have the bookmarks toolbar hidden. Unfortunately as far as I know you can't put a button or a label for individual bookmarklets on the title bar.

(I don't use bookmarks, preferring to have HTML files instead.)

The Bookmarklets context menu addon (Github), adds a sub-menu for bookmarklets to the page context menu (theoretically; I haven't tested how well it works in Firefox today). It would obviously provide me relatively convenient access to this sort of Javascript driven CSS rewrites, which Martin Tournoij demonstrates can be used to to improve site readability in several ways. Greasemonkey is not exactly a bookmarklet thing, but it is about running Javascript actions on the page, and there even appear to be a variety of public userscripts to do this sort of thing (eg 1, 2).

web/FirefoxVsCSSFixedElements written at 01:30:48; Add Comment


Page tools: See As Normal.
Search:
Login: Password:
Atom Syndication: Recent Pages, Recent Comments.

This dinky wiki is brought to you by the Insane Hackers Guild, Python sub-branch.