有没有办法在 Firefox 或 Chrome 中禁用 CSS3 支持?
与在浏览器中禁用 JavaScript 类似,是否有办法在 Firefox 或 Chrome 中禁用对各种 CSS3 属性的支持,以便在不支持某些属性的情况下快速确认页面渲染正常?我知道它只是一个表示层,但我只是希望有一种更有效的方法可以在不使用旧浏览器的情况下对此进行测试,特别是在使用 Modernizr 的情况下。
Similar to disabling JavaScript in browsers, is there a way to disable support for various CSS3 properties in Firefox or Chrome to quickly confirm a page is rendering OK if support for certain properties isn't there? I know it's only a presentation layer, but I'm just hoping there's a more efficient way to test against this without using old browsers, especially if Modernizr is being utilised.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
一个名为 deCSS3 的项目设法通过使用小书签,通过
!important
规则覆盖和中和它们的使用。该项目的最近添加是“Modernizr 类 切换" 用于在使用 Modernizr 时进行更高级别的测试。
A project called deCSS3 manages to disable a large majority of CSS3 properties through the use of a bookmarklet that overrides and neutralises their usage with
!important
rules.A recent addition to the project is "Modernizr class toggling" for an added level of testing when Modernizr is utilised.
即使有办法这样做,会有帮助吗?每个浏览器都有自己的怪癖,因此不能保证例如:
Even if there were a way to do so, would it help? Each browser has its own quirks, so there is no guarantee that e.g.:
CSS3 不是 CSS2 的一组补充,它取代了 CSS2。 CSS3 中的背景和边框模块包括
border
和背景
为以及border-radius
和box-shadow
。如果你“关闭”CSS3,你就会关闭所有 CSS,即使你可以禁用新东西,汤姆的答案是正确的 - 这不会让你测试现实世界中实际存在的任何东西。CSS3 isn't a set of additions to CSS2, it replaces CSS2. The backgrounds and borders module in CSS3 includes
border
andbackground
as well asborder-radius
andbox-shadow
. If you 'turn off' CSS3 you turn off all CSS, and even if you could disable the new stuff Tom's answer is correct - that wouldn't leave you testing anything that actually exists in the real world.如果您需要一种“关闭CSS3”的方法,那么我认为您没有正确考虑/实现渐进增强/优雅降级。您应该从非 CSS3 的东西开始,然后用它来增强您的网站。当您构建非 CSS3 基础并在目标浏览器中测试它时,添加 CSS3 不应改变任何内容(浏览器会忽略它们无法识别的样式)。如果您将 CSS3 沙箱到其自己的样式表中,那么您可以告诉旧版本的 IE 完全忽略它(或者,如果您使用的是 IE9 中仅部分支持的内容,可以告诉所有版本的 IE 忽略它)以保存下载。
也就是说,CSS 由核心渲染引擎处理,因此为了查看没有 CSS3 的页面,您必须在不支持 CSS3 的浏览器中查看它。这很糟糕,这意味着你必须有多个浏览器,甚至虚拟机(或物理机)才能很好地进行测试,但不幸的是,这就是 Web 开发的现状。理论上,无论如何,您应该在多个浏览器中进行测试,并且已经知道 IE6-8 有自己的怪癖,甚至与 CSS3 无关,并且应该已经设置好来测试它们(因此,如果您需要测试其他浏览器的旧版本,您可以将它们安装在您的IE测试环境中)。
If you need a way to "turn off CSS3" then I don't think you're thinking about/implementing progressive enhancement/graceful degradation properly. You should be starting with non-CSS3 stuff, then enhancing your site with it. When you build the non-CSS3 foundation and test it in your target browsers, then adding CSS3 shouldn't change anything (browsers ignore styles they don't recognize). If you sandbox your CSS3 in its own stylesheet, then you can tell old versions of IE to completely ignore it (or, if you're using stuff that's only partially supported in IE9, can tell all versions of IE to ignore it) to save a download.
That said, CSS is handled by the core rendering engine, so in order to view a page without CSS3, you have to view it in a browser that doesn't support CSS3. It sucks, it means you have to have several browsers, and even virtual machines (or physical machines) to test very well, but such is the state of web development, unfortunately. Theoretically, you should be testing in several browsers, anyway, and already know that IE6-8 have their own quirks that don't even relate to CSS3, and should already be set up to test them (so, therefore, if you need to test old versions of other browsers, you can install them in your IE test environment).
Firefox 有一个有用的附加组件,称为“用户代理切换器”,它允许您将浏览器渲染降低到旧版本的 IE(iPhone 渲染也非常有用)。这应该可以帮助您仔细检查。
There's a useful add-on for Firefox called "User Agent Switcher" which allows you to bump your browser rendering down to an older version of IE (the iPhone rendering is also pretty useful). That should help you double check.