CSS and other Presentation technologies

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.