This article contains 3804 words.

CSS and Presentation | Web Directions

• About the Survey
• The Audience
• Operating Systems and Browsers
• Markup
• CSS and Presentation
• JavaScript and the DOM
• Rich Media
• Server tech­nolo­gies
• The Cloud
• Conclusions and predictions

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

The chal­lenge of con­vinc­ing web design­ers and devel­op­ers that CSS, rather than pre­sen­ta­tional markup, is the bet­ter approach to devel­op­ing for the web has long since been won. In this sec­tion of the sur­vey, we tried to get an under­stand­ing of just how devel­op­ers are using CSS to this end, and their under­ly­ing philoso­phies about pre­sen­ta­tion for the web.

Consistency across browsers

One of the ongo­ing ques­tions in web devel­op­ment is the extent to which sites should “look the same in all browsers”. As with last year, we asked “Which of the fol­low­ing best describes your web design phi­los­o­phy?” with three pos­si­ble answers.

This years results are markedly dif­fer­ent from last years. While a phi­los­o­phy of “pro­gres­sive enhance­ment”, long advo­cated by many stan­dards based web design­ers and devel­op­ers con­tin­ues to be the most widely held phi­los­o­phy, and remained the choice of around 60% of devel­op­ers (60.5% up from 57.4% last sur­vey), the per­cent­age advo­cat­ing that “pages should look as near to iden­ti­cal as pos­si­ble across browsers” dropped notice­ably, from around quar­ter in 2008 to 14% this time round. The more rad­i­cal con­cept that “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 con­cern” climbed from 9.5% to sur­pass the con­cept that pages should look nearly iden­ti­cal, with 15.7% hold­ing this view. The increas­ing diver­sity of devices with excel­lent web browsers may well hold the key to this change, and we’d expect to see the per­cent­age of respon­dents who hold this last view climb in future surveys.

Which of the fol­low­ing best describes your web design philosophy?

2010

AnswerCount%Pages should look as near to iden­ti­cal as pos­si­ble across browsers19714.05%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 browsers84860.49%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 concern22015.69%

2008

AnswerCount%Pages should look as near to iden­ti­cal as pos­si­ble across browsers30424.64%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 browsers70857.37%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 concern1179.48%

Development strate­gies for mul­ti­ple browsers

Developers need to con­tinue ensur­ing their sites and appli­ca­tions work accept­ably across a broad range of browsers, some, like IE6, many years old now, lack­ing in fea­tures intro­duced in newer browsers, and shack­led with bugs long since fixed in newer ver­sions. We asked respon­dents how they addressed this issue, with a par­tic­u­lar focus on their strat­egy for ensur­ing their sites work well in Internet Explorer, the most idio­syn­cratic of the widely used browsers.

Results for this ques­tion were very sim­i­lar to those for the last sur­vey. Standards based devel­op­ment comes first for almost all devel­op­ers, with most (77% both sur­veys) then work­ing around prob­lems with IE. Both years, around 10% claim to not bother work­ing around prob­lems in Internet Explorer, which may reflect a lack of con­cern for users of that browser, or the opin­ion that their sites will, if devel­oped using web stan­dards, work “well enough” in Internet Explorer.

Which of the fol­low­ing best describes your approach to devel­op­ing for mul­ti­ple browsers?

2010

AnswerCount%I only develop for IE30.21%I develop for IE first, and then make sure my pages work in other major browsers392.78%I develop to W3C stan­dards, and then work around IE107276.46%I develop to W3C stan­dards and expect browsers to sup­port these15010.7%

2008

AnswerCount%I only develop for IE30.24%I develop for IE first, and then make sure my pages work in other major browsers625.02%I develop to W3C stan­dards, and then work around IE94676.66%I develop to W3C stan­dards and expect browsers to sup­port these1169.40%

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.

When asked what they use CSS for, results from this sur­vey were almost iden­ti­cal to the pre­vi­ous, with around 90% of respon­dents say­ing they use CSS for fonts and text style, and even slightly more for page lay­out. As we com­mented in our last sur­vey 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.

Which of the fol­low­ing do you use CSS for?

2010

AnswerCount%Fonts and text style124688.87%Page lay­out125289.3%Print appear­ance96668.9%

2008

AnswerCount%Controlling fonts and text style111290.11%Controlling page layout111590.36%Controlling print appearance85168.96%

Next we looked more deeply into which CSS fea­tures respon­dents were using.

Selectors

