搜尋
首頁web前端html教學CSS 标准发布流程_html/css_WEB-ITnose

随着 CSS 3 的广泛应用,很多新的 CSS 属性层出不穷,有很多陌生的 CSS 属性出现,所以经常需要去学习新的 CSS 属性。新的属性往往介绍文章不多,所以有时候就需要去看看官方文档,此时会发现官方文档有好几个版本,看下图:

当初学 flex-box 的时候就发现有好多种写法,还好官方文档开头有标明那些文档时最新的。不过此时我萌生了去了解 CSS 标准流程的想法,我想作为一个合格的 CSSER 也应该去了解吧。这里讲到的知识基本来自 CSS-tricks 上 CHRIS COYIER 的一篇文章: https://css-tricks.com/css-standards-process/ 。

CSS 的标准化流程由 W3C Cascading Style Sheets Working Group (CSSWG)——W3C层叠样式列表小组,由浏览器商,大学,大公司(google,IBM等),以及独立CSS专家组成。W3C 本身并不制定标准,而是作为一个论坛式的平台,接收来自小组成员的提交,并通过会议来商讨制定标准,所有的提交以及讨论都是公开透明的,可以在 W3C 网站上看到会议的记录,标准确定一般有6个阶段,其中两个是过渡阶段:

1. 编辑草案 Editor's Draft (ED)

这个是规范的开始阶段,一个CSS属性或者选择器被提出来,并在CSSWG内部研究。如果小组成员同意这个属性可以正式推出,它就能进入下一阶段。

2、工作草案 Working Draft (WD)

编辑草案后是工作草案,标准的设计阶段。小组反复处理来自 CSSWG 内部和来自小组外部的反馈,这个阶段有两个结果:一是可能会因为技术困难或者可能会引起其他问题而使新属性被完全拒绝;二是规范会通过这个阶段,并会作为第一次公开工作草案( First Public Working Draft (FPWD))发布,后面还会有数个工作草案,会处理来自 CSSWG 内部和小组外部更广泛社会的反馈。

3、过渡-最后通告工作草案  Transition – Last Call Working Draft (LCWD)

这是第一个过渡阶段,当规范开始考虑从工作草案进入到下一个阶段时,将会对新属性的一些小改动的反馈设置一个截止日期,LCWD 即是日期截至后最后的一次公开草案处理。

注:最重要的阶段是 ED, WD, and CR(下面会讲到的),其他阶段不是很重要。

4. 候选推荐标准 Candidate Recommendation (CR)

规范会在这个阶段通过完整的测试,测试人员来自 CSSWG 以及被选为实现这个规范的浏览器生产商(Chrome, Safari, Firefox, Opera, 等等)。为了继续进入下一阶段,CSSWG 会推出两个正确的实现规范。

5. 过渡-建议推荐标准 Transition – Proposed Recommendations (PR)

当到达这个阶段,W3C全球资源小组:W3C咨询委员会(W3C Advisory Committee),决定这个规范是否会继续进入下一个阶段。这个阶段一般很少有异议出现,所以也是一个过渡阶段而已。

6.推荐标准 Recommendation (REC)

如果规范到达这个阶段,说明规范已经考虑完备并可以让浏览器商实现,W3C 和 CSSWG 对这个规范的讨论处理不再活跃,只做一些必要的维护。

注:推荐标准阶段其实不是一个理想的状态,而是一个规范的坟墓,浏览器并不会等到这个阶段才去实现它,而是在 CR 阶段就会实现这个规范。为什么说是坟墓呢,因为到达 REC 阶段后,规范会止步不前,而不是变得稳定。因为在 REC 阶段 CSSWG 并不会投入精力去修复新出现的错误,所以错误会不断积累,而新版本的规范已经在开发了,老的规范已经失去了继续发展的活力以及意义,留下的问题就只能通过 hack 去弥补,同时会有新的属性去代替它实现更好的功能。

那什么时候规范才是稳定的呢?文章中有引述了 Tab Atkins Jr  (google团队成员,也是 CSSWG 以及 W3C 的成员)的一段话,内容大概是:规范的稳定性基本和它所在的流程阶段没有关系。当规范特性已经开始传播开来,并因为向后兼容性不能改变时,它才是稳定的,这个阶段可能会在 ED 规范阶段或者 CR 阶段,这才是稳定性评判的正确方法,而不是 W3C 的标准发布流程。说到这里,作者也提到了怎样根据 CSS 新属性的稳定性情况去使用它,避免跳坑,其实就是能够实现渐进增强与优雅降级。这里不得不提到一个有名的网站  http://caniuse.com 估计这个网站大多数人都会用到了,简直是 CSSER 的福音啊,通过这个网站,当键入某个属性时,可以在下面的resources标签很快速地找到它的官方文档以及很多最新的学习文章,同时了解到到一些现有的使用问题(issues)。举个例子,比如键入flex时,下面有这样的标签:

里面有来自css-trick、github等著名网站的文章,很多都是比较新,并且写得很好的文章。

这里还有个小常识,就是关于 CSS 3 的这个命名, Tab Atkins Jr 在文章  A Word About CSS4 代表 CSSWG 做了阐述,主要内容就是 CSS 3 代表了 CSS 2.1 后新增的 CSS属性,而且不会有 CSS4 这样的东西出现。下面是我看完后结合文章内容以及自己的一些理解,不想看原文的可以稍微了解一下。可能理解不是很到位,不过应该不会偏颇太多:CSSWG 想结束 CSS 2.1 这个版本时,发现 “versions”(版本)这个东西不好用,因为一旦使用版本来发布 CSS 时,CSS 变得很难维护,发展也会变慢。结合上面 CSS 的标准发布流程以及现在 CSS 的使用情况,不难想到确实是这样。因为 CSS 的整体性不强,CSS 属性都是为了实现某个效果单独被提出并反馈,和其他提出的属性并没有什么交集;有的属性一直在用不需要什么新的更新,而有的属性可能很快要被淘汰,所以以一整个版本去发布 CSS 很不科学。基于这样的想法,CSSWG 决定把 CSS 分成很多独立的小模块,每个模块只包含一个主要的特性(feature),可以自己单独升级开发,为什么要分成小的只包含少数特性的模块呢?这样就不会因为一个模块包含太多特性,然后因为某个特性特别棘手不好解决而阻碍整个模块其他特性的发展升级。因为这个想法是在结束 CSS 2.1 版本的时候决定的,那么现在 CSS 就要以模块来整理一下,也要相应定一些等级(level)。规则是这样的: 

1、如果模块在 CSS 2.1 就有相关的内容,那么这些模块就从 level 3 开始。

2、如果是完全新的属性(比如 Flexbox),就直接从 level 1 开始。

3、一个模块的级别和它所在 CSS 的版本无关,即不管它是 CSS 2.1 的内容还是完全新的属性。因为模块的概念是新提出来的,所以只要是模块,就都属于 CSS 3(或者也可以说都是 CSS),不管它们处于什么模块等级。

4、可能会看到类似 css4-backgrounds 这样的写法,其实代表的是 CSS Background & Borders Level 4,即4表示的是模块的等级。

后来发现大漠前辈也写了相关文章,内容更全面,讲到了浏览器前缀的问题。我也参考了一下,大家可以点下面的参考链接去看看。

本文参考:

Tab Atkins Jr. http://www.xanthir.com/b4Ko0#nav

CHRIS COYIER . https://css-tricks.com/css-standards-process/

大漠 . CSS秘密花园:Web 标准是友是敌?

水平有限,错误欢迎指正。原创博文,转载请注明出处。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
HTML的角色:構建Web內容HTML的角色:構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容,使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼:仔細觀察術語HTML和代碼:仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent,而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1)htmldefineswebpagertuctureduseTags.2)“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML,CSS和JavaScript:Web開發人員的基本工具HTML,CSS和JavaScript:Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

HTML,CSS和JavaScript的角色:核心職責HTML,CSS和JavaScript的角色:核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

HTML容易為初學者學習嗎?HTML容易為初學者學習嗎?Apr 07, 2025 am 12:11 AM

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼?HTML中起始標籤的示例是什麼?Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

如何利用CSS的Flexbox佈局實現菜單中虛線分割效果的居中對齊?如何利用CSS的Flexbox佈局實現菜單中虛線分割效果的居中對齊?Apr 05, 2025 pm 01:24 PM

如何設計菜單中的虛線分割效果?在設計菜單時,菜名和價格的左右對齊通常不難實現,但中間的虛線或點如何...

在線代碼編輯器究竟用什麼HTML元素實現代碼輸入?在線代碼編輯器究竟用什麼HTML元素實現代碼輸入?Apr 05, 2025 pm 01:21 PM

網頁代碼編輯器中的HTML元素分析許多在線代碼編輯器允許用戶輸入HTML、CSS和JavaScript代碼。最近,有人提出了一...

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中