Web Directions

CSS and other Presentation technologies

• Consistency across browsers
• Development strate­gies for mul­ti­ple browsers
• Quirksmode
• CSS Specifics
• Other browser based graphics
• Devices other than PCs

There’s lit­tle doubt that CSS has become the favored way by which the sig­nif­i­cant major­ity of sites are styled (Opera’s MAMA project found over 80% of sites searched used CSS). In this sur­vey we wanted to look into philoso­phies and prac­tices, rather than sim­ply the sta­tis­tics of CSS use.

Consistency across browsers

One of the sig­nif­i­cant debates in web devel­op­ment today is the extent to which sites should “look the same in all browsers”. In our first ques­tion in this sec­tion we asked “Which of the fol­low­ing best describes your web design phi­los­o­phy?” with three pos­si­ble answers.

• 25% of respon­dents answered “Pages should look as near to iden­ti­cal as pos­si­ble across browsers”
• 57% answered “Consistency across browsers is impor­tant, but I use fea­tures sup­ported in newer browsers pro­vided they don’t cause prob­lems for older browsers”
• A lit­tle under 10% answered “Pages might look sub­stan­tially dif­fer­ent in dif­fer­ent browsers, but pro­vided they look accept­able in all browsers, con­sis­tency is of no great concern”

For 70% or more of respon­dents, visual con­sis­tency is still an impor­tant goal to design. 25% of respon­dents striv­ing for sites to look as sim­i­lar as pos­si­ble across browsers is per­haps sur­pris­ingly high, par­tic­u­larly among this sam­ple of respon­dents. But the mes­sage of “pro­gres­sive enhance­ment” is clearly tak­ing hold among devel­op­ers and design­ers. This ques­tion will be an inter­est­ing one to track over the com­ing years, as non PC web use becomes increas­ingly mainstream.

Development strate­gies for mul­ti­ple browsers

As dis­cussed ear­lier, one of the prin­ci­ple chal­lenges for devel­op­ers and design­ers is man­ag­ing ren­der­ing across mul­ti­ple browsers. For sev­eral years now, there has been the belief that much of this chal­lenge comes from the dif­fer­ence between Internet Explorer, and newer, more stan­dards focussed browsers. In the next ques­tion, we asked “Which of the fol­low­ing best describes your approach to devel­op­ing for mul­ti­ple browsers?”

Essentially no one answered “I only develop for IE”, a strat­egy prob­a­bly still some­what preva­lent in the wider web devel­op­ment indus­try. The answer might well have been quite dif­fer­ent even a few years ago.

Only 5% answered “I develop for IE first, and then make sure my pages work in other major browsers” — an answer too which would almost cer­tainly have been higher even a cou­ple of years ago.

Over three quar­ters of all respon­dents answered “I develop to W3C stan­dards, and then work around IE”, demon­strat­ing the impor­tance placed on stan­dards by this sam­ple of respondents.

Surprisingly, nearly 10% of respon­dents (9.4%) answered “I develop to W3C stan­dards and expect browsers to sup­port these” (a per­cent­age close to the per­cent­age who answered that they do not test in Internet Explorer 7). It’s inter­est­ing indeed among these respon­dents that twice as many ignore Internet Explorer alto­gether, than design for it first and then work around prob­lems with other browsers.

Quirksmode

In a related ques­tion, we asked respon­dents whether they used “quirksmode” when devel­op­ing sites. This was a rather open ques­tion, as var­i­ous browsers have their own quirksmodes. Overwhelmingly, respon­dents either don’t use quirksmode (at least not know­ingly), or aren’t aware of what it is. This tends to con­firm the responses from the pre­vi­ous ques­tion — respon­dents are not focussing pri­mar­ily on less up to date browsers, but on stan­dards based development.

CSS Specifics