As with the pre­vi­ous sur­vey, 80% or more use HTML ele­ment, class and id selec­tors, with nearly 80% (78%) using descen­dent selec­tors. 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.

37% of respon­dents use child selec­tors, up sig­nif­i­cantly from 27%, but very sim­i­lar num­bers also use CSS3 struc­tural selec­tors (like last-​​child), and attribute selectors.

Question 24: Which of these types of selec­tor do you reg­u­larly use?

2010

AnswerCount%HTML ele­ment selec­tors such as p {}119285.02%Class selec­tors such as p.classname {}119485.16%ID selec­tors such as p#idname {}114081.31%Descendent selec­tors such as p a {}112580.24%Child selec­tors such as p > a {}51636.8%attribute selec­tors such as a[href]52637.52%struc­tural selec­tors such as p:last-child52537.45%

2008

AnswerCount%HTML ele­ment selec­tors such as p {}102783.23%Class selec­tors such as p.classname {}105785.66%ID selec­tors such as p#idname {}99980.96%Descendent selec­tors such as p a {}96177.88%Child selec­tors such as p > a {}33727.31%

CSS3 and Experimental CSS

A lit­tle over a year before the cur­rent sur­vey, we asked respon­dents about their use of CSS3 and exper­i­men­tal CSS prop­er­ties. Back then, an over­whelm­ing major­ity (68%) didn’t. A scant 13 months later, in early 2010, and nearly half of the respon­dents (45%) said they did. The increas­ing sup­port for these fea­tures in Chrome, Firefox and Opera, in addi­tion to Safari which has some­what lead the way in this regard, cou­pled with a phi­los­o­phy of “pro­gres­sive enhance­ment” would seem to be dri­ving this rather dra­matic takeup of some­thing still not sup­ported by Internet Explorer.

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?

2010

AnswerCount%Yes63645.36%No61643.94%

2008

AnswerCount%Yes27422.20%No84368.31%

We fol­lowed up by ask­ing “Which such prop­er­ties do you use?”. Of those who answered that they use CSS3 and exper­i­men­tal CSS

• 48% (up from 40%) use border-​​radius
• Around 25% use text-​​shadows and box shad­ows, a sim­i­lar num­ber to those who replied “shad­ows” in last year’s survey.
• Transitions (12%) and trans­forms (8%), come in with sim­i­lar num­bers to last year (both around 10%)
• Use of opac­ity appears to have dropped off, from around 10%, to around 6%
• About 12% (up markedly from 5% )use RGBa colors
• Gradients (4%), ani­ma­tions (2%) and some­what sur­pris­ingly multi-​​column text (.6%) are all still in their ear­li­est stages of adop­tion, though sup­port for ani­ma­tion is cur­rently Webkit only, and gra­di­ents and multi-​​column text still only Webkit and Firefox.

2010

prop­ertyCount%text-​​shadow16626%box-​​shadow15825%border-​​radius30548%gra­di­ent244%multi-​​column4.6%rgba7412%opac­ity376%tran­si­tions8614%trans­forms508%ani­ma­tion132%

Fonts

Web design­ers and devel­op­ers have long been keen to expand the range of fonts avail­able, and have typ­i­cally resorted to image replace­ment, or flash based replace­ment tech­niques like SiFR, all of which are less than ideal solu­tions. The last 18 months or so have seen the wide­spread adop­tion of CSS font embed­ding tech­nolo­gies in Firefox, Webkit browsers and Opera. Internet Explorer has for many years sup­ported font embed­ding, but its use has always been legally chal­leng­ing, and frankly painful.

In late 2008, a very small per­cent­age of respon­dents (around 4%) responded that they use the @font-face state­ment. This num­ber has increased dra­mat­i­cally in the short period of time since, to nearly 23%. One rea­son is the increased sup­port for @font-face (now well sup­ported in all cur­rent browsers, other than Mobile Safari). Also, since the last sur­vey a num­ber of “fonts as a ser­vice” com­pa­nies, like Kernest and Typekit (dis­clo­sure, John Allsopp is an advi­sor to Typekit), cou­pled with increas­ingly lib­eral licens­ing of fonts by some foundries allow­ing link­ing to fonts have helped drive this adop­tion. We sus­pect that this trend will con­tinue, and font link­ing will be very widely adopted by respon­dents in the next 12 to 18 months.

Do you use linked fonts with the @font-face statement?

2010

AnswerCount%Yes32022.82%No93266.48%

2008

AnswerCount%Yes514.13%No106085.90%

