常绿网站的浏览器支持

I first used CSS when building a website involved taking a static image, chopping it up and reassembling it in order that it would hopefully cope with the fact that there might be more or less text than the designer expected. “Pixel perfect” meant “this website looks like this graphic”. Designers reacted in horror that users might increase their text size. Browser compatibility ranged from “Best Viewed in Internet Explorer” badges to the development of two separate sites, one for each browser in order to ensure the same design was shown to each.

在构建涉及拍摄静态图像的网站时，我首先使用CSS，将其切碎并重新组装，以期希望它可以应付这样的事实，即文本可能比设计者预期的多或少。 “像素完美”的意思是“该网站看起来像此图形”。 设计师对用户可能会增加其文字大小感到震惊。 浏览器的兼容性范围从“ Internet Explorer中的最佳视图”标志到两个单独站点的开发，每个站点一个，以确保每个浏览器都显示相同的设计。

As we came out the other side of the browser wars, trying to develop one site for all browsers, we realised that we needed to offer old browsers such as Netscape 4 an alternative. We used the fact that Netscape 4 didn’t understand imported stylesheets to offer it simpler styles. We countered the pushback from our clients and peers by explaining that it was ok if websites didn’t look the same in each browser, the important thing was that the content and the functionality was there and usable.

当我们走出浏览器大战的另一端，试图为所有浏览器开发一个站点时，我们意识到我们需要提供诸如Netscape 4之类的旧浏览器作为替代。 我们使用Netscape 4无法理解导入的样式表这一事实来为其提供更简单的样式。 我们通过解释说如果每个浏览器中的网站看起来都不相同是可以的，那么我们就反驳了来自客户和同行的反对，重要的是内容和功能在那里并且可以使用。

When responsive design came along I hoped this might end the “must look the same” argument for ever. How can anyone demand that the site “looks the same” on a phone screen, an old PC, a high-end Mac with a Retina screen … a watch? Yet it seems, here in 2017, we are having the same argument. An argument that is being given weight by polls such as this one, where the three options boil down to:

我希望当响应式设计出现时，这可能永远结束“必须看起来一样”的论点。 谁能在电话屏幕，旧PC，带有Retina屏幕的高端Mac……手表上要求网站“看起来一样”？ 然而，似乎在2017年，我们有相同的论点。 像this这样的民意测验赋予了权重，其中三个选项可以归结为：

1. I believe that users still choose to “update their browser” and those that do not are holding back the web.
2. I don’t use rounded corners either.
3. I have outsourced my CSS knowledge to Bootstrap.

1. 我相信用户仍然选择“更新他们的浏览器”，而那些没有阻止网络访问的用户。
2. 我也不用圆角。
3. 我已经将我CSS知识外包给了Bootstrap。

There was a time when option 1 was relatively true, users had the choice as to whether to update their browser and many didn’t. There are still certain users who cannot update - often those in corporations who are using versions of Windows too old to have a newer version of IE. There are also going to be users out there who are using very old machines and software.

曾经有一段时间选项1相对正确，用户可以选择是否更新其浏览器，而很多人没有。 仍有某些用户无法更新-通常是公司中使用Windows版本太旧而无法拥有IE较新版本的用户。 还会有使用旧机器和软件的用户。

Today however, the majority of our browsers are evergreen, they update frequently without asking the user and new features - often quite major ones - silently appear. If I built a site today that uses shape-outside to curve text around an image, Firefox users are going to see squared off text around that floated image. Chrome users will get the curved shape. As Firefox are currently implementing Shapes, at some point in the near future Firefox users will find their browser has updated underneath them, my website will suddenly look that little bit more finessed to them, yet I won’t have shipped any code.

