Graphic libraries exist to take the page from the rendering engine and onto the screen. They’ve been underexposed for some time because the rendering engines caused the most grief, but with those getting rapidly better, little annoyances with the graphic libraries start to appear.

Google Chrome

When Google announced Google Chrome and it turned out to use the Webkit rendering engine, I think everyone collectively sighed in relief. Not yet another browser to support! Well, that was until it became known that Google Chrome actually doesn’t support a lot of Webkit’s more advanced CSS stuff such as text-shadow or transformations. The reason for this is called Skia.

Skia is the graphic library Google Chrome uses. Webkit renders the page and then Skia actually paints it on the screen. All fair and well, but Google Chrome is the only browser to use Skia. Safari, which also used Webkit, uses the Core Image libraries. So while you may expect that the stuff that works in Safari also works in Google Chrome, that won’t always be the case. The result: Same rendering engine, different looking sites.

Firefox

Another example: Firefox uses the Gecko rendering engine. It used to use the Pango graphics library but some time ago they switched to Cairo, which dramatically improved Firefox’s graphic rendering. However because of Cairo, fixed elements, when viewed on Linux, jitter. If you’re on Linux, and scroll this website, the top right background jitters. Very annoying, especially since this doesn’t happen on Mac or Windows. This isn’t a problem of gecko, but of Cairo having to (re)paint the site on the screen.

So what does this mean?

Do we all have to buckle up for a new era of browser hacking and working around more and more cross-graphic-libraries oddities? No, I don’t think so. I don’t think this will really become a big problem.

However, very few people know about the how and why of these differences. As a front-end developer it will help you build better websites if you do. So will you?

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

On rendering engines and graphic libraries

How it works

One handy little thing of Internet Explorer is that it also gives you access to CSS declarations it does not understand, so we can simply request the text-shadow value of a given element and process that. For a more in-depth explanation of how the technique itself works, please read the original article. It should work in Internet Explorer 5.5 to Internet Explorer 8, since I also added the new Internet Explorer 8 version of filter, -ms-filter.

Demo

Demo. Works only in Internet Explorer. :)

The Plugin

The plugin itself offers two functions: textShadow(); and removeTextShadow();, which do what you expect them to do.

textShadow(); Allows you to optionally overwrite the text-shadow declaration from your CSS to tweak the look of the text-shadow in Internet Explorer, if needed. The available options look like this:

$(elem).textShadow({
	color:   "#000",
	xoffset: "5px",
	yoffset: "5px",
	radius:  "5px",
	opacity: "50"
});

You’ll notice that all the regular options of text-shadow are there but that I’ve also added opacity, which helps tweak the intensity of the text-shadow. It’s translates to Internet Explorer alpha-opacity, so it’s range is 0 to 100. 50 works best in most cases and is also the default.

Limitations

There is really only one major limitation, it just doesn’t look as good as native text-shadow support in the other browsers. It works pretty well for average-sized text-shadows, but it falls apart on smaller or larger sizes. Tweaking it may help, but YMMV.

Another small limitation is that the padding-top and padding-left of the elements that get a shadow need to be in pixels, otherwise it won’t work. I could theoretically write something that takes care of em, %, cm, mm, pt, pc and in, but I’d really rather not.

Download

Here you go: jquery.textshadow.js. Tested with jQuery 1.2+ but will probably work with older versions as well.

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Text-shadow in IE with jQuery

Twitter search in sidebar

Click the link to install it using Greasemonkey: twittersearch.user.js

And this is what it looks like:

Greasemonkey

There is one awesome thing about doing stuff with Greasemonkey: it’s easy. You’re just writing regular javascript and some comments that tell Greasemonkey the name and description, which websites to apply to (or not to apply to) and that’s it. The above script took me about an hour, including eating my dinner.

If you need to do heavier stuff and want to make use of library’s, you can do that, too. The only gotcha I really had, had to do with innerHTML (shock!) that acted a bit icky with onfocus functions and parameters in quotes. Solution: remove the quotes.

Onfocus? Not event listeners? Well, no. Greasemonkey script themselves are javascript already, so if it’s in the page, then the user has javascript on. Using an onfocus then is just much easier :)

There are a couple of websites I looked around to find info on Greasemonkey:

• Dive into Greasemonkey
• The Greasemonkey wiki

If there’s an annoyance with a website you use often, and you think you could fix it easily, then Greasemonkey is an excellent way to do that fast and easy. Do you have any tips for Greasemonkey?

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Twitter search in sidebar using Greasemonkey

They’re both right.

Of course, it’s all about when you use which method. In some cases, absolute positioning breaks faster and it’s better to use floats, while in other situations it’s better to use absolute positioning because floats would break the layout. luckily for us, there is one very simple rule:

