CSS Grid 語法筆記

這篇不算教學,只是將 CSS Grid 的語法做個紀錄,所以沒有前言,也不會介紹 CSS Grid 是什麼。如果你已經知道 CSS Grid 的作用,也歡迎參考以下筆記,也許可以幫助你更了解相關語法。

從 Gird 開始

前置作業:將 div 的 display 設為 grid,接著定義 Grid 的寬度(columns)與間距(gap)

HTML
CSS

grid-column-gap 以及 grid-row-gap 可以合併為 grid-gap

CSS

▼ 網頁示意圖

假使要設定 CSS Grid 的高度,可以再加上:

CSS

▼ 網頁示意圖

在這個範例中,row 有 4 行,可是我們只設定了 1 & 2 行,沒有設定高度的會以元素高度為高度(auto-height)。

☞ 可以用grid-auto-rows設定 auto-height 的最小高度。

☞ 注意

  • 沒有grid-auto-columns這種語法。
  • 沒有grid-auto這種簡寫。

新的單位:fr

fr 是因應 CSS Grid 而產生的新單位,全名是 fraction (分數),這個分數不是 score 那個分數,而是數學分子 + 分母的那個分數。

我們可以用 fr 去設定 CSS Grid 的相對寬度,以達到 RWD 的縮放效果。如果是跟前面範例一樣使用px,縮放的時候是不會有 RWD 的(這大家應該都很清楚了)

grid-template-columns 的單位改掉:

CSS
  • 編號 1,4,7,10:占 1/4
  • 編號 2,5,8:占 2/4
  • 編號 3,6,9:占 1/4

▼ 網頁示意圖

這時候縮放就會有 RWD 效果囉~。

另外也可以混搭單位:

CSS

重覆 Grid 的設定

如果 Grid 的寬度有一個固定的模式,可以用 repeat() 這個語法把它們合併,類似迴圈的感覺。

假設原本這樣寫:

CSS

可以看出來三個為一組,1fr 2fr 2fr是一直重覆的,所以改寫如下:

CSS

▼ 網頁示意圖

最左邊跟最右邊的 Grid 如果不會重覆,可以接在repeat的前後:

CSS

Grid 的排序

使用 grid-auto-flow 進行 Grid 的排序,預設屬性為 row (橫向排列)。

如果改用 column,Grid 就會變成縱向排列 (可以注意數字編號):

CSS

▼ 網頁示意圖

此外也可以指定某一個div進行排序

CSS

如果沒有指定order的順序,預設就是order: 0,而我們現在指定第三個 div 為order: 1,所以第三個 div 的排序會跑到最後面。

☞ 承上,現在是縱向排列,所以 div 排列的順序是用「縱向」來看的喔。

▼ 網頁示意圖

接下來就可以用order:N任意調整排序囉!

CSS

▼ 網頁示意圖

以上就是 Grid 的相關筆記。

部落格改版之後,是用 Grid + Flexbox 來排版的,有興趣的朋友可以自行扒皮 XD

Bootstrap 4 的 Grid 應用介紹

Bootstrap 4 從去年釋出 BETA 版後,到現在幾乎所有功能都齊全了,官方也釋出了詳細的 BETA 網站與文件,感覺 Bootstrap 4 距離正式定案的時間也不久遠啦 😀

為什麼 Bootstrap 4 的出現如此引人注目呢?因為之前 V2 到 V3 只是「增強」,但 V3 到 V4 卻是「改革」,Bootstrap 4 用的技巧與 CSS 語法都有大幅度的革新,所以用慣 Bootstrap 3 的朋友勢必要重新學習(就像我XDDD)。以我為例,我自己比較常用 Bootstrap 的 Grid System (網格系統),因此這次的筆記也會以 Grid System 為主,介紹一下 V3 與 V4 之間的差異。

1. Bootstrap 4 的一個重大改變,就是使用了 CSS 的 Flexbox 重新排版定義 Grid,關於 Flexbox 的介紹,可以參考我之前的文章:CSS Flexbox 介紹與解析
2. 承上,因為 IE9 並不支援 Flexbox,所以如有需要使用 IE9,就請繼續使用 Bootstrap V3 版本。


斷點(Breakpoint)的調整

Bootstrap 3 的斷點與前綴詞

 Extra SmallSmallMediumLarge
斷點範圍0 ~ 767 px768 ~ 991 px992 ~ 1199 px1200 px 以上
前綴詞col-xscol-smcol-mdcol-lg

Bootstrap 4 修改如下

 Extra SmallSmallMediumLargeExtra Large
斷點範圍0 ~ 575 px576 ~ 767 px768 ~ 991 px992 ~ 1199 px1200 px 以上
前綴詞col-col-smcol-mdcol-lgcol-xl

