Posts from Friday, September 7th, 2007

Tweaking Camino

Published 11 years, 1 month ago

A while back, I got fed up with the memory leaks of Safari, but found Firefox to be a bit too poky for everyday browsing.  Also, I can’t even find words to describe my seething hatred of Firefox’s insistence on keeping a blank window open when I close the last tab in said window.

So I started using Camino as my default surfing browser.  Firefox is still my web development environment, of course; I just seethe for a moment when a blank window occurs and then keep going.  Life in Camino has been a mostly positive experience, but there are a few things that really irk me.  I’m wondering if the (Lazy)web can help me fix them.  To wit:

  • The form autofill routines latched on to some early mistakes of mine, and now just will not let go (for example, my name gets filled into the e-mail field and vice versa when commenting on WordPress blogs).  I want to fix this.  Where do I find that information?

  • Safari has an autofill feature I really like, which is that it remembers every input ever made for a given field on a given page, and uses them for autocompletion.  For example, it remembers every blog post title I’ve ever input through it, which helps me avoid duplicates.  Is there a way to get or add something similar for Camino?

  • Is there a way to turn off all favicons, including the default green diagonal bookmark, in the Bookmarks bar, but leave them in the Bookmarks menu?  All I can find is, which seems to kill all favicons everywhere, and doesn’t seem to turn off the green guys (unless I did something wrong).

Camino hasn’t been all pain, certainly.  I absolutely love its state restoration feature, for one.  And once I got into about:config and flipped a few settings (such as disabling “Delete” as a back button equivalent), and ran the shell command to get inline URL autocompletion (as documented most of the way down this “Hidden Preferences” page), I was much more satisfied with my Camino experience.  I’d just like to get it the rest of the way there, if I can.

Diagnostic Styling

Published 11 years, 1 month ago

On stage at An Event Apart Chicago, I made reference to recent efforts I’ve been making to develop a set of “diagnostic” styles.  I’d hoped to have them ready for presentation in Chicago, but didn’t get it done in time.

Well, they’re still not really done, but as I’ve now torn them apart and rebuilt them three or four times, with no real end to that cycle in sight, it’s time for me to get them off of my hard drive and into the public eye.  It’s a little bit complicated, so rather than post the whole thing in this entry, I’m going to link to a demonstration page.  I first want to say a few things about it, though.

The primary goal here is to have a set of rules that can be applied during the development phase of a new layout.  These rules’ aim is to visually highlight problems in the markup.  For example, here’s one of the rules:

a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}

That brings some eye-watering attention to any link that has an empty href, or is (most likely) being used as a JavaScript trigger with no fallback.

Where things got tricky was when I wanted to do things like higlight images that didn’t have alt or title attributes.  In a perfect CSS3 world, I could just say img:not(img[alt]) to select non-alted images.  At least, I think that’s what I would say—:not() syntax makes my temples throb.  Since I was developing these with the idea of releasing them to a more general development audience, though, I decided to use regular old non-:not selectors.

So what I ended up doing, in slightly simplified form, was this sort of thing:

img {outline: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted;}

The logic works out like so:

  1. Set all images to have a big red outline.
  2. If an image has both alt and title attributes, set the outline width to zero.
  3. If an image has an alt attribute, set the outline color to fuchsia.  This means the outline of any image that doesn’t have an alt attribute will stay red.
  4. As long as an image has either an alt or a title attribute, make its outline style double.
  5. If an image has an empty alt with any kind of title, or vice versa, make the outline’s width three pixels.
  6. If an image’s alt and title attributes are both empty, then make the outline dotted.

Whew.  Maybe I piled a few too many conditions in there, but I wanted to get some finer granularity on the results, which you can see demonstrated (along with several other things, like highlighting table headers without scope attributes and tables without summary attributes) at the diagnostic demonstration page.  On that page, you’ll see a number of examples and the style sheet that drives them all.  If it’s getting in the way of seeing what’s going on, move the mouse over it to mostly clear it away without actually removing it.  Mouse back out to bring it back.  (Maybe I should reverse those states—what do you think?)

Admittedly, much of what these styles do can be replicated with tools like the Web Developer Toolbar.  The advantage I find with writing my own diagnostic styles is that I can tune them to present exactly the way I want them.  Outlining deprecated elements is fine, but what if I’d rather make them lime-green on cyan to really drive the point into my optic nerves?

Anyway, I don’t for an instant think that these constitute a replacement for the WDT.  They’re just another handy tool to have in the toolbox.

A final note: when actually using diagnostic styles, all of the declarations should be marked !important so as to ensure their application.  I left those directives out of the demo page for clarity’s sake.  If you’re going to use diagnostic styles of this sort in your own projects, remember that you’ll need to add them.

I’m putting these out for comment, suggestions, and general community improvement.  Anyone see things we could add or upgrade?  Let us know!