是否值得为IE或某些其他旧版本指定某些属性?[向后兼容]

Neo*_*eEX 6 css browser backwards-compatibility css3

我一直在使用,-webkit并且已经使用-moz了好几次了,直到让我震惊。除了根据浏览器定义特定的属性以及某些break-inside不受广泛支持的属性外,

不会

border-radius:5px;

使它更短

-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

还有许多其他功能已标准化,但仍有几个示例使用了供应商前缀,这样做的目的是什么?

前者受最新浏览器的支持,但是我们不能假设几乎每个人都在使用最新的浏览器(特别是不是某些规则适用的IE较旧版本)吗?(即使人们不更新他们的浏览器,考虑到没有人从胸口拿起一部诺基亚旧手机并开始浏览,他们也只留下了几个版本)

我们为什么要使用它们?为什么我们要指定较旧的IE特定规则或仅指定较旧的浏览器规则?

跳入旧版本多少就足够了?IE8?

sco*_*ord 4

以下是我的想法 - 在详细讨论之前,我不得不说,在浏览器支持方面,我是一个怪胎。

直到几年前,我还试图支持 IE8 及更高版本。这种逻辑背后的原因是人们被Windows XP“困住”,而IE8是Windows XP支持的最新版本。我所说的“被困”是指像政府电脑这样的情况,升级成本太高。

在 Windows 7 足够成熟并且 Windows XP 使用率下降之后,我尝试支持 IE9 及更高版本。这本质上意味着即使在有用的属性出现后(如 Flexbox),我也花了很长时间才能迁移 - 所以我正在使用表格构建布局以获得最佳浏览器支持等。

然而,Javascript 框架开始放弃对旧版浏览器(包括 IE9)的支持,然后 CSS 框架也开始放弃支持。如果你考虑一下,微软本身已经放弃支持很久了。主要移动公司不再支持其 2 年设备,那么我们为什么要支持旧版浏览器呢?正如其他答案中所述,这取决于受众 - 想象一下您最好的客户公司的首席执行官拥有一台装有 Windows XP 或其他过时设备的笔记本电脑 - 如果其他人使用现代浏览器则无关紧要。

因此,几年前,你必须在追随潮流、成为现代设备还是支持旧设备之间做出选择。我完全追求内容的一致性和统一性,因此为一些选定的浏览器支持现代功能并为其他浏览器放弃它们对我来说是行不通的。Flexbox 是促使我跳过旧浏览器支持的属性之一 - 它极大地帮助我减少了标记 - 从而使维护变得更容易。与此同时,甚至 Bootstrap 也决定放弃对旧版浏览器的支持,因此必须升级才能跟上竞争的步伐。

不用说,问题不仅出在 IE 上,还出在 Android 上,为了让原生浏览器支持特定的属性 - vh、flexbox 包装等,Android 升级到了 v4.4

说了这么多,我来给你一个直接的答案:

  • 不要担心对 IE9 的支持 - 甚至 10 也不行。IE10 可以在同一操作系统上升级到 11,因此出于安全原因无论如何都应该升级。IE9 不受 JS 框架(例如 Ember)支持,缺乏 CSS3 过渡和其他有用的属性,例如 flexbox。如果没有这些,如果您的目标是设计一致性,您的设计将不得不后退许多步骤。

  • 作为旁注,IE10 开始支持他们自己对 Flexbox 的解释(对 Flexbox 的所有这些持久性感到抱歉,但它是最有用的属性之一)。这意味着,为了正确支持它,您必须编写大量 CSS。想象一下添加 30kb 的缩小 CSS 来仅支持一种相当不常见的浏览器。这值得么?

  • 某些 webkit 浏览器(如 Opera)可能仍需要 4 年前发布的浏览器版本的供应商特定前缀 - 例如用于 CSS3 转换。老实说,更重要的事情在这样的浏览器(包括 Opera)上被破坏了,我会更担心其他事情。就我个人而言,我只在某些情况下使用-webkit-前缀(例如最近已经成熟的 Flexbox 属性)。

  • 在某些情况下,即使在现代浏览器中,特定于浏览器的前缀也可能很方便,例如,设置范围输入或滚动条的样式,您必须混乱特定于浏览器的属性才能实现一致性。在这种情况下,可能需要使用供应商前缀进行特定的 CSS hack。

最后一点,我会避免任何前沿属性,例如网格;了解它的作用和工作原理,但暂时不要使用它。您应该查看https://caniuse.com/以便了解 CSS 属性和浏览器支持。

但是,这取决于您的决定,您应该根据项目的要求进行选择。两年前,我会告诉你要支持尽可能老的……那时你可以通过不同的努力实现同样的目标,但现在不再是这样了。从某一点开始......旧版浏览器无法跟上步伐。