CSS簡史：從1.0到3.0，最終又將走向哪里？

/面包理想

一轉眼已經2018年，前端行業也風風雨雨地走過了10多年，網頁布局也從最原始的文檔變成了精彩紛呈的交互。當我看到第四代CSS布局技術的時候，在驚嘆互聯網發展如此突飛猛進的同時，不禁會有一個疑問：CSS經歷1.0到3.0的版本變遷，最終又將走向哪里？

今天我們就回顧一下CSS簡史和四次布局技術的躍遷。

1.CSS簡史

為什么我們需要回顧一下CSS簡史呢？

1.了解過去能夠更好地預測未來，畢竟太陽底下沒有什么新鮮事。

2.相比預測未來，通過了解CSS發展演變趨勢，能夠科學合理地評判CSS的發展，指導我們學習CSS的核心技術，讓我們在有限的精力和時間內學對知識，學好知識。

那是1989年的第一場雪，比1988年來的更早一些，伯納斯·李（Tim Berners-Lee）以超人的智慧和消耗了前額無數濃密的頭發為代價發明了World Wide Web，沒有他就沒有我們今天互聯網相關的工作，也就沒有了這個專欄教程，請允許我代表廣大前端致以崇高的敬意。我們先一睹大神的風采。

對互聯網之父，我只想對他說一句話，有一款洗發水增發效果挺好的，我一直用，你要不要試試？

互聯網誕生了以后，最初的網頁僅僅是純文本，但是隨著互聯網的發展，大家意識到web的原始版本根本就沒有提供一種裝飾網頁的方法。這就好比一個嬰兒不會穿著衣服出生一樣，孩子大了，總不能裸奔吧？這個時候兩個大神提供了解決方案Pei Yaun Wei和Andreesen。

Pei Yaun Wei說，這個好辦，我們可以給孩子穿上紙尿褲。

Pei-Yuan Wei在1991年創建圖形瀏覽器 ViolaWWW ，他整合了自己提出的樣式語言到自己開發的瀏覽器中，還期望自己的樣式語法最終能成為web關于樣式的官方標準。雖然這個目標并未達到，但是他提出的樣式語法確實為其它的一些樣式語法提供了一些靈感。

Andreesen說，那玩意得換多麻煩，我給孩子畫一身衣服吧，當然你懂的，最后Pei Yaun Wei的方案被采用了，但是我們還是看看Andreessen畫出來的情況有多亂。

與此同時，Andreessen 在他開發的網景瀏覽器中進行了不同的嘗試。他并沒有創建一種分離式的標記語言，而是采取拓展HTML標簽的方法來包含非標準化的HTML標簽已達到裝飾網頁的目的。不幸的是，沒過多久，網頁就失去了所有的語義化并看起來像下面這樣混亂：

<MULTICOL COLS="3" GUTTER="25">
 <P><FONT SIZE="4" COLOR="RED">This would be some font broken up into columns</FONT></P></MULTICOL>

最終被大家采納的語言是由Hakon Wium 在 1994年 10月提出的樣式語法。它被稱為樣式層疊表，簡稱CSS，但是直到1996年的時候，CSS才演變成我們熟悉的樣子。

html { margin-left: 2cm; font-family: "Times", serif;
}h1 { font-size: 24px;
}

然后在1998年5月W3C發表了CSS2，緊接著一個讓我們深惡痛覺的瀏覽器誕生了！對沒錯，就是你深惡痛絕的那個萬能的IE6，2001年微軟發布了IE6，不過搞笑的是，IE6最初的出現確實很大程度推動了CSS發展。那時候的網頁已經變成跟現在很接近了。

按照常理你肯定會想，后面我就知道了，你不用說了，然后就是CSS3.0了。好吧，如果是我，我也這樣想，但是國際友人的腦回路可能跟我們不一樣，事實上，CSS3早于1999年已經開始制訂，直到2011年6月7日，CSS 3 Color Module終于發布為W3C Recommendation。這個故事告訴我們兩件事：

1.w3c這個組織活的真夠長，甚至比很多讀者年齡都大。

2.不是CSS正式版發布了你才放心使用，如果等到那個時候使用，你的項目可能未曾綻放就枯萎了。

細心的讀者可能會問了，CSS3正式版什么時候發布啊？另外CSS4.0什么時候發布？

好吧，我只能告訴你隨緣吧……而且沒有CSS4.0了，也不會有CSS5.0了。

來我們再看看國際友人的腦回路：

