- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在寻找一种方法来检查浏览器中的 CSS 支持时,我遇到了两种不同的方法:CSS 和 JavaScript。我之前使用过 JS 来检查浏览器中的功能支持,但没有用于 CSS 属性。据我所知,较新的浏览器已经添加了对 CSS @supports
的支持,但是那些不支持的浏览器呢?
CSS示例@supports
:
@supports (display: flex) {
div { display: flex; }
}
那么,如果旧版浏览器不支持 CSS @supports
,那么同时使用 JS 和 CSS 方法是否可行?关于我上面的例子,是否可以用它做一个 if/else 语句,例如:
@supports (display: flex) {
div { display: flex; }
} else {
div { display: none; }
}
我知道它可能不是关键字 else
,但能够按照这些思路执行某些操作将是有益的。所以,总结和整理我的问题:
@supports
检查 CSS 属性支持的最佳方法是什么?@supports
是否有某种 if/else
语法?最佳答案
What is the best approach to checking CSS property support with
@supports
in older browsers not supporting this CSS syntax?
这完全取决于您要执行的操作。如果您正在检查对某个属性的特定值的支持(例如 flex
用于 display
属性),则提供一个备用值并让级联处理就足够了在大多数情况下,它适合你。
使用您的示例,它很简单:
div {
display: none;
display: flex;
}
如果您正在处理旧浏览器可能不支持的整个属性,那么这完全取决于您尝试使用或不使用该属性来完成什么。例如,border-radius
通常不会对布局产生任何不利影响,因此不支持它的旧浏览器会优雅地降级,而无需您执行任何其他操作。但其他属性可能会对布局产生不利影响,您需要以不同的方式考虑不同的属性和布局配置。
Would it make sense or be practical to utilize both CSS and JS for this?
如果您使用 JS 来覆盖尽可能多的基础,那么使用 CSS 可能是多余的,或者用作现代的非 JS 替代方案,以解决禁用 JS 的用户的问题。这也可能因您检测到的特征类型而异。
由于这是关于 @supports
的,值得注意的是有一个名为 CSS.supports
的 JavaScript API,除了您在 JavaScript 中调用它外,它的功能相同。如果您不担心禁用脚本的用户,您可以检查它是否已实现并使用它,否则您现有的功能检测代码:
var supported = false;
if (window.CSS) {
supported = window.CSS.supports('display', 'flex');
} else {
// Your existing feature detection code here
}
Is there some sort of
if/else
syntax for CSS@supports
?
@supports
和 @media
等 CSS 条件规则没有 if/else 语法,即使有,浏览器也不支持@supports
可能会忽略 else 部分。如果您需要考虑较旧的浏览器,您唯一的选择是使用如上所示的级联(即使浏览器支持不是问题,它也更简单并且涵盖了大多数用例)。
另一种方法是复制条件并在前面加上 not
来否定它,并且每个 @supports
规则中的 CSS 规则将是互斥的(如果您希望包含仅当属性不支持时才应应用的其他属性,并且无法使用旧版浏览器的旧语法进行模拟):
@supports (display: flex) {
div { display: flex; }
}
@supports not (display: flex) {
div { display: none; }
}
关于javascript - CSS @supports 与通过 JS 检查支持,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30123289/
我收到多行错误,指出它有重复的类 Duplicate class android.support.v4.accessibilityservice.AccessibilityServiceInfoCom
我的项目昨天运行良好,今天却出现以下错误。请帮忙。 出了什么问题:无法解析配置“:app:debugCompileClasspath”的所有文件。 Could not find support-v4.
错误:配置项目“:app”时出现问题。 Could not find support-v4.jar (com.android.support:support-v4:24.0.0). Searched
我正在使用 react-native-webrtc 运行示例应用程序模块。我正在尝试在 android 中运行该应用程序,但出现这样的错误... * What went wrong: A probl
错误:配置项目“:app”时出现问题。 Could not find support-v4.jar (com.android.support:support-v4:24.0.0). Searched
我克隆了我的项目并使用 Android studio 打开,但构建失败并出现以下错误并且同一个项目在其他项目上运行良好。 出了什么问题:无法解析配置“:app:flavorUnsignedReleas
我正在运行示例应用程序......我正在使用 this模块.....但是我收到这样的错误... FAILURE: Build failed with an exception. * What went
我有一个 Ionic 项目,在升级到 OSx Mojave 后,出于某种原因不再构建。 该项目基于 Ionic 3 构建。 我有 Cordova CLI 7.0.0 当我运行时 ionic cordo
我有一个 Ionic 项目,在升级到 OSx Mojave 后,出于某种原因不再构建。 该项目基于 Ionic 3 构建。 我有 Cordova CLI 7.0.0 当我运行时 ionic cordo
添加 Android 平台(ionic cordova platform add android)后,我构建了我的 Ionic 项目(ionic cordova build android),但出现错
这个问题在这里已经有了答案: Manifest merger failed : Attribute application@appComponentFactory - Androidx (14 个答
关于我的 Gradle 文件中的以下“complie”: dependencies { compile 'com.android.support:support-v4:25.3.1' }
有些困惑。 我想更频繁地使用@supports 但是...我不关心浏览器如何看待它。希望您能说清楚,如果可以的话谢谢您。 如果浏览器本身不理解@supports,它如何计算@support 'not'
我刚刚升级到 Dart 2 和最新版本的 Flutter,现在我无法构建我的应用程序。我在互联网上环顾四周,但仍然不明白为什么会发生这种情况。 我得到的错误是: FAILURE: Build fail
我正在学习 Firebase,但由于以下错误而陷入困境: Error:Failed to resolve: com.android.support:customtabs:25.4.0 Error:Fa
我在构建本周时出于某种原因尝试使用Cordova进行项目时遇到问题: cordova build android gradle获取com.android.support:support alpha而不
对应的androidx是什么com.android.support:support-compat 的图书馆实现push notifications ? 他们说here它是 androidx 的一部分,
我正在尝试为我的应用设置插桩单元测试。并且我已根据以下开发者站点链接添加了依赖项。 https://developer.android.com/training/testing/unit-testin
当我想使用 Proguard 规则生成签名的 APK(发布)时,我收到了以下错误消息: Cannot find a version of 'com.android.support:support-an
这个问题在这里已经有了答案: Failed to resolve: com.android.support:appcompat-v7:26.0.0 (14 个答案) Failed to resolv
我是一名优秀的程序员,十分优秀!