When we last sur­veyed, there were essen­tially two font for­mats sup­ported by browsers for font link­ing. Webkit sup­ported link­ing to TrueType fonts only. Internet Explorer sup­ported link­ing to EOT fonts (as it had for a decade or so but not TrueType). Developers wish­ing to use the same font in these two dif­fer­ent browsers needed to link to two dif­fer­ent font for­mats. When asked in late 2008 which for­mats they linked to, only .6% (or about 10% of those who used font link­ing) linked to EOT fonts, while 4% (almost 100%) linked to TrueType fonts. With the addi­tion of @font-face sup­port in Firefox and Opera, not only has the over­all num­ber of devel­op­ers using font link­ing increased dra­mat­i­cally, but EOT (14% of all respon­dents) is approach­ing par­ity with TrueType (17%), while OpenType is the most widely sup­ported for­mat (17.7%). Even WOFF, a new, com­pressed for­mat cur­rently sup­ported only in Firefox, and only since Firefox 3.6 even has sup­port by over 7% of all respon­dents, nearly twice the per­cent­age who used font link­ing at all in the pre­vi­ous survey.

More than CSS3, or HTML5, it would seem the buggest change in the state of web design and devel­op­ment in the last 12 months or so has been the sig­nif­i­cant take­off in pro­fes­sional (as opposed to exper­i­men­tal) use of font link­ing. In late 2008, essen­tially not one of our respon­dents was using font link­ing except exper­i­men­tally. 13 months later, per­haps as many as one fifth are.

Which type of fonts do you link to?

2010

TypeCount%Truetype23716.9%EOT19313.77%WOFF997.06%OpenType24817.69%

2008

TypeCount%Truetype504.05%EOT70.57%

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”, up a lit­tle from 2008. 13% replied “a lit­tle” (down from 14%), while a lit­tle under 1% replied “exten­sively” (last year it was 1.2%). So, it would seem SVG use is hold­ing roughly steady. However, the increas­ing matu­rity of two libraries, SVGWeb from Google, which makes SVG work in Internet Explorer (which as of ver­sion 8 still doesn’t sup­port SVG) and Raphaël, a library which pro­vides a JavaScript inter­face for graph­ics that are then trans­lated into VML on Internet Explorer, and SVG on other browsers, cou­pled with the news that IE9 will (and already does in early release) sup­port SVG may see this change in the com­ing 12 months. If after IE natively sup­ports SVG it con­tin­ues to show this level of sup­port, one won­ders whether we’ll con­tinue to see it remain a very valu­able, but ulti­mately niche solution.

Do you use SVG?

2010

AnswerCount%No105775.39%A lit­tle18012.84%Extensively130.93%

2008

AnswerCount%No92374.80%A lit­tle17213.94%Extensively151.22%

SVG Libraries

This sur­vey we also asked respon­dents who use SVG which if any libraries they use. A sig­nif­i­cant pro­por­tion of the respon­dents who use SVG use one or more libraries, with Raphaël cur­rently the most pop­u­lar, and Google’s SVGWeb show­ing about half this level of pop­u­lar­ity. The dif­fer­ence may be instruc­tive. SVGWeb enables SVG markup to be used across all mod­ern browsers. Raphael lets JavaScript devel­op­ers cre­ate SVG based graph­ics pro­gram­mat­i­cally using its own graph­ics API, with­out the need to directly manip­u­late the SVG DOM. With SVGWeb, devel­op­ers write SVG. With Raphael, they use JavaScript to cre­ate the graph­ics. It may be that for many pur­poses, devel­op­ers pre­fer the JavaScript approach of Raphael.

Which, if any libraries do you use for cross browser SVG support?

2010

AnswerCount%Raphael745.28%SVG Web372.64%Other503.57%

Canvas

The canvas ele­ment, a much talked about part of the pro­posed HTML5 stan­dard, cur­rently sup­ported in ship­ping ver­sions of all major browsers other than Internet Explorer, is as yet still less widely adopted as SVG, but unlike SVG did see an increase in adop­tion between the two sur­veys. While 75% of respon­dents still don’t use the can­vas ele­ment at all (down from 80%), around 14% (up from 9%) do a lit­tle, and less than 1% extensively.

