css css2 css3_CSS调查综述

css css2 css3

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.

在准备接下来的几场演出的An Event Apart演讲中，我发布了一份调查问卷。 我想获得更多有关人们如何使用CSS以及他们对CSS新功能的看法的数据。 这篇文章是我学到的一些东西的初步综述-感谢所有完成此工作的人。

谁完成调查？ (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.

完成了543次调查。 我曾要求人们提交特定项目的详细信息，以便某些人可能完成了多个项目的调查。 我也忽略了大多数问题，因此某些问题的总和不会是100％。

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

完成调查的人说（在此项目中）：

Answer	回答	Percentage	百分比	Total	总
A freelancer	自由职业者	19.22%	19.22％	104	104
Employed, working for external client	受雇，为外部客户工作	31.05%	31.05％	168	168
Employed, working on in-house project	受雇，从事内部项目	37.34%	37.34％	202	202
Working on own company site	在自己的公司网站上工作	4.07%	4.07％	22	22
Working on a side project	在副项目上工作	5.91%	5.91％	32	32
Other	其他	2.40%	2.40％	13	13

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!”

我还请人们描述他们的个人技能水平，就像您想象的那样，这是一堆相当自选CSS语言，因此人们将自己归类为极少数人（中级或专家）。 然而，有趣的是，有37％的人选择了答案， “曾经以为自己是专家，但需要为所有这些新东西更新技能！”

有哪些项目？ (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.

有许多项目由大型团队组成，除了大量的单独工作外，还有多个人在研究CSS。 27％的受访者完全独自从事一个项目，但是当被问及有多少人在项目CSS部分工作时，有48％的人表示他们是唯一接触过CSS的人。

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

完全分开了全新的工作，并对现有项目进行了补充。

问题：这个项目吗？ (Question: Is this project?)

Answer	回答	Percentage	百分比	Responses	回应
A completely new site or application	全新的网站或应用程序	32.47%	32.47％	175	175
A complete replacement of an existing site or application	完全替换现有站点或应用程序	35.81%	35.81％	193	193
An addition to an existing site or application	对现有站点或应用程序的补充	9.09%	9.09％	49	49
Work on an existing site or application (eg. your company website, or your work is on the product itself)	在现有站点或应用程序上工作（例如，您的公司网站，或者您的工作在产品本身上）	22.63%	22.63％	122	122

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!

我还询问了谁拥有该项目CSS部分。 65％的受访者表示自己是所有者，几乎4％的受访者承认没有人会对此负责！

老年人CSS (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?

采用闪亮的新技术的挑战之一是您的站点由旧CSS组成。 我想知道CSS的年代有多久，所以这个问题是针对那些不从事全新项目的人的。 您的项目中最古老CSS多大了？

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.

有数量惊人的代码可以追溯到10年前的项目，大约占项目的8％。 当我开始考虑时，这变得不足为奇-我们今年更新了产品Perch的用户界面。 我们替换的UI的代码可以追溯到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.

我确切地想知道CSS人们正在使用什么，或者以为他们可能会使用CSS，以及响应是否包括很多框架使用。

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.

略高于31％的人使用第三方框架。 其中大部分（22％）是Bootstrap，此外，我们有3％的Foundation和以下每个框架的少数人。

• 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.

受访者似乎很高兴使用新CSS。 下表列出了目前总共使用新功能的人数。

问题：您的项目中当前使用以下哪些CSS功能？ (Question: Which of the following CSS features are currently used in your project?)

Feature	特征	% using	使用百分比	Number using	号码使用
Flexbox	弹性盒	83.27%	83.27％	438	438
CSS Grid	CSS网格	23.76%	23.76％	125	125
CSS Shapes	CSS形状	3.42%	3.42％	18	18
CSS Custom Properties (CSS Variables)	CSS自定义属性（CSS变量）	20.34%	20.34％	107	107
calc	计算	65.97%	65.97％	347	347
CSS Transforms	CSS转换	76.81%	76.81％	404	404
CSS Animations	CSS动画	69.20%	69.20％	364	364
Feature Queries (@supports)	功能查询（@supports）	31.37%	31.37％	165	165

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

但是，当问人们为什么不使用一些新CSS时（假设有项目需求），就会出现通用的线程。

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.

1. 许多人认为创建后备时间等同于“两组布局代码”。
2. 有很多人在寻找魔术宝瓶，以使旧浏览器中的内容看起来“相同”。
3. 有人认为使用功能还意味着使用“膨胀的填充”
4. 许多人认为，无论哪种方式，Grid都需要变得“更加成熟”。 我要相信它们的意思像奶酪。 如果到了闻起来很时髦的地步，我们必须将其保持在后面的步骤-然后使用它！
5. CSS变量在IE11中不提供支持，并且其许多功能可以通过预处理器实现这一事实引起了广泛的关注。
6. 始终都需要将IE11作为完全受支持的浏览器并具有与其他现代浏览器相同的体验来支持。

那些旧的浏览器 (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”.

在调查中，有10％的人将支持定义为“看起来一样”。 55％的人选择了以下选项：“大多数功能必须以相同的方式呈现，但是我们可以接受并非所有浏览器都可以完成的修饰”。 “我很乐意在支持列表中为较旧的浏览器提供一个更简单的版本，但所有功能都应该可用”，这让我更接近34％。

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.

人们谈论旧浏览器时通常会想到Internet Explorer支持。 超过38％的受访者将IE11作为他们需要支持的最老的IE。 细分如下，很高兴看到大多数人真正的旧IE从图片中消失了。

问题：您的项目必须支持的最旧的IE / Edge版本是什么？ (Question: What is the oldest version of IE/Edge that your project has to support?)

Version	版	% with that as oldest supported IE/Edge	％作为支持最早的IE / Edge
IE6	IE6	1.32%	1.32％
IE7	IE7	0.94%	0.94％
IE8	IE8	6.39%	6.39％
IE9	IE9	19.74%	19.74％
IE10	IE10	24.06%	24.06％
IE11	IE11	38.72%	38.72％
Edge	边缘	8.83%	8.83％

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?

对于其他浏览器的较旧版本，引用对“最后两个版本”的支持非常普遍。 尽管很多人说他们没有在旧版本的Firefox或Chrome中进行测试，但是也许常绿浏览器的好处是人们不再关注版本号，而是关注功能支持？

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.

我询问了有关在移动设备上进行测试的问题，尽管将近17％的人可以访问设备实验室，但最主要的测试方法是在自己的手机上以及周围的其他设备上查看。 43％的人使用了Browserstack或其他在线工具，而48％的人使用了模拟器。

确定哪些浏览器支持数据 (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.

65％的人有权使用分析方法来做出浏览器支持决策，并且在有关如何做出决策以支持浏览器的自由文本回复中，大多数回复都引用了有关哪些浏览器正在访问现有网站或其他流量相似的知识。 基于数据确定支持的一种非常常见的方法是访问次数-如果浏览器支持的流量是其访问量的1％或2％或更多。

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.

在大型公司工作的许多人报告说，做出的决定比他们要高，因此他们不知道自己是否必须与之合作。

宣布新CSS功能时您感觉如何？ (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.

我总是很高兴在CSS或网络平台的任何部分看到新功能。 我的最后一个问题是，当人们宣布新事物时，人们会有什么感觉。 很多人（这个调查总是有些自我选择），他们表示很兴奋，但多项调查中还有其他答案。

“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.

很多人对功能如何进入浏览器以及在交付时像Grid Layout这样的互操作性了解得有些过时。 有一种假设是，浏览器中的新事物将在多年内存在漏洞和脆弱性。 我希望我们可以开始改变这种观点。

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.

我一直在考虑所有这些问题。 我本人并不完全是一个崭新的开发人员，而且我自己的产品支持IE9，因此这里没有象牙塔。 但是，在兴奋和能够自信地玩新事物，而又被这一切都精疲力尽并烦恼不能立即使用所有东西之间又有什么区别呢？ 我对此有所考虑，但我将其留给其他职位。

翻译自: https://rachelandrew.co.uk/archives/2017/11/13/css-survey-roundup/

css css2 css3