青少年为什么要关心国家大事_为什么您应该关心支持较旧的浏览器

青少年为什么要关心国家大事

by Zell Liew

由Zell Liew

为什么您应该关心支持较旧的浏览器 (Why you should care about supporting older browsers)

支持旧版浏览器 (Supporting older browsers)

You don’t have to worry much about supporting older browsers today. They’ve been decent ever since Internet Explorer 8 died.

您不必担心现在支持较旧的浏览器。 自Internet Explorer 8停用以来，它们就一直很不错。

But the question remains: How should you go about supporting Internet Explorer 9 and other browsers? In the first place, should you even be thinking about supporting Internet Explorer 9?

但是问题仍然存在：您应该如何支持Internet Explorer 9和其他浏览器？ 首先，您甚至应该考虑支持Internet Explorer 9吗？

We’ll look at a few things you’d want to consider.

我们将考虑一些您要考虑的事项。

考虑功能，而不是浏览器 (Think features, not browsers)

Let’s say the world contains only two features and two browsers.

假设世界仅包含两个功能和两个浏览器。

1. Browser A supports feature A but not feature B.
   浏览器A支持功能A，但不支持功能B。
2. Browser B supports feature B but not feature A.
   浏览器B支持功能B，但不支持功能A。

It’s possible to detect what browsers support what features and act from there.

可以检测到哪些浏览器支持哪些功能并从那里执行操作。

// This is JavaScript