The next set of ques­tions in this sec­tion focussed more on the specifics of how respon­dents use the tech­nol­ogy of CSS. We wanted to get a sense of what they were using CSS for, and which aspects of CSS they were using. We also wanted to get a sense of which more exper­i­men­tal aspects of CSS, such as CSS3, and some browser exten­sions to CSS, devel­op­ers are using.

Just on 90% of respon­dents said they use CSS for fonts and text style, and even slightly more for page lay­out. This is con­sis­tent with the reply of 10% of respon­dents who answered they use tables for lay­out. In Addition, nearly 70% of respon­dents use print style sheets (though only a hand­ful actu­ally test these!)

Around a quar­ter of respon­dents answered the ques­tion “Describe what else you use CSS for” — and answers ranged widely. You can see all these answers in the down­load­able CSV results.

Together with responses to a num­ber of the ques­tions in the markup sec­tion, it’s clear that the prac­tice of sep­a­rat­ing con­tent and appear­ance using HTML and CSS is very well estab­lished now, at least among this sam­ple of devel­op­ers and designers.

Selectors

Delving more deeply into CSS use, we asked Which of these types of selec­tor do you reg­u­larly use?

80% or more use HTML ele­ment, class and id selec­tors, with nearly 80% (78%) using descen­dent selec­tors. This last result is sur­pris­ingly high, and reflects a grow­ing sophis­ti­ca­tion in the use of CSS from even a few years ago, where class and id were exten­sively used as hooks to add styling to pages. While class and id are still exten­sively used, the wide­spread use of descen­dent selec­tors prob­a­bly reflects a decrease in the over-​​reliance on these selectors.

Only 27% of respon­dents use child selec­tors, which have been of lit­tle use except as hacks to work around short­com­ings in Internet Explorer until the advent of IE7, the first ver­sion of that browser to sup­port these selectors.

A lit­tle over 20% of respon­dents answered the ques­tion “What other CSS selec­tors do you reg­u­larly use?”. Unsurprisingly, there is a large range of answer, with attribute selec­tors, state selec­tors (such as :hover), and var­i­ous CSS3 selec­tors such as first-​​child, all represented.

Overall, the core CSS1 selec­tors are those widely used, as they have been for sev­eral years, with more advanced or recent selec­tors con­sid­er­ably less widely used. All answers can be seen in the CSV results.

CSS3 and Experimental CSS

2007 and 2008 has seen per­haps the biggest flurry in inno­va­tion in CSS sup­port since the release of IE5 for the Mac. We’ve seen the sup­port of var­i­ous CSS3 prop­er­ties, and exper­i­men­tal CSS in Safari, Firefox and Opera, and even some addi­tions to CSS sup­port in IE8. But how much are devel­op­ers and design­ers tak­ing advan­tage of these fea­tures? Not as yet over­whelm­ingly, with only 22% answer­ing yes to the ques­tion “do you use any CSS3 or exper­i­men­tal CSS prop­er­ties, such as CSS tran­si­tions, trans­forms, ani­ma­tions, shadows?”

We fol­lowed up by ask­ing “Which such prop­er­ties do you use?”. 20% of the respon­dents, most of those who replied yes to the pre­vi­ous ques­tion, replied to this. The full results are in the down­load­able CSV, but here are some of the results. Of those who answered that they use CSS3 and exper­i­men­tal CSS

• About 40% use border-​​radius
• around 25% use text shad­ows (sur­pris­ing low, as this has been sup­ported in Safari for sev­eral years, but only recently in Opera, and will be in Firefox 3.1 when released) — though another 25% sim­ply replied “shad­ows” which might mean text shad­ows, box shad­ows or both.
• About 10% use box-​​shadow, opac­ity (sup­ported in cur­rent ver­sions of Safari, Firefox and Opera), as well as the Safari-​​only pro­posed CSS stan­dards tran­si­tions and transforms
• About 5% use RGBa colors

Fonts

The wide­spread use of image replace­ment tech­niques (about the use of which we didn’t ask, but which now wish we had), demon­strates that design­ers and devel­op­ers have been chaf­ing at the lim­ited range of fonts avail­able for web design for some time.

