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

Question

我一直在使用-webkit和-moz很多次，直到这让我感到震惊。除了基于浏览器定义特定属性和某些属性（如break-inside），这些属性未得到广泛支持，

岂不

border-radius：5px;

让它更短

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

还有很多其他功能已经标准化，但有几个例子仍然使用供应商前缀，这样做的目的是什么？

前者受到最新浏览器的支持，但我们不能假设几乎每个人都在使用几乎最新的浏览器（尤其是某些规则不适用的旧版IE）？ （即使人们不更新他们的浏览器，考虑到没有人从胸前取出诺基亚旧手机并开始浏览，他们只会被少数版本所遗忘）

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

潜入旧版本多少就足够了？ IE8？

Answer 1

以下是我的想法 - 在详细介绍之前，我不得不说，在浏览器支持方面，我是一个怪人。

直到几年前，我试图从IE8及更高版本支持。这种逻辑背后的原因是，使用Windows XP和IE8“陷入困境”的人是Windows XP支持的最新版本。陷入困境我的意思是他们就像政府电脑那样升级成本太高。

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

但是，Javascript Frameworks开始放弃对旧浏览器（包括IE9）的支持，然后CSS框架开始放弃支持。如果你考虑一段时间，MS本身已经在很长一段时间内放弃了支持。大型移动公司放弃对其2年设备的支持，那么我们为什么要支持旧浏览器呢？正如其他答案中所述，它取决于受众 - 想象一下，如果其他人使用现代浏览器，那么拥有Windows XP或其他过时设备的笔记本电脑的最佳客户公司的首席执行官就无所谓了。

因此，它回到了几年前的一个点，你必须选择跟随流和现代或支持旧设备。我全力以赴保持内容的一致性和统一性，因此支持一些精选浏览器的现代功能并将其丢弃给其他浏览器对我来说是不合适的。 Flexbox是推动我跳过旧浏览器支持的那些属性之一 - 它极大地帮助我减少了标记 - 从而使维护更容易。与此同时，即使Bootstrap也决定放弃对旧版浏览器的支持，因此，必须升级才能跟上竞争对手的步伐。

毋庸置疑，问题不仅仅是IE，而且Android也需要达到v4.4才能使股票浏览器支持特定属性 - vh，flexbox包装等

这些说，让我给你一个直截了当的答案：

• 不要打扰IE9的支持 - 甚至不是10.在同一操作系统上IE10可以升级到11，所以出于安全考虑，它应该升级。 JS框架（例如Ember）不支持IE9，缺少CSS3过渡和其他有用的属性，如flexbox。如果没有这些，如果您的目标是设计一致性，那么您的设计必须采取许多步骤。
• 作为旁注，IE10开始支持他们自己对flexbox的解释（抱歉所有这些与flexbox的持久性，但它是最有用的属性之一）。这意味着，为了正确支持它，你必须编写很多CSS。想象一下，添加30kb的缩小CSS只支持一个非常罕见的浏览器。这值得么？
• 一些webkit浏览器（如Opera）可能仍需要4年前发布的浏览器版本的特定于供应商的前缀 - 例如CSS3转换。更重要的事情在这些浏览器（包括Opera）上被打破，我会更担心其他的东西。我个人在特定情况下只使用-webkit-前缀（例如最近成熟的flexbox属性）。
• 在某些情况下，即使在现代浏览器中，浏览器特定的前缀也可能会派上用场，例如样式化范围输入或滚动条，您必须使用特定于浏览器的属性来实现一致性。在这种情况下，可能需要具有供应商前缀的特定CSS黑客。

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

但是，由您决定，您应该根据项目的要求进行选择。两年前，我会告诉你尽可能多的支持......那时你可以用不同的努力来实现同样的目标，但事实并非如此。从一个点开始......旧浏览器无法跟上步伐。

Answer 2

嗯......这是一个非常大的话题，所以很难回答所有问题，但是有一些你应该/可以遵循的最佳实践。

首先 - 一切都基于您的特定受众。查看您的分析并查看正在使用的浏览器。如果您有美国医疗保健或政府用户，这些数据可能会让您感到惊讶。像Stylelint这样的工具可以帮助您在CSS中找到不受支持的规则。

接下来，最佳做法是使用功能检测而不是针对特定浏览器。您可以通过在@supports中使用的条件代码中使用media query来实现它。这样，只有在浏览器可以使用它时才会应用您的代码。你可以使用Modernizr在javascript中进行类似的检测。

最后，我个人建议使用CSS后处理器或构建脚本，这样你就可以不再担心前缀（加上它会加快你使用可选插件的开发速度）。我倾向于喜欢PostCSS和Prefixfree的组合（包括那些包含的几个Webpack自定义）但是有许多类似的选项。

主要的好处是库可以跟踪需要前缀的内容和不需要前缀的内容，因此您可以编写非前缀版本，其余内容将由此处理。

---

没有严格的规则，但您应该尝试支持用户的设备，而不是推动升级。上述实践的好处在于，您生成的代码将更易于维护，面向未来并针对您的用户。

Answer 3

您不应该担心IE 8之前的浏览器。这些浏览器几乎不再使用，它​​们不支持很多东西。请参考这些网站：

https://imagebox.com/industry/why-your-website-doesnt-look-the-same-in-every-browser/ http://dowebsitesneedtolookexactlythesameineverybrowser.com/。

就各种border-radius命令而言，请务必全部使用它们。我发现如果你不包括webkit和mozilla，你就会失去很多流量。在我的网站中，我通常包含命令的每个变体，所以我确信我的网站是有效的。最好有一个庞大而丑陋的CSS代码而不是破碎的网站。

如果您需要更多说明，请随意评论此答案。