文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS Feature Query

一.作用 与media query（媒体查询）类似，feature query（特性查询）也是一种条件样式，仅在支持特定样式规则的环境应用指定的一组样式： The @supports CSS at-rule...等等，这种能力似乎CSS生来就有： 为了保证新属性和新值将来可以添在现有的属性上，用户代理必须忽略一份非法样式表的某一部分，如含有未知属性的声明、含有非法值的声明、含有未知@关键字的@规则等等。...的环境下会呈现阴影，使之看起来像是一张悬浮的卡片，在不支持的环境则只剩下外边距与边框，变成扁平的普通矩形块，算是天然的样式降级。...实际上，对于阴影、圆角、动画之类的很容易接受这种不一致（在不友好的环境去掉这些锦上添花的效果），而对于flexbox、grid等布局方案，似乎很难与渐进增强联系起来，因为布局通常是不可或缺的，而不只是锦上添花...Grid的环境下，呈现为漂亮的泾渭分明的3列等比布局，在不支持的环境，降级到稍显拥挤的float布局： ?

80630

厉害了，15 行代码让 iPhone 崩溃。。

一个名叫Sabri Haddouche的网络安全研究人员发推特说发现了苹果系统一个新的漏洞，可以使iPhone或Mac崩溃并重启。...他们公布了一个只有15行代码的网页，访问这个页面就会让iPhone或iPad崩溃。 ? 有人在开原网站github上发布了相关信息，包括bug的源代码，代码只有几行CSS和HTML代码。...只要在CSS的Backdrop-filter里嵌入大量元素，比如div>标签，就可以耗尽设备的所有资源，造成内核错误(Kernel Panic) 。 ?...“任何在iOS上呈现HTML的页面都会受到影响。”——这意味着如果有人通过社交媒体或电子邮件向你发送这个链接，或者你访问了包含代码的网页，你的设备就有可能崩溃。...而WebKit正是Safari浏览器使用的HTML渲染引擎。

