CSS Survey Roundup

As part of preparing for the An Event Apart talk that I’m giving for the next few shows, I published a survey. I wanted to have some more data on how people were using CSS and how they felt about new CSS features. This post is an initial roundup of some of the things I learned – thank you to everyone who completed this.

Who completed the survey?

543 surveys were completed. I had asked people to submit details of a specific project so it may be that some people completed the survey for multiple projects. I’d also left the majority of questions skippable, therefore totals won’t be 100% for some questions.

The people who completed the survey said that they were (in the context of this project):

The ‘other’ responses included students working on projects, and volunteers on non-profit sites.

I also asked people to describe their personal skills level, as you would imagine this was a fairly self-selecting bunch of CSS-ers and so people categorised themselves with very few exceptions as either Intermediate or Expert. What was interesting however was that 37% of people selected the answer, “Used to consider myself an expert but need to update skills for all this new stuff!”

What were the projects?

Something I was really keen to get were responses from people working on large projects for bigger companies. I am half of a tiny little company, and my experience of big companies is only as a consultant, or dropping in to lead a workshop. That’s a very different experience to working on a project day to day at that scale. As it turned out, the majority of responses were from people working in such an environment.

There were many project with large teams, and where multiple people are working on the CSS in addition to plenty of solo efforts. 27% of respondents were working completely alone on a project, however when asked how many people worked on the CSS part of a project 48% of people indicated they were the only person who touched the CSS.

There was a good split of completely new work, and additions to existing projects.

Question: Is this project?

I also asked who owned the CSS part of the project. 65% of respondents stated that they were the owner, with almost 4% admitting that no-one would claim responsibility for it!

Elderly CSS

One of the challenges of adopting shiny new techniques is when your site consists of older CSS. I wondered just how old the CSS was that was out there, so this question was for those not working on a brand new project. How old is the oldest CSS in your project?

There were a surprising number of projects with code dating back over 10 years, around 8% of projects. This became less surprising when I started to think about it – we updated the UI of our product Perch this year. The UI that we replaced has code dating back to launch in 2009.

Yes, there are still tables for layout and font tags out there. I asked the same question from the stage at An Event Apart in San Francisco which mirrored these results.

Features & Frameworks

I wondered exactly what CSS people were using, or thought they might use and whether the responses included a lot of framework use.

Just over 31% were using a third party framework. The majority of that (22%) was Bootstrap, in addition we had Foundation at 3% and a few people for each of the following frameworks.

• Angular
• Ionic
• Bulmar.io
• Purecss
• Tachyons

Respondents seemed pretty happy to use new CSS. Of total responses the below table shows how many people currently used new features.

Question: Which of the following CSS features are currently used in your project?

However, common threads emerged when asking people why they don’t use some new CSS (assuming there is a project need for it).

1. There are a lot of people who believe that creating fallbacks equates to “two sets of layout code”.
2. There are lots of people searching for magic polyfills to make things look “the same” in old browsers.
3. There are other people assuming that using a feature means also using “bloated polyfills”
4. Many people believe Grid needs to become “more mature”, whatever that means. I’m going to believe that they mean like cheese. If it gets to a point where it smells so funky we have to keep it on the back step – use it then!
5. CSS Variables get a lot of mention, in terms of no support in IE11 and the fact that a lot of their functionality can be implemented via a pre-processor.
6. The need to support IE11 as a browser that is fully supported and has the same experience as other modern browsers is a big theme throughout.

Those old browsers then

Defining browser support is an interesting thing. What does supporting a browser mean? For me it means people can access and use the features of the site or application, not that it looks identical to everyone.

In the survey 10% of people defines support as “looks the same”. 55% chose the option of, “the majority of features must render in the same way, but we’re ok about some finishing touches not being there for all browsers”. 34% were closer to my thinking with “We are happy to serve a simpler version to older browsers in our support list, but all functionality should be usable”.

Internet Explorer support is often what people think about when we talk about old browsers. Just over 38% of respondents had IE11 as the oldest IE they needed to support. The breakdown is as follows, nice to see the really old IEs disappearing from the picture for most people.

Question: What is the oldest version of IE/Edge that your project has to support?

With older versions of other browsers, citing support for “the last 2 versions” was very common. Although lots of people said they didn’t test in older versions of Firefox or Chrome, perhaps the benefit of evergreen browsers is people stop fixating on a version number and instead look at feature support?

I asked about testing on mobile devices and while almost 17% of people had access to a device lab the top testing method was to look on your own phone and any others that are around. 43% of people used Browserstack or another online tool and 48% had used an emulator.

Deciding on which browsers to support with data

65% of people had access to analytics to make browser support decisions and in the free text responses about how decisions are made to support browsers, the majority of responses cited knowledge of what browsers were visiting the existing site or others with similar traffic. A very common way to decide on support based on data was a percentage of visits – if a browser had 1% or 2% or more of the traffic it is supported.

Many people working in large companies reported that the decision was made higher up than them, and therefore they didn’t know they just had to work with it.

How do you feel when a new CSS feature is announced?

I’m always happy to see new features in CSS or in any part of the web platform. My last question asked what people felt when something new was announced. A lot of people – and this survey was always going to be somewhat self-selecting – said they were excited however there were other responses that came up on multiple surveys.

“It will be a long time before we can use it” is a very common response, reflecting the high level of support people want to offer to older or nonsupporting browsers.

There are a lot of people who have a somewhat outdated understanding of how features get into browsers, and how interoperable something like Grid Layout is at the point of shipping. There is an assumption that new things in browsers will be buggy and fragile for years. I hope we can start to change that viewpoint.

A lot of people mention they feel overwhelmed, another new feature to learn (and all the workarounds). One person just put, “tired”.

I’ve been thinking about all of these points a lot. I’m not exactly a shiny new developer myself, and my own product supports IE9, so there is no ivory tower here. However what makes the difference between being excited and able to play with new things with confidence, and just feeling burned out by it all and annoyed that you can’t use all of it immediately? I have thoughts about that, but I’ll leave them for some other post.