Web Directions Year round learning for product, design and engineering professionals

• Consistency across browsers
• Development strategies for multiple browsers
• Quirksmode
• CSS Specifics
• Other browser based graphics
• Devices other than PCs

There’s little doubt that CSS has become the favored way by which the significant majority of sites are styled (Opera’s MAMA project found over 80% of sites searched used CSS). In this survey we wanted to look into philosophies and practices, rather than simply the statistics of CSS use.

Consistency across browsers

One of the significant debates in web development today is the extent to which sites should “look the same in all browsers”. In our first question in this section we asked “Which of the following best describes your web design philosophy?” with three possible answers.

• 25% of respondents answered “Pages should look as near to identical as possible across browsers”
• 57% answered “Consistency across browsers is important, but I use features supported in newer browsers provided they don’t cause problems for older browsers”
• A little under 10% answered “Pages might look substantially different in different browsers, but provided they look acceptable in all browsers, consistency is of no great concern”

For 70% or more of respondents, visual consistency is still an important goal to design. 25% of respondents striving for sites to look as similar as possible across browsers is perhaps surprisingly high, particularly among this sample of respondents. But the message of “progressive enhancement” is clearly taking hold among developers and designers. This question will be an interesting one to track over the coming years, as non PC web use becomes increasingly mainstream.

Which of the following best describes your web design philosophy?
Answer	Count	Percentage
Pages should look as near to identical as possible across browsers	304	24.64%
Consistency across browsers is important, but I use features supported in newer browsers provided they don’t cause problems for older browsers	708	57.37%
Pages might look substantially different in different browsers, but provided they look acceptable in all browsers, consistency is of no great concern	117	9.48%
No answer	9	0.73%
Non completed	96	7.78%

Development strategies for multiple browsers

As discussed earlier, one of the principle challenges for developers and designers is managing rendering across multiple browsers. For several years now, there has been the belief that much of this challenge comes from the difference between Internet Explorer, and newer, more standards focussed browsers. In the next question, we asked “Which of the following best describes your approach to developing for multiple browsers?”

Essentially no one answered “I only develop for IE”, a strategy probably still somewhat prevalent in the wider web development industry. The answer might well have been quite different 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 certainly have been higher even a couple of years ago.

Over three quarters of all respondents answered “I develop to W3C standards, and then work around IE”, demonstrating the importance placed on standards by this sample of respondents.

Surprisingly, nearly 10% of respondents (9.4%) answered “I develop to W3C standards and expect browsers to support these” (a percentage close to the percentage who answered that they do not test in Internet Explorer 7). It’s interesting indeed among these respondents that twice as many ignore Internet Explorer altogether, than design for it first and then work around problems with other browsers.

Which of the following best describes your approach to developing for multiple browsers?
Answer	Count	Percentage
I only develop for IE	3	0.24%
I develop for IE first, and then make sure my pages work in other major browsers	62	5.02%
I develop to W3C standards, and then work around IE	946	76.66%
I develop to W3C standards and expect browsers to support these	116	9.40%
No answer	11	0.89%
Non completed	96	7.78%

Quirksmode

In a related question, we asked respondents whether they used “quirksmode” when developing sites. This was a rather open question, as various browsers have their own quirksmodes. Overwhelmingly, respondents either don’t use quirksmode (at least not knowingly), or aren’t aware of what it is. This tends to confirm the responses from the previous question – respondents are not focussing primarily on less up to date browsers, but on standards based development.

Do you typically use quirks mode when designing sites?
Answer	Count	Percentage
Yes	116	9.40%
No	835	67.67%
What’s quirks mode?	168	13.61%
No answer	19	1.54%
Non completed	96	7.78%

CSS Specifics

The next set of questions in this section focussed more on the specifics of how respondents use the technology 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 experimental aspects of CSS, such as CSS3, and some browser extensions to CSS, developers are using.

Just on 90% of respondents said they use CSS for fonts and text style, and even slightly more for page layout. This is consistent with the reply of 10% of respondents who answered they use tables for layout. In Addition, nearly 70% of respondents use print style sheets (though only a handful actually test these!)

Around a quarter of respondents answered the question “Describe what else you use CSS for” – and answers ranged widely. You can see all these answers in the downloadable CSV results.

Together with responses to a number of the questions in the markup section, it’s clear that the practice of separating content and appearance using HTML and CSS is very well established now, at least among this sample of developers and designers.

Which of the following do you use CSS for?
Answer	Count	Percentage
Controlling fonts and text style	1112	90.11%
Controlling page layout	1115	90.36%
Controlling print appearance	851	68.96%

Selectors

Delving more deeply into CSS use, we asked Which of these types of selector do you regularly use?

80% or more use HTML element, class and id selectors, with nearly 80% (78%) using descendent selectors. This last result is surprisingly high, and reflects a growing sophistication in the use of CSS from even a few years ago, where class and id were extensively used as hooks to add styling to pages. While class and id are still extensively used, the widespread use of descendent selectors probably reflects a decrease in the over-reliance on these selectors.

Only 27% of respondents use child selectors, which have been of little use except as hacks to work around shortcomings in Internet Explorer until the advent of IE7, the first version of that browser to support these selectors.

A little over 20% of respondents answered the question “What other CSS selectors do you regularly use?”. Unsurprisingly, there is a large range of answer, with attribute selectors, state selectors (such as :hover), and various CSS3 selectors such as first-child, all represented.

Overall, the core CSS1 selectors are those widely used, as they have been for several years, with more advanced or recent selectors considerably less widely used. All answers can be seen in the CSV results.

