是否值得为 IE 或任何其他旧版本指定某些属性? [向后兼容]
Is it worth specifying certain properties for IE, or just any other older versions? [Backwards Compatible]
我已经使用 -webkit
和 -moz
好几次了,直到这让我印象深刻。除了根据浏览器和某些属性(例如 break-inside
未得到广泛支持的属性定义特定属性外,
不会
border-radius: 5px;
缩短
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
还有许多其他功能已经标准化,但有几个示例仍然使用供应商前缀,这样做的目的是什么?
前者受最新的浏览器支持,但我们能否假设几乎每个人都在使用几乎最新的浏览器(尤其是适用某些规则的旧版本的 IE)? (即使人们不更新他们的浏览器,考虑到没有人从箱子里拿出诺基亚旧 phone 并开始浏览,他们也只落后几个版本)
我们为什么要使用它们?为什么我们应该指定较旧的 IE 特定规则或仅指定较旧的浏览器规则?
深入研究旧版本多少就足够了? IE8?
您不应该担心比 IE 8 更早的浏览器。这些浏览器几乎不再使用,而且它们不支持很多东西。请参考这些网站:
https://imagebox.com/industry/why-your-website-doesnt-look-the-same-in-every-browser/
http://dowebsitesneedtolookexactlythesameineverybrowser.com/.
关于各种border-radius命令,一定要全部用上。我发现如果不包括 webkit 和 mozilla,就会损失很多流量。在我的网站中,我通常会包含命令的每个变体,这样我就可以确定我的网站是否正常工作。最好有一个又大又丑的 CSS 代码,而不是一个坏掉的网站。
如果您需要更多说明,请随时评论此答案。
好吧...这是一个非常大的话题,因此很难回答所有问题,但是您 should/could 可以遵循一些最佳实践。
首先 - 一切都基于您的特定受众。查看您的分析并查看正在使用的浏览器。这些数据可能会让您大吃一惊,尤其是如果您有美国医疗保健或政府用户。 Stylelint 等工具将帮助您在 CSS.
中找到不受支持的规则
接下来,最佳做法是利用功能检测,而不是针对特定浏览器。您可以使用 @supports
in conditional code that works like a media query
. This way your code is only being applied if the browser can use it. You can do similar detection in javascript using Modernizr.
来实现
最后,我个人 推荐使用 CSS post 处理器 或构建脚本,这样你就不用再担心前缀问题了(而且它会加快你的速度使用可选插件进行开发)。我倾向于喜欢 PostCSS and Prefixfree 的组合(其中包含一些 Webpack 定制),但有许多类似的选项。
主要的好处是库会跟踪哪些需要前缀,哪些不需要,因此您编写无前缀的版本,剩下的就可以处理了。
没有硬性规定,但您应该尽量支持用户的设备,而不是强行升级。上述做法的好处是,您的 生成的代码将更易于维护、面向未来并针对 您的用户。
这是我的想法 - 在详细介绍之前,我不得不说,在浏览器支持方面我是个怪人。
直到几年前,我一直在尝试支持 IE8 及更高版本。这种逻辑背后的原因是 "trapped" 与 Windows XP 和 IE8 的人是 Windows XP 支持的最新版本。我所说的被困是指它们是像政府 pc 那样升级成本太高的情况。
在 Windows 7 足够成熟并且 Windows XP 使用率下降后,我尝试支持 IE9 及更高版本。这实质上意味着,即使在有用的属性(如 flexbox)出现之后,我也花了很长时间来迁移 - 所以我正在构建带有表格的布局以获得最佳浏览器支持等。
但是,Javascript 框架开始放弃对旧版浏览器(包括 IE9)的支持,然后 CSS 框架开始放弃支持。如果你考虑一段时间,MS 本身已经放弃了很久以前的支持。主要移动公司不再支持其 2 年期设备,那么我们为什么要支持旧版浏览器?正如其他答案中所述,这取决于听众 - 想象一下您最好的客户公司的首席执行官拥有一台装有 Windows XP 或其他过时设备的笔记本电脑 - 如果其他人使用现代浏览器则无关紧要..
因此,几年前,您必须 select 在跟随潮流和保持现代或支持旧设备之间做出选择。我完全支持内容的一致性和统一性,因此支持一些 select 浏览器的现代功能并为其他浏览器放弃它们对我来说是行不通的。 Flexbox 是推动我跳过旧浏览器支持的那些属性之一——它极大地帮助我减少了标记——从而使维护更容易。同时,甚至 Bootstrap 决定放弃对旧浏览器的支持,因此,必须升级以跟上竞争的步伐。
不用说,问题不仅出在 IE 上,还出在 Android 上,为了使标准浏览器支持特定属性——vh、flexbox 包装等,它占用了 v4.4
说了这么多,直截了当地回答你:
不要理会对 IE9 的支持 - 甚至 10 也不行。IE10 可以升级到 11 OS,因此出于安全原因无论如何都应该升级。 IE9 不受 JS 框架支持(例如 Ember),缺少 CSS3 转换和其他有用的属性,如 flexbox。如果没有这些,如果您的目标是设计一致性,您的设计将不得不后退很多步。
作为旁注,IE10 开始支持他们自己对 flexbox 的解释(很抱歉所有这些对 flexbox 的持久性,但它是最有用的属性之一)。这意味着,为了正确支持它,您将不得不写很多 CSS。想象一下,添加 30kb 的缩小 CSS 以仅支持一种相当不常见的浏览器。值得吗?
一些 webkit 浏览器(如 Opera)可能仍然需要 4 年前发布的浏览器版本的供应商特定前缀 - 例如 CSS3 转换。 Tbh 更重要的事情在这样的浏览器(包括 Opera)上被破坏了,我会更担心其他事情。我个人只在 select 情况下使用 -webkit-
前缀(例如最近成熟的 flexbox 属性)。
在某些情况下,即使在现代浏览器中,特定于浏览器的前缀也可能会派上用场,例如,为范围输入或滚动条设置样式时,您必须混淆特定于浏览器的属性才能实现一致性。在这种情况下,可能需要使用带有供应商前缀的特定 CSS hack。
最后一点,我会避免使用任何尖端属性,例如 grid;了解它的作用和工作原理,但暂时不要使用它。您应该查看 https://caniuse.com/ 以便了解 CSS 属性和浏览器支持。
然而,这取决于您的决定,您应该根据项目的要求制作 selection。两年前,我会告诉你,尽你所能支持……那时候你可以用不同的努力来实现同样的事情,但现在已经不是这样了。从某个点开始......旧的浏览器无法跟上步伐。
我已经使用 -webkit
和 -moz
好几次了,直到这让我印象深刻。除了根据浏览器和某些属性(例如 break-inside
未得到广泛支持的属性定义特定属性外,
不会
border-radius: 5px;
缩短
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
还有许多其他功能已经标准化,但有几个示例仍然使用供应商前缀,这样做的目的是什么?
前者受最新的浏览器支持,但我们能否假设几乎每个人都在使用几乎最新的浏览器(尤其是适用某些规则的旧版本的 IE)? (即使人们不更新他们的浏览器,考虑到没有人从箱子里拿出诺基亚旧 phone 并开始浏览,他们也只落后几个版本)
我们为什么要使用它们?为什么我们应该指定较旧的 IE 特定规则或仅指定较旧的浏览器规则?
深入研究旧版本多少就足够了? IE8?
您不应该担心比 IE 8 更早的浏览器。这些浏览器几乎不再使用,而且它们不支持很多东西。请参考这些网站:
https://imagebox.com/industry/why-your-website-doesnt-look-the-same-in-every-browser/ http://dowebsitesneedtolookexactlythesameineverybrowser.com/.
关于各种border-radius命令,一定要全部用上。我发现如果不包括 webkit 和 mozilla,就会损失很多流量。在我的网站中,我通常会包含命令的每个变体,这样我就可以确定我的网站是否正常工作。最好有一个又大又丑的 CSS 代码,而不是一个坏掉的网站。
如果您需要更多说明,请随时评论此答案。
好吧...这是一个非常大的话题,因此很难回答所有问题,但是您 should/could 可以遵循一些最佳实践。
首先 - 一切都基于您的特定受众。查看您的分析并查看正在使用的浏览器。这些数据可能会让您大吃一惊,尤其是如果您有美国医疗保健或政府用户。 Stylelint 等工具将帮助您在 CSS.
中找到不受支持的规则接下来,最佳做法是利用功能检测,而不是针对特定浏览器。您可以使用 @supports
in conditional code that works like a media query
. This way your code is only being applied if the browser can use it. You can do similar detection in javascript using Modernizr.
最后,我个人 推荐使用 CSS post 处理器 或构建脚本,这样你就不用再担心前缀问题了(而且它会加快你的速度使用可选插件进行开发)。我倾向于喜欢 PostCSS and Prefixfree 的组合(其中包含一些 Webpack 定制),但有许多类似的选项。
主要的好处是库会跟踪哪些需要前缀,哪些不需要,因此您编写无前缀的版本,剩下的就可以处理了。
没有硬性规定,但您应该尽量支持用户的设备,而不是强行升级。上述做法的好处是,您的 生成的代码将更易于维护、面向未来并针对 您的用户。
这是我的想法 - 在详细介绍之前,我不得不说,在浏览器支持方面我是个怪人。
直到几年前,我一直在尝试支持 IE8 及更高版本。这种逻辑背后的原因是 "trapped" 与 Windows XP 和 IE8 的人是 Windows XP 支持的最新版本。我所说的被困是指它们是像政府 pc 那样升级成本太高的情况。
在 Windows 7 足够成熟并且 Windows XP 使用率下降后,我尝试支持 IE9 及更高版本。这实质上意味着,即使在有用的属性(如 flexbox)出现之后,我也花了很长时间来迁移 - 所以我正在构建带有表格的布局以获得最佳浏览器支持等。
但是,Javascript 框架开始放弃对旧版浏览器(包括 IE9)的支持,然后 CSS 框架开始放弃支持。如果你考虑一段时间,MS 本身已经放弃了很久以前的支持。主要移动公司不再支持其 2 年期设备,那么我们为什么要支持旧版浏览器?正如其他答案中所述,这取决于听众 - 想象一下您最好的客户公司的首席执行官拥有一台装有 Windows XP 或其他过时设备的笔记本电脑 - 如果其他人使用现代浏览器则无关紧要..
因此,几年前,您必须 select 在跟随潮流和保持现代或支持旧设备之间做出选择。我完全支持内容的一致性和统一性,因此支持一些 select 浏览器的现代功能并为其他浏览器放弃它们对我来说是行不通的。 Flexbox 是推动我跳过旧浏览器支持的那些属性之一——它极大地帮助我减少了标记——从而使维护更容易。同时,甚至 Bootstrap 决定放弃对旧浏览器的支持,因此,必须升级以跟上竞争的步伐。
不用说,问题不仅出在 IE 上,还出在 Android 上,为了使标准浏览器支持特定属性——vh、flexbox 包装等,它占用了 v4.4
说了这么多,直截了当地回答你:
不要理会对 IE9 的支持 - 甚至 10 也不行。IE10 可以升级到 11 OS,因此出于安全原因无论如何都应该升级。 IE9 不受 JS 框架支持(例如 Ember),缺少 CSS3 转换和其他有用的属性,如 flexbox。如果没有这些,如果您的目标是设计一致性,您的设计将不得不后退很多步。
作为旁注,IE10 开始支持他们自己对 flexbox 的解释(很抱歉所有这些对 flexbox 的持久性,但它是最有用的属性之一)。这意味着,为了正确支持它,您将不得不写很多 CSS。想象一下,添加 30kb 的缩小 CSS 以仅支持一种相当不常见的浏览器。值得吗?
一些 webkit 浏览器(如 Opera)可能仍然需要 4 年前发布的浏览器版本的供应商特定前缀 - 例如 CSS3 转换。 Tbh 更重要的事情在这样的浏览器(包括 Opera)上被破坏了,我会更担心其他事情。我个人只在 select 情况下使用
-webkit-
前缀(例如最近成熟的 flexbox 属性)。在某些情况下,即使在现代浏览器中,特定于浏览器的前缀也可能会派上用场,例如,为范围输入或滚动条设置样式时,您必须混淆特定于浏览器的属性才能实现一致性。在这种情况下,可能需要使用带有供应商前缀的特定 CSS hack。
最后一点,我会避免使用任何尖端属性,例如 grid;了解它的作用和工作原理,但暂时不要使用它。您应该查看 https://caniuse.com/ 以便了解 CSS 属性和浏览器支持。
然而,这取决于您的决定,您应该根据项目的要求制作 selection。两年前,我会告诉你,尽你所能支持……那时候你可以用不同的努力来实现同样的事情,但现在已经不是这样了。从某个点开始......旧的浏览器无法跟上步伐。