Why you shouldn't get rid of the dotted 'outline' that appears around links on tab

Keyboard users need to know where they are.

If you get rid of the outline, then you need to put in another mechanism whereby users who primarily use the keyboard to move around a website can identify what are links.

Mouse users can use their mouse to run over some text.  If the pointer changes to a hand, then they know it's a link.

Would you remove this functionality because you 'don't like the way it does that'?

Why not?

Because it confuses users and obscures what the link does?

Because they wouldn't know what links are?

Then ask yourself, why would you do the same to keyboard users?

outline:none  = just say NO

Is SASS making us over-specify??

So one of my bug bears is over-specification.  Why put in a bunch of classes to target an object when just one or two will do?

Over-specification causes:

• bulky CSS
• reduced re-use (if it's too specific, then nobody can reuse it, right?)

So I'm a card-carrying, flag-waving under-specifying CSS user.

And then along comes SASS.  SASS who wants you to encapsulate.

.myClass{someStuff:0;
    .ooAnotherSelector{someMoreStuff:0;}
}

Which compiles to:
.myClass .ooAnotherSelector{someMoreStuff:0;}

And while it's all kinda neat and cute and grouped in the .scss file, in the CSS file it comes out as over-specified annoyances.  Well, at least as far as I'm concerned.

The trouble is, the encouragement is to do this, and the compiler can't be modified to tell whether it needs that level of specification or not.  I'd like to tell it to rip out the non-required selectors, but how does it know if they're required or not.

Sigh.

Font licensing: a plea to designers

So, far be it for me to tell designers which fonts to use in their creations.  They have constraints I can't even begin to understand - brand, communication, etc.  But if they expect me to be able to take the lovely design and create a website out of it, especially for a high profile (read 'sueable') client, then I am going to have to be able to use any font they've chosen with the appropriate license.

Because we're all about @font-face these days, are we not?

Recently I get a design through - gorgeous design - using a font that's so expensive to use on the web that we have to substitute it for a cheaper alternative.  All good - client agrees.  Get to UAT (user acceptance testing) phase and suddenly it's all 'but the font doesn't look the same as on the PSD'.  DISASTER!!!

Yes.  That's correct.  Because it's NOT THE SAME FONT.

So.  Designers of the world?  Please check the licensing of the fonts you use.  It will make my job much easier and ultimately the client much happier.

And isn't that what we all want?

(the happy client)

(although my job being easier is good too)

Why I hate !important

So you're dealing with legacy code.  You've got to apply a new skin, and that's what CSS is all about, right?  Applying a new stylesheet and whaboompf you have a new spanky site with little to no HTML changes (see Zen Garden for a good reference).  Fabulous.

Occasionally you come across a site that's been built by a developer who hasn't figured the semantic thing out, and you find you're making declarations like:

.blue{color:red;}

Always a bit uncomfortable.

But nothing, nothing is as bad as:
p{color:green!important}

Oh bane of my life!! Oh curse you developer!!

My p.blue (which is supposed to be red - work with me here) is green.  Everything is green.  And now I have to start liberally sprinkling !importants all over the place.  The natural cascade is lost.  The very notion of !important is lost.

And I have a crazy urge to hunt down and pummel the lazy f-wit that decided green text was aaaall that site was gonna get.

That's why.

Mobile stylesheets

I’ve found that the Android phones I've been testing on, in landscape view has a width of something like 533px – not the 480px everyone seems to be talking about. This was confusing. But I ended up using the following code to make the site work:

 <link href="css/screen.css" media="only screen and (min-device-width: 534px)" rel="stylesheet" type="text/css"></link>

<link href="css/mobile.css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (max-device-width: 533px) and (orientation: landscape)" rel="stylesheet" type="text/css"></link>

 This removes the main stylesheet and only displays the mobile stylesheet on devices. iPad just gets the regular site. Another media query might be necessary for an iPad site.

I’d really strongly like to discourage the use of:
maximum-scale=1

This will mean the user can’t zoom into the page which is really bad for accessibility reasons.

 Oh, and there’s a resize bug in mobile Safari nicely described by Jeremy Keith: http://adactio.com/journal/5088/ If you go from Portrait to Landscape the page ends up being too big and the user has to double tap to bring it back to the right size.

But it’s a well documented bug, so we just need to point this out and hope that Apple fixes asap!!

CSS3 is a misnomer?

According to the W3C:

"CSS Level 3 builds on CSS Level 2 module by module, using the CSS2.1 specification as its core. Each module adds functionality and/or replaces part of the CSS2.1 specification."

So there will be no CSS3, just a more enhanced CSS2.1.

Seems weird to me..

Input field toggle (badly written - needs re-writing)

fieldToggle = function(i){

__defaultVal = $(i).attr('value');
__inputField = $(i);

$(__inputField).bind('click focus', function () {
if ($(this).attr('value') == __defaultVal) {
$(this).attr('value', '');
}
});

$(__inputField).bind('blur', function () {
if ($(this).attr('value') == "") {
$(this).attr('value', __defaultVal);
}
});

}