CSS @supports (::伪元素)

2024-05-01

我想将区域更改为最大溢出:仅在以下情况下滚动::-webkit-scrollbar-thumb是支持的。

在纯 CSS 中这可能吗?看起来@supports只检查规则,不检查选择器。


您现在可以使用@supports selector() https://drafts.csswg.org/css-conditional-4/#at-supports-ext以伪元素为目标。以下是适合您的用例的相关示例:

@supports selector(::-webkit-scrollbar-thumb) {

    .scroll-container {
        overflow: scroll
    }

}

请参见这个 JSFiddle https://jsfiddle.net/CSSBurner/42xdu3po/,这演示了浏览器支持::-webkit-scrollbar-thumb in

  1. 铬86
  2. Edge 87
  3. Opera 72

but not

  1. 火狐82
  2. 狩猎12

截至 2020 年 12 月,浏览器支持 https://caniuse.com/?search=supports%20selector for @supports selector大约是72%。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS @supports (::伪元素) 的相关文章

  • 具有一个 css 类的堆叠图标

    在新的 FontAwesome 4 0 0 中 堆叠项目有 css 样式 span class fa stack i class fa fa square o fa stack 2x i i class fa fa twitter fa s
  • 用于创建动画渐变按钮背景的 CSS

    我正在寻找一个CSS规则可以创建一个CSS动画按钮的彩色渐变背景 https i stack imgur com NHqf8 gif 我只是想玩它并这样做 https codepen io prashant nadsoftdev pen b
  • 扩展引导程序预输入的宽度以匹配输入字段

    我知道这个问题之前至少被问过三次 但我看到的答案并不是我想要的 我希望增加 twitter bootstrap 通过其 typeahead 功能生成的自动完成字段的宽度 我一直在读到它延伸到覆盖该字段中的所有文本 也就是说 文本越长 自动完
  • Twitter Bootstrap - 多图像(缩略图)轮播 - 一次移动一个缩略图

    我正在尝试 Twitter bootstrap 3 我对 HTML CSS 和 Javascript 还很陌生 我有一个我创建的轮播 它的代码如下所示 div class container div class carousel slide
  • Rails Active Admin css 与 Twitter Bootstrap css 冲突

    我对 Rails 资产管道有点陌生 所以我可能做错了什么 我正在尝试为我的后端使用 Active Admin 为我的前端应用程序使用 twitter bootstrap css 我将 bootstrap css 添加到 应用程序 资产 样式
  • 在 jQuery 中获取 CSS 规则的百分比值

    假设规则如下 largeField width 65 有没有办法以某种方式恢复 65 而不是像素值 Thanks EDIT 不幸的是 在我的例子中使用 DOM 方法是不可靠的 因为我有一个导入其他样式表的样式表 因此cssRules参数以以

  • 有多少像素? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 一个有多少像素 br 标签添加 我知道 br 高度可以通过CSS控制line height财产 不同浏览器的值是否相同 它会添加与浏览
  • 如何仅突出显示嵌套表的最里面的表行?

    我有几个嵌套表 我想突出显示鼠标指针下方的最里面的行 我怎样才能做到这一点 一些提示 我使用嵌套表来显示递归表格数据 表可以嵌套 10 层 嵌套正如您所期望的那样 table tr td table tr td table tr td 可能
  • 背景大小:封面在视网膜显示屏上看起来像素化

    可以看到我正在开发的网站here http ourcityourstory com dev 如果你查看 iPad 3 或 iPhone 4 上的 关于 或 联系 部分 背景看起来全都是疯狂的像素化 我有background size set
  • 如何使用 Python Selenium 选择具有相同类名但不同条件的第一个 div

    Python Selenium 新手 我想选择第三个 div class inner TPBYkbxL 从以下3 div 具有相同类名的类 我不确定是什么意思 lt data is fake main panel true or false
  • 使用 jQuery 更改 CSS 类属性

    有没有办法使用 jQuery 更改 CSS 类的属性 而不是元素属性 这是一个实际的例子 我有一个 div 类red red background red 我想转班级red背景属性 而不是具有类的元素red分配的背景 如果我用 jQuery
  • 将图例标签设置为块

    我已经在以下网址设置了我的问题的演示 http jsfiddle net YHHg7 4 http jsfiddle net YHHg7 4 我正在尝试执行以下操作 legend display block border bottom 1p
  • 在Android中将半径边框绘制到imageview或textview的一个角落

    我需要在我的应用程序中为图像视图或文本视图绘制边框 但我只需要在一个角落绘制它 就像图像一样 我做了一个形状 但我在所有 4 个边上都有边框
  • CSS 边框底部的曲线

    我需要 CSS 中的这个图像 并且在这个边框内需要一个背景图像 我努力了 border radius 0 0 50 50 webkit border radius 0 0 50 50 但没有得到所需的形状 任何帮助 将不胜感激 边界半径 您
  • JavaFX使节点覆盖父节点边框颜色

    我有一个如下所示的节点 仅使用 css 我希望标签覆盖其父边框颜色 因此标签下方的边框颜色部分变得不可见 我用来制作这个边框的CSS代码 fx border color black fx border width 3 fx border r
  • 如何设置必须输入特定数字的字段?

    我想知道如何创建一个需要输入特定数字或文本的字段 例如 激活码 以及在输入的确认答案的情况下移动到 网页 并且在未确认的情况下移动到 另一页面 的按钮 使用必需的属性
  • 在 Chrome 中隐藏 HTML 时间输入字段上的图标

    在 Chrome 中 当您type time 属性到输入框 您会在输入旁边看到一个小图标时钟图标 有没有办法去掉这个小时钟图标 基于这个问题的答案 将日期输入三角形更改为日历图标 https stackoverflow com questi
  • 嵌套 DIV 的类似斑马的 CSS 样式

    我嵌套了 DIV 元素 但我不知道嵌套的级别 我需要每个都有与其父级不同的背景 创建类似斑马的颜色 我只使用两种背景 深色和白色 效果需要类似于在容器中设置奇数和偶数子级的样式 但在我的例子中 子级是嵌套的 我可以使用每个嵌套元素的规则来做
  • CSS 标签“object-fit:cover”不会在 Chrome 中裁剪/剪辑视频

    CSS tag object fit cover无法按预期在 Chrome 中剪辑 裁剪视频 这种情况仅适用于视频且仅在 Chrome 中发生 图像在 Chrome 中正常 在所有其他经过测试的浏览器中 图像和视频都工作正常 The beh
  • 使用溢出支持定位粘性填充材料[重复]

    这个问题在这里已经有答案了 我在用position sticky在我的应用程序中 在使用overflow属性来显示滚动条 我已经寻找了一个确实支持这种情况的polyfill 但到目前为止没有任何运气 有谁知道这样的polyfill shim

随机推荐