码迷,mamicode.com
首页 > Web开发 > 详细

CSS的一些新东西

时间:2019-01-12 10:35:23      阅读:347      评论:0      收藏:0      [点我收藏+]

标签:selector   速度   工作   tor   www   比较   改进   真心   www.   

技术分享图片

很多同学估计都有类似的问题,怎么才能第一时间获取到有关于CSS相关的新特性呢?有关于这个问题,并不是一个很复杂的问题

如何理解规范的形成

任何一个规范的形成都是一个漫长的过程,到目前为止,W3C对Web标准制定的Web标准和草案接近1161个,包括WD、?CR、?PR、?PERREC、?ret和?Note?这?7?种:

  • WD(Working Draft 工作草案):不稳定也不完整。目的是创建当前规范的一个快照,也能征求 W3C 和公众的意见
  • CR?(Candidate Recommendation 候选推荐标准):所有的已知 issues 都被解决了,向 implementor 征集实现;AC 正式审查,可能有三种结果:成为标准、返回工作组继续完善、废弃(此阶段的很有可能成为标准,且如有改动,则需给出改动原因)
  • PR?(Proposed Recommendation 提案推荐标准):从CRPR需要全面的 test suite 和实现报告,以证明每个特性都在至少2款浏览器里实现了,意味着其质量足以成为REC。此时,W3C 成员再最后一次 review 下规范(一般不会有实质性的改动;若有,则只能再发布一个新的WD或CR)
  • PER?(Proposed Edited Recommendation 已修订的提案推荐标准)
  • REC?(Recommendation 推荐标准,通常称之为 standard,即事实标准):此时,就不会有太多变动了,当然依然可以收勘误。它可能成为:Edited Recommendation 编辑推荐标准。微小改动,然后生成推荐的 Revised Edition;Amended Recommendation 修订推荐标准。不增加新功能的实质性更改;SPSD Superseded Recommendation 被取代的推荐标准(缺少足够的市场相关性)
  • ret?(Retired 退役的)
  • Note?(Group Note 工作组说明):不打算成为标准的文档。已经停止使用了。通常记录规范以外的信息,eg.规范的用例及其最佳实践、解释规范被弃用的原因

这里推荐一下我的前端学习交流群:731771211,里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。不定时更新技术,与企业需求同步。好友都在里面交流,每天都会有大牛定时讲解前端技术!

点击:加入

对于CSS的每项规范大致都会经历以下几个过程:

  • 编辑草案(ED):这是一项规范的初始阶段,可能非常粗糙。对这个阶段没有什么要求,也不保证它会被工作组批准。但它也是各个修订版本的必经阶段,每次变更都是先从一个 ED 中产 生的,然后才会发布出来
  • 首个公开工作草案(FPWD):一项规范的首个公开发布版本,它应该准备就绪,以接受工作组的公开反馈
  • 工作草案(WD):在第一个 WD 之后,还会有更多的 WD 出来。 这些 WD 会吸收来自工作组和更广阔的社区的反馈,一版接着一版小幅改进。浏览器的早期实现通常是从这个阶段开始的,厂商基本不太可能对更早阶段的草案提供实验性的支持
  • 候选推荐规范(CR):这可以认为是一个相对稳定的版本。此时比较适合实现和测试。一项规范只有具备一套完整的测试套件和两个独立的实现之后,才有可能继续推进到下一阶段
  • 提名推荐规范(PR):这是 W3C 会员公司对这项规范表达反对意见的最后机会。实际上他们很少在这个阶段提出异议,因此每个 PR 推进到下一阶段(也是最后一个阶段)只是时间问题
  • 正式推荐规范(REC):一项 W3C 技术规范的最终阶段

用W3C上的一张图来简要的向大家展示一下一个CSS属性诞生的历程:

技术分享图片

版本之争

随着前端社区开始有介绍CSS Selectors Level 4相关的文章开始,很多人把这个称之为CSS4选择器,也在说CSS3还未成为规范,CSS4就要来了,真心学不动了。为此@Rachel Andrew特别花了一点时间阐述了:

CSS发展至今,将不会有CSS版本之称,只会有模块的Level一说

有关于这个话题,早在2016年@Rachel Andrew特意写了一篇文章《Why there is no CSS4 - explaining CSS Levels》做出相关的解释。

想想,这就是我与大神之间的差距!

由于CSS 的各个模块在近些年里以不同的速度在推进,我们已经越来越难以把这些规范以CSS3、CSS4这样的方式来划分了,而且这样也难以被大众理解和接受。

所以,大家以后不要再把CSS按CSS3或者CSS4来称谓了,我们应该改变以前的习惯,按功能模块发布的版本号来称呼他们。这样才不会给别人造成误解或困惑!

CSS 的一些新东西

  • CSS Grid Layout & Subgrid
  • CSS Box Alignment
  • Gap
  • Intrinsic Sizing Keywords
  • Scroll Snap
  • Scrollbars
  • Shapes
  • Conic Gradients
  • Aspect Ratio Units
  • Exclusions
  • CSS Houdini
  • Meet Feature Queries

接下来简单的聊一下,如果要深入的聊,估计都足够写本书来聊了。

CSS Grid Layout & Subgrid

CSS Grid Layout到目前为止已经有Level 1Level 2两个版本。而Subgrid是属于CSS Grid Layout Level 2中的一部分。CSS Grid Layout中的很多特性都得到了很多主流浏览器的支持,而且@Rachel Andrew预计在2019年将会成为主流布局方式之一。话又说回来,CSS Grid Layout能这么成熟和得到浏览器的支持,离不开@Rachel Andrew的功劳,因为她一直在推进该特性的向前发展。

CSS Grid Layout对于开发者而言是一件好事,他将改变Web布局的模式,因为在CSS Grid Layout之前的布局模式都是一维布局,只有Grid是二维布局。Grid很强大,但其涉及到相关概念也特别的多,如果要彻底的了解或掌握她,还是需要花不少的时间去学习。当然最好是能多写一些案例。有关于这方面的介绍,这里就不做过多的详细介绍,感兴趣的话可以阅读站上有关于CSS Grid Layout相关的文章

CSS Box Alignment

CSS Box Alignment目前是Level 3,主要用于控制各种布局方法中项目是如何对齐的。由于不同布局方法在对齐方面有不同的约束,因此Box Alignment的一些行为依赖于布局方法。该规范定义了三种对齐方式:

  • 位置对齐startendcenterself-startself-endflex-startflex-endleftrgiht
  • 基线对齐:?baselinefirst baselinelast baseline
  • 分布式对齐stretchspace-betweenspace-aroundspace-evenly

而我们接触最多的应该是Flexbox布局中控制Flex项目对齐方式用到的属性,比如:

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

而在Grid布局中也可以用这样的方式来实现对齐:

.grid {
    display: grid;
    align-items: start;
    justify-content: space-between;
}

也就是说,以后不管是在Flexbox布局还是Grid布局中,控制元素对齐的方式都将会通过该规范中的一些特性来完成。而该规范中提到的特性不仅仅是上面提到的那部分。更详细的可以阅读相关规范

要彻底理解CSS Box Alignment规范中提到的特性,还需要对CSS的一些基础特性要有彻底的了解,不然只能理解其表面上的特性。

CSS的一些新东西

标签:selector   速度   工作   tor   www   比较   改进   真心   www.   

原文地址:http://blog.51cto.com/14138686/2341858

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!