差異

  1. 新增了一個576px作為最小的斷點
  2. Extra Small 由col-xs-*改為col-*
  3. 新增了 Extra Large,前綴詞為col-xl-*

可以自動的平均分配欄寬

以往使用 Bootstrap 3 時,每一個col-md-*後面一定要帶數字,數字表示欄寬。但 Bootstrap 4 因為使用了 CSS Flexbox,所以不輸入數字 = 平均分配欄寬。

以下來個簡易範例:

Bootstrap 3
需要輸入「數字」才能知道寬度

HTML

▼ Bootstrap 4
不需輸入數字就能根據 col 的數量分配欄寬

HTML

▼ Bootstrap 4 
也可以只設定其中一個欄寬,剩下的平均分配

HTML

☞ 範例

See the Pen rzGjNE by MUKi (@mukiwu) on CodePen.


動態調整欄寬

除了能平均分配欄寬外,還能根據文字寬度,動態的調整欄寬。這是 Bootstrap 4 的新語法,使用的是col-md-auto

HTML

也可以把我們之前熟悉的各種斷點給加進來,做出更多的螢幕寬度變化:

HTML

☞ 範例

See the Pen MvEJJd by MUKi (@mukiwu) on CodePen.


讓 Column 換行

安插一個空的 DIV,CLASS 名稱為w-100,就可以讓 Column 強制換行唷~

HTML

☞ 範例

See the Pen prWRaX by MUKi (@mukiwu) on CodePen.


垂直對齊

前面跟大家提過 Bootstrap 4 有使用 Flexbox 語法,所以我們可以利用 Flexbox 的特性,輕易的將 Column 置頂、置中,與置底對齊。

  • align-items-start:置頂
  • align-items-center:置中
  • align-items-end:置底

▼ 直接在row裡面寫上align-items-*的 CLASS 即可。

HTML

▼ 另外我們也可以改用align-self-*col裡面單獨針對 Column 做對齊的動作

  • align-self-start:置頂
  • align-self-center:置中
  • align-self-end:置底
HTML

透過範例可以發現 A, B, C 三個 column 不會相互影響,A 的欄位如果有多行文字不會影響到 B 跟 C。另外以置中為例,輸入多行文字後,他真的就是從中間平均的往上下展開唷!

☞ 範例

See the Pen NvadMo by MUKi (@mukiwu) on CodePen.


水平對齊

有垂直對齊就一定會有水平對齊(廢話XD),所以 Bootstrap 4 一樣利用了 Flexbox 的特性實現水平對齊。

  • justify-content-start:靠左對齊
  • justify-content-center:置中對齊
  • justify-content-end:靠右對齊
  • justify-content-around:分散對齊(含左右)
  • justify-content-between:分散對齊(不含左右)
HTML

☞ 範例

See the Pen MvEpYy by MUKi (@mukiwu) on CodePen.


移除 gutter

Bootstrap 的rowcolumn分別有使用margin以及padding當作 gutter,讓每個 column 之間有呼吸的空間。

但有時候因為版面的設計需求,我們希望 column 是緊密黏在一起的,所以 V4 新增了no-gutters這個 class,可以讓我們移除 gutter

HTML

直接將no-gutters放在row就可以囉,因為語法跟效果很直覺,所以就不上 codepen 範例惹(絕對不是因為懶)


Column 排序

以前如果要將排序會用pullpush在那邊推來推去的,現在一樣因為使用了 Flexbox 的關係,在使用上也更方便了!

  • flex-unordered:不排序
  • flex-first:第一個
  • flex-last:最後一個
HTML

☞ 範例

See the Pen wqrJEa by MUKi (@mukiwu) on CodePen.

這邊要特別注意的是,如果使用 flex 排序,寬度縮小時也會持續這個排序模式,column 的寬度不會變回 100%。

如果你希望縮小到特定寬度可以變回 100%,還是可以使用 V3 的push以及pull,不過在 V4 的寫法有一點調整,將前綴位置放到後面(原本是col-md-push-*):

HTML

☞ 補充

offset也一樣將前綴往後放。


Bootstrap 4 的 Grid 介紹就到此告一段落囉,有一些功能我沒有特別提到,例如 Wrapping、Nested,是因為跟 V3 相比沒有太大的改變,就不額外寫出來了。

Bootstrap 的功能非常強大,是一個堪稱超完整的 Framework,但我自己只有使用它的 Grid System,所以就只介紹 Grid 在 V3 與 V4 之間的差異囉 ^Q^。以後如果再開 RWD 課程,也會以 V4 為主要規劃設計新的範例與課程,也請大家敬請期待 😀

