A few random things I learnt while I pretty much gutted the entire CSS file and redid this blog’s layout from scratch:
- Drupal supports subthemes and I have absolutely no idea how to use them.
- The html.tpl.php file controls how HTML is emitted.
- If you centre an element using margin-left: auto and margin-right: auto, adding padding will not produce any effect.
- The .focusin, .focusout, and .on methods did not exist in very old versions of jQuery.
If you want to hide a menu at the bottom of the screen, make sure to test whether the hiding and unhiding work with keyboard navigation (plain tabbing and shift-tabbing). There are a number of unexpected points to note in order for unhiding to work correctly:
- Nothing will trigger the hover event when using keyboard navigation, so don’t put, for example, important things like the menu’s background colour into the hover trigger.
- Contrary to what you might expect, keyboard navigation will not trigger a CSS focus event. So putting :focus rules into your CSS won’t do a thing.
- Hiding through absolute positioning is better than setting display to none. Otherwise, when the focusin handler fires, unhiding might not work correctly.
When this isn’t done right very weird things can happen. For example, you can end up with menus that never unhide when you use keyboard navigation, or you can end up with menus that will pop up but with live links in the menu that the tab key will just skip right over.