As you might already know, Webkit has introduced support for css image masks. That didn’t come off as a real surprise, considering the stuff they’ve been up to recently.

I’ve been meaning to try and do a css-only image mask, but to no avail. It seems that the easiest way to do it does not work in Firefox: adding an :after pseudo-element to an image tag. Why? Because the :after pseudo-class generates a non-parsable html element that will be inserted as the last child of the element, in our case, the image tag. Which doesn’t really like children.

My second choice was floats, by the way.


.mask{
height:117px;
width:114px;
float:left;
margin-left:-114px;
}
.img{
float:left;
}

Here’s a nitty-gritty example. You can use the URL’s if you want to get the images. They work. But careful, mask.gif is totally transparent. Just right-click somewhere in the top left corner to save it.

If, for some reason, you’re trying to put a relatively positioned element inside a container element that has overflow:scroll, the child element will display in IE as though it had position:fixed. The way to fix this is by giving a position:relative to the container element as well. I think this is important from two standpoints: the bug has been preserved in IE7, and you can use it to hack your way to position:fixed cross-browser bliss (or so I hear).

Just thought I’d share. Via a forum reply that belongs to Jack Sleight. Thanks Jack!

Learned this the hard way: you cannot use underlines as the first character of a class name. This is very true. In fact, only IE6 has problems with it, but tell me of a time when that wasn’t enough. I thought I’d mark my utility css classes with a forward underscore (the clearfix and some default floats), but bloody IE6 does not accept that. So, I decided to go look for another character.

After Joe commented on my initial post (which was incomplete and very wrong), I did some soul-searching and started testing what characters you can use in a css class name.

Apart from the dash and the underline, you cannot use anything else, even if it’s other than the first character. The validator doesn’t say anything, but the browsers don’t apply the class. You can use numbers though, but not at the beginning. Oh, and they cannot be escaped anymore (by using the backslash \) as the css1 spec and the current official validator suggest.

So, the conclusion:

use a letter as the first character and remember that css is case sensitive

use letters, numbers, underscores and dashes for the rest of the characters, and still remember that css is case sensitive

When IE6 fades away, we will be able to use underscores as the first character too.

*thanks to Joe for pointing out my initial errors and for the impulse to do this “study”.