那麼對文章有任何不懂的地方,也歡迎留言告訴我唷,謝謝 ^_^

CSS Flexbox 介紹與解析

老實說我到現在都還沒開始用 flex 做網站,最大的原因就是 IE 相容問題,不過這也不能當作不學習的原因,畢竟這行就是要不斷的學習新知識😂,而且剛好在某次前端課程中有同學問我能否介紹 flex,所以想想,乾脆就寫一篇文章吧!不僅是幫自己做個筆記,以後也可以當作課堂上的補充講義~。

▼ flex 相容一覽圖 / caniuse.com

什麼是 Flexbox

簡單來說,Flexbox 是一種 CSS 的排版語法,就跟我們以往用的 position, float, display…一樣,只是 Flexbox 是 CSS3 的新語法,所以才有瀏覽器相容的問題。

Flexbox 相關屬性與值

我覺得 Flexbox 較難上手的原因,就是他的屬性跟值太多了,不像 float 很單純的只有 left, right, none 這三種,但當然好處就是彈性非常大,幾乎很多複雜的排版都可以靠 Flexbox 輕鬆解決。

在這邊也參考了 W3C 的網站,列出所有 flexbox 的屬性跟值給大家參考,至於詳細的介紹還是可以看 W3C 關於 Flexbox 的文件喔!

屬性屬性介紹可用的值預設值影響
flex-flow將 flex-direction 以及 flex-wrap 合併寫在一起flex-direction |flex-wrapflex containers
flex-direction
排列方向
rowrowflex containers
row-reverse
column
column-reverse
flex-wrap
換行nowrapnowrapflex containers
wrap
wrap-resverse
order
調整元素排列的順序<整數>0
flex
將 flex-grow、flex-shrink 以及 flex-basis 合併寫在一起flex-grow|flex-shrink|flex-basisflex items
flex-grow
<數字>0flex items
flex-shrink<數字>1flex items
flex-basis<寬度>autoflex items
justify-content
水平對齊設定flex-startflex-startflex containers
flex-end
center
space-between
space-around
align-items
垂直對齊 (元素單行排列)flex-startstretchflex containers
flex-end
center
baseline
stretch
align-selfflex-startautoflex items
flex-end
center
baseline
strech
align-content
垂直對齊 (元素排列超過兩行以上)flex-startstretch多行 flex containers
flex-end
center
space-between
space-around
stretch

常用的 Flexbox 排版語法

要使用 flex 前,必須先在該容器指定:

CSS

而特別有趣的是,就連行內元素都可以用 flex 唷:

CSS

接下來,我們用一小段 HTML 語法表示 Flexbox 的架構:

HTML

承上,這個很常見的巢狀排版恰恰能表達flex的兩大主角:flex-container以及flex-item,前者表示的是一個巨大的容器(container),後者則是各個獨立的項目(item)。

flex的屬性,有的會影響的是容器,有的則影響項目。如果不太清楚屬性影響的是哪一塊,可以回到前一頁看表格的「影響」欄位做參考。


基本的 Flexbox 排版

flex-direction

我們先介紹最簡單的左右版面,以往直接用float: left解決,那麼換成flex的話可以這麼寫:

CSS
  • Flexbox 是 Box Model 的一種表現形式,以前我們用display去改變每個元素的 Box Model,在此也是一樣,我們要在flex-container先設定display: flex,確保自己以及裡面的子元素 Box Model 都會轉成flex的設定。
  • flex-direction表示 flex 的水平排列方向,第一頁的 Flexbox 屬性表上有提到,flex-direction必須放在 flex container 的父層架構下,而不是 flex item 這個子層,所以這句話寫在.flex-container裡,如果你把它放在.flex-item會發現沒作用。(再次提醒:對照屬性表會更加清楚該放在哪裡喔。)

最後我們來把flex-direction所有的值都寫一遍吧!

See the Pen QEGbMm by MUKi (@mukiwu) on CodePen.

在值裡面,用到的rowcolumn,一個是水平排列、一個是垂直排列;而reverse是反轉的意思,稍微對照一下上面的範例應該不難了解唷!


flex-wrap

接下來再加一個新的語法flex-wrap,這個同樣要放在.flex-container裡面,wrap是斷行的意思,可以利用這個語法決定是否要換行。

設定nowrap表示即使有多少區塊,也必須都放在同一行內(會自動分配寬度)。設定wrap則是會依照內容或寬度自動換行。

See the Pen oLYjqG by MUKi (@mukiwu) on CodePen.

flex是三個屬性的合併縮寫:flex-grow, flex-shrink, flex-basis,可以看作是 FLexbox 的核心設定。 註:flex 的這些屬性影響的是 flex items。


