Save to Delicious

Just drag and drop it to your toolbar and start using it.

Say you have an input of the type email, and enter something that is not a valid email address. Then the invalid pseudo-selector would apply. If someone is currently typing in their email address however, you might not want it to be marked as invalid, as the user isn’t done yet. With some advanced CSS3 you can accomplish this. Take a look at the following code:

input:invalid:not(:focus) {
 background: red;
}

That will make the background of an input red if it is invalid, as soons as the user focuses something else on the page. They can then go back and fix the error. This also applies to inputs with type url or with a specified regexp pattern. As far as I know it is currently only supported in Opera. Do you know if it’s supported in any nightly builds of other browsers?

Autocompletion

To enable it by default for CSS files, add the following code to your .vimrc file:

autocmd FileType css set omnifunc=csscomplete#CompleteCSS

Autocompletion for many more languages is available in Vim, Amir Salihefendic has written more about it on his blog: Vim 7: Turning completion on. He also has a nice animated example of what it looks like in action.

Another great thing about Vim is that there are a lot of talented users who will write scripts themselves, and share them with anyone. That way, you can find syntax highlighting and autocompletion for almost anything, if not at the official Vim scripts site, just Google it. For instance, I found that YUI guru Dav Glass has made both a Vim autocompletion and a syntax file for the YUI JavaScript library.

Modifying Numerical Values

Often when debugging a layout, you might want to increase or decrease a numerical value such as width or padding. In Vim’s command mode, all you have to do is move the cursor to any number, or even the property name, and press Ctrl X to decrease the value by 1, or Ctrl A to increase it by 1. You can also enter any number, and then press Ctrl X or Ctrl A — that will increase or decrease the value by the number you entered. Saves you a lot of typing. Works with any unit, such as % or px or whatever.

Validation

Vim even supports validating your code directly against a web service. A collegue of mine at Opera wrote a CSS validation tool, which I haven’t tried out yet though. There is also a HTML5 validation tool at the WHATWG blog. I will start experimenting with them as soon as I’ve gotten more comfortable with my current setup.

It does take some effort to learn Vim. The way I did it was to learn only a couple of new commands a day (I just learned how to resize buffers windows…) and have a printed cheat sheet on my desk.

Do you have your own Vim tips & tricks? Please share in the comments!

The Specification

First,

The WHATWG logo.

The WHATWG Blog

With writers like Mark Pilgrim and Ian Hickson, the WHATWG blog is useful not only to keep up with the developing specs, but also explaining important concepts such as link relations, a topicality with all the discussions about rev=canonical recently. Visit

html5 Gallery

There are thousands of CSS showcases, but this one has it’s focus on sites coded with HTML5 markup. A great way to keep up with developers experimenting with new technologies. Visit

html5 Gallery screenshot.

When can I use…

Alexis Deveria has compiled a customizable table of which features in HTML5, CSS3, SVG are compatible with which browsers. Quite useful when you learn about something new and cool to see if it will work for at least some of your visitors! Visit

Bruce Lawson

Web Standards Project member and Opera employee Bruce Lawson was one of the first major blogs to not only write about, but also redesign his site with HTML5. Visit

Dave Shea

Dave Shea, the author of the popular mezzoblue weblog, recently decided to switch from XHTML to HTML4. He did this because he believes HTML5 and not XHTML2 is the future. The ensuing discussion in the comments at his blog is well worth a read. Visit

That’s all for now, but please chip in if you have any other resources that might be useful!

Additionally, the W3C say in the HTML4 specification that:

User agents should render quotation marks in a language-sensitive manner (see the lang attribute). Many languages adopt different quotation styles for outer and inner (nested) quotations, which should be respected by user-agents.

IE8 is currently the only major browser to apply the appropriate quotation marks according to the specified lang attribute by default. Fixing this for Firefox and Opera is relatively straight forward with a little bit of CSS. David Hellsing wrote a good article on this, and how to get it to work in (older versions?) of Safari as well. First, we specify the quotes property of our q elements, here for English and Swedish:

q:lang(en) { quotes: "\201C" "\201D" "\2018" "\2019"; }
q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; }

And then the before and after content.

q:before { content: open-quote; }
q:after { content: close-quote; }

Some languages (such as French) have quotation marks that contain spaces, but we don’t want a quotation mark to appear on a new line. Therefore, it’s a good idea to add white-space: nowrap; to the before and after code above.

