我有一个网站,就 IE8 而言,我支持,仅此而已。
当我第一次启动该网站时,我决定为 CSS 元素使用 CSS 供应商前缀,例如边框半径、框阴影等。我是从一个完全菜鸟的角度来做的。
但是,不使用它们并简单地让浏览器赶上而不是为了统一而修补是更好的方法吗?
我有一个网站,就 IE8 而言,我支持,仅此而已。
当我第一次启动该网站时,我决定为 CSS 元素使用 CSS 供应商前缀,例如边框半径、框阴影等。我是从一个完全菜鸟的角度来做的。
但是,不使用它们并简单地让浏览器赶上而不是为了统一而修补是更好的方法吗?
不,您不应该删除所有这些,但是您也可以删除不再需要的那些。
Can I use...是检查浏览器对各种 CSS、HTML 和 JavaScript 功能的支持的绝佳资源。例如,如果您执行搜索box-sizing
,它会告诉您所有现代浏览器都部分支持此功能,并且 Firefox 需要该-moz-
前缀。您还可以在此处仅在一页上查看所有 CSS 支持表。
有几个在线资源可以显示有关浏览器使用情况的信息。这方面的一个例子是StatCounter。StatCounter 提供可以按时过滤的浏览器版本统计信息。如果我们回顾过去的 3 个月,我们可以猜测我们仍然应该以支持 Firefox 20+、Chrome 25+、IE 8+ 和 Safari 5.1+ 为目标。
就个人而言,我现在只保留您的供应商前缀 - 这仍然是专业做法 - 那些不需要它们的浏览器无论如何都会忽略它们。
如果您真的想摆脱前缀,您可以尝试的解决方案之一是-prefix-free。它是一个 javascript 插件,它循环遍历您的样式表,并根据当前浏览器删除未使用的样式表。
虽然我没有测试它,但我认为它肯定会降低性能。
您还可以删除对功能和/或用户体验没有重要意义的属性的前缀,例如等。在没有这些属性的情况下border-radius
,box-shadow
您必须测试每个元素的行为方式。例如,您有一个带有 的按钮border-radius: 4px
。在不支持边框半径的浏览器中,它只会有粗糙的角落。你必须只考虑它是否值得牺牲。
我们的方法是删除那些不需要的。
边框半径
框阴影
box-sizing(很快?firefox 仍在使用它。@James Donnelly 指出)
不透明度(不是前缀,但不需要 ms-filter thingie)
内联块(这里相同,不需要内联+缩放修复)