iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 3
0
Modern Web

重新認識 Flex 和 Grid系列 第 3

[Day03] 你可能不知道的切版歷史

「誰掌握了過去,誰就掌握了未來」 ——《1984》

既然主題和切版有關,當然要來簡單了解一下切版(黑)歷史啊 XD,認識過去的排版思維以及排版的進展(還有痛苦的切版方式?),相信對於在切版上所想要解決的問題會有更多的了解(說不定就能掌握未來成為大大?)


切版簡史

HTML部分

  1. 陳述式 HTML 標籤 / 像素GIF

大約於 1990 年,由 Tim Berners-Lee 提出了第一個 HTML 規範,並編寫了第一個 Web 服務器規範(HTTP)和 Web 瀏覽器,開始了網路普及的時代。那時還只有 HTML tag 可以做樣式的變化,如 <b><i><font color="blue"> 等。

這時的 HTML tag 裡又混著樣式,不但混亂難以維護,也沒有尺寸排版的方法,這些標籤的目的也大多只是拿來表達結構而不是用來做樣式。

那時便衍生出利用透明的 gif 及像素尺寸來設定空白區域。

<img src="single.gif" width="150">
<!-- 中間空 150 px 的意思 -->
  1. <table></table>

約於 1996 年 table 開始普及,排版的方式能做到像是數據表、報章雜誌,這是在 flexbox 和 grid 出現之前唯一讓元素尺寸可以建立關聯的方式(如制定相同的寬高、共享邊界)。

然而使用 table 這樣表格式的排版有許多的限制,除了程式碼複雜外,還難以對表格做維護,缺乏修改的彈性,難以做複雜的排版。不過現在的 email 裡大多還是使用這種 table 排版,因為 email 支援度低,還只能寫 inline css。(現在有 MJML,可以不用痛苦手刻 inline css,還可以做到 RWD)。

  1. 圖像映射(Imagemaps)<map>

利用網頁座標位置距離及尺寸來創造圖像,整個頁面都將由圖像來配置,常利用於簡單的地圖設計,然而整個圖像所需的載入時間較長,而且也難以做修改。

<map name="food_map">
    <area href="https://www.google.com.tw" title="Example" shape="rect" coords="286,480,346,493">
</map>
  1. <frameset>

出現於 HTML 4.1 的 html 標籤,類似於 table 並且以控制外框尺寸來排版,然而效果不佳且問題也多,現在已經無法使用。

<frameset cols="30%,*">
  <frame src="frame1.html" />
  <frame src="frame2.html" />
</frameset>

CSS 部分

  1. position 相關屬性 / block 及 inline

於 1994 年由 Hakon Wium Lie 提出 CSS,將結構和樣式的表達分離,並由 W3C 於 1996 年發布 CSS(CSS1)第一條規範建議。

而後於 1998 年發布了 CSS Level 2 (CSS2),內容新增了 position 做定位和 z-index 來設置重疊順序,blockinline 的概念也在這時候出現。

  1. <div> 和 CSS box model

div (division:分離) 出現於 HTML 3.2,目的在於配合 box model 的概念來達到元件"分離",而 box model 常見的如 bordermarginpaddingbox-sizing,可以輕易地控制元件之間的分離間距。

  1. float 屬性

約出現於 2000 年,float 可以讓被選到的東西"漂浮",達到如 inline 的特性,可以搭配 clear 屬性來完成獨特的文繞圖排版方式。

雖然在某些情境下適合用 float 來做出很棒的文繞圖效果,然而 float 的目的顯然並不是為了排版而生,將他用於複雜的排版可能就會像是 table 一樣的糟糕(糟糕是書裡說的 XD,不要打我)。

  1. display: inline-block;

約出現於 2008 年,同時具有 inline 的並排特性和 block 可以設定高寬的特性,並且時常搭配 text-align 來左右對齊、vertical-alignline-height 來達到上下對齊等效果。

但 inline-block 因為 inline 的特性,在原始碼中連 "編輯器空白部分" 都會被解析成間距(謎之4px),為了解決這個問題也發展出了許多奇技淫巧。

奇技淫巧可以參考:如何解決inline-block元素的空白間距

  1. 媒體查詢 @media

約出現於 2012 年,是 RWD (Responsive web design) 響應式網站的技術,媒體查詢是一段 CSS 代碼,用來分辨頁面的解析度(dpi 或 dpcm)或尺寸,根據分辨結果來提供不同的屬性設定。

@media only screen and (min-width: 768px) {
  p {
    font-size: 12px;
  }
}
這樣就只有小於 768px 的螢幕尺寸會讓 p 的字型大小是 1.2px
  1. display: flex;

約出現於 2012 年,是近年最成熟且流行的排版方式,改善 inline-box 的對齊設定缺陷,並且有多個屬性可以設定,常用的屬性如 justify-contentalign-items 就可以輕鬆控制"一維"、"上下"和"左右"來達到置中的效果,非常適合用於導覽列,並且可以說幾乎能完成現今大部分的排版,也適合用於 RWD 響應式網站網頁。

然而也是因為 RWD 響應式網站的流行,在電腦和手機的排版設計日益複雜,差異過大(如不同裝置還要做各種前後順序的大調換)還是有可能造成 flexbox 的排版困難。你還是可以使用 javascript 或 非常多的巢狀 flexbox 和 order 來完成這種複雜的排版(然後心裡暗念設計師或客戶這樣),或是考慮使用 AWD (Adaptive web design) 來分成各個尺寸的頁面撰寫,但這些方法可能就增加了 code 維護上的困難度。

關於 RWD 和 AWD 可以參考:不會寫CSS也能懂!如何選擇RWD或是AWD?

  1. display: grid;

約出現於 2017 年,算是比較新的、以排版為目的而生的技術,相較於 flexbox 一維、上下和左右的調控觀念,grid 更強調"二維"、表格式的"行"與"列",這讓它能夠完成更靈活的 RWD 排版,但卻又比 table 彈性許多,他同樣和 flexbox 有許多屬性可以使用,如(grid-template 相關屬性)操控網格線 grid line,並將元素和網格線產生對齊關係。常用的還有左右對齊的 justify-itemsalign-items 和上下對齊的 grid-column, grid-row

然而完全使用 grid 並不一定是最好的,有時候只是想做個簡單排列,明明用 float、inline-block、甚至 flex 就可以快速完成,使用 grid 就顯得有點多此一舉,程式碼也比較複雜一點,而且 grid 也不是萬能,據說還是有些坑啦˙。

結論

以現在流行的開發方式來說,在開始開發前,我們可以先考慮整體的網頁佈局比較適合使用一維式的 flex ,還是二維式的 grid,同時併用 "各種切版武器" 來完成其他大部分的排版架構。相信在不同的情況下,我們仍會需要使用不同的切版方式或屬性來達成各種排版及組件,因為每個屬性都有其適合應用的地方,不一定用哪種方式就是最好的。妥善利用各種特性,找到適合專案的排版方式才是最佳解。


資料來源:


上一篇
[Day02] 你知道什麼是 W3C 嗎?
下一篇
[Day04] Flexbox 基本認識
系列文
重新認識 Flex 和 Grid30

尚未有邦友留言

立即登入留言