Creating 3d navigation buttons with CSS is not a difficult task, provided that we understand a basic principle: using outset
or inset as values for the border-style property leads to inconsistent results across browsers,
especially in Internet Explorer. So we have to find another way. Given that a 3d effect is an effect usually achieved on desktop
environments by using certain color combinations, we're going to follow the same approach here. Thus, given the following
markup:

The key aspect here are the different values given to the border-color property: by combining different
border colors we can actually achieve the desired result by giving to our buttons the appearance of 3d images.
You can see the final result here.

The approach followed in this video is totally wrong. This guy uses several div elements to create all the items of the navigation menu instead of using an unordered list. Further, he uses classes instead of IDs and cascade. Too bad.

rule in the default UA style sheet. But not all browsers get the above alignment in such a way, as demonstrated by what follows.

The following test case has text-align: left added to the row element (tr) including the th.

If an UA had the rule (1) in its default sheet, than the above test case should not display differently from the first one, even if text-align is a property which "inherits", because when a property is "directly" applied to an element, then inheritance does not trigger. See CSS 2.1 section 6.1.1: inheritance is taken into account only if the cascade does not result in a value (in other words: inheritance has always less "precedence" than a specified value in the cascade).

So, according to the above, with a rule (1) in the UA sheet any text-align applied on an ancestor of a th should have no effect on the th. In IE8 indeed the rendering of the above two test cases is the same. However, most other browsers (Firefox, Opera, Safari, IE<8), probably for compatibility with existing pages, behave in a way that text-align applied to an ancestor of a th has an effect on the th itself. This means that they behave differently than having a rule (1) in their UA sheet. This behavior is probably not expressible in terms of standard existing CSS properties and values.

A bug filed for Gecko, about it allowing text-align on a parent to "override" the centering of a th, has been marked as invalid. Appendix D is indeed not normative, so browsers are not required to behave exactly in that way.

We basically get the coordinates of each link of our navigation menu and then we absolutely position our tooltip according to these coordinates.
The tooltip we'll be showed on hover and hidden when the user moves his mouse away from a link. Note that we've inserted contextual messages depending on the text content of each link. You can see the final result here.

Parsing a JSON Flickr feed with jQuery is not so simple as it could seem, because this requires a firm knowledge of two factors: the feed URL and the correct syntax to use with the jQuery's getJSON() method. First the URL, that must be in this form:

where id is your Flickr ID and lang is your preferred language. However, the key parameter is jsoncallback.
Without this, your script will fail and it'll return null. Second, the syntax of the jQuery's method:

$.getJSON(url, function(data){});

where data is a reference to your JSON object. Now, let's test something:

Facebook social buttons are an easy way to insert Facebook's features into your website. If you connect to this page, you get for example the "Like" button that we're going to use in this tutorial. The point is: either you choose to use an iframe or FBML (Facebook Markup Language) you'll surely stumble on many validation errors, especially if you're using XHTML 1.0 Strict. So it's better to follow another approach, by using JavaScript and jQuery. So, given this markup:

Since 2001 I can't sleep very well. I have horrible nightmares every night. Maybe this is somewhat related to
insomnia, although this happens to me even when I sleep regularly. I usually wake up at 3 or 4 AM, I go online and try to get back to sleep. Most of my nightmares are about my future, my life and the existence of my relatives and friends. Sometimes I watch them die, other times they blame me for something I didn't do or say or even they try to hurt me, though this last aspect is mainly related to people whom my brain generates by summing up bits and pieces of memories from my childhood. Sometimes it's like living in a movie, generally a fantasy movie where everything seems fine at the beginning and then the whole story or plot turns into a nightmare. I wake up soaked with sweat. Of course I tried almost everything to prevent this from happening, for example by avoiding stimulant drinks or smoking and the like, but it didn't work. Nightmares come back. Every night. Even in the afternoon, when I try to catch up with sleep, I have nightmares. That's why I'm so prolific on this blog. It's a way to encapsulate anxiety. It's a way to forget that it will be night again. Every day. Every night.

Creating a Wordpress theme with CSS is rather interesting. First of all, we start with the basic Wordpress theme in its naked form. Then we need to apply some styles in order to create our Wordpress theme with CSS. Let's start with some basic styles:

Now our template has been normalized, that is, we've only set some basic styles in order to create a common ground from which we can start building our layout. Now we can move to more complex things. Let's start with our main container:

You can see the result here. Notice the min-height workaround: some platforms may use a different font type and size, so this trick ensures a cross-platform compatibility. Now it's time to position our elements:

As you can see here, we've put our main content to the left and the sidebar to the right by using floating. Our footer will appear under both columns because of the clearance applied to it. Let's move on to our main content now:

Adding a W3C validation icon to our pages can be quite a tedious task. So why don't we add such validation icons by using JavaScript? For example, given this demo page, we have a basic Wordpress template with the following two links:

Basically, we loop through each link on the page and if its href attribute contains either the string
http://validator.w3.org/ or the string http://jigsaw.w3.org/, we change its content via the innerHTML property by setting it to an image that contains our icon. You can see the final result here.

