A WebKit primer - part 1

Normally when you are designing a public webpage, you have to be really careful to make sure that it works in a number of browsers. Namely, FireFox, Safari, Chrome, Opera, IE 8, IE 7, and IE 6. The various versions of Internet Explorer are the worst because they are the most popular, yet also the most varied and broken. This forces you to use a very limiting subset of CSS and build up an encyclopedic knowledge of quirks in each browser.

However, there are a few times in a web developer's life when he or she is able to cast off these chains and focus on a specific browser. In our case, we are using WebKit to render all of Overgrowth's UI, thanks to the Awesomium library, built by the amazing AJS (accept no imitations).

WebKit is an amazing rendering engine, and what I'd like to accomplish in this article is give you a run down of various awesome features the WebKit rendering gives you with the use of an example: our chat UI.

This is actually relatively easy to make in WebKit, including the fancy animation effects (scroll down to see an animated gif).

First of all, all of the bubbles start out as a transparent border-image, like so:

-webkit-border-image: url(bubble.png) 7 10 12 10 stretch stretch;

Border image seems kind of unusual at first, but it is one of the most useful things in CSS 3. I will leave all of the specifics of how it works for another post, but basically it enables you to specify an image and a set of coordinates as seen above, and WebKit will deduce the four corners and four borders for your image. You can choose to either repeat or stretch the borders which means that your element can resize however you want and the borders will not be mangled. Pretty good for a single CSS definition.

Notice how the bubble can seamlessly grow both horizontally and vertically

Next, I need to give each bubble a color. This is easy, thanks to WebKit's ability to specify gradients as background colors. To convert the transparent border-image shown above into the green colored bubble, it takes a single line of CSS.

background: -webkit-gradient(linear, 0% 0%, 0% 100%, to(rgba(43, 128, 0, 0.75)), from(rgba(169, 255, 127, 0.75)));

The text has a small white shadow to help legibility, with text-shadow:0 1px 0 rgba(255,255,255,0.2); and its fill opacity is reduced to 75% with -webkit-text-fill-color:rgba(0,0,0,0.75);

Long usernames are truncated seamlessly with an ellipsis with text-overflow: ellipsis;

If the text gets piled up too high before it has a chance to disappear, it gracefully fades out. To get this effect, I use the CSS mask property. This lets me specify a mask to finely control an elements transparency like so:

-webkit-mask: url(mask2.png) content, url(mask.png);

Finally, the coolest part of the chat system is the animations.

These are created with WebKit's CSS transitions. I will leave that for another post though. There are still many more features I'd like to run through and explain in more detail. What kind of WebKit tutorials would you guys find most useful?