flex-grow

我們都知道,區塊預設的寬度是元素內容的寬度,如下圖所示 ▼

如果想要調整寬度,一般可以用width設定,但也能用flex-grow唷!flex-grow的預設值為 0,表示寬度就是元素內容的寬。而從 1開始,數字愈大,占的寬度比例也會愈大。

CSS

範例圖如下所示 ▼


flex-shrink

flex-shrinkflex-grow相反,是表示當父元素寬度空間不足時,子元素壓縮的比例。預設值為 1,但設為 0 同樣表示不壓縮,數字愈大,被壓縮的幅度就愈大。

CSS

範例圖如下所示 ▼


flex-basis

可以在flex-basis設定寬度或高度,設定好後會自動分配該區塊的寬度或高度。

CSS

假設父元素寬度是500px,我在裡面設了兩個子元素分別為200px以及600px,他會依照比例分別給予子元素寬度,如圖所示 ▼

以上這三個語法因為有比較多的彈性,所以可以用在製作 RWD 網站上。


flex

最後,再次提到flex這個語法,是用來合併以上三個屬性,規格為:

CSS

flex 還有兩個更簡短的縮寫:

CSS

以上關於flex的範例程式碼,請參考:http://codepen.io/mukiwu/pen/qNRJPv


Flexbox 還有一些屬性沒有提到,因為我有點累了,所以暫時解說到這邊。但我覺得剩下的都是比較簡單而且很容易上手的語法,所以等待以後有空補完 XDD。

Flex 版面實例介紹

版面垂直置中

幾千萬年以來傷透腦筋的垂直置中,超級適合用flex解的喔!在這邊我們會用到兩個屬性:

  • justify-content
  • align-items

而這兩個屬性我前面通通都、沒、說(炸),但真的很簡單,所以直接上程式碼啦!

CSS

範例請參考 codepen:


動態三欄式

除了用flex-grow動態調整他們的大小外,還用了order調整版面的順序


不同的圖片 / 區塊排列

這種排版變化比較多一點,但不知道怎麼稱呼它,所以直接看範例比較清楚 XDDD。

一樣是大量運用到flex屬性做調整,在這個例子中,flex-basis尤其為最重要,當然還有一些對齊的語法也不能少。以下是有用到的語法:

  • flex-wrap
  • flex-basis
  • justify-content

以上三種排版,是我目前想到可能比較有趣,或是比較實際的例子 XD,如果有特別想要了解某些版面換成flex該怎麼寫的話,也可以留言給我唷!

SASS, LESS 退散,原生 CSS 可以使用變數啦!

今天要跟大家分享一個新的 CSS 語法:變數。而且這個變數是原生的 CSS 就有的語法,不是其他預處理器例如 SASS, LESS… 的功能喔!

一想到以後可以使用 CSS 寫變數就超級興奮的😊~,但正因為這是 CSS 的新功能,想當然要考慮的第一個問題就是「瀏覽器的相容度」,透過 Can I Use 查詢後,可以發現支援度真是滿江紅啊 XDDD (紅色=不支援,綠色=支援) 2019.08 更新:現在各大瀏覽器對 CSS 變數的支援度已經慢慢在增加囉!

但因為這功能實在是太實用了,即使支援度不好,我還是想介紹給各位,希望未來所有瀏覽器都能支援,就可以輕鬆地運用在網站上囉!Chrome 跟 Firefox 都有支援 CSS 變數的語法,歡迎使用這兩個瀏覽器觀看效果。

CSS 變數的基本語法

如同我們使用各種預處理器設定變數般,首先要命名變數與設定值,接下來在適當的地方呼叫該變數。

以下是一段簡單的範例語法:

CSS

把握幾個原則:

  • :root命名變數,我們也可以在任意的選擇器內命名變數,後面會提到該怎麼寫,以及怎麼使用。
  • --main-color是變數名字,#369是該變數的值。
  • 承上,變數命名的規則為:開頭必須是兩個破折號 --
  • 在要呼叫變數的選擇器裡面,使用var()呼叫該變數,可以把它想成 function。
  • 變數的大小寫是兩個不同的變數,例:--main-color--Main-Color是不同的變數喔。

變數的命名規則看起來有點麻煩,有一些開發者曾經回饋:「為什麼不用$foo呢?」,而針對這個討論,他們的回應是,不排除這個需求,未來可能會允許使用$作為命名規則,相關的閱讀可以參考這篇文章

CSS 變數繼承觀念

前面有提到,除了可以將變數寫在:root外,還能寫在任意的選擇器,以下是範例語法:

CSS
HTML

也可以從 CodePen 看到實際效果 (記得確認瀏覽器有支援喔)

