文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

值得学习的三个CSS 新特性分别是什么

2024-04-02 19:55

关注

今天就跟大家聊聊有关值得学习的三个CSS 新特性分别是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

1. 特性查询

不久前,我写了 我真心期望的一个 CSS 特性 ,就是关于特性查询,现在基本上可以说它已经存在了!它支持除 Internet Exploer 之外的主流浏览器(包括 Opera Mini)。

特性查询,使用 @supports 规则,允许我们将 CSS 包含在一个条件块中,这个条件块中会检查当前 user agent  是否支持一个 CSS 属性键值对,在支持的情况下其中的内容才会生效。这里有一个简单的例子,只在浏览器支持 Flexbox 的时候应用  display: flex -

@supports ( display: flex ) {   .foo { display: flex; } }

另外,使用像 and 和 not 这样的运算符,我们甚至可以创建更复杂的特性查询。比如,我们可以检测浏览器是否仅仅支持老的 Flexbox 语法 -

@supports ( display: flexbox )            and            ( not ( display: flex ) ) {   .foo { display: flexbox; } }

支持情况

值得学习的三个CSS 新特性分别是什么

2. 表格布局

CSS 表格布局模块 所定义的系统用于创建基于表格的布局。它与 弹性盒布局 模块相似,但它更明确地为页面布局而设计,它们之间存在许多不同的特性。

明确项目定位

网格由表格容器(通过 display: grid 创建)和表格项(子组件)组成。在我们的 CSS 中,我们可以清楚的组织表格项的位置和顺序,而这与它们的标记(指 HTML 标记)无关。

例如,我写过一篇 使用 CSS 表格进行圣怀布局 ,这篇文章中展示了通过这个模块如果创建有名的“圣杯布局”。

值得学习的三个CSS 新特性分别是什么

背后的 CSS 只有 31 行 -

.hg__header { grid-area: header; } .hg__footer { grid-area: footer; } .hg__main { grid-area: main; } .hg__left { grid-area: navigation; } .hg__right { grid-area: ads; }  .hg {     display: grid;     grid-template-areas: "header header header"                          "navigation main ads"                          "footer footer footer";     grid-template-columns: 150px 1fr 150px;     grid-template-rows: 100px                          1fr                         30px;     min-height: 100vh; }  @media screen and (max-width: 600px) {     .hg {         grid-template-areas: "header"                              "navigation"                              "main"                              "ads"                              "footer";         grid-template-columns: 100%;         grid-template-rows: 100px                              50px                              1fr                             50px                              30px;     } }

灵活的长度

CSS Grid 模块引入了一个新的长度单位,fr,它代表了表格容器中剩余空间的一个等分。

它使得我们在表格容器根据可用空间来为表格项分配高度和宽度成为可能。例如在圣杯布局(Holy Grail Layout)中,我希望 main 分区占据两个边栏之外的所有空间。我写了一段简单的代码来做这个事情 -

.hg {     grid-template-columns: 150px 1fr 150px; }

间距

我们可以使用 grid-row-gap、grid-column-gap 和 grid-gap 属性来明确定义间距。这些属性的值是 <length-percentage(长度百分比)> 数据类型 ,是内容区域尺寸的百分比。

比如,需要 %5 的间距,可以这样写 -

.hg {     display: grid;     grid-column-gap: 5%; }

支持情况

CSS Grid 模块最早在今年三月被浏览器支持。

值得学习的三个CSS 新特性分别是什么

3. 原生变量

***要说的是原生 CSS 变量。这个模块引入了一种由创建作者定义变量的方法,这个变量可以像 CSS 属性一样赋值。

比如,假设在我们的样式表中多处用到一个主题颜色,我们可以将其抽象出来保存到变量中,再引用变量,以此代替多次直接写出实际的值。

:root {   --theme-colour: cornflowerblue; }  h2 { color: var(--theme-colour); }   a { color: var(--theme-colour); }   strong { color: var(--theme-colour); }

目前在像 SASS 这样 CSS 预处理器中已经可以做到这些事情,但 CSS 变量在浏览器中具有活性。也就是说,它们的值可以实时更新。例如,要改变上例中 --theme-color 属性的值,我们只需要这样做 -

const rootEl = document.documentElement;   rootEl.style.setProperty('--theme-colour', 'plum');

看完上述内容,你们对值得学习的三个CSS 新特性分别是什么有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注编程网行业资讯频道,感谢大家的支持。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