So far so good — except for Internet Explorer 6 and 7. With Java­Script / jQuery, we will use a method I learned from Stuart Langridge check if the browser has applied the quotes property to the document or not.

The IE version of accomplishing this is called currentStyle. The q variable is here the first occurrence of a q element in the document. We go through its properties in a for loop, just like we learned from Stuart.

if ( q.currentStyle ) {
 for ( prop in q.currentStyle ) {
  if ( prop == 'quotes' ) {
   supportsQuotes = true;
   break;
  }
 }
}

In IE8, this script will find quotes in the applied properties, and we won’t have to add any quotation marks with JavaScript. More about that later. To be sure we won’t add quotation marks for other browsers, we would use a script explained by Peter-Paul Koch, using the getComputedStyle method. However, WebKit has a bug preventing this as a reliable method, we will simply have to assume that any browser recognizing the getComputedStyle function will add quotes without JavaScript…

else if ( document.defaultView.getComputedStyle )
 supportsQuotes = true;

Now we know if we need to add quotes with JavaScript or not. If we do, we’ll use some jQuery code. After grabbing the qs with $("q"), we go through the quotes, adding quotation marks. If the quote itself doesn’t have the lang attribute specified, it will go to the closest parent element with a lang attribute, until it gets to the document root.

lang = q.closest("[lang]").attr("lang").toLowerCase();

In the jQuelements settings, we have previously specified a qMarks array for different languages, with a syntax similar to the CSS above:

qMarks['en'] = new Array('\u201D','\u201C','\u2018','\u2019');
qMarks['sv'] = new Array('\u201D','\u201D','\u2018','\u2019');

This is what we will now get with the help of our lang variable and apply with some jQuery.

qMark = qMarks[lang];
if ( q.parents("q").length == 0 )
 q.before(qMark[0]).after(qMark[1]);
else
 q.before(qMark[2]).after(qMark[3]);

There is some more code involved, obviously. You can download that, the CSS and more examples with different languages in my lab.

In the process of redesigning my site, I wanted a small tabbed inter­face in a sidebar and started working on a jQuery script to accomplish that, when I realized I could use the target pseudo-class instead! Nothing more than the following is needed:

<ul>
 <li><a href="#tab1">Tab 1</a></li>
 <li><a href="#tab2">Tab 2</a></li>
 <li><a href="#tab3">Tab 3</a></li>
>/ul<

That is the navigation. And the targets:

<div id="tab1">Lorem ipsum dolor sit amet</div>
<div id="tab2">consectetur adipiscing elit</div>
<div id="tab3">Nullam vitae ligula eget erat suscipit sodales.</div>

The CSS to hide the content by default:

#tab1:not(:target), #tab2:not(:target), #tab3:not(:target) {
 display: none;
}

Using the not pseudo-class here makes sure the boxes are not hidden from browsers not supporting CSS3 properly. And to show them when the links are clicked:

#tab1:target, #tab2:target, #tab3:target {
 display: block;
}

Obviously, the Internet is big and when I googled, I realized I was hardly the first one to come up with this. Actually, it is even included in the W3C’s CSS Tips & Tricks. So, for a demonstration go there, and wait a couple of weeks to see it in action on my site as well.

I usually want to link the logo / header image of a site to the home page, and as Bruce Lawson has pointed out, not only is wrapping any element in an a element valid HTML5, it is also well supported in web browsers. Thus, my header is markuped as follows:

<header>
 <a href="http://jacobrask.net">
  <h1>Jacob Rask</h1>
  <p><strong>web stuff</strong> &amp; who knows what else</p>
 </a>
</header>

And the (relevant) CSS:

header a {
 display: block;
 background: url(/img/jacobrask.gif) no-repeat;
 height: 60px;
 width: 300px;
}
header a h1 {
 display: none;
}

Very easy, and no superfluous markup.

Thus, we need a (re)set stylesheet to tell the browser that header, sec­tion, etc, should be block level elements. Thus, we might just as well add some other useful declarations to the style sheet. I believe Eric Meyer’s CSS reset is a good start, but I think he goes a bit too far at some places, such as removing default quotation marks and list-items, so I’ve trim­med it down. Of course, I have also removed any references to ele­ments removed in HTML5.

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small,  strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 vertical-align: baseline;
}
body {
 line-height: 1;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
section, article, aside, header, footer, nav, dialog, figure {
 display:block;
}

Or download it minified here: HTML5 CSS reset.