If elements should not interact, use absolute positioning, if they should, use floats.

It’s that simple. Lets take this site for example. The searchform in the top right uses fixed positioning (which mostly behaves like absolute positioning) because it will, and it must, never interact with the other elements on the website. However if you scroll down to the footer, you can see 4 lists next to each other. It’s entirely possible that there are only two or three lists available. In that case, you do not want a gap on the left or in the middle, you want the elements to interact and line up nicely starting from the left. That’s what floats do for you.

If you want a more in-depts explaination of css positioning, check out my articles on them:

• Understanding CSS positioning, part 1
• Understanding CSS positioning, part 2
• Understanding CSS positioning, part 3

So, now you know that it’s not black and white (It’s grey!). There are times when you use floats, and there are times when you use absolute positioning. In my opinion, correctly styled floats are much more robust than absolute positioning, so I personally tend to use them more. How about you?

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Absolute positioning Vs. floats

It used to be so easy. Every screen was 72DPI, so you were quite certain in how large or small something would display on a monitor. Nowadays, websites are viewed on all sorts of devices with all sorts of DPI. Most screens have 72 or 92DPI, some have 120DPI. An iPhone has 160DPI and regular cellphones have around 100 to 200DPI

That means that your 400px wide image will look very different on a range of monitors, and that the pixel will become less and less the “solid” measure most Front end developers regard them as. This isn’t new, Roger Johansson blogged about it two years ago.

One thing the article mentions is that a CSS pixel is not always equal to a device pixel (otherwise zooming would be impossible, for instance). Unfortunately, as you can read in the same article, this doesn’t mean you can go merrily about your ways, because it will still look different on a screen with higher or lower DPI.

what now?

I think that in the future, pixel based designs will not be a viable option for web design any more. Technologies such as SVG and CANVAS, coupled with relative sizing (relative to the base size of browsers), or even the CSS gradients, repetition and stretching background options CSS3 and the Webkit team bring us, will be used in favour of jpg’s, gif’s and png’s. For most website designs, SVG etc. would be easier to use and maintain than pixel based formats. But alas, not all browsers support it yet.

However, this doesn’t completely solve the problem, because there are plenty of photographs used in web design. What about those? The current idea is to give higher resolution images to screens with a higher DPI and lower resolution images to screens with lower DPI. I am uncertain if this will work, as it essentially doubles the work of a web designer.

Well, will they become obsolete?

I certainly hope so! It might not be in the next couple of years, but in a decade or so, I think web developers won’t be thinking in pixels any more.

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

When will pixels become obsolete?

By showing passion, you create your own chances.

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Creating your own chances

The Specification

The negation pseudo-class, :not(X), is a functional notation taking a simple selector […] as an argument. It represents an element that is not represented by the argument.

What it says here, is that a selector with a :not() in it will match all elements that do not match what’s between the parenthesis.

A simple selector is a term used in the specifications. A simple selector is: a single element, attribute selector, class, id or pseude-class.

Examples of simple selectors:

body
*
[value="foo"]
.foo
#foo
:hover

Basically, any of the above type, but with only one selector.

The browsers

The :not() selector is only supported by modern browsers (Firefox, Safari and Opera), :not(IE).

Let’s take a look at what browsers allow you to do:

div:not(.home) {…}

This selects all div elements that do not have the class .home

div *:not(p) em {…}

This selects all em elements that are in an element (that is not a p element) and that are in a div element. so <div><strong><em>…</em></strong></div> is a match, but <div><p><em>…</em></p></div> is not.

input:not([type="file"]) {…}

This uses the attribute selector to select all input element, save for the file upload ones.

I was surprised to find out that

h2:not(.foo, .bar) {…}

also works. You can give the :not() selector a comma separated list as well! (Tested in Firefox 3) This is surprising, because it’s not documented as such in the specifications.

You can use the :not() selector as a part of a large selector. I’ve done this a few times in my current design:

li:not(.pingback) .comment-content p:first-child:first-line {…}
body:not(.home) h2 + p:first-letter {…}
.post:not(.first-post) a:hover {…}

The :not() selector is a nice addition to the CSS Tookit, and it can already be used in a way that allows for graceful degradation, such as I do on this website. If you have any nice experiences with :not(), please share them in the comments!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

The CSS3 :not() selector

I wanted something that wasn’t so common: display the title, category, date, comments and excerpt, so I had to make something for myself.

What it does

At the moment, it’s quite basic. It sorts the posts on comment count, and displays the top n articles. I have three on my homepage. It uses the excellent post plugin library to get the date, category and excerpt into shape. (so, the post plugin library is needed for this to work). The code is based off of this example from the Wordpress forums.

The Code

I haven’t looked into making wordpress plugins yet, so my popular post solution is just a snippet you can include in your theme:

