if ( !is_admin() ) { 
    $theme  = get_theme( get_current_theme() );
    wp_register_style( 'your-style', get_bloginfo( 'stylesheet_url' ), false, $theme['Version'] );
    wp_enqueue_style( 'your-style' );
}

I don’t really like the get_theme() line, but I am not aware of a better way to get the version info. What’s good about that line is that it gets the version of the current child theme, if you’re using one.

One problem with enqueuing styles is that most themes need one or two additional CSS files inside conditional comments for a certain browser. Nacin pointed me to a solution:

if ( !is_admin() ) { 
    $theme  = get_theme( get_current_theme() );
    wp_register_style( 'your-style', get_bloginfo( 'stylesheet_url' ), false, $theme['Version'] );
    $GLOBALS['wp_styles']->add_data( 'your-style', 'conditional', 'lte IE 8' );
    wp_enqueue_style( 'your-style' );
}

See also the relevant discussion on trac. Using this could lead to script concatenation problems in the WordPress core (which doesn’t concern a theme developer) and if a website uses plugins like wp-minify. So you probably only want to use this in your own themes, not public ones.

That’s not good. Yes, jquery is lightweigt, CSS files aren’t big, but that’s not a good reason for making every visitor download them. I did some research and it doesn’t look like anybody wrote about a solution yet, so here’s one way. Usually, you would add an action to wp_print_styles or wp_print_scripts that does something like this:

add_action( 'wp_print_styles', 'yourplugin_include_css' );
 
function yourplugin_include_css() {
    echo $csslink;
}

Instead, try this:

add_action( 'wp_print_styles', 'yourplugin_include_css' );
 
function yourplugin_include_css() {
    // Check if shortcode exists in page or post content
    global $post;
    if ( strstr( $post->post_content, '[yourshortcode]' ) ) {
        echo $csslink;
    }
}

That’s it. Please don’t add custom javascript or CSS on each and every page of my blog.

Update: See this excellent post for an improved solution.

Update 2: The best solution for loading JavaScript so far

Usability

Tab Kit: My favorite tab extension. Has many many features, I use it mostly because it allow more than one row of tabs and tab grouping/collapsing.

Clear Fields: This solves a quite annoying issue with Firefox and the xorg clipboard. Xorgs lets you paste things that you have highlighted with the mouse by simply clicking the middle mouse button. However, the previous contents of the search and address fields don’t get cleared. This adds buttons to clear those fields before pasting.

Development and Webdesign

Firebug: The swiss army knife of web developer add-ons. To quote from it’s description: “You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page”. Very power- and useful.

Gridfox: Indispensable while making grid-based layouts or aligning text to a base grid.

Live HTTP headers: This is rather esoteric, but very useful for JavaScript debugging and web app development.

Web Developer: This is what I used before Firebug existed, and it’s still useful today.

MeasureIt:This is very useful for quickly measuring the size of various elements on a page.

Privacy/Security

Cookie Monster: The best cookie manager I could find. I always block all 3rd party cookies, and by default no website is allowed to store cookies on my computer. Cookie monster makes it very easy to allow cookies for sites I visit. Another nice feature is to only allow session cookies for some sites.

Flashblock: Blocks all annoying flash animations. Can whitelist sites of course. A must.

NoScript: Blocks all (3rd party) JavaScript. Indispensable security tool and gets rid of most ads as well.

There was a time when websites used “Best viewed in Internet Explorer” or “Best viewed in Netscape” kind of texts and banners. Some sites even blocked you if you were using the ‘wrong’ browser (it still happens today). That was stupid in the 90s, and locking out IE6 isn’t any smarter today.

If you want to behave like the “Best viewed in Internet Explorer” crowd of the 90s just go ahead. There was a different movement back then that still exists today: Viewable With Any Browser. There’s really no need to punish some minority browsers.

Anyone who slaps a ‘this page is best viewed with Browser X’ label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.

Tim Berners-Lee in Technology Review, July 1996

I guess I’ll just go on and build sites that are more or less standards-compliant and hopefully don’t require special tweaking for IE6. There are enough cross-browser tools out there. Just use your favorite search engine to find JavaScript libraries, CSS frameworks etc. Of course, something will always break in the old IEs, but don’t waste time breaking it on purpose.

Update: Just found this gem from the gif-crazy 90s and had to add it:

display: block;

Other display configurations seem to create the same problem. Opera’s behaviour is incorrect, see the specs as Dave points out.

#foo {
    border-radius:          8px 4px 4px 8px;
    -moz-border-radius:     8px 4px 4px 8px;
    -webkit-border-radius:  8px 4px 4px 8px;
    -khtml-border-radius:   8px 4px 4px 8px;
}

No browser seems to support the first notation yet. That’s fine as CSS3 isn’t complete. However, mozilla, webkit and khtml-based browsers should be ok. IE and Opera will just ignore those.

The syntax differs in some details though, see for example:

    -moz-border-radius-bottomleft:      5px;
    -webkit-border-bottom-left-radius:  5px;

Oh, and Safari doesn’t seem to support a radius given in percent, mozilla does:

    -webkit-border-bottom-left-radius:  10%;

This doesn’t work for me in Safari.

By the way, this blog’s wordpress template uses CSS3 border radiuses. Hi IE users

Update: This post led me to Drew Diller‘s blog. He has an interesting technique for rounded corners in IE. Another technique by Remiz: see other technique for rounded corners in IE. Who knows, maybe I will be able to deploy sites that use border radiuses in the future, even if Microsoft has no plans for supporting them in IE8.

I like to tweak my wordpress theme. And I’m far too lazy to set up a second blog just for development. So I’m looking for a solution to work on my template without distracting visitors. I think one day I’ll write an extension that is a little more powerful than this trick, but it’s a start.

The easiest case is that you sometimes want to play around with your CSS styles. In this case, just add something like the following example to your template header. Put it where you include your CSS, and only logged in users will see your experimental CSS.

1
2
3
4
5
6
7
8
9

<style type="text/css" media="screen">
    @import url("<?php
    if ($user_ID) {
        echo bloginfo('template_directory') . "/experimental.css";
    }
    else {
        echo bloginfo('stylesheet_url');
    } ?>");
</style>

Of course, you can be more specific than showing any logged in user the testing style. Just compare the $user_ID with some specific ID.

Seriously, how can somebody miss that his complete page layout shifts some pixels to the left or right when looking at different pages of the same site.

Consider this, twitter without a scrollbar (I think this was my profile page).

The same site, but now with a scrollbar. Notice how all the content moves to the left.

On the next image I made an overlay of both shots to make the layout shifting more obvious.

In my opinion this is one of the biggest design errors, and everybody does it. And – it’s ridiculously easy to fix:

html {
    overflow-y: scroll;
}

Not using this is really hurting a website’s usability. When a user clicks on some navigation element the navigation is supposed to be at the same place on the next page. So, force the vertical scroll bar!

Now I just need to hire myself a good designer to make my page look good