但是，今天，我们的大多数浏览器都是常绿的，它们在不询问用户的情况下便会经常更新，而新功能（通常是非常重要的功能）会静默出现。 如果今天我建立了一个网站，该网站使用shape-outside在图像周围弯曲文本，那么Firefox用户将在浮动图像周围看到方形的文本。 Chrome用户将获得弯曲的形状。 由于Firefox当前正在实施Shapes ，因此在不久的将来的某个时候，Firefox用户会发现他们的浏览器已经更新了，我的网站突然看起来对他们的罚款更多了，但是我不会交付任何代码。

重新架构浏览器支持 (Reframing Browser Support)

I’m mid relaunch of my product Perch - we have to get our UI to work back to IE9. Until we launched Perch I spent my career building client websites. I know all too well the constraints of shipping client work to people who just want things to look the same. However our jobs are often to educate the people we work with and for. Reframing browser support for evergreen browsers is possible, just as many of us used the Yahoo! Graded Browser Support charts to reframe the conversation in the past.

我正在重新发布产品Perch的过程中-我们必须使UI恢复到IE9。 在我们启动Perch之前，我花了很多时间建立客户网站。 我非常清楚将客户工作交付给只希望事物看起来相同的人们的限制。 但是，我们的工作通常是教育我们与之共事的人。 正如我们许多人使用Yahoo!一样，可以重新构造对常绿浏览器的浏览器支持。 分级的浏览器支持图表可重新构建过去的对话。

Some would advise just doing what you believe is best and avoiding the conversation. The problem with that approach is that if it leaves the site looking very different in one browser to another, you may be left explaining yourself, or having to do unpaid work to “correct” the matter if the client is unhappy. I always felt it far better to be open about things that might cause a visible difference and “just do” those things that were best practice but they wouldn’t know about one way or the other.

有些人会建议您做自己认为最好的事情，并避免谈话。 这种方法的问题在于，如果该站点使该站点在一个浏览器中看起来与另一个浏览器截然不同，则可能会让您自己解释，或者如果客户不满意，则必须做一些无偿的工作来“纠正”该问题。 我总是觉得最好是对可能引起明显差异的事情持开放态度，并“去做”那些最佳实践，但是他们却不知道一种或另一种方式。

Your boss or client may be unaware of the way that browsers update. They may have been told by someone who knows about computers that it is important their site is compatible with all browsers. They have equated compatible with “looks the same”. You can challenge that. Look at your analytics data, look at browser release schedules and see what is going to land in the next releases. Check out the Can I Use stats for your location, and present the information to your boss or client.

您的老板或客户可能不知道浏览器的更新方式。 他们可能是由某个了解计算机的人告知的，他们的站点与所有浏览器都兼容很重要。 它们等同于与“外观相同”。 您可以挑战这一点。 查看您的分析数据，查看浏览器发布时间表，并查看下一个版本中将要包含的内容。 查看您的位置可以使用我的统计信息，并将信息提供给您的老板或客户。

Explain the benefits of using something new - whether that be performance, the ability to achieve a layout you couldn’t otherwise, or time-saving now and in the future. Explain how the ‘fallback’ is acceptable and that over time more users will grow into the newer design without you needing to ship any more code. This is the reality of design in a world of evergreen browsers. Grid is a very unusual case in that we are going to see support land in two, perhaps three browsers at more or less the same time. More usually there will be a delay due to the differing priorities of vendors.

解释使用新事物的好处-无论是性能，实现您以前无法企及的布局的能力，还是现在和将来节省的时间。 说明“后备”是如何被接受的，随着时间的流逝，更多的用户将成长为较新的设计，而无需交付更多代码。 这是常绿浏览器世界中设计的现实。 网格是一个非常不寻常的情况，因为我们将同时或多或少地看到两个或三个浏览器的支持。 通常，由于供应商的优先级不同，会有延迟。

Most clients would not like to think that their investment will be out of date in a year or two. You can use that to explain how quickly browsers move these days and that by having some features there that will very soon have widespread support will help in ensuring the site remains fresh and is still using modern methods in two years time. If your client is cost sensitive explain how these features can save money in terms of easing maintainability; if they worry about SEO explain how making sure the site is fast is one of the most important things you can do; if the visual design is key then you have plenty of things to show that just can’t be achieved without newer techniques.