1.3K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    移动开发实用

    以下是历史原因，来源其他人的分享： 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放 (double tap to...双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。...在IOS safari下，大概为300毫秒。这就是延迟的由来。...important;} 最好的解决方案： 整个页面用rem或者百分比布局 消除transition闪屏 网络都是这么写的，但我并没有测试出来 .css{ /*设置内嵌的元素在 3D 空间如何呈现：...保留 3D*/ -webkit-transform-style: preserve-3d; /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/ -webkit-backface-visibility

    6.5K30

    极速适配 iPhone X 秘笈

    缺点：对于全屏 / 透顶标题栏 / 横屏情况都要用不同的 css 代码进行适配，不够灵活。另外，如果苹果下一年又发布了类似 iPhone X plus 这样的机型，适配工作就要重新来过。...解决方案3 使用苹果提供的新属性 苹果对于 iPhone X 上 H5 页面的适配，提供了特殊属性支持，包括 meta 标签的 viewport 属性值中加入 viewport-fit 和加入 constant...iPhone X 模拟器 H5调试 介绍 加入适配代码后，在没 iPhone X 的情况下，可以通过 iPhone X 模拟器调试，像手机QQ / 手机空间里的 H5 页面，可以通过在模拟器上安装手机QQ...Xcode 9.0 以上 步骤：在 Xcode 打开一个空白项目，选择 iPhone X 模拟器，并点击运行按钮即可。 安装应用 在 Xcode 上直接编译客户端代码。...H5 调试 安装应用后，在应用里访问 H5 页面，然后打开 Safari（需要开启 Safari 的开发工具），在菜单中选择开发-Simulator-页面地址 ，就可以用 Safari 的检查器对其作调试了

    1.3K40

    【HTML5 理论知识】就H5调试技巧，浅谈：iPhone X 适配方案！

    缺点：对于全屏／透顶标题栏／横屏情况都要用不同的css代码进行适配，不够灵活。另外，如果苹果下一年又发布了类似iPhone X plus这样的机型，适配工作就要重新来过。...使用苹果提供的新属性 解决方案 苹果对于iPhone X上H5页面的适配，提供了特殊属性支持，包括meta标签的viewport属性值中加入viewport-fit和加入constant(safe-area-inset-X...iPhone X模拟器 H5调试 介绍 加入适配代码后，在没iPhone X的情况下，可以通过iPhone X模拟器调试，像手机QQ／手机空间里的H5页面，可以通过在模拟器上安装手机QQ／手机空间app...Xcode9.0以上 步骤：在Xcode打开一个空白项目，选择iPhoneX模拟器，并点击运行按钮即可。 image.png 安装应用 在Xcode上直接编译客户端代码。...H5 调试 安装应用后，在应用里访问H5页面，然后打开Safari（需要开启Safari的开发工具），在菜单中选择开发-Simulator-页面地址 ，就可以用Safari的检查器对其作调试了。

    3.3K80

    移动Web 开发中的一些前端知识收集汇总

    设备中的safari私有meta标签，它表示：允许全屏模式浏览，在ios上，用户将网页添加到主屏后，再从主屏幕打开这个网页，可以隐藏浏览器的地址栏和下面的toolbar； 第二个meta标签表示：强制让文档的宽度与设备的宽度保持...1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览； 第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式，其值有三个：default、black...-webkit-transform-style: preserve-3d;/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ -webkit-backface-visibility: hidden...;/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/ 其他CSS的杂项 -webkit-tap-highlight-color: transparent; /*Mobile上点击链接高亮的时候设置颜色为透明...*/ -webkit-overflow-scrolling: touch;/*快速滚动和回弹，模拟原生app效果*/ click 事件 ios的safari的click事件在短按屏幕时会有明显延迟（相对用户手离开屏幕那一刻大约

    3.9K50

    Python协程爬虫，gevent获取网页源码打印pdf实例爬虫

    Python协程爬虫的一个简单实例demo，使用了队列来进行数据的传递，协程的使用相比单线程会快，感觉在加大协程线的时候，速度并没有相应的加快，或者说占用的时间并没有想象中的少，可以参照使用，仅供参考和学习使用...在进行多协程，多线程的时候避免数据错乱，还是需要使用到队列（Queue）来进行处理，通过前面的实践对比，还是发现网页访问下，还是多线程占优！...Mobile/8J2 Safari/6533.18.5", "Mozilla/5.0 (iPod; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us...6： "Mozilla/6.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko..._161002/deancss/js/a.css" type="text/css" rel="stylesheet" /> <script src="https://www.rhino3d.asia

    56530

    一篇文章带你了解CSS基础知识和基本用法

    ，因为我们要想精确修改的Html中的某个元素的属性，就必须使用选择器，它可以通过选择器定位到某个元素上然后修改元素的样式。...).文本间距 div style='letter-spacing:2em'>div> 可以设置负数 也可使用百分数 像素 5)).文本转换 div style='text-transform:none...'>div> none 不转换 uppercase 大写 lowercase 小写 capitalize 首字母大写 6)).文本修饰 div style='text-decoration...none 不浮动 11).溢出Overflow 元素内容超过了框架的大小 div{ overflow:scroll } visible 内容不会被修剪，会呈现在元素框之外 hidden 内容会被修剪...16).2D转换 1)).元素位移translate(左边,顶边) div { transform: translate(50px,100px); -ms-transform: translate(50px

    11.1K20

    CSS will-change，为什么能提升几十倍的性能？

    就是减少浏览器的复合层，避免过度使用will-change带来性能问题 四、iphone上使用will-change会导致图片模糊、文字模糊问题 在iphone上可以看到如果给元素加上will-change...安卓不会而iphone会，iphone上使用的是safari浏览器 解： will-change加入后，元素提升到复合层，浏览器其实会进行 光栅化 至于为什么safari浏览器在元素提升到复合层后，...进行光栅化会导致模糊问题，在我们翻阅了各家浏览器内核论坛后，找到一些资料 groups.google.com/a/chromium 大概的内容就是： 在2016年之前，不止safari，谷歌浏览器也是存在模糊的问题...，原因是提升复合层后，光栅化的时候，设备比例的变化，导致绘制 图像 的过程变模糊，谷歌是在2016年解决的这个问题，所以现在看来我们会在iphone上发现模糊问题，在安卓机上并不会 iphone上模糊的问题...，可以通过在执行完重排重绘后在适当的时机移除will-change（让元素回到原来的页面层，不在单独一个复合层）就可以解决 五、什么操作会将元素提升到复合层 在CSS中，以下属性可以将元素提升到复合层:

    66940

    「Web Animation API 专题」纯手工撸一个图片随机移动的动画

    本篇文章预计时间 5 分钟 动画效果 开始前，我们先来看看完成后的动画效果，示例如下效果： F4419A3F43C36C8C9E933A56B4655F9E.gif 页面布局 无论图片怎么随机移动，我们都希望在指定的容器里...，而不是漫无边际，首先我们在html页面定义容器： div id="container"> div> 接下来定义容器的样式： body { margin: 0; } div#container...基本上，第一个参数映射到您将放入CSS中的内容@keyframes，你可以想象成css中的@keyframes内容，比如以下代码： @keyframes emphasis { 0% { transform...端最新版的谷歌浏览器和Firefox是没有任何问题的可以完美运行，笔者的safari还是运行不起来，在iPhone XS Max无法运行。...代码还不到50行(注：为了在手机端运行，引入了web-animations.min.js)，您可以点击"https://www.qianduandaren.com/demo/walk/"行预览，笔者亲测在iPhone

    1.7K30

    Dom树 CSS树 渲染树(render树) 规则、原理

    2.上面的操作为了演示，采用的方法是从根结点一直到文本结点的遍历，在DOM 方法上，有更简洁的方法，这些以后会有更多示例加以说明。...渲染引擎在不同的浏览器中也不是都相同的。比如在 Firefox 中叫做 Gecko，在 Chrome 和 Safari 中都是基于 WebKit 开发的。 ?...事实上，构建DOM的过程中，不是等所有Token都转换完成后再去生成节点对象，而是一边生成Token一边消耗Token来生成节点对象。...布局流程的输出是一个“盒模型”，它会精确地捕获每个元素在视口内的确切位置和尺寸，所有相对测量值都将转换为屏幕上的绝对像素。  ...布局完成后，浏览器会立即发出“Paint Setup”和“Paint”事件，将渲染树转换成屏幕上的像素。 WebKit 主流程示意： ?

    4.5K40

    适配iPhone X 的齐刘海

    起初我以为会需要做好多工作，很像当我第一次学习 CSS media queries 时--但一旦你学过一些新 CSS 属性后，就会变得简单。...问题： 当 iPhone X 被旋转为横向时，设备左右可得到的内容区域是不一样的，这是因为需要取决于设备的绝对方位和 sensor housing 的位置，你站点内容竖直方向的安全区域在...足够友好的是，苹果已经提供了一个CSS 方法和一些预定义的CSS 变量，来应对这重担： env() 和 safe-area-inset-*。...因为 env() 仅在 iOS 11.2+设备上可用，所以目前你依旧需要引入 constant() 作为回退方案。iOS 11.2 好像一直也会支持 constant()，但依旧建议都引入。...在我们的例子中，我们使背景填充整个屏幕但使内容约束到安全区域，所以我们在内部元素的 containers 上应用了 padding。

    99490

    适配iPhone X 的齐刘海

    起初我以为会需要做好多工作，很像当我第一次学习 CSS media queries 时--但一旦你学过一些新 CSS 属性后，就会变得简单。...问题： 当 iPhone X 被旋转为横向时，设备左右可得到的内容区域是不一样的，这是因为需要取决于设备的绝对方位和 sensor housing 的位置，你站点内容竖直方向的安全区域在...足够友好的是，苹果已经提供了一个CSS 方法和一些预定义的CSS 变量，来应对这重担： env() 和 safe-area-inset-*。...因为 env() 仅在 iOS 11.2+设备上可用，所以目前你依旧需要引入 constant() 作为回退方案。iOS 11.2 好像一直也会支持 constant()，但依旧建议都引入。...在我们的例子中，我们使背景填充整个屏幕但使内容约束到安全区域，所以我们在内部元素的 containers 上应用了 padding。

    53220

    前端-CSS与网络性能

    英文：Harry  译文：sea_ljf https://juejin.im/post/5bf4bcbee51d4514e0512f72 在博客上，CSS 相关的文章却不多。...关键路径上的任何延迟都会影响首屏时间，因而我们需要尽快地将 CSS 传输到用户的设备，否则，（在页面渲染之前，）用户只能看到一个空白的屏幕。 最大的问题是什么？...这是因为我们在关键路径上创造了更多（队列式）的网络请求： 1、下载 HTML； 2、请求并下载依赖的 CSS；下载及解析完成后，本该是构造渲染树，然而； 3、CSS 依赖了其他的 CSS，继续请求并下载...整个页面将回退为原来的模式，只有在最慢的 CSS 下载并解析完成后，才能渲染页面。 有关这种特性的更多细节，建议阅读这篇文章。...8、关注 CSS 与 JavaScript 的顺序： 9、在 CSS 文件后的 JavaScript 仅在 CSSOM 构建完成后才会执行； 10、如果你的 JavaScript 不依赖 CSS； 11

    99520

    「Web Animation API 专题」用原生JS制作一个图片随机移动的动画

    01 动画效果 开始前，我们先来看看完成后的动画效果，示例如下效果： ?...02 页面布局 无论图片怎么随机移动，我们都希望在指定的容器里，而不是漫无边际，首先我们在html页面定义容器： div id="container"> div> 接下来定义容器的样式： body...基本上，第一个参数映射到您将放入CSS中的内容@keyframes，你可以想象成css中的@keyframes内容，比如以下代码： @keyframes emphasis { 0% {...看来好多都是部分支持，没有完全支持，笔者也亲自测试了下，在pc端最新版的谷歌浏览器和Firefox是没有任何问题的可以完美运行，笔者的safari还是运行不起来，在iPhone XS Max下无法运行。...css基础丨Transforms 属性在实际项目中如何应用？

    4K30

    能让你受益匪浅的10个css使用技巧

    CSS技巧大杂烩 01 Safari 中z-index的层级问题 在Safari浏览器下(此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari...例如下面的场景，图中红框里面的模块，使用 3D transform变换，进行旋转动画，但是在Safari浏览器下，忽略了二维码遮罩层的z-index,结果使用了真实世界的3D视角进行渲染。....div{ color: rgba(0,0,0,.85); font-weight: 500; text-align: left; padding: 20px;...09 图片自适应占位方式 当图片未正确加载，或加载完成前，由于图片高度为0，其容器会因为没有内容，导致容器无法撑高而塌陷，而如果加载较慢则会在图片加载完成后出现闪烁的情况。...min-width: 375px) { html { /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */

    1.6K20

    微信小程序布局单位的使用

    rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。官方推荐微信小程序可以用iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。...如在 iPhone6 上，屏幕宽度为750 px，则共有个750 物理像素，则750 rpx = 375px = 750 物理像素 例如 : 1rpx = 0.5px = 1物理像素 但是不同iOS设备上...，px和rpx换算有些区别： iphone5 上： 1rpx = 0.42px 1px = 2.34rpx iphone6 上： 1rpx = 0.5px 1px = 2rpx iphone6S...上： 1rpx = 0.552px 1px = 1.81rpx 在不同设备上rpx与px的转换是不相同的，但是宽度的rpx却是固定的，所以可以使用rpx作为单位，来设置布局的宽高，不是所有的单位都适合...vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。

    3.1K61
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券