To start with Ajax and jQuery, we need a basic layout template like this. What we want to do is pretty simple: when the user clicks on the "View all my O'Reilly books" link, we fetch the book list will all the cover images and information using Ajax and jQuery.

The question that led me to this post was: how can I manage complex XML namespaces using jQuery? Fortunately, I found
this article by IBM where everything is explained in greater details. To be honest, I don't see the point in writing more here, because this article is really exhaustive. Instead, when I'll have more spare time, I'm going to test something. The article is also available in PDF format and you can download all the examples too. Hope that helps.

As you can see here, our document is without any style information attached to it. The first thing we're going to do is to use XSLT to transform the XML structure into an HTML one. To accomplish this task, first we need to link an XSLT stylesheet to our document:

In the code above, we've inserted a link element in the main xsl:template element. Now our
XML document will be stylized according to the CSS rules specified earlier in the post. You can see the final result
here.

Tipping Firefox across the chasm is an excellent post written more than five years ago. In this post, the author analyzes the rising of Firefox in the browser market share, listing some of the causes that made this possible. However, there's one point that actually is worth of mentioning: performance. In fact, Firefox is not considered under this aspect but only as an alternative to the obsolete Internet Explorer 6. Time changes everything. After five years, new browsers have been released, and a key aspect that now seems to be on the top of any browser wish list is actually performance. Take Chrome for example: it's fast, maybe it's one of the fastest browser on the market. Safari is fast too, just as Opera. Internet Explorer is just filling (or try to fill) the gap with the next release (9). And Firefox? Actually, it's much slower than Chrome, Opera and Safari. But why performance? Because in the meantime users got faster connections, so they want to see fast responses when they surf the web. A website must load in a snapshot. Period. I know that this is utopia from a mere point of view of a web developer, but the success of a browser is often determined by its users who, of course, are non-developers if they're considered as simple percentages. In other words, simple users can effectively push a browser on top or, conversely, let it falling down to minority. This is something that Firefox developers must seriously take into account. In simple words: be quick or be dead.

Although XML is not the fastest data exchange format in use with Ajax, there are a couple of gotchas that we have to bear in mind when parsing XML documents. For example, given the following XML document:

This may turn out to be very expensive, because every time you need to access a child element and its contents you have to perform the same tasks. What if there are several different XML element names? Simply put, performance will suffer. Instead, we can use XML attributes to minimize the impact of the DOM access:

Styling breadcrumbs (that is, breadcrumbs navigation) with CSS is not so difficult as it could seem at first glance, provided that we bear in mind semantics while building up our base markup. The best choice, in fact, is to use nested unordered lists in order to keep the directory hierarchy intact. Here's how our markup would look like:

Why am I writing all the markup on a single line? It's just to prevent Internet Explorer 6 from applying some of its weird calculations of white-space among the various list elements. Notice how I also added some classes in order to apply different styles on each breadcrumb level. In this case, I'm willing to apply only a single background image, but in an ideal scenario you could apply different background images on each level. Here's the CSS:

We've turned every block level and list-item element (ul, li) into an inline element so that our items will appear on a single row. Then we've added a background image to each link. However, Internet Explorer 6 and 7 need the following code:

This class has only a few basic methods as its members, because it's only for a demonstrative purpose. The actual validation process is dispatched to the script that will implement it, which is as follows:

As you can see, the above function checks only if all the field values are in the correct format. If not, it show an error message on each field and prevent the form from being submitted. You can see the final result here.

There are a couple of problems related to the handling of tests in the W3C CSS Test Suite that I'd like to outline here, providing also some hints and suggestions about how to solve them.

Lack of a CMS

Basically, every contributor must upload his/her files through SVN. After uploading them, an email is sent to the maintainer of the suite with all the details of the upload or the changes to an existing file. Further, the maintainer must review the file, modify it, and finally flag it as approved. This is a really long and tedious task. If the CSS Test Suite used a CMS, things would be a lot faster, because:

the CMS would provide the basic template to build a test case, allowing the contributor to edit it as it sees fit; then the template would be saved as a static file with a given URL, so that it can be further accessed, modified, moved or even deleted

the CMS would automatically detect ill-formed markup and the like

the CMS would allow the contributor to choose between all the additional files approved by the CSS Test Suite guidelines

the CMS would mark the test case as pending, email the maintainer with a link to review the test file

the CMS would allow the maintainer to keep all files and directories more organized

Lack of references to each section of the specifications

As it's today, the W3C CSS Test Suite guidelines don't provide direct links to each section of the CSS specifications, simply because they give only generic information about how to build a test case. It would be better, instead, to provide a classification of the possible test cases by splitting them into categories (e.g. fonts, syntax, etc.) and insert a direct link to each chapter of the specifications for a given category.

My work at Opera Software is with the Developer Relations team - we work to evangelize web standards and emerging technologies.

