It's the year 2009. Internet Explorer 8 has finally been released, and Firefox is coming up to 3.5. Many of the large browsers are starting to integrate features from CSS3 and HTML 5, or have been doing that for quite a while now. Still, I find myself developing web pages exactly the same way I did back in 2005.
这是2009年.Internet Explorer 8终于发布了,Firefox也达到了3.5。许多大型浏览器都开始集成CSS3和HTML 5中的功能,或者已经有很长一段时间了。尽管如此,我发现自己开发的网页与2005年的方式完全相同。
A lot of progress has been made since then, and I think the reason that I haven't started taking advantage of these new possibilities is that it's so hard to know which of the new features that work in all major browsers. Since I'm mostly a backend developer I just don't have the time to keep up these developments anymore. Still, I feel like I'm missing out on a lot of cool stuff that actually would make my life a lot easier.
自那时以来取得了很多进展,我认为我没有开始利用这些新的可能性的原因是很难知道哪些新功能适用于所有主流浏览器。由于我主要是后端开发人员,所以我没有时间继续保持这些发展。尽管如此,我觉得我错过了许多很酷的东西,这些东西实际上会让我的生活变得更轻松。
How can I quickly determine if a feature of CSS3 or HTML5 is supported by all major modern browsers?
如何快速确定所有主流现代浏览器是否支持CSS3或HTML5的功能?
4 个解决方案
#1
Can I Use is a website which tracks browser support for current and upcoming web standards. Check it out if you would like to know whether or not a given feature is widely supported.
我可以使用的是一个跟踪浏览器对当前和即将推出的Web标准的支持的网站。如果您想知道某个特定功能是否得到广泛支持,请查看它。
#2
Font embedding through CSS, using @font-face. Webkit/Safari has been supporting it since version 3.1, Microsoft since IE4, Mozilla since Firefox 3.5 (browser support overview).
使用@ font-face通过CSS嵌入字体。 Webkit / Safari自3.1版本以来一直支持它,微软自IE4以来,Mozilla自Firefox 3.5(浏览器支持概述)以来一直支持它。
Also, the varied implementations of the Selectors API, which provides a browser-native CSS selector engine for use in DOM scripting.
此外,Selectors API的各种实现,提供了一个浏览器本地CSS选择器引擎,用于DOM脚本。
For other examples, When Can I Use... seems to be a very good reference.
对于其他示例,何时可以使用...似乎是一个非常好的参考。
#3
I would say display:table and a range of CSS2.1 selectors are the big wins for designers. display:table solves some unsolvable or difficult layouts like 100% height and inside borders without breaking semantics and using actual tables.
我会说display:table和一系列CSS2.1选择器是设计师的最大胜利。 display:table解决了一些无法解决或困难的布局,如100%高度和内部边框,不会破坏语义和使用实际表格。
Multiple classes (.c1.c2)
多个类(.c1.c2)
I use min/max-width/height a lot.
我经常使用min / max-width / height。
Also working :hover and !important are awesome.
还在工作:悬停和!重要的是很棒的。
I would have liked to add SVG support to that list but naturally Microsoft messed that up.
我本来希望在该列表中添加SVG支持,但很自然地,微软搞砸了。
BTW, big warning to those getting excited about HTML5 features. There is no official date for the adoption of this spec. It's even been implied it could take another 10 years (though I doubt that). The point is anything you do with HTML5 now is subject to breakage when the official spec does arrive and in the meantime you can expect plenty of browser inconsistencies, bugs and API changes (not to mention browsers that don't support the features at all).
BTW,对那些对HTML5功能感到兴奋的人发出了重要警告。采用此规范没有正式日期。甚至暗示可能还需要10年(尽管我对此表示怀疑)。关键是你使用HTML5做的任何事情都会在官方规范到达时遭受破坏,与此同时你可能会遇到大量的浏览器不一致,错误和API变化(更不用说根本不支持这些功能的浏览器) 。
#4
Browser support for local storage should enable a bunch of new ideas now that some content can be saved on a user's machine.
浏览器对本地存储的支持应该启用一堆新想法,因为某些内容可以保存在用户的计算机上。
Reference docs:
#1
Can I Use is a website which tracks browser support for current and upcoming web standards. Check it out if you would like to know whether or not a given feature is widely supported.
我可以使用的是一个跟踪浏览器对当前和即将推出的Web标准的支持的网站。如果您想知道某个特定功能是否得到广泛支持,请查看它。
#2
Font embedding through CSS, using @font-face. Webkit/Safari has been supporting it since version 3.1, Microsoft since IE4, Mozilla since Firefox 3.5 (browser support overview).
使用@ font-face通过CSS嵌入字体。 Webkit / Safari自3.1版本以来一直支持它,微软自IE4以来,Mozilla自Firefox 3.5(浏览器支持概述)以来一直支持它。
Also, the varied implementations of the Selectors API, which provides a browser-native CSS selector engine for use in DOM scripting.
此外,Selectors API的各种实现,提供了一个浏览器本地CSS选择器引擎,用于DOM脚本。
For other examples, When Can I Use... seems to be a very good reference.
对于其他示例,何时可以使用...似乎是一个非常好的参考。
#3
I would say display:table and a range of CSS2.1 selectors are the big wins for designers. display:table solves some unsolvable or difficult layouts like 100% height and inside borders without breaking semantics and using actual tables.
我会说display:table和一系列CSS2.1选择器是设计师的最大胜利。 display:table解决了一些无法解决或困难的布局,如100%高度和内部边框,不会破坏语义和使用实际表格。
Multiple classes (.c1.c2)
多个类(.c1.c2)
I use min/max-width/height a lot.
我经常使用min / max-width / height。
Also working :hover and !important are awesome.
还在工作:悬停和!重要的是很棒的。
I would have liked to add SVG support to that list but naturally Microsoft messed that up.
我本来希望在该列表中添加SVG支持,但很自然地,微软搞砸了。
BTW, big warning to those getting excited about HTML5 features. There is no official date for the adoption of this spec. It's even been implied it could take another 10 years (though I doubt that). The point is anything you do with HTML5 now is subject to breakage when the official spec does arrive and in the meantime you can expect plenty of browser inconsistencies, bugs and API changes (not to mention browsers that don't support the features at all).
BTW,对那些对HTML5功能感到兴奋的人发出了重要警告。采用此规范没有正式日期。甚至暗示可能还需要10年(尽管我对此表示怀疑)。关键是你使用HTML5做的任何事情都会在官方规范到达时遭受破坏,与此同时你可能会遇到大量的浏览器不一致,错误和API变化(更不用说根本不支持这些功能的浏览器) 。
#4
Browser support for local storage should enable a bunch of new ideas now that some content can be saved on a user's machine.
浏览器对本地存储的支持应该启用一堆新想法,因为某些内容可以保存在用户的计算机上。
Reference docs: