iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 30
1
Modern Web

CSS 實戰心法系列 第 30

CSS 鐵人賽的結束與接下來的研究

相較於 Javascript 來說,CSS 的演進速度算是非常緩慢的,主要原因當然是瀏覽器的相容性,瀏覽器不太能因為新的特色加入而毀了以前所建置的網站。

在這個相對穩定的程式語言,精通一個的手法就可以活用的相當久,像是 Sass 來說,到目前為止他還是相當流行的前置語言。

就算如此,CSS 依然有許多有趣的新穎功能,以 Flex 來說就能輕鬆排出許多豐富的版型,恰巧這幾天朋友考我 flex,就將這排版獻醜給大家看看,條件如下:

  • 用 flex 排版
  • navbar 固定在上方
  • 主要內容分為三欄
  • 中間欄內容長的時候可以 scroll ,左右不需要 scroll
  • 右側欄分為三列
  • 右上欄有獨立的 scroll

範例連結:http://jsbin.com/beniledina/1/

body, html {
  margin: 0;
  padding: 0;
}
.flex-h {
  height: 100vh;
}
.flex {
  display: flex;
}
.flex-1 {
  flex: 1;
}
.flex-3 {
  flex: 3;
}
.flex-col {
  flex-direction: column
}

.scroll {
  overflow-y: scroll;
}
.navbar {
  height: 60px;
  background-color: red;
}
.bg-blue {
  background-color: blue;
}
.bg-gray {
  background-color: gray;
}

在這些條件下,相信大家也使用過 positionfloat 等排版手法,而 flex 僅需要簡短的語法就能達到接近的效果。不過雖然如此 flex 目前不是大家主要排版的首選,需要上線的產品我也不會使用 flex 做為主要排版的語法(會使用在次要的內容),主因還是 flex 在於目前相容性還不夠高,就算捨去了 IE 還是有部分的瀏覽器在呈現上略有不同(說個鬼故事,很多人的 iOS、Mac OS 都不愛更新的)。

為了讓自己可以更熟悉 Flex,我也做了一個簡單的工具,讓自己可以透過互動的方式查詢 Flex 的語法。

http://ithelp.ithome.com.tw/upload/images/20161230/20083608sMgSUcHX69.png

連結:http://wcc723.github.io/WorkShop-gh-pages/cssFlex/

CSS column

和 Flex 一樣屬於排版的語法 CSS column,去年的時候也有花很多時間研究,也有製作類似的語法互動研究工具,和 flex 也遭遇相同的問題,不同瀏覽器雖然都支援,卻顯示出不同的結果,以下連結請玩~

連結:https://wcc723.github.io/css/2015/07/23/css-column/

http://ithelp.ithome.com.tw/upload/images/20161230/20083608nTD1O7dASo.jpg

據說很猛的 display: grid

第一次研究 flex 是在 2013 年,至今也三年左右了... Q_Q,到現在使用上還是有所顧忌,現在對於排版有新的屬性:display: grid,依據 flex 的概念他可以等我花三年的時間慢慢研究 >O<。

http://ithelp.ithome.com.tw/upload/images/20161230/20083608slApUYegK3.png

以下為圖文參考的文件,就目前看來有許多語法與 flex 是共用的,期望 webkit 能統一瀏覽器世界,讓這些語法能夠快速進入實際運用。

參考文件:https://css-tricks.com/snippets/css/complete-guide-grid/

文章同時發表於:https://wcc723.github.io/css/2016/12/30/ironman-ending/


上一篇
CSS 實戰小技巧 - 不使用 important 的高優先值技巧
系列文
CSS 實戰心法30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Jackson
iT邦新手 4 級 ‧ 2016-12-30 10:33:37

恭喜完賽/images/emoticon/emoticon34.gif

我要留言

立即登入留言