Opera is surely one of the most standard-compliant browsers on the web. Do you think it's really hard to be standard-compliant
for a browser?

Yes, to be standards compliant means to try and compete in a world where most sites and applications were built with the best options of the day - which means they weren't always standards-oriented.

The W3C promotes interoperability between user-agents. Do you think that interoperability is a necessary requirement?

I believe interoperability it the first and foremost requirement. It is the essence of the Web.

You're also member of the WaSP. What are today the main goals of this association?

I left WaSP a few years ago to work directly with browser companies. First Microsoft as a consultant, and now cozy at home with Opera as an employee. I could no longer be a leader at WaSP while taking money from browser vendors. A clear conflict of interest. So I left the group, although I am considered "Emerita" and I'm very proud of that. Today, the main goals of the association is education and global awareness via InterACT and global bridges for translations.

W3C specifications are sometimes hard to understand for web developers (as it's often been said). Do you think that it would be necessary to write some guidelines that explains what every single specification is meant to or, alternatively, a guide for every
specification?

Yes, I am absolutely certain that an outreach to from the W3C to "in-the-wild" designers and developers is necessary for the survival of our entire industry. The separation is detrimental. We very much need to "Mind The Gap"

Finally, you're one of the most influent women on the web. What do you think the role of women is in today web?

Women, men, everyone of any identity has something to contribute to the Web. Why? Because the Web is essentially human. Whatever we are will be made manifest in the Web. Our beauty, our hatred, our goodness, our cruelty, our confusion, our clarity, our wars and our ultimate peace.

In this page, we've simply added an effect on hover by using the :hover pseudo-class on li elements. However, since Internet Explorer 6 supports this pseudo-class only on links, we have to use a couple of JavaScript lines to make it work:

You can see this basic page here. After setting our base template, we can start to add a little more interaction by providing a simple JavaScript function that will handle the form processing (of course we're doing it with JavaScript only for demonstrative purpose). Before this, we need to add some styles to our stylesheet:

We’ve released another Python library: Bleach, for sanitizing HTML and automatically linking URLs in text, that we’re using on addons.mozilla.org and support.mozilla.com. It’s based on html5lib, which we chose because of its foundation in web standards and its active development community. Bleach is available on Github and PyPI.

Bleach uses a tree-walking approach to automatically link URLs that I think is pretty interesting. I wrote a short post outlining the method.

Column order with CSS has been an hot topic for quite a while. Basically, with CSS we can modify the source code order either with relative positioning or with negative margins. Anyway, this involves some tedious calculations in order to get the desired result. So why should we not make life easier by using just some lines of jQuery code?

Let's start with a simple three-columns layout with header and footer:

First, we've cloned the first column in source, then we've removed it and finally we've inserted it just after the second column in source, so that now the first column is placed just in the middle of our layout as the central column. Do more with less!

Complex forms with CSS can be quite difficult to stylize because of the many existing discrepancies across browsers. Let's say that we want to stylize a form for ordering books. We could start with a markup like this:

Why a table? It's quite simple to understand: in this form, data are organized in name/field pairs (name, title, price, etc.), so the most semantical way to mark up this is using a table. Of course not all data is contained within a table, so this is another issue to take into account. Here's our CSS styles:

The secret here for achieving a good consistency across browsers is to explicitly specify a font size and family on form elements. By doing so, we can actually have proportional form elements that scale gracefully along text.

This post describes a new way of clearing floats by using CSS table
values. The technique provided below is inspired by the famous article of John Gallant and Holly Bergevin
on the Easy Clearing method.

As you will see, the floated element overflows its container because there is no clear property applied
to the #clear element. We can easily overcome this problem by adding a special class to the container with
a single CSS declaration:

This solution works well in all supporting browsers (Internet Explorer 8, Firefox, Opera) with the exception of Webkit-based browsers (see later in this post). According to what is stated in the CSS specification, a table computes its height in a peculiar way.
Specs say:

The height of a table is given by the 'height'
property for the 'table' or 'inline-table' element.
A value of 'auto' means that the height is the sum of the row heights
plus any cell spacing or borders. Any other value is treated as a minimum height.
CSS 2.1 does not define how extra space is distributed when the 'height'
property causes the table to be taller than it otherwise would be.

In short, a table will always stretch in height to make room for the contents that actually determine the computation of
its minimum height.

Fixing Webkit's problems

In Safari and Chrome, the element after the float is wider than usual, This is probably due to the fact that this element is actually a block-level element, so its width is computed differently.
Keep in mind that once declared an element as a table, its width is partly determined by the table-layout property that
is set to auto by default. Anyway, Safari and Chrome need only the following declaration that will be applied to the
affected element:

#clear {
display: table;
}

We've simply turned this element into a table, so that its width is computed correctly. We can give separate styles to Safari
and Chrome by using JavaScript, as shown below.

This JavaScript snippet search for an occurrence of the string AppleWebKit inside the
userAgent property of the navigator object. If there is a match, then it creates
a link element that points to a style sheet and attaches it to the head element.