The style sheet that accompanies this page displays the title with a text shadow effect when one of several capable modern browsers is used, e.g. Firefox, Opera, or Safari.
Many webmasters would use a .gif or .jpg image to achieve the shadow effect. Using a Cascading Style Sheet (CSS) saves bandwidth, gives a faster download, and for large sites can lead to easier maintenance. It also allows the user to resize the heading in browsers that allow that.
The effect is obtained by use of CSS generated content. Less capable browsers, e.g. Internet Explorer 6 and Internet Explorer 7, do not implement generated content and therefore do not give the text shadow effect.
To protect older browsers from giving a false or scrambled display, in the style sheet the CSS rules that give the text shadow version of the title are selected by a combination of an adjacent sibling selector, a :first-child pseudo-class, a child selector, an [id~="shadowpage"] attribute selector and a :before pseudo-element. Also, the style sheet includes Tantek's inline high pass filter, i{content:"\"/*"}. Only browsers that can cope with all of those hurdles will see the rules that define the text shadow version of the title. Less capable browsers will not see those rules and therefore cannot be confused by them.
The idea is that browsers that are modern enough to deal with all of the hurdles will also correctly implement the generated content. Older browsers will display a plainer version of the title in accordance with other CSS rules that are in the style sheet.
Of course, there are many buggy browsers out there so there is no guarantee that every single browser that copes with the several hurdles will also cope with generated content correctly. But my testing shows that Firefox, Opera and Safari do. The CSS hurdle technique seems much better than using Javascript browser sniffing which nowadays is unreliable. It also has the advantage of not requiring maintenance when new browsers appear: they automatically will, or will not, give the text shadow, according to their capabilities.
This idea of giving a good display to moderately capable browsers such as Internet Explorer 6 and Internet Explorer 7, and an enhanced version to even more capable ones, seems quite attractive.
Enhancing the title as described above isn't really all that important, but it serves to illustrate the principle of enhancing the display given by more capable browsers without spoiling the display given by less capable ones.
Copyright © 2007 by Peterre. All rights reserved.