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!

a

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.

a

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! ;)

a

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!

a

Your best CSS selector?

SenCSS 0.4.6

You can download SenCSs 0.4.6, both the normal and the minified version, from Google code. Have a look over at the SenCSs website for the full changelog and more information.

The final logo

A Request

Wanna help work on SenCSs? I’m fighting with form styling and making it cross browser pixel perfect (a utopia?). If you see any parts of SenCSs that can be improved, or if you have good ideas that should/can/must be added, don’t hesitate to contact me using The comments here, my contact form, or Twitter. Cheers!

a

SenCSs 0.4.6 Released

Part 2, published next week, will look into some of the cooler stuff:

• Loading in pages instead of images
• Adding a loading animation
• Adding a nice close button
• Using cool different animations
• Send some text along with an image and display it next to it
• Display multiple lightboxes on top of each other
• Combining all the above

Why an article on making a lightbox?

I know, I know, there are a lot of really good lightbox scripts out there already (check out the comparison matrix!) However, during my internship I developed a website that needed some very specific lightbox effects, and none of the existing lightbox scripts did what I wanted them to do. It was really fun to build one on my own, so I thought I’d let you share in the excitement ;)

Let’s get started!

Whenever I develop something, I first take a couple of steps back and make a list of all the actions that I need to perform that together make the complete effect I want to achieve.

The actions that happen when opening a lightbox:

1. User clicks on a link designated as a lightbox link
2. A Javascript event handler picks up on it
3. Two extra elements get added into the DOM:
   • A 100% width and 100% height overlay
   • A container for the image/movie/page getting loaded
4. overflow-y:hidden gets added to the body to prevent scrolling
5. An ajax call is made to retrieve the href of the link
6. Javascript makes the loaded content visible and positions it as soon as it’s loaded
7. The Javascript does a return false to make sure the regular link doesn’t fire as well

jQuery, the library I used to develop the lightbox, makes it trivially easy, so lets start. Throughout the article, we’ll be working with this link:

<a href="http://kilianvalkhof.com/uploads/lightbox.jpg" class="lightbox">open lightbox!</a>

1. The event handler

$(".lightbox").click(function() {
	window.startOverlay();
});

“Find the elements with class “lightbox”, and if someone clicks on one of them, execute the function window.startOverlay.”

The only problem with the code above is that I don’t specify which link gets clicked. So we have to get the contents of the href attribute and send it along as a parameter:

$(".lightbox").click(function(){
	overlayLink = $(this).attr("href");
	window.startOverlay(overlayLink);
});

2. Get the DOM ready

As I said in the list above, I need two new elements, and i need to prevent the viewport from scrolling.

function startOverlay(overlayLink) {
	$("body")
		.append('<div class="overlay"></div><div class="container"></div>')
		.css({"overflow-y":"hidden"});
	…
}

Now all the needed elements are in the DOM and ready to be used. However, the newly made elements have no style yet, so we need to add some CSS to our stylesheet:

.overlay {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background:#000;
	opacity:0;
	filter:alpha(opacity=0);
	z-index:50;
}
.container {
	position:absolute;
	opacity:0;
	filter:alpha(opacity=0);
	left:-9999em;
	z-index:51;
}

The two odd things here are the fact that all opacity is set to zero, and that .container is way, way to the left. That is because the actual content hasn’t loaded yet, so we just hide it all for now.

We need to make the semitransparent overlay visible however, and for that we use a fade. (You can use any other animation too, but the fade-in just looks the best, IMO);

function startOverlay(overlayLink) {
	…
	$(".overlay").animate({"opacity":"0.6"}, 200, "linear");
	…
}

This tells jQuery to animate the opacity from the current value (zero) to 0.6, do so in 200 milliseconds, and have a linear transitions (part 2, next week, will look into some of the other possible transitions)

After this has happened, we need to load in the content to put in the lightbox.

3. The Ajax call

I’ll tell you a little secret. For the loading of an image, You don’t actually need an ajax call! You just add the image to the DOM and your browser downloads it automatically.

The “Ajax” bit is just this:

function startOverlay(overlayLink) {
	…
	$(".container").html('<img src="'+overlayLink+'" alt="" />');
	…
}

The overlayLink is the link of the clicked element that we added into the function as a parameter when someone clicks a link. It doesn’t work like this with web pages, but we’ll write something for that, next week.

4. Make it visible

We now have everything set for the grande finale: actually displaying the image!

We need only a little information: the width and height of the image. Then we position the container in the middle of the screen, and fade it in. However, we can’t just request it, It might still be downloading and then we get the wrong or no dimensions at all. So before doing anything, we need to check whether it has downloaded completely, and only then request the dimensions. Luckily, that is fairly easy:

function startOverlay(overlayLink) {
	…
	$(".container img").load(function() {
		var imgWidth = $(".container img").width();
		var imgHeight = $(".container img").height();
		$(".container")
			.css({
				"top":        "50%",
				"left:        "50%",
				"width":      imgWidth,
				"height":     imgHeight,
				"margin-top": -(imgHeight/2),
				"margin-left":-(imgWidth/2) //to position it in the middle
			})
			.animate({"opacity":"1"}, 200, "linear");
	});
}

The load function get executed as soon as the image has loaded fully. When the image is loaded, we get the right dimensions, position the image and, last but not least, make the image available with a nice fade.

5. return false;

Now that everything is successful, and you have a working lightbox, you just need to do one last thing: make sure the browser doesn’t also load the link itself!

$(".lightbox").click(function() {
	window.startOverlay();
	return false;
});

Done!

That’s it, now we’re done. We have a working lightbox and all our users are happy.

Not…?

…Oh!

Allowing the user to close the lightbox.

Of course, a user must be able to close an lightbox as well. This usually happens when someone clicks next to the image, so we’ll take that method for now. (We’ll expand on it in part 2.) The actions for closing a lightbox:

• A user clicks next to the image
• An event handler gets fired
• Javascript fades the image and the overlay out
• Javascript removes the elements from the DOM

If you’ve stuck around ’till here, I think you can manage the code at once:

$(".overlay").click(function(){
	$(".container, .overlay")
	.animate({"opacity":"0"}, 200, linear, function(){
		$(".container, .overlay").remove();
	})
});

and for the css, add cursor:pointer; to the .overlay element to give people a visual clue that they can click it.

Pretty easy, no? You can actually define multiple elements in your jQuery selector. Just like in CSS, you can do so with just a simple comma.

The only gotcha here, is that you need to make sure this bit of code is within your lightbox function (see the full example below to see what I mean) otherwise it will not get executed.

Full code

To see the full code put together, check out the Demo page.

Remember, next week, we’ll expand on this a whole lot more, including some very cool stuff like nice animations and multiple lightboxes! See you then! :)

a

Building your own lightbox - part 1

What’s up?

There is often a misunderstanding between designers and clients. Designers want clients to provide an overview of their business goals and client perception and apply their knowledge to make a design fitting with those goals. And clients, clients want more blue. Or yellow. Or mauve.

Dealing with design critique starts right at the beginning of a project. At that time, it’s best to confront a client with the way you work. what do you expect from them and what can they expect from you. I use a website requirements list that only touches on looks at just one question (asking if they already have ideas for the design themselves) and I’m considering taking it out. The rest of the questions are all based on their business goals. What do they want the website to achieve, what do they want their visitors to think about them, who do they want their visitors to be (and no, everyone is pretty much never a target audience). Then, the next question is…

Why

Clients say A, but mean B. You hear this a lot, and that’s because it’s true. There is, however, one question that will lead almost every client from A to B in a quick, painless way. Why?

Why happens when you craft a perfect design fitting to their every business goal and targeted at precisely their audience, and the client doesn’t like the colours. You ask them why they don’t like the colours. Perhaps he discussed his website with his wife, and she really liked hot pink. By explaining why the chosen colours fit with the clients business goals, and thus provide an advantage for them, you can help a client realise you want the best for his business, not the best for his (wife’s) personal taste.

By asking why, and allowing a client to explain his reasoning, you can show him, in a non-insulting way, that design is not about personal preferences.

Luckily, however, it might just be that a client has a perfectly valid business reason for wanting hot pink instead of whatever colour you chose. Being able to recieve design critique means that you can objectively decide whether the client is, indeed, right, and hot pink fits their business goals better.

Just because

ew. ew. If in any way possible, avoid clients that do not provide solid reasoning and arguments for their critique. If someone can’t tell my why they do or do not like something, I’m not listening to them. By asking the why question a lot at the beginning of a project you can easily filter these clients out. Filtering them out doesn’t always mean not taking them as a client. Sometimes, clients like this are really easy on design choices, and sometimes charging a lil’ more covers the frustration just fine ;)

This is the system I use to handle clients and design critique, What system or method do you use?

a

Why?

I don’t know a word of Spanish yet though, so it should be fun! (That’s not entirely true, but I probably shouldn’t go around saying Te amo, bella! to everyone…)

Design, design, design

During this period, my evenings will finaly not be filled with extensive client work, and I plan on finally, for the first time since the start of this blog in december 2006, create my own design. I figured that, If I’m being employed as a User Experience Designer, my own weblog should at least somewhat convey that ;)

I’ll be living in a city defined by Miro, Dali and Gaudi, so I’ll just have to keep my eyes open to get inspiration.

Meetup!

I don’t know any people in Barcelona yet (outside of Properazzi) and if you live there, I would love to get to know you. Send me a message though my Contact form or add me on twitter and we can go for a coffee or something :)