簡單地說，就是從CSS3開始，CSS規范就被拆成眾多模塊（module）單獨進行升級，或者將新需求作為一個新模塊來立項并進行標準化。因此今后不會再有CSS4、CSS5這種所謂大版本號的變更，有的只是CSS某個模塊級別的躍遷。

按照CSS工作組的說法，CSS歷史上并沒有版本的概念，有的只是“級別”（level）的概念。比如，CSS3其實是CSS Level 3，CSS2是CSS Level 2，而CSS Level 1當然就是CSS1。每個級別都以上一個級別為基礎。

大家可能說這個命名好亂啊，這事兒我只想跟你說，你就把CSS工作組當成你女朋友就好了，她開心就好，她說的都是對的，她說啥就是啥……

至于我們，會用就好了。

CSS出現的好處就是讓結構和表現分離，可以更靈活的修飾網頁,學習也很簡單。這里我更想說說它的不足。

1.CSS只有一個全局的命名空間，所以是無法避免出現選擇器沖突的。

2.模塊化做的不夠好，所以造成嵌套和覆蓋混亂，容易產生一大堆亂糟糟的樣式。

所以現在CSS也在向“模塊化、JS化發展”

不過客觀地說，CSS的出現確實是互聯網里程碑式的進步。

CSS其實就做了兩件事：

1.如何布局

2.元素怎么表現

說直白一點就是兩件事，一個房子是蓋成兩室一廳還是三室兩廳，另一件事是精裝修。

這里大家就會看到如果一個房子180平米隔成1個10平米的主臥170平米的廁所，你再怎么精裝修也不會是一個宜居的房間。所以布局在CSS中是極其重要的。與CSS發展簡史類似，CSS布局也經歷了一代又一代的迭代，才成為當前的樣子。

接下來我們就說說CSS布局簡史。

2.CSS布局簡史

初代table布局

在1997年的時候，David Siegel 改變了web，他自己研究出了一項網頁布局技術，利用html中的table元素和gif圖片縫合在一起，創造了表格布局技術，之后他就猶如一頭猛獸泛濫起來。

優點：布局容易、快捷、兼容性好

缺點：改動不便，需要重新調整，工作量大

由于互聯網網站越來越復雜，內容和業務更新頻繁，所以table布局是完全不能勝任的，以至于table布局的發明人都說：

“我把炸醬和面倒在了一起，并且沒法分開它。”

不過這個真不是我杜撰出來的，原文：

David Siegel：“有人說我毀掉了Web，我回答他們，的確如此。我毀掉了Web是因為我把巧克力和花生醬混合在一起卻再也不能把它們分開。我犯下了把結構跟表現混合在一起的錯誤。”

然后第二代布局技術登場了，

CSS+div布局

CSS+div布局總結起來有三大優點，

1.省時，學習容易，寫代碼也很容易，很快，效率高

2.省事，如果業務邏輯變了，改起來特別方便快捷

3.省錢，代碼量少，省帶寬，適合seo

基于這三年不難看出CSS+div布局人畜無害，人見人愛，也就不難解釋為什么被廣泛地使用成為目前主流的布局技術了。當然了他也有缺點：

1.需要考慮平臺兼容性，對制作人員的技能要求較高。

2.在移動端布局顯得有些力不從心，如未知寬高float內部元素居中、垂直水平布局、響應式布局等方面略顯繁瑣。

基于此，第三代布局技術應運而生。

Flex布局

優點：

1.CSS3的布局方式，可以在不使用其他框架的情況下，簡便、完整、響應式地實現各種頁面布局 2.移動端布局簡直太友好

缺點：

兼容性較差，IE瀏覽器版本在9.0以上，基本要10.0 對于其他瀏覽器，要求兼容性寫法

Flex布局日漸成為移動端主流布局技術，但是它是單一維度的布局，這個我會在專欄后面講到，有時候也會捉襟見肘，所以目前出現了第四代的布局技術：

grid布局

因為目前大部分瀏覽器并不支持這種技術，但是它代表了網絡發展，這里大家保持關注就好，這里我重點說下它為什么可以稱為第四代網絡布局技術。首先一個觀點大家先記住：

它并不會取代第三代的布局技術，而是顛覆和突破。就好像Flex遠比div+CSS布局更方便，但是div+CSS依然有用武之地。

我們說下它的突破之處：

1.flex對標的是float，本質上還是一維布局，這就跟別人開著夏利，你開奔馳都是地面上跑沒啥本質區別一樣。但是grid升維了，grid是飛機，在地面馬路這條線一維之上讓人能夠思考高度這個維度，以前是汽車一維交通工具（你只能在水平方向一個方向開），飛機是二維（能俯沖了（橫向、縱向同時）），所以grid可以說是拓寬了CSS布局的維度。不排除將來會有三維布局的出現。到時候CSS不僅僅能控制橫向布局，縱向布局，還可以深度布局（這個要依賴于三維展示的出現，如VR，AR三維立體的展示設備出現）。