大多数客户不希望他们的投资会在一两年之内过时。 您可以用它来解释浏览器如今移动的速度如何，并通过在那里拥有一些功能将很快得到广泛的支持，将有助于确保网站保持新鲜并在两年内仍使用现代方法。 如果您的客户对成本敏感，请说明这些功能如何在简化可维护性方面省钱； 如果他们担心SEO，请解释如何确保网站的速度是您最重要的事情之一； 如果视觉设计是关键，那么您有很多事情可以证明，没有更新的技术是无法实现的。

Also, remember that you don’t need to throw everything out and only use a very new layout method such as Grid or even Flexbox. Start small, finesse your forms or navigation with these methods, add some little touches. Not every site needs all the new shiny throwing at it, most will benefit from some elements from newer specifications. You can learn just as much about Grid by using it to tighten up a floated UI, as you can by turning your whole site over to it.

另外，请记住，您不需要将所有内容都扔掉，而只需使用非常新的布局方法，例如Grid甚至Flexbox。 从小处着手，用这些方法完善您的表单或导航，增加一些修饰。 并非每个站点都需要所有新的亮点，大多​​数站点都会从更新的规范中受益。 通过使用Grid来固定浮动的UI，您可以学到很多关于Grid的知识，也可以通过将整个网站移到它上来学习。

We don’t have 99% browser support for border-radius, or for pretty much anything introduced in the last few years. If you think you need 99% support to use any CSS you probably had best stop using CSS altogether.

浏览器对border-radius或最近几年引入的几乎所有内容都没有99％的浏览器支持。 如果您认为需要99％的支持才能使用任何CSS，则最好完全停止使用CSS。

不要放弃自己的专业发展 (Don’t give up on your own professional development)

Response 3 in that poll was to wait until Bootstrap or Foundation support Grid Layout. This to me is perhaps the saddest response at all, and not because I think these things are inherently bad. We are using Foundation ourselves for some of our Perch marketing sites. Using a framework is not always bad, outsourcing your understanding of the basic languages of front-end development to one is definitely bad. You are tying your own future to that framework, and you can be sure that in a year or so something else will come along that everyone moves to. Don’t be the person left clinging to the one thing you know as everyone else moves on.

该调查中的响应3是等待Bootstrap或Foundation支持Grid Layout。 对我来说，这也许是最可悲的React，而不是因为我认为这些事情本来就是不好的。 我们将Foundation本身用于一些Perch营销网站。 使用框架并不总是不好的，将对前端开发的基本语言的理解外包给一个人肯定是不好的。 您将自己的未来与该框架联系在一起，并且可以确保在一年左右的时间里还会有其他事情发生，每个人都会去。 当其他人继续前进时，不要成为一个只知道一件事的人。

Whether using a framework or having to write old-fashioned CSS, if you are stuck with a legacy project or client who demands an IE6-era approach to your work don’t give up on new web platform features. You might not be able to use them in production today but learn them, play with them, build personal projects. The new layout methods are fantastic for prototyping. Learn Grid while prototyping features, even if you need to recode the final design. But please don’t stop learning, the web moves far too fast for you to leave your future career in the hands of a dinosaur.

无论是使用框架还是必须编写老式CSS，如果您受困于需要IE6-era方法进行工作的旧项目或客户，都不会放弃新的Web平台功能。 您现在可能无法在生产中使用它们，但要学习它们，与它们一起玩并建立个人项目。 新的布局方法非常适合原型制作。 即使需要重新编码最终设计，也可以在学习原型功能时学习Grid。 但是，请不要停止学习，网络的发展速度太快了，您无法将自己的未来职业交给恐龙。

翻译自: https://rachelandrew.co.uk/archives/2017/01/12/browser-support-for-evergreen-websites/