Bummed about pixels

CSS media querscreen-font-pixies are kinda bummed but I think I see the point. The point being: a pixel is now considered whatever the hell a pixel is, and points, picas and inches are only accurate in print media, not screen media. This is because the computer manufacturers out there are not interested in providing a worthwhile mapping from points to pixes because dots per inch and pixels per dot are actually not related. You can have three dots per pixel now, or three pixels per dot. Whatever the fuggin’ hell that means. So they want all our font sizes specified in pixels.

So don’t let me forget these media queries for common devices. And apparently we can test browsers for CSS capabilities just by loading a web page. And here is a possibly useful template for default smartphone and tablet screen size media queries.

CSS pulldown menus, the trick

The real trick to css pulldown menus is the :hover pseudo selector. You knew that. However, the insight comes in learning that the :hover pseudo can be used anywhere in the middle of your CSS selector. This allows you to build up the a selector representing a mouse action that selects a child element of what the mouse it on.

Here is some html:

(span id="menu")
(h3)a category(/h3)
(ul)
  (li)item 1(/li)
(/ul)
(/span)

Now here is how you hover over the over H3 to get the sub menu to raise:

#menu {
   width: 2in;
   height: 2em;
   position: relative;
}
#menu ul {
   display: none;
   position: absolute;
}
#menu h3:hover ul {
   display: block;
}
#menu ul:hover {
   display: block;
}

That h3:hover ul trick is gold!