2.grid布局里面采用了“可視化布局（template部分，所見即所得）”，這個是顛覆了傳統的，寫一句代碼刷一下瀏覽器這樣的開發方式，不排除以后會出現代碼即效果的開發模式。比如你在一個設備上畫一個區域，然后畫輪播圖。

這種方式類似于vc++控件方式，但是更智能，也更友好。誰說不可能呢？大家不要忘了grid布局的來源是早就廢棄的table布局。說到這里我多說一句搞笑的微軟，frontpage沒火，dreamwaver火了，最早提出“canvas”概念的 VML沒火，最后html5的canvas火了，連CSS3網格布局也是由微軟創建的一個模塊，最后火起來居然沒人認識它。心疼微軟一秒鐘。

說到這里大家對CSS簡史和布局也有所了解了，我們總結下，通過本文你應該學到：

（1）CSS的發展歷史。

（2）熟知布局的發展歷史，以便對未來布局技術的發展有一個客觀的判斷，來選擇是否學習。

通過本文的學習大家已經對CSS相關基礎知識有所了解，接下來我們就開始真正的進入技術的學習，大家是不是迫不及待了呢？

例簡介

有些網站為了凸顯某部分字體，而引入自定義字體，但由于自定義字體相對都比較大（幾M），導致頁面加載緩慢；所以本文介紹三種壓縮字體的方法，可根據項目情況自行選擇。

壓縮方法

1、利用Fontmin程序（效果如下圖）

1）運行Fontmin程序后，1位置輸入需要生成的文字內容，2位置拖入ttf文件（源文件7947KB）;

2)點擊“生成”按鈕，生成成功后，彈出生成文件（ttf文件變成11KB），根據瀏覽器兼容性引入文件。

Tips：當需要增加新的文字時，需要重新生成文件。

2、利用Node.js+Fontmin組件（效果如下圖）

1）配置好Node.js框架（本文使用Express）；

2）在index.js文件增加代碼，用來自動讀取“views”下面的所有*.ejs文件的文字，然后根據“src”的ttf源文件，使用Fontmin組件生成壓縮文件（生成目錄“dest”）。

Tips：適用于多文件情況下，自動匯總生成。

// 遍歷所有文件提取里面的所有文字
const fs = require("fs");
const Fontmin = require('fontmin');
let set = new Set();


//get all possible characters
const scanFolder = (dir, done) => {
    let results = [];
    fs.readdir(dir, (err, list) => {
        if (err) {
            return done(err);
        }
        let i = 0;
        (function iter() {
            let file = list[i++];
            if (!file) {
                return done(null, results);
            }
            file = dir + '/' + file;
            console.log(file)
            fs.stat(file, (err, stat) => {
                if (stat && stat.isDirectory()) {
                    scanFolder(file, (err, res) => {
                        results = results.concat(res);
                        iter();
                    });
                } else {
                    results.push(file);
                    iter();
                }
            });
        })();
    });
};
//get all possible characters
const generateFinalHTML = finalString => {
    const fontmin = new Fontmin()
        .src('public/fonts/SourceHanSansCN-Medium.ttf')
        .dest('public/fonts/build/')
        .use(Fontmin.glyph({
            text: finalString,
            hinting: false
        }))
        .use(Fontmin.ttf2woff({
            deflate: true
        }));




    fontmin.run((err) => {
        if (err) {
            throw err;
        }
    });
}
//get all possible characters
scanFolder("views", (n, results) => {
    results.forEach(file => {
        const result = fs.readFileSync(file, 'utf8');
        const currentSet = new Set(result)
        set = new Set([...set, ...currentSet]);
    });
    generateFinalHTML(Array.from(set).join(""))
})

3、利用font-spider組件（效果如下圖）

1）安裝font-spider組件；

npm install font-spider -g

2）新建index.html文件；

3）執行下面命令生成壓縮文件。