<?php
	$sql='SELECT post_title, comment_count, guid, post_date, post_content, ID
	      FROM wp_posts
	      ORDER BY comment_count DESC
	      LIMIT 3;';
	$popresults = $wpdb->get_results($sql);

	foreach ($popresults as $r) {
		echo '<div class="post">';
		echo '	<h3><a href="' . $r->guid . '">' . $r->post_title .'</a>';
		echo '		<span>'. otf_categorylinks($r->ID, $r,', ').',';
		echo '			<abbr title="'. oth_format_date($r->post_date, "j F Y") . '">'. oth_format_date($r->post_date, "j/m") . '</abbr>,';
		echo '			<abbr title="' . $r->comment_count . ' comments">' . $r->comment_count . '</abbr>';
		echo '		</span>';
		echo '	</h3>';
		echo '	<p>'. oth_trim_excerpt($r->post_content, '45') .'…</p>';
		echo '</div>';
	}
?>

This snippet can be improved in a lot of ways. For one, making it a plugin would be a good idea. Secondly, attaching a time-based element would be nice, so that it can become “the popular posts of last month” instead of the all-time popular posts. Even more interesting would be linking it to the WP-Stats plugin. That offers an “active posts” lists, which seems to be based off of comments and visits to a certain posts over a limited period of time.

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Popular posts for Wordpress 2.6

Design wise

This is actually the first design I made on a Linux machine (nerd), and the first design that went directly from sketch to html. My sketches were more detailed because of this, and I might add them to the article later, when I have a good camera at hand. In any case it means I didn’t buy fancy pencils for nothing :) Most of the typography was actually sketched out, instead of added as an afterthought. The header is set in Asturias.

Besides that, the whole website adheres to a vertical rhythm of 18px (even my form elements!), largely the cause of the awesome SenCSs. There is a pretty strict grid as well. It might seem quite small if you have a fancy 24″ monitor, but since I have an Asus EEE, I wanted it to work on there as well. I can create 1, 2, 3 or 4 columns within my style, with space to the right of the design where I can put extra stuff. I might experiment with that in time.

I’m using my Context Hover javascript trick as well, I think it works very nice on this site.

I liked the idea of having as little administrative cruft available as possible, and initially didn’t have a search form at all. This is functionality I wanted to offer though, so I settled for what you currently see. It’s in the top right corner with position:fixed, more part of the browser window (right below your google search bar) than my website. Huzzah! I also removed the sharing options, and made the meta information as small and invisible as possible.

Oh, and about the tagline, it’s still there for those who look :)

Code Wise

Yep, I used SenCSs for this design, and that took away about 50% of the styling needs. I’m so happy with developing it :) There are probably some things here and there that I’m going to change in SenCSs 0.4.7, or, if I can finish the form part, they’ll go straight into 0.5 :) (0.5 being the first version to include form styling).

HTML-wise it’s quite boring. xhtml strict, nothing spectacular. I went down a scale in headings in articles. (So what was h2 with the old design will be h3 in the new design.) Will be interesting to see what Google thinks of that…

I’m also happy to tell you that this site is made with a screw IE attitude. I can do this, because IE users are only about 15% of my visitors. Most of the site will work for them, the fancy stuff won’t. What fancy stuff, you ask? Well, That would be fancy CSS selectors such as these:

h2 + p:first-line
.first-post > p:first-line
.comment-form .left ~ button
li:not([class=pingback]) .comment-content p:first-child:first-letter

I’m using the similar posts plugin to display related posts at the bottom of my articles, which works pretty well and I find myself browsing through my backlog, so I hope you will, too. :)

On the homepage I have the three most popular posts. Anyone that has searched for a plugin to take care of that and works with Wordpress 2.6 probably found out there isn’t one. So I had to make my own little snippet* that uses the post options plugin. I’ll post an article with the code in the next couple of days. *my Wordpress-fu isn’t good enough to develop plugins yet

More than a weblog

I like the idea of this just being a weblog, but I am also a freelancer, and wouldn’t mind showcasing that on my site a bit more. So the projects page will include both open source and client work. I got some cool things lined up for release. On the homepage I’m displaying a list of projects I developed or am involved with. Currently that’s just SenCSs, but expect that to fill up in the near future.

Your Thoughts?

I’m quite interested in your thoughts on the design and the website in general, let me know in the comments and if you’re browser is hot enough, I’ll give you a sweet :first-letter and first-line effect! ;)

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

My first design is finally done

li:not([class=pingback]) .comment-content p:first-child:first-letter

Which is one of the selectors I use to style the comment section of my new design. Not bad, is it?

Sorry for the delay on the second part of Building your own lightbox. The article is proving itself to be, how do I say it, humongous.

So, for this week, Tell me your best CSS selector!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Your best CSS selector?