The CSS2 @font-face rule, which enables link­ing to online fonts, has been avail­able for many years in IE, although only recently in Safari, and only in beta ver­sions of Firefox 3.1, and alpha ver­sions of Opera 10. Despite this, only 4% of respon­dents answered that they use this fea­ture of CSS. Of those, all but 1 link to Truetype fonts (sup­ported by the browsers other than IE), with only 1 exclu­sively link­ing to EOT fonts (sup­ported only by IE), and 6 to both EOT and Truetype fonts.

It’s most likely too early to draw many con­clu­sions, but the fact that 4% of respon­dents are using font link­ing is higher than might be expected. Given that they are over­whelm­ingly link­ing to Truetype fonts (only sup­ported by Safari among ship­ping browsers, and that for only some months in 2008), over EOT fonts (sup­ported by Internet Explorer for sev­eral years, and recently pro­posed as a W3C stan­dard by Microsoft) by a fac­tor of 7:1, this may indi­cate that it is sup­port in Safari which is dri­ving the adop­tion of this tech­nol­ogy among respon­dents. This will be an inter­est­ing trend to fol­low, par­tic­u­larly when Firefox 3.1 ships early in 2009. Given Firefox’s high upgrade turnover, by mid 2009, more than 25% of all browsers in wide­spread use may well sup­port @font-face link­ing to Truetype fonts (with all ver­sions of IE sup­port­ing the same for EOT fonts). It will be inter­est­ing to see what per­cent­age of respon­dents are using font link­ing at the end of 2009.

Other browser based graphics

In this sec­tion, we also asked respon­dents whether, and how they used SVG, and Canvas, two other widely sup­ported (in browsers other than IE) stan­dards or pro­posed stan­dards for web graphics.

SVG

Three quar­ters of respon­dents replied in the neg­a­tive to the ques­tion “Do you use SVG”. 14% replied “a lit­tle”, while a lit­tle over 1% replied “extensively”.

Canvas

The can­vas, part of the pro­posed HTML5 stan­dard, and sup­ported in cur­rently ship­ping ver­sions of major browsers other than Internet Explorer, sur­pris­ingly fared even less well than SVG in terms of adop­tion, with 80% of respon­dents not using it at all, 9% a lit­tle, and less than 1% extensively.

Given the focus by a num­ber of high pro­file libraries, and experts on the can­vas over the last cou­ple of years, its low adop­tion is some­what sur­pris­ing. It is how­ever young, and as yet not fully stan­dard­ized, com­pared with the nearly decade old SVG. Tracking the adop­tion of Canvas, and the adop­tion of SVG over the com­ing year or two will be an inter­est­ing trend to follow.

Devices other than PCs

The last ques­tions we asked in this sec­tion related to the devices other than PCs which respon­dents opti­mized their sites for.

Just on a quar­ter of respon­dents said that they “optimize[d] [their] sites for devices other than laptops/​PCs”. When asked which devices

• around 15% responded “mobile”
• around 10% specif­i­cally men­tioned the iPhone
• about 1% men­tioned Blackberry specifically
• only 3 in total men­tioned the Android
• 5 men­tioned the Wii
• about 2% men­tioned print (although 70% responded to an ear­lier ques­tion that they use CSS to style the print appear­ances of pages)

In all, the focus of respon­dents is still very much tra­di­tional web brows­ing plat­forms — lap­tops and PCs. There’s lit­tle doubt that the mobile Safari plat­form has sig­nif­i­cantly raised the num­ber of devel­op­ers focussing on mobile ver­sions of their sites and appli­ca­tions, but it’s also clear that the day when such site ver­sions are com­mon is still some time off. It will be inter­est­ing to track this ques­tion in com­ing surveys.

Next

Next we’ll look at how respon­dents are using JavaScript, Ajax and the DOM.