With Adobe hav­ing announced Flash (and Illustrator) to can­vas export in CS5, open­ing up the can­vas ele­ment to those other than pro­fi­cient JavaScript devel­op­ers, the can­vas ele­ment may see a con­sid­er­able uptake in sup­port. While pop­u­lar appli­ca­tions like Illustrator hav­ing SVG export options for some time don’t seem to have par­tic­u­larly increased the adop­tion of SVG, this may be because for most web based uses, a widely sup­ported, stan­dards based bitmap for­mat may be at least an accept­able graph­ics solu­tion. For web based ani­ma­tions, at present only Flash and Silverlight offer a widely sup­ported solu­tion, and many devel­op­ers may pre­fer the native can­vas for­mat to a plug-​​in based solu­tion. While IE9 has yet to announce can­vas sup­port, 3rd party leaks sug­gest that this sup­port will be forth­com­ing, and such sup­port may well be a key dri­ver to devel­oper adop­tion. Canvas has cer­tainly seen a lot of hype in the last 12 months or so. The next 12 months may be cru­cial to its wide­spread adoption.

Question 31: Do you use the Canvas element?

2010

AnswerCount%No104574.54%A lit­tle19313.77%Extensively201.43%

2008

AnswerCount%No98980.15%A lit­tle1119.00%Extensively90.73%

The non desk­top web

For a decade or more, the promise of the web on devices other than desk­top and lap­top com­put­ers remained illu­sory. The release of the iPhone, and in its wake, a new gen­er­a­tion of mobile devices sport­ing first class web expe­ri­ences, has made this promise a reality.

But despite the iPhone being avail­able for around 18 months when our first sur­vey was con­ducted, only 25% of respon­dents said they “optimize[d] [their] sites for devices other than laptops/​PCs”. In this sur­vey, that is up to around a third (32.67%), but this is still much less than one might expect from this cohort of respondents.

Do you opti­mize your sites for devices other than laptops/​PCs?

2010

AnswerCount%No80357.28%Yes45832.67%

2008

AnswerCount%Yes31025.12%No81365.88%

So, which devices do they opti­mize for? We asked devel­op­ers to name the devices they specif­i­cally tar­geted. Not sur­pris­ingly, the iPhone dom­i­nates here, and in numer­i­cal terms, nearly twice as many respon­dents this sur­vey than last report opti­miz­ing for it. But as a per­cent­age of those who opti­mize for devices other than laptops/​desktops, the increase is not nearly so marked — up from 44% of all those who opti­mize for non pc devices, to 51%. Android, avail­able on a sin­gle hand­set in late 2008, saw a dra­matic rise, to 10% of respon­dents who opti­mize for non desk­top devices. Blackberry saw its mind­share remain at sim­i­lar, or slightly higher lev­els, while Opera Mobile and the Wii both saw some­thing of a decline when it comes to devel­op­ers focussing on these devices. Palm’s Pre, launched between the two sur­veys, saw a hand­ful of devel­op­ers pay it atten­tion, but cer­tainly has made far less of an inroad than some may have expected, or hoped, given the enthu­si­asm with which many greeted the device and its new webOS .

What other devices do you opti­mize your web­sites for?

2010

DeviceCount%iphone/​mobile safari23451%black­berry235%android4710%opera mobile61.3%Palm Pre41.3%wii3.7%

2008

DeviceCount%iphone/​mobile safari13644%black­berry134%android31%opera mobile51.6%wii51.6%

For the first time this sur­vey we asked respon­dents what tech­niques they used to tar­get spe­cific devices. Each of the three main approaches were used in sim­i­lar num­bers by respon­dents (they could choose more than one tech­nique as a response). Long rec­om­mended against, “client side sniff­ing” con­tin­ues to be pop­u­lar, while media queries, a rel­a­tively recent inno­va­tion, and well sup­ported in con­tem­po­rary browsers, par­tic­u­larly those on non pc devices, were sur­pris­ingly popular.

Question 34: If you opti­mize sites for dif­fer­ent devices, what tech­nique or tech­niques do you use?

2010

Client Side browser sniffing20414.55%Server Side browser sniffing21315.19%Media Queries19113.62%

There have been con­sid­er­able changes in the area of web site and appli­ca­tion pre­sen­ta­tion between the two sur­veys. Most notably, CSS3 is being increas­ingly widely used, while font link­ing has taken off like few other web devel­op­ment tech­nolo­gies before it, par­tic­u­larly strongly given it had essen­tially lain dor­mant for a decade or more since its intro­duc­tion in “ver­sion 4 browsers”. SVG and the HTML5 can­vas ele­ment at present don’t show the sort of strong growth we’ve seen in some other pre­sen­ta­tion tech­nolo­gies, but this may well change for one or both of these tech­nolo­gies in the com­ing 12 months.

Next

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