Which of these types of selector do you regularly use?
Answer	Count	Percentage
HTML element selectors such as “p {}”	1027	83.23%
Class selectors such as “p.classname {}”	1057	85.66%
ID selectors such as “p#idname {}”	999	80.96%
Descendent selectors such as “p a {}”	961	77.88%
Child selectors such as “p > a {}”	337	27.31%

CSS3 and Experimental CSS

2007 and 2008 has seen perhaps the biggest flurry in innovation in CSS support since the release of IE5 for the Mac. We’ve seen the support of various CSS3 properties, and experimental CSS in Safari, Firefox and Opera, and even some additions to CSS support in IE8. But how much are developers and designers taking advantage of these features? Not as yet overwhelmingly, with only 22% answering yes to the question “do you use any CSS3 or experimental CSS properties, such as CSS transitions, transforms, animations, shadows?”

Do you use any CSS3 or experimental CSS properties, such as CSS transitions, transforms, animations, shadows?
Answer	Count	Percentage
Yes	274	22.20%
No	843	68.31%
No answer	21	1.70%
Non completed	96	7.78%

We followed up by asking “Which such properties do you use?”. 20% of the respondents, most of those who replied yes to the previous question, replied to this. The full results are in the downloadable CSV, but here are some of the results. Of those who answered that they use CSS3 and experimental CSS

• About 40% use border-radius
• around 25% use text shadows (surprising low, as this has been supported in Safari for several years, but only recently in Opera, and will be in Firefox 3.1 when released) – though another 25% simply replied “shadows” which might mean text shadows, box shadows or both.
• About 10% use box-shadow, opacity (supported in current versions of Safari, Firefox and Opera), as well as the Safari-only proposed CSS standards transitions and transforms
• About 5% use RGBa colors

Fonts

The widespread use of image replacement techniques (about the use of which we didn’t ask, but which now wish we had), demonstrates that designers and developers have been chafing at the limited range of fonts available for web design for some time.

The CSS2 @font-face rule, which enables linking to online fonts, has been available for many years in IE, although only recently in Safari, and only in beta versions of Firefox 3.1, and alpha versions of Opera 10. Despite this, only 4% of respondents answered that they use this feature of CSS. Of those, all but 1 link to Truetype fonts (supported by the browsers other than IE), with only 1 exclusively linking to EOT fonts (supported only by IE), and 6 to both EOT and Truetype fonts.

It’s most likely too early to draw many conclusions, but the fact that 4% of respondents are using font linking is higher than might be expected. Given that they are overwhelmingly linking to Truetype fonts (only supported by Safari among shipping browsers, and that for only some months in 2008), over EOT fonts (supported by Internet Explorer for several years, and recently proposed as a W3C standard by Microsoft) by a factor of 7:1, this may indicate that it is support in Safari which is driving the adoption of this technology among respondents. This will be an interesting trend to follow, particularly when Firefox 3.1 ships early in 2009. Given Firefox’s high upgrade turnover, by mid 2009, more than 25% of all browsers in widespread use may well support @font-face linking to Truetype fonts (with all versions of IE supporting the same for EOT fonts). It will be interesting to see what percentage of respondents are using font linking at the end of 2009.

Do you use linked fonts with the @font-face statement?
Answer	Count	Percentage
Yes	51	4.13%
No	1060	85.90%
No answer	27	2.19%
Non completed	96	7.78%

Which type of fonts do you link to?
Answer	Count	Percentage
Truetype	50	4.05%
EOT	7	0.57%

Other browser based graphics

In this section, we also asked respondents whether, and how they used SVG, and Canvas, two other widely supported (in browsers other than IE) standards or proposed standards for web graphics.

SVG

Three quarters of respondents replied in the negative to the question “Do you use SVG”. 14% replied “a little”, while a little over 1% replied “extensively”.

Do you use SVG?
Answer	Count	Percentage
No	923	74.80%
A little	172	13.94%
Extensively	15	1.22%
No answer	28	2.27%
Non completed	96	7.78%

Canvas

The canvas, part of the proposed HTML5 standard, and supported in currently shipping versions of major browsers other than Internet Explorer, surprisingly fared even less well than SVG in terms of adoption, with 80% of respondents not using it at all, 9% a little, and less than 1% extensively.

Given the focus by a number of high profile libraries, and experts on the canvas over the last couple of years, its low adoption is somewhat surprising. It is however young, and as yet not fully standardized, compared with the nearly decade old SVG. Tracking the adoption of Canvas, and the adoption of SVG over the coming year or two will be an interesting trend to follow.

Do you use the Canvas element?
Answer	Count	Percentage
No	989	80.15%
A little	111	9.00%
Extensively	9	0.73%
No answer	29	2.35%
Non completed	96	7.78%

Devices other than PCs

The last questions we asked in this section related to the devices other than PCs which respondents optimized their sites for.

Just on a quarter of respondents said that they “optimize[d] [their] sites for devices other than laptops/PCs”. When asked which devices

• around 15% responded “mobile”
• around 10% specifically mentioned the iPhone
• about 1% mentioned Blackberry specifically
• only 3 in total mentioned the Android
• 5 mentioned the Wii
• about 2% mentioned print (although 70% responded to an earlier question that they use CSS to style the print appearances of pages)

In all, the focus of respondents is still very much traditional web browsing platforms – laptops and PCs. There’s little doubt that the mobile Safari platform has significantly raised the number of developers focussing on mobile versions of their sites and applications, but it’s also clear that the day when such site versions are common is still some time off. It will be interesting to track this question in coming surveys.

Do you optimize your sites for devices other than laptops/PCs?
Answer	Count	Percentage
Yes	310	25.12%
No	813	65.88%
No answer	15	1.22%
Non completed	96	7.78%

Next

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