我們在通用選擇器( * )使用--bg-color語法,照理說,所有的 HTML 都會套用:root的設定。

但同時,我們又特別為h3以及#main設定了不同的背景顏色,因此,當我們的 HTML 有使用這兩個標籤時,他就會自動套用這兩個標籤設定的變數顏色囉!

也因此我們了解到,變數可以因應不同的狀況而更改它的數值 (這不就是變數的精髓嗎 XDDD),我們還能利用這種特性設計 RWD 網站:

CSS

▼ 變數的另外一個特性:可以互相 assign 來 assign 去,也能在 CSS 變數中實現喔!

CSS

這時候呼叫--font-color,他的顏色就是 #369


var() function 結構

var()的完整結構如下:

CSS

cutsom-property-name 是我們呼叫的變數,例如前面使用的--bg-color。我們也能在 declaration-value 設定其他的值,避免自定義的屬性無效時產生錯誤。如果寫成邏輯方程式大概就是:

JS

這種寫法有一種高檔的名詞叫做 fallback,如果你有機會閱讀 W3C 官方文件,會發現他們用 fallback 稱呼該處理。

declaration-value要用「逗號」去分隔多個數值,例如var(--bg-color, #369, black);。但如果要處理例如marginpadding的 fallback 時,請注意他們原本的值就沒有逗號,所以不需加逗號,例:var(--padding, 10px 20px);

如用 CSS 語法表示 fallback 應用,請看以下範例:

CSS

至於這個東西可以怎麼用呢?我暫時也不太懂 XDDD,不過看了一些 CSS Variables 的介紹後,有人提到可以用來作為元件的樣式設定,例如用 fallback 設定元件初始樣式,變數則是當作元件的 hook。

以下做了一個簡單的範例給大家參考,希望可以給大家更多的靈感囉:

CSS
HTML


常見的 var() 錯誤寫法

使用 var() 時,有一些要特別注意的地方

1. var() 的位置

var() 只能設定值,不能作為屬性的變數,以下是錯誤寫法:

CSS

2. var() 不能直接合併單位

CSS

上述寫法並不等於marign-top: 20px,如果我們要這樣設定,必須改用calc()幫我們計算數值。

利用 calc() 計算數值

以前面提到的 margin-top: 20px 為例子,我們可以改寫為:

CSS

calc()是個很好用的計算工具,更多的介紹可以參考 W3C 的 calc() 文件


利用 JavaScript 讀寫 CSS 變數

最後,我們也可以使用 JS 來讀寫 CSS 變數的設定。

  • 讀取:getPropertyValue()
  • 寫入:setProperty()

請直接看以下語法與範例介紹:

JS

使用 Codepen 觀看效果時,記得把第 8 行的註解打開以看不同的效果:


已經很習慣使用預處理器的朋友,可能會對 CSS 變數有所疑問:「我用 SASS 或 LESS 不就好了嗎?」

當然,這些預處理器推出的原意,就是為了補足 CSS 本身的不足,如果今天原生的 CSS 提供了變數的功能,我還是很樂意去了解以及使用,如果一味使用預處理器而不去管原生的 CSS 推出了什麼改變,不覺得有點本末倒置嗎 XDDD。

另外在 W3C 文件裡,也有提到 CSS 變數其實有很多變化,例如以下這段語法:

CSS

雖然我不知道這段語法該怎麼運用,但是從文件看來,這段語法應該是正確且可以跟 JavaScript 有所連結的。這樣看來 CSS 變數真的可以延伸出很多有趣的東西,這些改變都令我非常期待 XD。

也能參考 Google Developers 有趣的一段敘述

While this would not be useful as a variable, as it would be invalid in any normal property, it could potentially be read and acted upon with JavaScript at runtime. This means custom properties have the potential to unlock all kinds of interesting techniques not currently possible with today’s CSS preprocessors. So if you’re thinking 「yawn I have SASS so who cares…」 then take a second look! These are not the variables you’re used to working with.
CSS Variables: Why Should You Care?

以上,希望大家會喜歡這次的介紹囉,有任何問題都可以留言給我 ❤️

參考資料:

codyhouse 的 tooltip 線上教學筆記與心得

剛剛收到一封 codyhouse 的線上課程通知,這一期他們推廣的是 CSS animation 應用,好奇點進去後發現有一堂課程是免費的,所以就打開來聽聽看啦 ~

▼ 有 play 可以選的 tooltip 就是這期的免費課程啦

花了半小時聽完後覺得受益良多,雖然講者的口音有點重,但可以把影片字幕打開,也可以直接看程式碼,聽完之後也是對其他付費課程有所心動 XD,非常棒的行銷手法呢,先試聽一堂課喜歡再買 😀

因為他的 youtube 影片連結是公開的,所以我也放一份在我的 blog 裡面,以下是自己聽完做的一些筆記跟重點,很多語法我自己也已實作了,所以看到國外講師也是這樣寫覺得很開心 😊

總之我覺得不錯的語法都會重點摘錄出來給大家參考,希望對你們有所幫助 🌹

筆記與心得

  • aria-hidden:HTML5 語意,用於屏幕閱讀器的,幫助殘障人士更好的訪問網站。(參考來源)
  • 萬年水平垂直置中的另一種方法:
CSS
  • 文字如果要垂直置中,可以將height以及line-height設定成一樣的高度,但文字必須維持一行才有用。
  • 如果不希望hover影響隱藏的元素,可以改用visibility: hidden將元素隱藏,這樣滑鼠移過之後也不會啟動hover效果
  • visibility可以用在transition,但display不行
  • 假設元素的寬度是50px可以善用calc(50% - 25px)將元素置中
  • 利用偽元素製作三角形:
CSS

偶爾聽聽外國人的線上課程也很棒,可以學到很多不一樣的寫法以及詮釋的方法,codyhouse 的範例跟教學品質都很棒,有興趣可以連回他們的網站看更多資料唷: https://codyhouse.co/

利用純 CSS3 做出自適應的 lightbox

因為工作需求,要做一個使用說明頁。但「使用說明」並非這個案子的主要需求,所以決定利用 Lightbox 取代多做一頁 HTML,但使用功能強大的 Lightbox plugin 有些大材小用,所以思考了一下,決定使用純 CSS3 寫一個簡單、又能自適應的 Lightbox。

關於「純 CSS」到底有什麼好處?這邊就不再贅述了,簡單好上手、讀取速度快算是兩大特點;雖然不是所有瀏覽器都支援 CSS3,但我這個案子是應用在手機上,基本上沒有手機不支援 CSS3,所以不用太過擔心這方面的需求。

以下先放上範例讓大家試玩,點選按鈕「Click Me」或者是旁邊的圖片,都可以看到 Lightbox 的效果喲!

HTML 結構

要製作純 CSS 的 Lightbox 並不難,我們先從 HTML 開始寫起吧!
關於點擊後,要展開哪個 Lightbox?只需利用相同的id名稱即可做到。此外重點只有三個元件,分別為:

  • 打開 Lightbox 的元件(例如按鈕、圖片)
  • Lightbox 展開後的內容
  • 關閉 Lightbox 的元件

所以 HTML 結構可以這麼寫:

HTML

這邊特地帶出body標籤,是要提醒大家,請把lightbox-target(Lightbox 展開後的內容)拉出來,寫在body的子層。

大家可以想像一下,正常點選 Lightbox 後,整個螢幕都會黑掉,Lightbox 會出現在螢幕的正中央才是正確的。如果將lightbox-target包在任何的div裡,就會受到該div的定位或寬度限制,讓你的 Lightbox 位置變得很詭異。

如果看不太懂沒關係,讓我們做成圖解吧!

▼ 正常的 Lightbox

▼ 錯位的 Lightbox

因為我們會利用lightbox-target製作透明的覆蓋底層,所以透過圖解,應該可以清楚瞭解他們的差異吧!總之lightbox-target的位置會影響到整個版面就對了 XD

以上就是 Lightbox 的 HTML 結構,接下來要使用 CSS 做出 Lightbox 的展開與關閉。

CSS 樣式與寫法

樣式的部分,會分成以下幾個區塊:

  • lightbox-target:Lightbox 的黑底背景,即俗稱的 overlay
  • content以及img:設定跳出 Lightbox 時,出現的內容或圖片樣式
  • lightbox-target:target:我們利用:target設定當「點選的元件變為目標時」,會出現的 CSS 樣式。
  • lightbox-close:關閉 Lightbox 的「X」樣式。

可以參考我的 CSS 寫法(我有在裡面加上註解,大家可以參考相關註解歐):

Sass

利用 HTML 跟 CSS 就可以很快速的做出簡易的 Lightbox 囉,而且可以支援 HTML,或是單純的展示圖片,非常好用呢!!!

有興趣的朋友,也可以自行修改 Lightbox 的樣式,讓他更符合每個網站的需求 🙂

使用 CSS:not 與 data-index 即時搜尋頁面

去年看了一篇文章「Client-side full-text search in CSS」可以在單一頁面即時搜尋資料,覺得非常的好用,之前也有在粉絲團分享過這篇文章。原本不打算重新寫教學(因為原作者已寫的很詳細),但是最近發現有朋友不知道這功能,所以轉念想想,還是記錄下來順便推廣一下這好用的功能吧 🙂

我有將這個功能實作在前公司的網站(fanxin.tv),如果你有登入,可以進入我的動態點選「朋友列表」或「尋友工具」的分頁觀看效果,或者可以參考以下我用 codepen 做的範例

直接在搜尋框打上要搜尋的人名(可以用J,j搜尋),可以看到頁面即時篩選出正確的名字

這個範例有搭配 JavaScript,原作者使用的是原生的 JavaScript,而我為了稍作區別,將它改成了 jQuery,所以想瞭解怎麼用 jQuery 寫的朋友可以參考我的範例 🙂

這個即時頁面使用了 :not 以及 data-* 完成(不得不說, data-* 真的超好用的 XD),以下簡單介紹如何使用它們達成該功能。

在 html 加入 data-* 屬性

從頁面看,感覺是搜尋類別 name ,但其實我們要在 name 的父層 wrap 加上 data-index ,利用 data-index 做搜尋,而不是用 name

因此可以看到我在每個 wrap 裡加上了 data-index ,值跟 name 一樣都是填上名字。(第 1 & 3 行、第 6 & 8 行)

HTML

唯一不同的是,即使原本的 name 有大小寫,我在data-index一律改成小寫表示,如果要透過後端產生資料,可以從後端作處理,在樣板輸出的時候就先將大寫轉成小寫。

使用 :not 屬性做篩選

接著我們在 HTML 頁面加入以下語法(可以加在搜尋框的後面):

HTML

我們會利用 jQuery 動態在 style id="m-search" 裡加入 :not 語法,這樣就可以即時在頁面做篩選了。

:not是 CSS 的偽元素,跟 :nth-child 有異曲同工之妙,他可以幫我們做到元素篩選,假設今天我們搜尋「j」,希望出現所有名字有「j」的人,可以利用:not寫成:

CSS

這段意思是:「只要 data-index 的值沒有 J,就隱藏他」。

使用 data-index*= 是因為我們要做模糊比對,只要 data-index 有出現這個字都可以,畢竟我們不希望只搜尋字首或字尾,而是搜尋全部。

利用 jQuery 即時搜尋

最後,就可以利用 jQuery 即時搜尋,只要搜尋框有「改變、鍵盤輸入、貼上」等事件,我們就即時在 style id="m-search" 裡加入 :not 篩選,而他的篩選依據就是我們搜尋框的值:

JS

結語

以上就是整個過程,只要利用 CSS 以及 JavaScript(jQuery) 就可以做到即時搜尋,但是他只能搜尋這個頁面的東西,畢竟只是單純抓取 HTML DOM,如果要搜尋後端資料,還是要用 ajax 囉。

相關 jQuery 插件應用

3/12 更新:

有朋友將該功能做成 jQuery 插件釋出,有興趣想玩玩看的話,可以直接套用 jQuery 插件喔。

插件安裝與介紹:https://github.com/dca/jquery-msearch

CSS Media Queries 介紹與基礎應用

「Responsive Web Design」這個觀念與技術已經發展一段時間了,但這一年幾乎荒廢了我的 Html/CSS 學習之路,所以對於 Responsive web design 的觀念仍是懵懵懂懂,但 Google 是萬能的,所以根據強大的 wikipedia 幫我們簡單的定義了何謂 Responsive Web Design

A site designed with RWD uses CSS3 media queries, an extension of the @media rule, to adapt the layout to the viewing environment—along with fluid proportion-based grids and flexible images.
(網站使用 CSS3 media queries (使用方法為 @media +各種規則),調整我們設計的版面。讓版面更加彈性,可以在不同的設備上瀏覽網站。)

Responsive web design – Wikipedia, the free encyclopedia

也就是說,如果做出一個 Responsive web design (以下簡稱 RWD) 非常良好的網站,我們要先會運用 @media 這個新的 CSS3 的屬性。因此我花了一些時間,想先了解 @media 可以怎麼用? 會有怎樣的效果? 假使你跟我一樣,對 @media 懵懵懂懂還摸不著邊際,歡迎跟我一起學習;假使你已經是 RWD 大師,也歡迎幫我看看,我這樣的學習筆記認知,在觀念或是應用上有甚麼需要改進的地方 😀

Media Queries 介紹與基礎應用

Media 跟 Queries,我們可以先把它拆成兩塊來看:

基本呼叫 Media 的方法

@media 是 CSS 擴充元件的寫法之一,我們可以把它當成是 CSS 的類別,可能會比較好懂。 @media 呼叫方法有三種,範例如下:

1. HTML 在呼叫 CSS 的時候,將 media 的條件加入:

HTML

哈,是不是很有 IE Conditional Comments 的 FU。扯遠了,拉回~

2.直接寫在 css 檔案裡:

CSS

3.使用 @import:

CSS

Queries 基本使用方法

Query 顧名思義就是「查詢」的意思,我們如果要非常熟練的運用 media,各種條件跟條件之間的查詢是不可或缺的。

像是前面範例運用的 (min-width: 400px) and (max-width: 700px) ,那個「and」就是 Query 的一種。

Query 的語法只有三大項:not, and, only。我們最常用的是「and」,不難記,中文解釋也很簡單,比較困難的是,要怎麼加你心中設想的條件,用成語法呈現出來,所以要有一點邏輯概念會比較好上手。而這三種查詢條件可以獨立存在,也可以同時存在,只要用「,」隔開條件串即可。

1. and 使用方法:

  • 單一條件:  
CSS
  • 同時符合兩種條件:
CSS

  • 兩種條件,符合一種即可
CSS

2. only 使用方法:

有的瀏覽器並不支援 Media Queries,但支援 Media Type,所以我們可以用only來阻擋這些瀏覽器。

HTML

以上這段語法的意思為:

  • 支援 Media Queries & Media Type 的瀏覽器:如果是彩色螢幕,就會讀取 test.css。
  • 不支援 Media Queries,但支援 Media Type 的瀏覽器:因為有寫 only 條件,所以不會往下讀「彩色螢幕」,所以不會呼叫 test.css
  • 不支援 Media Queries & Media Type 的瀏覽器:不管有沒有 only,都不會呼叫 test.css

3. not 使用方法:

not是用來排除某些設備的樣式,假設你希望這個樣式只在 A 設備有作用, B 設備完全沒用,就可以使用 not 囉。

舉例如下:

CSS

我們也可以換個寫法,用數學運算子的括號先決,應該會比較清楚:@media (not (screen and (color))), print and (color)

Media 支援 type 與 features (值)

Media Type

Media 常見的支援裝置有: all, screen, print ,以下列出所有支援的裝置類型(by @W3C):

  • all :所有可適用的裝置。
  • braille :盲人點字器。
  • embossed :盲人點字印表機。
  • handheld : 手機/ PDA裝置。
  • print :印表機列印輸出。
  • projection :全螢幕投影輸出。
  • screen :一般電腦螢幕 (含iphone, ipad)。
  • speech :朗讀式裝置。
  • tty :由文字長度決定大小的終端機裝置。
  • tv :電視。

Media Feature

  • width | min-width | max-width
    (寬度 | 最小寬度 | 最大寬度)
  • height | min-height | max-height
    (高度 | 最小高度 | 最大高度)
  • device-width | min-device-width | max-device-width
    (裝置寬度 | 裝置最小寬度 | 裝置最大寬度)
  • device-height | min-device-height | max-device-height
    (裝置高度 | 裝置最小高度 | 裝置最大高度)
  • orientation (value: portrait | landscape)
    (裝置旋轉方向 值:直立 | 橫向)
  • aspect-ratio | min-aspect-ratio | max-aspect-ratio
    (螢幕顯示比例 | 螢幕顯示最小比例 | 螢幕顯示最大比例)
  • device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
    (裝置顯示比例 | 裝置顯示最小比例 | 裝置顯示最大比例)
  • color | min-color | max-color
    (彩色 | 最小顏色bit數 | 最大顏色bit數)
    color:0 表示該裝置為黑白(單色)
  • color-index | min-color-index | max-color-index
  • monochrome | min-monochrome | max-monochrome
    (單色 | 最小單色bit數 | 最大單色bit數)
    monochrome :0 表示該裝置不是黑白(單色)
  • resolution | min-resolution | max-resolution
    (解析度 | 最小解析度 | 最大解析度)
  • scan (value:progressive | interlace)
    (TV 專用掃描)
  • grid

寫到這覺得篇幅好像過長,而且大家消化也需要一點時間,關於 Media Queries 更進階的運用,以及權重說明,等我更加瞭解後,再整理一份給大家參考吧!!

其實如同我開頭所言,RWD 的技術已經蠻成熟了,也許我這篇教學已經來的有點晚,網路上已經有很多相關應用與例子,不過還是希望經過我這樣的說明,大家可以更瞭解 Media Queries 的使用方法 😀

Media Queries 參考資料
1. [CSS] Media Query 小撇步 // HINA::工程幼稚園
2. Mobile Web 前端技術筆記(二): Media Queries 與 CSS // 烏托比亞
3. CSS3 Media Queries 詳解 // 池水間
4. CSS media queries // CSS | MDN
5. Media Queries // W3C