2017年值得学习的3个CSS特性
原文:https://bitsofco.de/3-new-css-features-to-learn-in-2017/
译文:http://caibaojian.com/3-new-css-features-to-learn-in-2017.html
译者:前端开发博客(蔡宝坚)
未经许可,禁止转载,如有不妥之处,欢迎指正。
新年快乐!
随着新的一年到来,我们有一整套新的东西要开始学习。虽然今年的新特性有很多,但有3个新的特性是最令我激动不已的。
1.Feature Queries
前段时间,我写过关于Feature Queries的一篇文章,叫“我最想要的CSS特性之一”。好了,现在它已经出现在这里了。它支持除了IE浏览器之外的所有主流浏览器(包括Opera Mini)。
Feature Queries,使用这个 @supports
规则,允许我们包含CSS在一个条件块,但只有当前用户客户端支持一个特别的CSS property-value 才有效。举个简单的例子,只支持 display:flex
的浏览器才用Flexbox样式。
@supports ( display:flxe ){.foo { display:flex; }
}
另外,使用像 and
和 not
的操作符,我们可以创建更加复杂的特性查询。例如,我们可以检测一个浏览器只支持旧的Flexbox语法-
@supports ( display: flexbox ) and ( not ( display: flex ) ) {.foo { display: flexbox; }
}
兼容情况
2.Grid 布局
CSS 网格布局模块定义了一个以创建网格为基础的布局系统。它跟Flexbible Box 布局模块很相似,但它更多的是为页面布局而设计,因此具有许多不同的特性。
清晰的项放置
一个网格是由Grid Container(用 display: grid
创建),和Grid项(这是子项)构成。在我们的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网格组件介绍了一个新的长度单位 fr
,它表示网格容器中剩下的自由空间的一小部分。
这允许我们根据网格容器中剩下的空间来分配网格子项目中的宽和高。例如,在圣杯布局中,我想要 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网格组件最早在今年3月份将可以使用在浏览器中
3.原生变量
最近,原生CSS变量(css变量组件自定义属性)。这个组件介绍一个创建自定义变量的方法,它可以赋值给CSS属性。
举个例子,如果我们需要在样式表中多个地方使用到colour,我们可以把它当做一个变量和并引用它,而不必多次写它的实际值。
:root {--theme-colour: cornflowerblue;
}h1 { color: var(--theme-colour); } a { color: var(--theme-colour); } strong { color: var(--theme-colour); }
现在有很多CSS预处理器像SASS可以做到这一点,但CSS变量有浏览器支持的优势。这意味着它们的值可以实时更新。为了改变下面的属性 --theme-colour
,例如,我们需要做的就是下面这个了:
const rootEl = document.documentElement;
rootEl.style.setProperty('--theme-colour', 'plum');
兼容情况
什么是兼容情况
如你所见,不是所有的特性都被所有浏览器所支持,所以我们要如何合适使用它们在生产中?好吧,用渐进增强!上一年,我在Fronteers 会议上讲了一个关于如何在CSS上使用渐进增加的演讲。你可以看一下下面这个:
https://player.vimeo.com/video/194815985
转载于:https://www.cnblogs.com/wpbars/p/6378641.html
2017年值得学习的3个CSS特性相关推荐
- 2015年最值得学习的编程语言是?
2015年最值得学习的编程语言是? 2015-03-04 10:31 来源:优才网 编辑:Loading[纠错]12人评论 A-A+ 怎么开淘宝店 网站优化方法 创业如何获得投资 小米note顶 ...
- Java开发程序员最值得学习的10大技术
作为一个开发人员,我们最大的挑战就是保持自己了解新的技术.技术变化很快,你大概每两年就会看到一个新版本的编程语言和框架. 就拿2017年来说,AR.VR.区块链.人工智能等等已经扑面而来了.除了这些离 ...
- 2021年,Java开发者值得学习的13项技能
本文分享自百度开发者中心2021年,Java开发者值得学习的13项技能 作者 | Olivia Cuthbert 译者 | 王强 策划 | 刘燕 如果你想在这个竞争激烈的世界里,成为一名熟练开发 Ja ...
- Java开发2018年值得学习的10大技术
转载自 Java开发2018年值得学习的10大技术 作为一个开发人员,我们最大的挑战就是保持自己了解新的技术.技术变化很快,你大概每两年就会看到一个新版本的编程语言和框架. 就拿2017年来说,AR. ...
- Java程序员最值得学习的10大技术
程序员们是最具有挑战性的工作,我们最大的挑战就是保持自己了解新的技术.技术变化很快,你大概每两年就会看到一个新版本的编程语言和框架. 就拿2017年来说,AR.VR.区块链.人工智能等等已经扑面而来了 ...
- 2019年Java编程开发值得学习的10大技术
01 Gradle Java世界中主要有三大构建工具:Ant.Maven和Gradle.经过几年的发展,Ant几乎销声匿迹,还剩Maven和Gradle两种,maven是我目前工作中用的版本管理工具. ...
- springboot python 开发效率比较-2018年Java开发值得学习的10大技术
作为一个开发人员,我们最大的挑战就是保持自己了解新的技术.技术变化很快,你大概每两年就会看到一个新版本的编程语言和框架. 就拿2017年来说,AR.VR.区块链.人工智能等等已经扑面而来了.除了这些离 ...
- 值得学习的C/C++开源框架(转)
值得学习的C语言开源项目 - 1. Webbench Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的 ...
- Go语言为什么值得学习?
时光荏苒,这么快就2022年了,冬奥会也开始这么多天了,希望中国队多多的拿金牌. 谷爱凌也太香了,好喜欢.Go语言也很香,香的就像谷爱凌一样. 下面通过介绍我的亲身经历来介绍我为什么说 Go语言值得学 ...
最新文章
- 捷途ipel平台怎么样_奇瑞捷途X有望搭载北斗、GPS双导航系统
- CSS Selector 3
- Retrofit 原理解析
- Java的知识点30——线程的优先级、终止线程的典型方式、获取线程基本信息的方法
- python获取视频帧的时间_Python提取视频中图片的示例(按帧、按秒)
- Struts 1高级应用
- 使用API​​密钥(aka身份验证令牌)部署到Maven Central
- android media apex_APEX英雄主播即将登陆时代广场?人气十强介绍!
- 检测网络是否稳定的计算机命令,如何查看自己的网络是否稳定
- 【转】nginx+iis实现负载均衡
- c语言的point函数,C语言中friend友元函数详细解析
- golang之strings
- 如何用c语言编写控制台小游戏,使用c语言写WIN32控制台小游戏 贪吃蛇
- 计算机win7无法安装,为什么自己的电脑老是安装不上Win7系统呢
- 史上最全运放运算放大器知识讲解(附主流厂商)
- 论算法人的语言表达能力
- Java面试-北大青鸟合肥科海学院
- 短信注册验证以及邮箱激活
- 【面试】 CVTE 视源股份 C++ 软件开发 二面
- oracle12c 重启服务,OBIEE12c的服务启动/关闭命令