[CSS 3 tech.] CSS3 template layout module and multi background with jQuery

開始之前，底下是參考文件：

如果你看完了，覺得可以理解，那麼這一篇文章你就可以跳過了

CSS 3 的 Template Layout Module 特異功能！

雖然說 CSS3 跟 HTML5 一樣還沒正式發表，發表時間也是遙遙無期，不過，當我看完 Template Layout Module 之後，我深深的覺得，所謂的網頁設計這個工作，真的在 CSS3 與 HTML5 發表之後，會產生甚麼樣的變化呢？我想起之前工作時，跟大陸的工程師聊過的一些事情。在大陸做網路這一塊，分了好多種專門的職位，當然，對台灣的老闆市場來說，這是不合成本的做法。不過，所謂術業有專攻，我還是覺得，我比較羨慕大陸那樣各司其職的做法就是。

如果有看過上面的 CSS Template layout module demo，那麼我們繼續看下去。

CSS3 在這個模組裡，重新定義了 display 這個屬性，並且新增了 ::slot 這個擬似元件（pseudo-elements），另外增加了一個專用的單位 "gr"。暫且先不提這兩個新增的屬性值跟單位，我們先來看看被改寫的 display 有了甚麼樣的特異功能。

可定義行、列、內文區域位置。
可定義每一行、列寬度，最大、最小寬度（高度）。
可用萬用字元（*）自動取得寬度（高度）。
可用點（.）插入一個區隔行、列的空白區塊。

另外，新的擬似類別 ::slot 與新的單位 gr 能做什麼呢？

可用 ::slot 直接指定每一區塊的各別的 Styling 設定。
在已經定義的 display 中，gr 代表了行與列的 grid line 位置，元件可以利用 n x m 的 grid-line 來定義新的位置，這個單位在目前的 jQuery plugin 並沒有被實作出來。

我們繼續回到 display 這個屬性，我這裡直接使用範例來說明。

	body { 
	    margin: 0;
	    padding: 0;    
	    display:    ".hhh." /10em
	                ".nnn." /5em
	                ".ocp." 
	                ".fff."
	    * 100px minmax(500px,800px) 12em *
	    ;
	    width: 100%;
	    background: #DDF;   
	}

".hhh." /10em

"空白名為 h 的區塊名為 h 的區塊名為 h 的區塊空白" /高度限定 10em
".nnn." /5em

"空白名為 n 的區塊名為 n 的區塊名為 n 的區塊空白" /高度限定 5em
".ocp."

"空白名為 o 的區塊名為 c 的區塊名為 p 的區塊空白"
".fff."

"空白名為 f 的區塊名為 f 的區塊名為 f 的區塊空白"

眼尖的人或許發現了，這就跟畫表格是一樣的道理。我用表格畫出了一個田字型的區域，然後把需要的內容擺進去，這就是這個新定義的 display 屬性在做的事情。那你或許會有疑問：

為什麼 ".ocp." 跟 ".fff." 沒有限制高度？

因為這兩個區塊是依照內容變動長度，所以一旦限定高度，內容並不會被截斷，而是直接破格。
高度設定可不可以跳過 ".ocp."，直接指定給 ".fff."？

可以，但是目前這個 jQuery plugin 會識別錯誤，不過可以在最後加入 "." 不設定高度避開。
已經定義好的區塊可否改變位置？

可以，使用擬似元素 ::slot 來做其他 CSS Styling 設定。
區塊是否可以跨行？

不行，CSS 會無法得知正確位置而產生顯示錯誤（但邏輯上不會有錯）

指定好了區塊之後，接著我們要將 HTML 文件中的元素＂放到＂我們的位置上。

	#header { position: h; text-align: center; }
	#content { 
	    position: c;
	    margin: .5em;
	}
	#nav1 { 
	    position: n;
	    background: #AAD;
	    margin: 0;
	    padding: .5em;
	}
	#nav2 { position: o }
	#nav3 { 
	    position: p;
	    text-align: center;
	}
	#footer { 
	    position: f; 
	    text-align: center;
	    font-weight: bold;
	}

那如果我要改某個區塊的設定的時候怎麼辦？這時候就使用新的擬似元件 ::slot 來指定。

	body::slot(o) {
	    background: #FDD;
	}
	body::slot(p) {
	    background: #DFD;
	    vertical-align: middle;
	}

如此一來，我們的 HTML 檔案完全不需要做複雜的排版，只要輸出時確認確切的位置，其他的全部都可以交給 CSS3 的 Template Layout Module 來做。當然，好的視覺設計不可少，對於這樣來做 layout 的方式，設計輸出可能就必須要更精準且更能夠掌控自己所切出來的區塊與元素，否則，這樣的工具再怎麼強大也是白搭。

關於 CSS3 的部分，畢竟還在起草階段，就不說太多了。這個 Template Layout module 剛好有人寫了 jQuery plugin，所以算是可以小小應用的部分，至於好不好用就端看個人了。我覺得拿來做一些惡趣味應用應該是不錯的（啥）！

接著，來說說 CSS Multiple, Layed backgrounds with jQuery 這個小東西，有去過網站的應該知道他在做甚麼了。這個 jQuery plugin 的目的，就是把一大堆 background 元件給拼湊起來。就有點類似我之前講過的東西。

這個 jQuery plugin 可以利用 CSS 的設定完美的解決這個問題。當然，CSS3 也有 multiple Background 的新鼠性設定，不過目前能夠正常支援的瀏覽器時在少得可憐，也許利用這個 jQuery plugin 也不失為一個好辦法。不然，這樣的元件切割，最少要使用 9 個 DIV 來切割，複雜一點的恐怕就更麻煩，也徒增 HTML code 的麻煩與困擾（而且困擾的都是工程師）。這個 plugin 應該可以包成比較方便使用的模組（應該說對自己比較方便的模組吧），改天在上來分享（如果我真的有去改的話）。

就降，散會！

CSS 3 的 Template Layout Module 特異功能！

You might also like...