font-spider ./*.html

總結

可以根據項目實際情況，選擇適當的方法。

CSS的字體樣式中，通常會受到客戶端是否安裝了所設置的字體的限制。如果客戶沒有安裝我們在CSS中所設置的字體，則在最終的客戶頁面中是無法顯示出來的。這樣我們在頁面開發過程中就無法使用一些較為生僻的字體，一些具有藝術感的文字效果只能使用圖片來代替。今天小海前端（頭條號）來帶領大家一同學習CSS3為我們提供的服務器端字體屬性。

承接文章：CSS3提供了類似Photoshop的效果，可以為文本添加陰影，新屬性解決大問題

技術等級：中級 | 適合有一定的CSS基礎人士閱讀。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

本文涉及到的CSS3屬性包括：

@font-family

一、服務器端字體的語法格式

CSS3技術使用@font-face定義服務器端字體

CSS3提供了如下的語法格式來定義服務器端字體：

@font-face{
字體屬性：取值;
}

在@font-face內部的字體屬性可以包括下列CSS樣式：

font-family,設置服務器端字體的自定義名稱。
font-style,設置文本是否為斜體。
font-weight,設置文本的粗細。
font-variant,設置文本是否為小型大寫字母。
font-size,設置文本的字號。
src,設置自定義字體的字體文件路徑和文件名，以及字體類型。

上述CSS屬性中，前5個都是CSS原本具有的屬性，在小海前端（頭條號）的文章《CSS字體屬性，詳解屬性用法，提升前端小白能力》中詳細介紹過，不太了解小伙伴可以閱讀學習。

這里不太一樣的地方是font-family屬性，這個屬性在@font-face內部的功能是為服務器端字體設置一個自定義名稱。因為@font-face僅僅是在定義服務器端字體，font-family所設置的自定義名稱，將來要在引用這個服務器端字體時進行書寫。

那我們就來說一說src屬性。首先，要想使用服務器端字體，就需要將這個大部分用戶都可能沒有安裝的字體的字體文件復制出來，粘貼到自己的站點目錄中。這里假設站點根目錄下有一個font文件夾，我們在里面放置了一個名為x.ttf的字體文件。

定義服務器端字體的CSS代碼如下所示：

@font-face{
font-family:myfont;
src:url(../font/x.ttf) format(“truetype”);
}

在一個id名為box的容器中，要使用這個新定義的服務器端字體，CSS代碼如下所示：

#box{
font-family:myfont;
}

二、字體的格式：

我們通過上面的代碼可以看到，在@font-face中src屬性除了指明字體文件的路徑和文件名以外，還需要利用format()來指定字體的格式。

這里小海前端（頭條號）為大家總結了幾種常用字體文件的格式：

TrueType字體：文件擴展名.ttf，設置為 format(“truetype”)
OpenType字體：文件擴展名.otf，設置為format(“opentype”)
Embedded OpenType字體：擴展名為.eot，設置為format(“eot”)

三、在src屬性中使用local()方法：

我們所使用的生僻字體，客戶端到底是否安裝了，我們是無從知曉的。并不排除你認為這個字體非常生僻，但是客戶在自己的電腦上確實安裝了它。這樣如果使用服務器端字體，就無形中增加了字體下載的步驟。

為了保證安裝過這個字體的用戶從本地調用，沒安裝過這個字體的用戶從服務器端調用。src屬性提供了一個名為local()的方法，只需在該方法的括號中指定字體的名稱，就可以從本地調用這個字體了。

假設根據頁面設計需要，我們要使用一款名為“漢儀綜藝體簡”的字體，這款字體的文件名為hyzytj.ttf，同樣存儲在站點根目錄下的font文件夾中。那么我們將服務武器端字體設置為如下CSS代碼：

@font-face{
font-family:myfont;
src:local(“漢儀綜藝體簡”),url(../font/hyzytj.ttf) format(“truetype”);
}

這樣一來，真正安裝了“漢儀綜藝體簡”這個字體的用戶就無需從服務器端下載字體文件了。

四、實例：利用服務器端字體展示一首古詩。

本實例利用一個名為“葉根友毛筆行書”的字體來為大家展示毛澤東詩詞《沁園春雪》的開頭片段。本實例的最終效果如下圖所示。

實例的最終效果

HTML代碼如下所示：

實例的HTML代碼

CSS代碼如下所示：

實例的CSS代碼

小海聲明

在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海前端（頭條號）很久的時間。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。

文章預告

在下一篇文章中，小海前端（頭條號）將為大家介紹CSS3提供的顏色設置方式。并為大家講解顏色三要素和顏色代碼的相關知識。希望正在學習CSS技術或前端開發的小伙伴們一定不要錯過。

在線咨詢

上一篇：一些媒體泄露中國游泳選手隱私信息！“可能涉嫌違法”
下一篇：HTML DOM Form 對象

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS簡史：從1.0到3.0，最終又將走向哪里？

例簡介

壓縮方法

總結

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

小海聲明

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

文章預告

您的項目需求