a

In Barcelona!

Delving into it

There are some more advanced rules attached to this:

• It only happens on elements in normal flow under each other.
• It never happens on horizontal margins
• It doesn’t happen on elements with a padding or a border between them
• It doesn’t happen on elements with position:relative; or position:absolute
• It doesn’t happen with floated or cleared elements

That’s quite a list of exceptions, isn’t it? I always use either a top or a bottom margin, never both, so I wasn’t aware of the phenomenon until Wilfred Nas introduced me to it. It happens according to specification, but when you don’t expect it, it’s quite annoying.

There are plenty of use cases to imagine where you want to be able to control the collapsing of the margins, the biggest one being adjacent floats. Floats are often used to display a large number of blocks next and under each other. As we’ve seen in the above list, margin-collapse doesn’t work with horizontal margins or with floats, even though it would be incredibly useful, with developers now using negative margins on parent elements and other wierd tricks to get their layouts right.

Another use case would just be when you have positioned elements and still want margin-collapse on those elements.

Margin-collapse:collapse;

in CSS3 we can pick which border-model we want to use. In CSS2 we already have border-collapse. Why not allow front-end developers to control the margin collapsing as well? Just add a margin-collapse property with values similar to border-collapse: collapse, separate and inherit. perhaps you even want to add margin-collapse-y and margin-collapse-x, but that might be overkill.

Either way, I think it would be a useful addition to CSS and it sounds like a better option to give developers the choice than to spec it in one particular way. What do you think?

I write about useful ideas for CSS more regularly, under the title Random CSS Thought. Feel free to check them out :)

a

Random CSS Thought: Margin-collape CSS property

I am, obviously, talking about the Browser Wars of lore, between Internet Explorer and Netscape. At the time, both browsers were rapidly innovating and adding new features, — however, they both implemented different stuff, never the same thing in the same way. This caused web developers to develop for one of the two, two different sites for two browsers, or one sub-standard website that worked in both.

Luckily, This is all over now

Now, with increasing standards based browsers, this should be a thing of the past, right? wrong!

While we’re all piling over the new stuff the Big Four, Safari, Opera and Firefox (and, IE8, I ’spose. At least, some people. I think…) come up with, both in own ideas and in standards support, there is an increasingly divergent pattern visible.

It seems that with every new nightly build, Safari (Webkit) adds a mindblowing new feature that’s still lacking documentation but oh my, it’s shiny and f-ing cool.

Opera, on the other hand, is hard on it’s way to be the first HTML5, CSS3 conforming browser. Oh, and for good measure, they added in pretty much every other standards: (X)HTML, XML, XSLT, CSS 2.1, SVG 1.1 and JavaScript.

Firefox is, well, playing catch-up with the above two, adding a bit of the idea’s from safari, opera or, if you’re lucky, both. To be honest, it’s also making great headway on SVG.

And IE isn’t even trying, adding their own non-conforming microformats and just getting round to CSS2.1. well, whoop-dee-doo! Now go to bed and stay there, this is grown-up time.

What do you want to be?

Opera is heading towards ultra-super-duper standards support. Safari wants to take over the desktop. Firefox wants to integrate the desktop and the web. Internet explorer… just wants to play with the big kids.

But because of these goals (as they are perceived by me, anyway) all the browsers have different priorities in what features they support. This makes business sense, but it’s incredibly frustrating for developers. Web standards are of course supposed to be the baseline here, but in reality they are not, and standards-based feature support is just as diverse as home-grown innovations.

What can we do

The way I see it, for developers, there are a couple of options:

• We can stick with HTML4 and CSS2.1 for the foreseeable time, they’ve solid support nowadays
• We learn every feature of every browser and serve (slightly) different pages to each
• we give up and all start using plaintext.

Obviously the latter isn’t going to happen, but the first two look suspiciously like the choice the martyrs in the Browser Wars had to make. Only instead of two browsers, we now have four to support. (Being extremely positive and forgetting about IE6 and IE7)

This is not a choice we should make

I’m all right with different browsers having different goals, and them needing different features for it. However, we thought up standards for a reason. The reason being interoperability.

What I think needs to happen, is an even larger degree of openness concerning features. Not business goals, just features. With 50% of the Big Four being open source, this shouldn’t be hard. Both Webkit and Firefox already have a lot of documentation, and Opera, despite being closed-source, offers a tremendous amount of documentation as well. (Notice who’s missing…)

All I’m asking for…

…Is a single document, outlining the baseline support in the browsers for the coming years (increasing the baseline each year), agreed upon by the Big Four. That’s is all that’s needed to help mature the web in a developer and user-friendly way and will still allow each individual browser to focus on it’s business goals.

a

The great divide