css grid随页面大小_你现在可以玩下这 5 个 CSS 新功能
在浏览器开始实现它们之前,CSS 新的功能通常需要经过长时间讨论之后,才在W3联盟的规范中定义。有许多值得一提的 CSS 新功能,但是在本文中,我们重点介绍可以浏览器的稳定版中进行测试的五个功能:
- CSS Subgrid (子网格)
- flex gaps
content-visibility
属性contains-intrinsic-size
属性:is
和:where
伪类
浏览器对这些特性的支持一直在变化,可以通过 Can I Use 来查看支持情况。
1.CSS Subgrid
CSS 网格是一个灵活的布局模块,允许开发人员创建复杂的布局,无需使用JavaScript或使用复杂的 CSS hack。
使用 CSS 网格的语法很简单,如下所示:
.grid-container { display: grid;}
可以使用几个特定于网格的属性来设置所需的确切布局。
例如,在上面的示例中,.grid-container
的子元素将是网格项,它们将根据使用grid-template-columns
和grid-template-rows属
性定义的规则进行布局:
.grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 50px 70vh 50px;}
运行结果如下:
但是,如果你也想在网格布局中包括.grid-container
的某些(或全部)子孙元素怎么办?这就是CSS Subgrid 发挥作用的地方。
可以向网格项目添加以下规则,以使其能够采用其父级的网格轨道(包括名称网格线和区域,即使它也可以定义自己的网格轨道和区域)。
.grid-item { /* 这些规则指定子网格在布局中的位置*/ grid-column: 2 / 4; /* 两列垂直 */ grid-row: 1 / 3; /* 两行水平 */
/* 这些规则属于子网格本身 */ display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;}
grid-column
和grid-row
属性定义了网格项目在网格列或行中的位置。.grid-item
的子元素将形成子网格。一个网格项目可以跨越多个网格单元。例如,这里它分布在四个像元上(在上面的示例中grid-column
和grid-row
的值是任意的)。
如上所见,subgrid
不是独立的CSS属性,而是可以添加到grid-template-columns
和grid-template-rows
属性的值。它使.grid-item
的子级包含在网格布局中:
子网格已成为网格布局的一部分,并且已定位到我们想要的确切位置(在第二和第四条垂直网格线之间,以及在第一和第三条水平网格线之间)。
其余的网格项目保持了正常的网格流,第四行也出现在布局的底部。但是,由于我们仅使用grid-template-rows
属性定义了三行,因此第四行没有预设值,因此仅取其内容的自然高度。如果我们要从最后三个网格项目中删除文本,则它们甚至不会显示,因为它们的自然高度为0
。
可以使用下面的CodePen演示来测试上面的示例。
我们也可以通过仅采用grid-template-columns
或grid-template-rows
并为另一项使用新值来创建一维子网格。
例如,在以下情况下,子网格仅采用主网格的列,但为行创建新规则
.grid-item { display: grid; grid-template-columns: subgrid; grid-template-rows: 200px 400px 200px;}
浏览器支持情况
自2020年8月起,CSS 子网格规范已成为W3C的候选推荐标准。目前,Firefox 71+仅支持该子网格规范,但开源 Web 浏览器 Chromium 也已开始使用它,该浏览器被用作主要浏览器(包括Chrome,Opera, Brave,以及新的Microsoft Edge。
2. Flexbox gaps
长期以来,在 felx 布局中的行
或列
之间添加间隙一直是一个难题。通常可以通过在 flex 项目中添加 margin
来解决问题,但是margin
的问题在于,它们也会被添加到每个行
或列
的开头和结尾。即使可以通过 CSS 来解决这些缺陷,但这也不是最理想的解决方案。
目前,浏览器对flexbox gap
的支持越来越好。 gap
,row-gap
和column-gap
属性存在于不同的上下文中,具有不同级别的浏览器支持。我们可以在以下布局模块中使用gap
属性。
- 声明
display: flex;
的模块 - 声明
display: grid;
的模块 - 多列布局,由
column-count
或column-width
属性定义
在flexbox
上下文中,我们可以这里声明 flex 项目之前的间距:
.flex-container { row-gap: 10px; column-gap: 15px;}
gap
属性是row-gap
和column-gap
的简写。如果将它与两个值一起使用,则第一个表示row-gap
,第二个表示column-gap
。
.flex-container { gap: 10px 15px;}
如果仅使用一个值,则row-gap
和column-gap
将采用相同的值。
.flex-container { gap: 10px;}
浏览器支持情况
Edge 84+
,Firefox 63+
,Chrome 84+
和Opera 70+
当前支持 gap
属性。Internet Explorer 和 Safari 目前还不支持它。
3. content-visibility 属性
在Chromium 85中,content-visibility
属性可能是在提高页面加载性能方面最具影响力的新CSS属性之一。因为content-visibility
可跳过不在屏幕上的内容渲染,包括布局和渲染,直到真正需要布局渲染的时候为止。所以利用它可以使初始用户加载速度更快,还能与屏幕上的内容进行更快的交互。
它有三个值:
visible
— 元素渲染正常进行hidden
— 跳过元素渲染时,无论是在屏幕外还是在屏幕上auto
— 当元素在屏幕外时,将跳过其渲染;当它出现在屏幕上时,将自动渲染
可以简单地将content-visibility
属性添加到我们希望更改其渲染过程的元素中。
article { content-visibility: auto;}
一个具有content-visibility: auto
属性的元素可以获得布局、样式和绘制的限制(区域)。如果该元素不在屏幕上(并且与用户无关,则相关元素将是在其子树中具有焦点或已选择的元素),它也会获得大小限制(containment)(并且停止绘制和对其内容进行命中测试)。
这意味着什么呢?简而言之,如果元素不在屏幕上,这不会渲染其后代。浏览器在不考虑元素任何内容的情况下确定元素的大小,在此处则跳过大多数渲染(例如元素子树的样式和布局)。
当元素接近视口时,浏览器不再增加大小限制,而是开始绘制并命中测试元素的内容。这使得渲染工作能够及时被用户看到。
浏览器支持
content-visibility
依赖于CSS Containement Spec中的原语(primitives)。虽然截止到目前只有Chromium 85中支持content-visibility
属性(and deemed "worth prototyping" for Firefox),但是大多数现代浏览器均支持Containement Spec。
contain-intrinsic-size 属性
contains-intrinsic-size
属性定义激活大小限制的元素的显式宽度和高度,这意味着元素的大小不受子元素大小的影响。设置明确的宽度和高度旨在防止这些元素在某些情况下崩溃为零
为了实现content-visibility
的潜在好处,浏览器需要应用大小限制,以确保内容的呈现结果不会被任何方式影响元素的大小。如果元素没有在常规块布局中指定的高度,则其高度为0
。
这可能不是理想的,因为滚动条的大小会发生变化,这取决于每个具有非零高度的内容。
所以, CSS 提供了另一个属性contains-intrinsic-size
,如果元素受大小限制影响,它可以有效地指定元素的自然大小。
article { content-visibility: auto; contain-intrinsic-size: 700px 1000px;}
浏览器支持
目前Chrome 83+
,和支持
contains-intrinsic-size`属性, Firefox不支持。
5.:is
和 :where
伪类
:is()
CSS 伪类 函数将选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。
:where() CSS 伪类函数接受选择器列表作为它的参数,将会选择所有能被该选择器列表中任何一条规则选中的元素。
:where()
和 :is()
的不同之处在于,:where()
的优先级总是为 0
,但是 :is()
的优先级是由它的选择器列表中优先级最高的选择器决定的。
例如,有以下选择器列表:
.my-class p em,.my-class li em,.my-class section em { // CSS rules}
如果要保持较高的优先级,以使其更难以用后续声明覆盖所属规则,则可以使用:is()
缩短列表。
.my-class :is(p, li, section) em { // CSS rules}
如果我们希望将优先级保持为0
以方便重写所属规则,那么可以使用:where()
:
.my-class :where(p, li, section) em { // CSS rules}
在上面的示例中,.my-class em
选择器将覆盖:where
规则,但不会覆盖:is
。
浏览器支持
:is
伪类目前被Firefox 78+
和Safari 14+
支持。基于 Chrome 的浏览器(Chrome 15+、Edge 79+、Opera 15+)使用:-webkit-any()
前缀支持其前缀语法。你也可以通过设置试验性的网络平台特性标志来启用该功能:在Chrome 68+
、Opera 55+
和Edge 79+
中选中。
:where
伪类的支持较少。目前,只有Firefox 78+
支持它。
总结
目前, 目前还需要谨慎使用本文讨论的CSS新功能。理想情况下,使用带前缀的版本,或者等到它们得到更广泛的实行。
但是,如果你想进行测试,则可以使用content-visibility
和contains-intrinsic-size
属性。你可以在已经支持该功能的浏览器中实现性能上的优化(可以使用@supports
规则测试浏览器支持),并且不会影响尚不支持该功能的浏览器。
总而言之,CSS新特性的标准化和实现过程值得我们不断关注。有许多有用的功能将最终使前端开发更容易和更快。
作者:Anna Monus 译者:前端小智 来源:blog.logrocket原文:https://blog.logrocket.com/5-new-css-features-you-can-already-test/
分享一套 <一套前端就业体系课>视频教程,4大阶段,7个步骤,从0到全栈,让前端不止于前端。提升技术实战能力+体验真实开发流程+收获优秀面试作品。领取方式加我微信(qq449245884),回复大前端就可以免费获得。
❤️爱心三连击
1.看到这里了就点个在看支持下吧,你的「点赞,在看」是我创作的动力。
2.关注公众号大迁世界
,回复「1」加入前端进阶交流群!「在这里有好多 前端 开发者,会讨论 前端 知识,互相学习」!
3.也可添加微信【qq449245884】,一起成长。
css grid随页面大小_你现在可以玩下这 5 个 CSS 新功能相关推荐
- css grid随页面大小_前端开发中各种设置CSS间距的优点缺点及实例「实践」
前言 如果两个或多个元素很接近,那么用户就会认为它们以某种方式属于彼此.当对多个设计元素进行分组时,用户可以根据它们之间的空间大小来决定它们之间的关系.没有间距,用户将很难浏览页面并知道哪些内容相关而 ...
- css grid随页面大小_CSS中的间距知识总结,前端开发中各种间距的使用及优缺点
本文经作者授权翻译,来源:https://ishadeed.com,作者:Ahmad Shadeed 如果两个或多个元素很接近,那么用户就会认为它们以某种方式属于彼此.当对多个设计元素进行分组时,用户 ...
- html设置页面大小_如何将Word文档页面大小设置为16开?
某大学毕业生在对其毕业论文进行排版时,要求将纸张大小设置为16开,但Word默认的纸张大小为A4纸,如何将页面大小设置为16开? 1解决方案 通过设置"纸张大小"功能,将其页面设置 ...
- python 生成pdf页面大小_(Python)更改使用xtopd生成的PDF文件的页面大小和格式
我想用Python转换xlsx.我使用tablib和xtopdf模块构建了一个结构良好的表.工作出色!不幸的是,内容不适合一个pdf页面.所以我想把页面大小和格式改成水平A3.但我不知道这怎么可能.我 ...
- centos调整页面大小_这2种方法都能调整PDF文档的纸张大小
PDF文件大家都很熟悉了,在工作中是经常会遇到的,但是想对PDF文件进行修改和编辑的可能很多人都觉得为难.比如当你在阅读PDF文件时,发现PDF文档的页面尺寸不是自己想要的尺寸,要如何修改PDF的纸张 ...
- java 设置pdf页面大小_通过Java实现对PDF页面的详细设置
前言 下面的示例将介绍通过Java编程来对PDF页面进行个性化设置的方法,包括设置页面大小.页边距.纸张方向.页面旋转等.这里有如下多种页面大小尺寸可供选择: 同时,设置文档内容旋转时,可支持如下角度 ...
- ios设计登录功能_亲爱的产品设计师,这是iOS 14的新功能
ios设计登录功能 On June 22, 2020 Apple previewed iOS 14 for the first time. As always there are quite some ...
- python 生成pdf页面大小_使用具有自定义大小页面和最佳图像分辨率的Reportlab生成PDF...
诀窍是先缩放reportlab的画布,然后再将图像绘制到画布上.它似乎无法正确地从文件中获取DPI信息.在 下面的示例代码对于我的激光打印机非常适用:from PIL import Image, Im ...
- idea设置放大缩小_苹果手机连按3下,能打开隐藏放大镜功能,看什么都一清二楚...
苹果手机很多人都在用,那你们有多少人知道手机里面还隐藏一个放大镜功能,可以看的清楚.看的远. 要是你没用过,今天笔者就来教教你使用方法,一起来涨涨知识吧! 看得远 我们都知道人的视线比较有限,尤其是近 ...
最新文章
- 2021年大数据Spark(六):环境搭建集群模式 Standalone
- 计算机会计学ufo报表,计算机会计实践部分工资管理系统.ppt
- Python入门--数据类型
- ArcGIS实验教程——实验五:空间数据编辑
- 在html中不显示内容是,网页中显示的内容在源文件中找不到是什么原因_html/css_WEB-ITnose...
- freelance平台_完整的Freelance Web开发人员指南:如何通过Freelance编程工作来赚钱
- c ++ helloworld
- delphi 登录界面 主窗体 切换_.NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐)
- 终于购入Mac mini,发现HDMI接口与显示器不兼容,网购了一个VGA转换插头
- Object-c 协议@protocol(@required、@optional)
- 实践丨手把手教你用STM32设计WiFi语音播报日程表
- Eclipse 启动时提示loading workbench错误并提示查看.log
- ROMS海洋模式笔记
- 李兴平中国最牛的个人站长
- SQL学习(四)Where语句中的各种匹配方式
- 四、LockSupport与线程中断
- Linux 服务具体解释
- PXE实现系统批量自动安装
- 为PostgreSQL配置work_mem
- spark-sql 指定metastore地址、读取mysql
热门文章
- Ubuntu查看文件夹下文件的个数
- 二叉树C++ | 查找节点(中序搜索)_5
- mysql 状态机_动画状态机(2)
- zabbix模板_基于zabbix网页配置自定义tomcat监控模板--监控项、触发器
- centos7子系统 win10_Win10下安装CentOS 7双系统详解
- Java之品优购课程讲义_day20(2)
- MongoDB之 写安全(Write Concern)
- Sass函数:random()函数
- 【零基础】计算机网络技术
- Python学习第二天----网络基础及操作系统简介(安装linux系统)