產(chǎn)品
解決方案
一鍵接入,搶占市場(chǎng)紅利
搭建分銷(xiāo)網(wǎng)絡(luò),萬(wàn)人幫你賣(mài)貨
實(shí)現(xiàn)一站式社區(qū)拼團(tuán)模式
實(shí)現(xiàn)行為軌跡追蹤,智能數(shù)據(jù)分析
百種營(yíng)銷(xiāo)工具,輕松玩轉(zhuǎn)社交電商
最近,已經(jīng)有一些關(guān)于是否應(yīng)該像定義的CSS“下一個(gè)版本”CSS4的討論。在本文中,我們將討論此問(wèn)題,為CSS創(chuàng)建新功能版本的利弊,以及確定新功能版本的潛在問(wèn)題。
CSS4的問(wèn)題
最近在網(wǎng)站建設(shè)微信群中引發(fā)了為什么CSS4還沒(méi)有成熟的討論,為了理解為什么沒(méi)有CSS4,我們需要看一下Web平臺(tái)的歷史。CSS的初始版本是一個(gè)單一的整體規(guī)范。這些規(guī)范包含所有可能的CSS屬性和值。這很好用,因?yàn)闆](méi)有太多CSS要詳細(xì)說(shuō)明。CSS1主要涵蓋用于格式化文本文檔的功能,CSS2和CSS2.1中添加了其他功能和說(shuō)明,但是CSS仍然是一個(gè)相對(duì)較小的規(guī)范。
CSS3
當(dāng)CSS工作組開(kāi)始研究CSS3時(shí),決定將大型規(guī)范拆分為模塊。這些模塊每個(gè)都覆蓋CSS的一部分。并非所有CSS都會(huì)立即放入新模塊中。CSS2.1中仍然定義了許多東西,因?yàn)樗鼈儧](méi)有更改或添加。因此,如果仍在CSS2中定義所引用的內(nèi)容,您仍會(huì)在現(xiàn)代模塊中找到指向CSS2規(guī)范的鏈接。但是,任何新的CSS都是在單獨(dú)的模塊中創(chuàng)建的。隨著新CSS的創(chuàng)建,這種模塊化一直持續(xù)到今天。例如,構(gòu)成Box Alignment規(guī)范的幾種功能最初在Flexbox規(guī)范中開(kāi)始使用。一旦很明顯它們可以應(yīng)用于其他布局方法(例如Grid Layout),它們就被移到一個(gè)新模塊中,也要為該其他方法定義。
我們不再將新規(guī)范稱(chēng)為CSS3規(guī)范,部分原因是它沒(méi)有多大意義。對(duì)模塊進(jìn)行版本控制的方式是,CSS2的升級(jí)模塊(例如Selectors)成為了3級(jí)模塊。全新的CSS(例如CSS網(wǎng)格布局)在CSS2中根本不存在,因此可以從1級(jí)模塊開(kāi)始生活。這些初始模塊中的一些模塊現(xiàn)在處于4級(jí)甚至5級(jí)。因此,調(diào)用所有新的CSS CSS3不再映射到這些級(jí)別編號(hào),并且可能會(huì)造成混亂。
規(guī)范成熟度級(jí)別
除了規(guī)范級(jí)別,每個(gè)單獨(dú)的級(jí)別都經(jīng)過(guò)從初始草案到成為W3C建議書(shū)的分階段過(guò)程,該過(guò)程中的步驟稱(chēng)為“ 成熟度級(jí)別”。您可能會(huì)認(rèn)為W3C建議是一個(gè)“網(wǎng)絡(luò)標(biāo)準(zhǔn)”,但是我們?cè)诠ぷ髦忻刻焓褂玫脑S多東西都是在尚未達(dá)到該成熟度級(jí)別的規(guī)范中定義的。您可以在CSS WG Current Work頁(yè)面上查看規(guī)范列表及其狀態(tài)。
缺少進(jìn)步的CSS4
我們?cè)S多開(kāi)發(fā)人員看到了關(guān)于CSS3的困惑或CSS4明顯缺乏進(jìn)步的情況。規(guī)范的級(jí)別或內(nèi)部的W3C規(guī)范成熟度對(duì)網(wǎng)站開(kāi)發(fā)人員而言,遠(yuǎn)不如瀏覽器中可以實(shí)際使用的CSS來(lái)得重要。
也許CSS4可以幫助客戶將思維方式推向更安全,更好的網(wǎng)絡(luò)。但在推銷(xiāo)會(huì)議上,你很難告訴他們CSS4不支持IE10,因?yàn)槲覀冃枰狢SS變量和網(wǎng)格布局??蛻舨恢酪膊辉诤?。他們只是想支持盡可能多的瀏覽器(非常典型的FOMO思維方式),但他們是決策者。
但是,如果我們能告訴他們CSS4不支持IE10,因?yàn)樗鼪](méi)有最新的CSS4技術(shù),并向他們拋出“您確定要讓新創(chuàng)建的網(wǎng)站落后于競(jìng)爭(zhēng)對(duì)手嗎?” 問(wèn)題,這可能會(huì)困擾他們(當(dāng)然,除了IE10完全過(guò)時(shí)且容易受到攻擊這一事實(shí)之外)。
第一個(gè)問(wèn)題是,“準(zhǔn)備就緒” CSS的任何集合都不像選擇一組規(guī)范那樣簡(jiǎn)單。許多規(guī)范是部分實(shí)現(xiàn)的,對(duì)某些屬性有很大的支持,而對(duì)其他屬性則沒(méi)有任何支持。許多Web開(kāi)發(fā)人員認(rèn)為某些功能已經(jīng)成熟,其規(guī)格仍處于“工作草案”狀態(tài),而工作組中仍在爭(zhēng)論和澄清這些功能。
如果我們以多列布局為例。多年來(lái),大多數(shù)屬性已廣泛應(yīng)用于瀏覽器。但是,該column-span屬性最近才在Firefox中實(shí)現(xiàn),并且最近澄清了許多功能,例如column-fill。
我們可以決定完全忽略規(guī)范并查看屬性。由于我們?cè)诓季址椒ㄖ杏胁糠謱?shí)現(xiàn),因此這也不是一件容易的事。該框?qū)R屬性是一個(gè)很好的例子。這些是為所有布局方法定義的,其中屬性在該布局方法中有意義。但是,當(dāng)前僅在Grid和Flexbox中可以看到對(duì)Box Alignment的支持。因此justify-self,為塊級(jí)框,絕對(duì)定位的框和網(wǎng)格項(xiàng)定義的穩(wěn)定嗎?在網(wǎng)格環(huán)境中為是,在塊布局環(huán)境中為否。
Box Sizing是另一個(gè)領(lǐng)域,我們支持CSS Grid Layout中的固有大小值 fit-content()以進(jìn)行軌道大小調(diào)整,但不支持width。然后,除Firefox以外flex-basis的瀏覽器都沒(méi)有實(shí)現(xiàn)任何固有的大小調(diào)整關(guān)鍵字。
最后,如果我們返回multicol,人們對(duì)multicol所遇到的許多問(wèn)題都與屬性本身無(wú)關(guān),而與跨瀏覽器碎片支持不佳有關(guān)。盡管有各種屬性的出色支持,但這使得multicol的表現(xiàn)似乎很差。解開(kāi)所有這些依賴(lài)關(guān)系以提供一組功能將是一件非常困難的工作。
CSS不僅適用于WEB瀏覽器
有大量的用戶使用CSS和HTML并通過(guò)創(chuàng)建可打印的PDF來(lái)輸出打印的文檔。他們通常對(duì)分頁(yè)媒體規(guī)范,分段等有出色的支持。但是,在實(shí)現(xiàn)更新的CSS(例如網(wǎng)格布局)方面,它們通常落后于瀏覽器。它們?nèi)绾芜m合CSS4?
人們期望功能發(fā)布包括當(dāng)前不存在的功能
關(guān)于此問(wèn)題的討論中發(fā)生的有趣的事情是,許多人發(fā)表評(píng)論說(shuō),他們對(duì)CSS4的期望是它將包含某些根本不屬于CSS的功能。盡管其中一些功能(例如Grid和Flexbox)已經(jīng)在瀏覽器中使用了很多年,但一切似乎都對(duì)他們來(lái)說(shuō)是全新的。
但是,任何堅(jiān)持不懈的人都可能會(huì)對(duì)為什么有一個(gè)“新的”規(guī)范充滿真正的舊事物感到困惑。
我們要解決什么問(wèn)題?
在針對(duì)此問(wèn)題的許多回應(yīng)中,網(wǎng)站開(kāi)發(fā)人員將瀏覽器支持視為應(yīng)包含在CSS4中的關(guān)鍵,我認(rèn)為我們所面臨的問(wèn)題不是CSS版本控制中的一個(gè),而更多的網(wǎng)站開(kāi)發(fā)人員對(duì)于通常應(yīng)該在其項(xiàng)目中使用哪些功能集合。
CSS4方法的優(yōu)點(diǎn)之一是它發(fā)出兩件事。首先,在CSS3之后已經(jīng)開(kāi)發(fā)了很多新的CSS功能,這些功能已經(jīng)可以使用,其次,它們已經(jīng)可以使用了。沒(méi)有經(jīng)過(guò)Chrome的實(shí)驗(yàn)或?qū)嵤珱](méi)有其他人,但已經(jīng)為廣泛采用做好了準(zhǔn)備。
在此討論中,如此頻繁地出現(xiàn)瀏覽器支持這一事實(shí)使我們想知道,定義MDN之類(lèi)的地方是否是更好的定義。所有瀏覽器供應(yīng)商都已經(jīng)為MDN做出了貢獻(xiàn),它已經(jīng)為這些功能提供了支持?jǐn)?shù)據(jù),從而使我們能夠看到諸如Box Alignment之類(lèi)的部分實(shí)現(xiàn)。MDN是Web平臺(tái)的文檔,因此我們可以回避打印實(shí)現(xiàn)或CSS的任何其他實(shí)現(xiàn)的問(wèn)題,僅將功能集限制在Web范圍內(nèi)。
我們?nèi)匀徊幌嘈臗SS4或我們選擇稱(chēng)為CSS版本的任何東西實(shí)際上會(huì)在相對(duì)較小的社區(qū)之外對(duì)CSS的感知產(chǎn)生任何影響。我們認(rèn)為這也無(wú)助于解決網(wǎng)站開(kāi)發(fā)人員說(shuō)服其老板和客戶升級(jí)瀏覽器的問(wèn)題。如果提供軟件的微軟告訴用戶進(jìn)行升級(jí)而用戶不進(jìn)行升級(jí),那么我們將看不到支持CSS4的根基。而且,我們做了很長(zhǎng)一段時(shí)間,人們?nèi)匀粵](méi)有升級(jí)他們的瀏覽器。所以CSS4真正的使用只能依存于瀏覽器的全面支持。
p0