if (Browser A) {  // Code for A}

if (Browser B) {  // code for B}

But what if there are more browsers? What if the world contains browsers C, D, and E? It gets hard to support the features you need if you’re thinking about browsers.

但是，如果有更多的浏览器呢？ 如果世界包含浏览器C，D和E，该怎么办？ 如果您正在考虑使用浏览器，将很难支持所需的功能。

There’s a better way: You can check whether a feature exists. If it exists, use it. If not, provide fallback code.

有一个更好的方法：您可以检查功能是否存在。 如果存在，请使用它。 如果不是，请提供后备代码。

The following block of code works from browser A to browser Z.

以下代码块从浏览器A到浏览器Z均有效。

// This is JavaScript

if (feature A) {  // Code if browser contains feature A} else {  // Code if browser doesn't contain feature A}

And now you don’t have to worry about browsers.

现在，您不必担心浏览器。

决定是否使用功能 (Deciding whether to use a feature)

Many people decide whether to use a feature depending on the number of browsers that support it. But, as I argued above, browsers don’t matter.

许多人根据支持该功能的浏览器的数量来决定是否使用该功能。 但是，正如我在上文所述， 浏览器并不重要。

What matters is: Can you code the fallback for the feature easily? If you can code the fallback easily, go ahead and use the feature. If you can’t code the fallback easily, don’t use the feature.

重要的是：您可以轻松编写该功能的后备代码吗？ 如果您可以轻松编写后备代码，请继续使用该功能。 如果您无法轻松编写后备代码，请不要使用该功能。

确定要支持哪些浏览器 (Deciding what browsers to support)

You still need a cutoff.

您仍然需要截止。

What browsers are you going to support?

您要支持哪些浏览器？

What browsers are you NOT going to support? If you don’t want to support the browser, then it doesn’t make sense for you to write fallback code for it.

您不支持哪些浏览器？ 如果您不想支持该浏览器，那么为它编写后备代码就没有意义。

My best answer is: Watch who is using your site. What browsers do they use? Follow accordingly.

我最好的答案是：观察谁在使用您的网站。 他们使用什么浏览器？ 相应地遵循。

Yes, there may be outliers who try to visit your website on Internet Explorer 6. But do have the time and energy to write extra code for a browser that almost no one uses?

是的，可能会有异常值试图在Internet Explorer 6上访问您的网站。但是，是否有时间和精力为几乎没有人使用的浏览器编写额外的代码？

Will your energy be better spent elsewhere?

您的精力会在其他地方得到更好的利用吗？

支持水平 (The level of support)

I’d argue there are four levels of support:

我认为支持有四个级别：

1. everything must look and work the same in all browsers
   所有浏览器的所有外观和工作都必须相同
2. the site must look the same, but functionality can be different across browsers
   该网站必须外观相同，但不同浏览器的功能可能有所不同
3. functionality must be the same, but looks can be different across browsers
   功能必须相同，但不同浏览器的外观可能不同
4. looks and functionality can both differ across browsers
   外观和功能在浏览器中可能都不同

What kind of support are you providing to the older browsers? Why?

您为较旧的浏览器提供什么样的支持？ 为什么？

结语 (Wrapping up)

Think about it:

考虑一下：

1. why are you trying to support the old browser you’re trying to support?
   您为什么要支持要支持的旧浏览器？
2. what level of support are you giving?
   您提供什么级别的支持？
3. is it worth the resources you’ve allocated?
   您分配的资源值得吗？

支持较旧的浏览器-CSS (Supporting Older Browsers — CSS)

There are two ways to provide fallbacks for CSS features:

有两种方法可以为CSS功能提供后备功能：

1. property fallbacks
   财产后备
2. feature queries
   功能查询

财产回退 (Property fallbacks)

If a browser doesn’t recognize a property or its corresponding value, the browser will ignore the property altogether.

如果浏览器无法识别属性或其对应的值，则浏览器将完全忽略该属性。

When this happens, the browser uses — or falls back — to the previous value it finds.

发生这种情况时，浏览器将使用(或后退)到找到的先前值。

This is the easiest way to provide a fallback.

这是提供后备广告的最简单方法。

Here’s an example:

这是一个例子：

.layout {  display: block;   display: grid; }

In this example, browsers that support CSS Grid will use display: grid. A browser that doesn’t support CSS Grid will fall back to display: block.

在此示例中，支持CSS Grid的浏览器将使用display: grid 。 不支持CSS Grid的浏览器将退回到display: block 。

省略默认值 (Omit default values)

If the element you’re using defaults to display: block, you can omit the display: block declaration. This means you can support CSS Grid with one line of code:

如果您使用的元素默认为display: block ，则可以省略display: block声明。 这意味着您可以使用一行代码来支持CSS Grid：

.layout {  display: grid; }

Browsers that support CSS Grid will be able to read other CSS properties like grid-template-columns. Browsers that don’t support CSS Grid can’t.

支持CSS Grid的浏览器将能够读取其他CSS属性，例如grid-template-columns 。 不支持CSS Grid的浏览器不能。

This means you can write additional CSS Grid properties without worrying about fallback values.

这意味着您可以编写其他CSS Grid属性，而不必担心后备值。

.layout {  display: grid;   grid-template-columns: 1fr 1fr 1fr 1fr;  grid-gap: 1em; }

Feature queries, or @supports, tell you whether a CSS property or its corresponding value is supported is supported by the browser.

功能查询或@supports告诉您浏览器是否支持CSS属性或其对应的值。

You can think of CSS feature queries like if/else statements in JavaScript. They look like this:

您可以想到CSS功能查询，例如JavaScript中的if/else语句。 他们看起来像这样：

@supports (property: value) {  /* Code when property or value is supported*/}

@supports not (property: value) {  /* Code when property or value is not supported */}

@supports is helpful if you want browsers to read CSS only if they support a specific property.

如果您希望浏览器仅在支持特定属性的情况下阅读CSS，则@supports很有帮助。

For the CSS Grid example we had above, you can do this:

对于上面CSS Grid示例，您可以执行以下操作：

@supports (display: grid) {  .layout {    display: grid;     grid-template-columns: 1fr 1fr 1fr 1fr;    grid-gap: 1em;     padding-left: 1em;    padding-right: 1em;  }}

In this example, padding-left and padding-right will only be read by browsers that support both @supports and CSS Grid.

在此示例中，仅支持@supports 和 CSS Grid的浏览器将读取padding-left和padding-right 。

Jen Simmons has a better example of @supports at work. She uses feature queries to detect whether browsers support a property like -webkit-initial-letter.

Jen Simmons在工作中有一个更好的@supports示例。 她使用功能查询来检测浏览器是否支持-webkit-initial-letter类的属性。

@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {  p::first-letter {     -webkit-initial-letter: 4;     initial-letter: 4;     color: #FE742F;     font-weight: bold;     margin-right: 0.5em;  }}

Jen’s example brings us to a question: Should sites look the same across browsers? We’ll look at this later. But first, more about feature queries.

詹(Jen)的例子给我们带来了一个问题：网站在浏览器中看起来应该一样吗？ 我们待会再看。 但首先，更多有关功能查询的信息。

支持功能查询 (Support for feature queries)

Features queries have gained great support. All current major browsers support feature queries.

功能查询获得了极大的支持 。 当前所有主要的浏览器都支持功能查询。

如果支持某个功能但不支持功能查询该怎么办？ (What if a feature is supported, but feature queries aren’t?)

This used to be the tricky part. Jen Simmons and other experts have warned us of this possibility. You can read how to handle it in this article.

这曾经是棘手的部分。 詹·西蒙斯(Jen Simmons)和其他专家已警告我们这种可能性。 您可以在本文中阅读如何处理它。

Here’s my take: I don’t support IE 11 anymore, so I use feature queries in the way I mentioned above.

这是我的看法：我不再支持IE 11，因此我以上面提到的方式使用功能查询。

同时使用属性后备和功能查询 (Using property fallbacks and feature queries at the same time)

Take look at the following code. What padding values will browsers apply?

看下面的代码。 浏览器将应用哪些填充值？

@supports (display: grid) {  .layout {    display: grid;     grid-template-columns: 1fr 1fr 1fr 1fr;    grid-gap: 1em;     padding-left: 1em;    padding-right: 1em;  }}

.layout {    padding-left: 2em;   padding-right: 2em; }

The answer is: All browsers will apply 2em of left and right padding.

答案是：所有浏览器都将应用2em的左右填充。

Why?

为什么？

This happens because padding-left: 2em and padding-right: 2em were declared later in the CSS file. Properties that were declared later override properties that were declared earlier.

发生这种情况的原因是稍后在CSS文件中声明了padding-left: 2em和padding-right: 2em 。 稍后声明的属性将覆盖之前声明的属性。

If you want to padding-left: 2em and padding-right: 2em to apply only to browsers that don’t support CSS Grid, you can swap the property order.

如果您想将padding-left: 2em和padding-right: 2em 仅应用于不支持CSS Grid的浏览器， 则可以交换属性顺序。

.layout {    padding-left: 2em;   padding-right: 2em; }

@supports (display: grid) {  .layout {    display: grid;     grid-template-columns: 1fr 1fr 1fr 1fr;    grid-gap: 1em;     padding-left: 1em;    padding-right: 1em;  }}

Note: It’s always a good practice to declare fallback code first in CSS because of its cascading nature.

注意 ：由于CSS具有级联性质，因此最好先在CSS中声明后备代码。

This also means, if you’re using both @supports and @supports not, you should declare @supports not first. It makes your code consistent.

这也意味着，如果同时使用@supports 和 @supports not ，则应先声明@supports not 。 它使您的代码一致。

/* Always write "@supports not" first if you use it */@supports not (display: grid) {  .layout {      padding-left: 2em;     padding-right: 2em;   }}

@supports (display: grid) {  .layout {    display: grid;     grid-template-columns: 1fr 1fr 1fr 1fr;    grid-gap: 1em;     padding-left: 1em;    padding-right: 1em;  }}

Now let’s talk about whether sites should look the same across browsers.

现在，让我们讨论一下站点是否在浏览器中看起来应该相同。

网站在浏览器中应该看起来一样吗？ (Should sites look the same across browsers?)

Some people believe that sites should look the same across browsers. They think that branding is important, and stress that sites should look consistent to preserve the brand.

有些人认为网站在浏览器中应该看起来一样。 他们认为品牌塑造很重要，并强调网站应保持外观一致以保护品牌。

Other people say no. They believe they should embrace the spirit of progressive enhancement. They can give users better browsers more love.

其他人说不。 他们相信自己应该拥护逐步增强的精神。 它们可以给用户更好的浏览器更多的爱。

Both views are right, but they come from different angles.

两种观点都是正确的，但是它们来自不同的角度。

The most important point of view comes from users. Is your site able to provide users with what they came for?

最重要的观点来自用户。 您的网站能够为用户提供他们的目的吗？

If yes, you don’t have to be too strict on the consistency. Go ahead and give users with better browsers even better experiences!

如果是的话，您不必太严格地要求一致性。 继续，为用户提供更好的浏览器甚至更好的体验！

结语 (Wrapping up)

To provide support for CSS features, you can use:

要提供对CSS功能的支持，可以使用：

1. Property fallbacks
   财产回退
2. Feature queries
   功能查询

When you write CSS, make sure you declare fallback code first before the other set of code for browsers with better support.

在编写CSS时，请确保先声明后备代码，然后再为支持更好的浏览器声明其他代码集。

支持较旧的浏览器-JavaScript (Supporting Older Browsers — JavaScript)

It’s easy to provide JavaScript support for older browsers. Most of the time you just need to use a polyfill.

为旧版浏览器提供JavaScript支持很容易。 大多数时候，您只需要使用一个polyfill。

But there are more things you can do.

但是，您还可以做更多的事情。

什么是polyfill？ (What’s a polyfill?)

A polyfill is a piece of code that tells browsers how to implement a JavaScript feature. Once you add a polyfill, you don’t need to worry about support anymore. It’ll work.

polyfill是一段代码，它告诉浏览器如何实现JavaScript功能。 一旦添加了polyfill，就不再需要担心支持问题了。 会的

Here’s how a Polyfill works:

这是Polyfill的工作方式：

1. it checks whether the feature is supported
   它检查功能是否受支持
2. if not, it adds code to support the feature
   如果没有，它将添加代码以支持该功能

Here’s an example of a polyfill at work. It checks if the browser supports Array.prototype.find. If the browser doesn’t support Array.prototype.find, it tells the browser how to support it.

这是一个工作中的polyfill的示例。 它检查浏览器是否支持Array.prototype.find 。 如果浏览器不支持Array.prototype.find ，它将告诉浏览器如何支持它。

You can find this code on MDN.

您可以在MDN上找到此代码。

if (!Array.prototype.find) {  Object.defineProperty(Array.prototype, 'find', {    value: function(predicate) {     // 1. Let O be ? ToObject(this value).      if (this == null) {        throw new TypeError('"this" is null or not defined');      }

var o = Object(this);

// 2. Let len be ? ToLength(? Get(O, "length")).      var len = o.length >>> 0;

// 3. If IsCallable(predicate) is false, throw a TypeError exception.      if (typeof predicate !== 'function') {        throw new TypeError('predicate must be a function');      }

// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.      var thisArg = arguments[1];

// 5. Let k be 0.      var k = 0;

// 6. Repeat, while k < len      while (k < len) {        // a. Let Pk be ! ToString(k).        // b. Let kValue be ? Get(O, Pk).        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).        // d. If testResult is true, return kValue.        var kValue = o[k];        if (predicate.call(thisArg, kValue, k, o)) {          return kValue;        }        // e. Increase k by 1.        k++;      }

// 7. Return undefined.      return undefined;    },    configurable: true,    writable: true  });}

Note: A polyfill is a subset of a shim. A shim is a library that brings a new API to an older environment.

注意 ：polyfill是填充程序的子集。 填充程序是一个将新API引入较旧环境的库。

使用填充 (Using polyfills)

There are two ways to use polyfills:

有两种使用polyfill的方法：

1. polyfill manually, like in the example above
   手动执行polyfill，如上例所示
2. adding many polyfills at once through a library
   通过库一次添加许多polyfill

手动填充 (Polyfilling manually)

First, you need to search for the polyfill you need. You should be able to find one if you google around. Smart developers have created polyfills for almost everything you’ll ever need.

首先，您需要搜索所需的polyfill 。 如果您四处搜寻，应该可以找到一个。 聪明的开发人员已经为您几乎需要的所有内容创建了polyfill。

Once you found the polyfill, use the above process to create provide support to older browsers.

找到polyfill后，请使用上述过程创建对较旧浏览器的支持。

一次添加许多polyfill (Adding many polyfills at once)

Some libraries contain many polyfills. ES6-shim is one example of such a library. It provides support for all ES6 features on older browsers.

一些库包含许多polyfill。 ES6-shim是此类库的一个示例。 它支持旧版浏览器上的所有ES6功能。

使用尖端JavaScript功能 (Using cutting-edge JavaScript features)

If you want to use cutting-edge JavaScript features, consider adding Babel into your build process.

如果要使用尖端JavaScript功能，请考虑将Babel添加到构建过程中。

Babel is a tool that compiles JavaScript. During this compile process, it can:

Babel是可编译JavaScript的工具。 在此编译过程中，它可以：

1. add any shim / polyfill you need
   添加您需要的任何垫片/填充料
2. compile preprocessors into JavaScript
   将预处理器编译为JavaScript

More on the second point:

关于第二点的更多信息：

Babel works offline in your build process. It can read files you pass into it, and then convert these files into JavaScript the browser can read.

Babel在您的构建过程中脱机工作。 它可以读取传递给它的文件，然后将这些文件转换为浏览器可以读取JavaScript。

What this means is you can use cutting-edge features like Flow, TypeScript, and other cool technologies you’ve heard about. They’ll all work in browsers, provided you pass them through Babel first!

这意味着您可以使用诸如Flow，TypeScript以及您所听说的其他炫酷技术之类的尖端功能。 只要您先将它们通过Babel，它们就可以在浏览器中使用！

如果polyfill还不够怎么办？ (What if polyfills aren’t enough?)

If polyfills aren’t enough to support the feature, you might want to reconsider the amount of support you provide for the browser in question.

如果Polyfill不足以支持该功能，则可能需要重新考虑为该浏览器提供的支持量。

Do you need to provide the same functionality across different browsers? Maybe you should consider progressive enhancement instead.

您是否需要在不同的浏览器中提供相同的功能？ 也许您应该考虑逐步增强。

Maybe you can code in a way that doesn’t use the feature?

也许您可以使用不使用该功能的方式进行编码？

Lots of maybes, but you get the drift.

可能很多，但您会随波逐流。

如何判断浏览器是否支持该功能？ (How to tell if a browser supports the feature?)

First, I check caniuse.com. Write the name of the JavaScript feature you want, and you’ll be able to see browser support levels.

首先，我检查caniuse.com 。 输入所需JavaScript功能的名称，即可看到浏览器支持级别。

Here’s an example with Abort Controller

这是Abort Controller的示例

If caniuse.com doesn’t give me any information, I check MDN. You’ll find browser support at the bottom of most articles.

如果caniuse.com没有提供任何信息，请检查MDN。 您会在大多数文章的底部找到对浏览器的支持。

Here’s the example with Abort Controller again:

这再次是Abort Controller的示例：

当心JavaScript的成本 (Beware the cost of JavaScript)

When you use polyfills you add more JavaScript code.

使用polyfill时，您将添加更多JavaScript代码。

The problem with adding more JavaScript is, well, there is more JavaScript. And with more JavaScript comes more problems:

添加更多JavaScript的问题是，存在更多JavaScript。 随着更多JavaScript带来了更多的问题：

1. older browsers usually live in older computers. They may not have enough processing power.
   较旧的浏览器通常位于较旧的计算机中。 它们可能没有足够的处理能力。

2. JavaScript bundles can delay site load. More on this in “The cost of JavaScript“ by Addy Osmani

   JavaScript捆绑包可能会延迟网站加载。 有关更多信息，请参见Addy Osmani的“ JavaScript的成本 ”

结语 (Wrapping up)

It’s easy to add support for JavaScript features. Most of the time, you add a polyfill and call it a day. But be aware of the cost of JavaScript when you do so!

添加对JavaScript功能的支持很容易。 在大多数情况下，您添加一个polyfill并称之为一天。 但是，这样做时请注意JavaScript的成本！

Sometimes, it might be good to ditch the feature entirely.

有时，最好完全放弃该功能。

为什么要支持较旧的浏览器？ (Why support older browsers?)

Why you have to care about old browsers?

为什么您必须关心旧的浏览器？

Who uses old browsers? Probably, users with old computers?

谁使用旧的浏览器？ 可能是使用旧计算机的用户？

If they use old computers, perhaps they don’t have money to buy a new one.

如果他们使用旧计算机，也许他们没有钱购买新计算机。

If they don’t have money to buy a new computer, they probably will not buy anything from you as well.

如果他们没有钱购买新计算机，他们可能也不会从您那里购买任何东西。

If they will not buy anything from you, why you have to care about supporting their browsers?

如果他们不会从您那里购买任何东西，为什么您要关心支持他们的浏览器？

To a business person, that’s a perfectly reasonable train of thought. But why do we developers still insist on supporting older browsers?

对于商务人士而言，这是一个完全合理的思路。 但是，为什么我们的开发人员仍然坚持支持较旧的浏览器？

Let’s break it down

让我们分解一下

There are so many layers of assumptions on the original thought process.

关于原始思维过程的假设层很多。

“Who uses old browsers? Probably, users with old computers? If they use old computers, perhaps they don’t have money to buy a new one”.

“谁使用旧的浏览器？ 可能是使用旧计算机的用户？ 如果他们使用旧计算机，也许他们没有钱购买新计算机。”

While it’s true that people use old browsers because they use old computers, we cannot assume that people cannot afford to buy new ones.

的确，人们之所以会使用旧的浏览器是因为他们使用的是旧计算机，我们不能认为人们买不起新的浏览器。

• Maybe their company doesn’t want to buy them one.
  也许他们的公司不想买给他们一个。
• Maybe they’re happy with their computer, and they don’t want to upgrade.
  也许他们对计算机感到满意，并且他们不想升级。
• Maybe they don’t have the knowledge to upgrade their computers.
  也许他们不具备升级计算机的知识。
• Maybe they don’t have access to new computers.
  也许他们无权使用新计算机。
• Maybe they’re bound to mobile phones that don’t have good browsers.
  也许它们绑定到了没有好的浏览器的手机上。

Don’t assume.

不要假设

If they don’t have money to buy a new computer, they probably will not buy anything from you as well. If they will not buy anything from you, why you have to care about supporting their browsers?

如果他们没有钱购买新计算机，他们可能也不会从您那里购买任何东西。 如果他们不会从您那里购买任何东西，为什么您要关心支持他们的浏览器？

We have to zoom out into other areas to talk about this point.

我们必须扩大到其他领域来谈论这一点。

轮椅无障碍 (Wheelchair accessibility)

If you’ve been to Singapore, you’ll notice there’s a ramp or an elevator next to almost every staircase.

如果您去过新加坡，您会发现几乎每个楼梯旁边都有一个坡道或电梯。

But why? Why do the government and private corporations spend money on elevators and ramps? Why build them when staircases are enough to bring people from a lower elevation to a higher one?

但为什么？ 为什么政府和私人公司在电梯和斜道上花钱？ 当楼梯足以将人们从较低的高度带到较高的高度时，为什么还要建造它们呢？

It turns out that some people aren’t able to use stairs. They can’t walk with their feet. They have to sit in wheelchairs, and they can’t wheel themselves up a staircase. The elevators and ramps serve these people.

原来，有些人无法使用楼梯。 他们不能用脚走路。 他们必须坐在轮椅上，不能将自己推上楼梯。 电梯和坡道为这些人服务。

And it turns out that more people benefit from elevators and ramps.

事实证明，越来越多的人受益于电梯和坡道。

1. People who have weaker knees.
   膝盖较弱的人。
2. People who have a bicycle or scooter with them.
   带自行车或踏板车的人。
3. Parents who’re pushing a baby trolley.
   推婴儿车的父母。

If you find yourself pushing anything with wheels, you’ll use the ramp or elevator without thinking twice. You benefit too.

如果发现自己用轮子推动了任何事情，则无需三思而后行即可使用坡道或电梯。 您也受益。

But the problem is: Nobody earns a single cent from operating the ramps or the elevators? So why build them?

但是问题是：没有人从操作坡道或电梯中获得一分钱吗？ 那么为什么要建造它们呢？

Because it’s worth it.

因为它值得。

And worth doesn’t always mean money.

价值并不总是意味着金钱。

考虑全球变暖 (Consider global warming)

You live on Earth. What do you feel about global warming?

你生活在地球上。 您对全球变暖有何看法？

Some people don’t care. It’s okay if forests get burned. It’s okay if companies pollute rivers and release tonnes of carbon dioxide into the air. It doesn’t affect them.

有些人不在乎。 如果森林被烧毁没关系。 如果公司污染河流并将二氧化碳排放到空气中，这没关系。 它不会影响他们。

But there’s a group of people that care. They love the planet we’re living on. They want to give their children a better place to live in. There are lots of reasons why they care. And they probably want to save as many resources as possible.

但是，有一群人在乎。 他们爱我们赖以生存的星球。 他们想给孩子一个更好的居住环境。他们关心的原因很多。 他们可能希望节省尽可能多的资源。

Where do you stand?

你站在哪里？

Would you give money to a company that destroys the earth while it operates?

您会给一家在地球运转时摧毁地球的公司捐钱吗？

Maybe you will. Maybe you won’t. Maybe you don’t care. All three options are valid.

也许你会的。 也许你不会。 也许你不在乎。 这三个选项均有效。

And once again, you see, it’s not always about the money.

再一次，您会发现，钱并不总是关于钱的。

网络适​​合所有人 (The web is for everyone)

The dream behind the Web is of a common information space in which we communicate by sharing information.

Web背后的梦想是建立一个公共信息空间，通过共享信息我们可以在其中进行通信。

— Tim Berners-Lee

—蒂姆·伯纳斯·李

We frontend developers are the custodians of the web. How the web turns out is up to us. We can’t force everyone to build ramps and elevators, but we can make sure we build them ourselves.

我们的前端开发人员是网络的管理员。 网络的结果取决于我们。 我们不能强迫所有人建造坡道和电梯，但是我们可以确保自己建造。

The choice is up to you, really.

确实，选择取决于您。

You don’t have to care if you don’t want to.

如果您不想，就不必担心。

Most good frontend developers I know? They care. They choose to be inclusive. It’s what makes us frontend developers.

我认识的最优秀的前端开发人员？ 他们在乎。 他们选择包容各方。 这就是使我们成为前端开发人员的原因。

We care.

我们关心。

But sometimes we also have constraints and limits. And we work with those limits.

但是有时候我们也有约束和限制。 我们在这些限制下工作。

This article was originally posted at my blog.Sign up for my newsletter if you want more articles to help you become a better front-end developer.

本文最初发布于 我的博客。 如果您想要更多文章来帮助您成为更好的前端开发人员，请注册我的新闻通讯 。

翻译自: https://www.freecodecamp.org/news/why-you-should-care-about-supporting-older-browsers-39bbc28fb7fd/

青少年为什么要关心国家大事