请选择 进入手机版 | 继续访问电脑版

葡萄城产品技术社区

    注册

QQ登录

SpreadJS

纯前端控件,类似Excel,问题响应通道

ComponentOne WPF

前沿科技,针对WPF桌面,问题响应通道

C1FlexGrid视频教程

WinForm平台,功能强大的表格控件,初学者必看视频

ActiveReport视频教程

轻松搞定报表,从头开始学AR,视频教程

搜索
查看: 870|回复: 0

[转载] 2017 年值得学习的 3 个 CSS 新特性

[复制链接]

253

主题

254

帖子

2791

积分

超级版主

Rank: 8Rank: 8

积分
2791

微信认证勋章

发表于 2017-3-16 10:08:05 | 显示全部楼层 |阅读模式
本帖最后由 断天涯大虾 于 2017-3-16 10:13 编辑

在众多的 CSS 新特性中,有 3 个今年采用的新特性让我抑制不住地激动。

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

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

另外,使用像 and 和 not 这样的运算符,我们甚至可以创建更复杂的特性查询。比如,我们可以检测浏览器是否仅仅支持老的 Flexbox 语法 -
  1. @supports ( display: flexbox )
  2.           and
  3.           ( not ( display: flex ) ) {
  4.   .foo { display: flexbox; }
  5. }
复制代码

支持情况


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

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

背后的 CSS 只有 31 行 -
  1. .hg__header { grid-area: header; }
  2. .hg__footer { grid-area: footer; }
  3. .hg__main { grid-area: main; }
  4. .hg__left { grid-area: navigation; }
  5. .hg__right { grid-area: ads; }

  6. .hg {
  7.     display: grid;
  8.     grid-template-areas: "header header header"
  9.                          "navigation main ads"
  10.                          "footer footer footer";
  11.     grid-template-columns: 150px 1fr 150px;
  12.     grid-template-rows: 100px
  13.                         1fr
  14.                         30px;
  15.     min-height: 100vh;
  16. }

  17. @media screen and (max-width: 600px) {
  18.     .hg {
  19.         grid-template-areas: "header"
  20.                              "navigation"
  21.                              "main"
  22.                              "ads"
  23.                              "footer";
  24.         grid-template-columns: 100%;
  25.         grid-template-rows: 100px
  26.                             50px
  27.                             1fr
  28.                             50px
  29.                             30px;
  30.     }
  31. }
复制代码


灵活的长度
CSS Grid 模块引入了一个新的长度单位,fr,它代表了表格容器中剩余空间的一个等分。
它使得我们在表格容器根据可用空间来为表格项分配高度和宽度成为可能。例如在圣杯布局(Holy Grail Layout)中,我希望 main 分区占据两个边栏之外的所有空间。我写了一段简单的代码来做这个事情 -
  1. .hg {
  2.     grid-template-columns: 150px 1fr 150px;
  3. }
复制代码


间距
我们可以使用 grid-row-gap、grid-column-gap 和 grid-gap 属性来明确定义间距。这些属性的值是 <length-percentage(长度百分比)> 数据类型 ,是内容区域尺寸的百分比。
比如,需要 %5 的间距,可以这样写 -
  1. .hg {
  2.     display: grid;
  3.     grid-column-gap: 5%;
  4. }
复制代码


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


3. 原生变量
最后要说的是原生 CSS 变量( 级联变量模块的自定义属性 )。这个模块引入了一种由创建作者定义变量的方法,这个变量可以像 CSS 属性一样赋值。
比如,假设在我们的样式表中多处用到一个主题颜色,我们可以将其抽象出来保存到变量中,再引用变量,以此代替多次直接写出实际的值。
  1. :root {
  2.   --theme-colour: cornflowerblue;
  3. }

  4. h1 { color: var(--theme-colour); }  
  5. a { color: var(--theme-colour); }  
  6. strong { color: var(--theme-colour); }
复制代码

目前在像 SASS 这样 CSS 预处理器中已经可以做到这些事情,但 CSS 变量在浏览器中具有活性。也就是说,它们的值可以实时更新。例如,要改变上例中 --theme-color 属性的值,我们只需要这样做 -
  1. const rootEl = document.documentElement;  
  2. rootEl.style.setProperty('--theme-colour', 'plum');
复制代码

支持情况

支持情况如何?
可以看到,目前没有一个特性被所有浏览器支持,那么我们应该怎样做才能高枕无忧地将其用于生产?答案是:渐进增强!去年我曾在前端开发大会(Fronteers Conference) 中谈到如何进行与 CSS 相关的渐进增强。现在我把它放在这里 -

2017 年你有兴趣学习什么样的 CSS 特性呢?

   
关于葡萄城:全球最大的控件提供商,世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商,为超过75%的全球财富500强企业提供服务。
回复

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

欢迎关注葡萄城控件

小黑屋|手机版|Archiver|葡萄城控件官网 ( 沪ICP备05020274号

GMT+8, 2017-9-23 01:10 , Processed in 1.121022 second(s), 31 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表