傾囊相授 ! MUKI 的 RWD 入門與實戰課程分享

我在 2012 年寫過一篇 CSS Media Queries 介紹與基礎應用,後來也陸續開了一些 RWD 相關課程,也有在一些研討會分享過 RWD 技術,因為資源散落各地,所以決定利用部落格將我分享過的 RWD 資訊做個整合,讓大家可以快速上手。

另外我也會將自己的「RWD 入門與實戰」這個付費課程講義公開,讓大家可以在部落格內閱讀。為什麼要把付費內容免費化呢?其實我覺得, RWD 已經存在一段時間了,相信很多人都已經會了,就算不會,網路上也有許多分享文章可參考,「觀念」也沒什麼好藏私的,愈多人會 RWD,我們之後的進階課程才會輕鬆啊(笑)。

其實想要把內容公開化已經想很久了,突然如此積極還有另外一個原因,就是我在網路上看到有人盜用了我的講義內容,然後把他公開在網站上,好像還用這些內容去開課(這種行為真是令人不齒)。更扯的是,他盜用我的內容後還有附上一些課後補充,就是沒附上我的連結,是心虛嗎?哼~總之,我歡迎大家分享我公開的資料,但與其我的東西被盜用,還不如我自己公開分享啊啊~~

如果各位之後在其他地方看到這些內容,請不用懷疑,我以我的人格保證,他們絕對非原創絕對是盜用,因為這些東西都是我一個字一個字打出來的。也歡迎大家用力檢舉或是告訴我唷 ^___^

以上癈話到此結束,接下來開始進入正題吧。

RWD 相關簡報分享

我的 RWD 簡報都發在 slides.com 裡,大家可以直接點進去看,或是在部落格里閱讀。

RWD 入門與實戰課程簡報

這份簡報是「RWD 入門與實戰」的上課簡報,裡面有很基礎的 RWD 觀念,適合還沒碰過 RWD 卻有興趣想瞭解的朋友。跟練習有關的簡報我都已經拿掉了,我這堂課的兩大重點:(1)RWD 是由什麼組成的 (2)如何實作 RWD。

這份講義重點在「(1)RWD 是由什麼組成的」,另外上了幾次課之後,我改為使用 gitbook 做線上講義,所以這份簡報就沒再更新了。

2015 廣州前端分享會

這份是最早釋出的 RWD 簡報,是我去廣州的一場分享。這份簡報內容很多,到最後也沒講完,裡面列出了做 RWD 會碰到的一些問題,適合已經有 RWD 實作經驗的朋友閱讀。

簡報後面的「那些年我硬幹的事情」,是在分享已經上線的網站如何硬幹成 RWD 網站。

2015 高雄 MOPCON

2015 年底參加了高雄的 MOPCON,一樣是在講 RWD。

這份簡報可以看作是融合的「RWD 入門與實戰」以及「廣州前端分享」的精華,也是適合給有 RWD 實作經驗的朋友閱讀。


簡報比較偏「秀」,為了演好這場秀,裡面會帶上很多插圖,思緒也比較跳躍,所以後來我上課才改用講義,講義就比較像我的寫文風格,系統化 + 平鋪直敘 (自己說 XDDD)。

我會把講義整個搬到文章內,為了怕頁面拖太長,所以請點擊下一篇閱讀「RWD 入門與實戰」講義唷。

原生 CSS 的預處理器:Myth 介紹與使用

昨天閱讀 CSS Secret 時,作者提到了 Myth 這套預處理器,所以研究了一下如何搭配 gulp 作到自動化編譯(compile),以及如何結合 compass 作到 double 自動化 XDD。

Myth 介紹

免不俗的,先來介紹 Myth 吧!他跟 SASS, LESS 有點像又不太像,相同的地方在於他們都是 CSS 的預處理器,不同的是,SASS & LESS 有自己的規則跟語法(例如 mixin, extend)是原生 CSS 不支援的,而 Myth 的所有語法都是原生 CSS 的 spec,就算不用 Myth 編譯也可以在瀏覽器正常瀏覽。

但是,因為瀏覽器還沒有全面支援各種原生 CSS 的 spec,例如之前介紹過的 CSS 變數,所以我們可以利用 Myth 編譯 CSS,假使以後這些 spec 都開放支援了,直接把 Myth 摘除也不會有影響,非常方便!

有哪些原生的 CSS 需要編譯呢?其實功能不多,只有四個 XDD,我直接擷取 Myth 網站的圖片如下:

Variable 與 Math

再次強調,想瞭解 CSS Variable 可參考我之前寫的文章:CSS 原生變數介紹,不過 Myth 沒辦法支援 CSS Variable 所有功能,像是強大的「繼承」功能就無法支援。

我們都知道,所謂「編譯」就是將 CSS 語法寫死,不管是 SASS, LESS, 或是 Myth,即使在寫的時候靈活度很高,但是編譯出來的語法就是固定的。而 CSS variable 是原生的 CSS 語法,跳過編譯這個階段,可以讓語法更加靈活,尤其是前面提到的繼承功能 (這邊扯遠了,有興趣就看我那篇文章啦 XD)

Math 就是calc()語法的應用。

calc()是原生 CSS 裡很強大的一個「活用」語法,他本身是不需要再次被編譯的,但因為calc()可以加入變數作運算,因為牽扯到變數,所以我們需要編譯他們。

Color 與 Prefixes

未來color()也能像 SASS 一樣有lighten()這一類的數值調整,有興趣閱讀 spec 的朋友可以參考 W3C 的 draft:Modifying Colors: the color-mod() function

最後是針對瀏覽器添加的 prefix,以 Compass 為例,我們會寫:

CSS

以編譯成:

CSS

但 Myth 不需要加上@include這一類的函式,我們只要寫一行transition: color .2s;,就可以編譯成相容瀏覽器的語法。

以上就是 Myth 提供的四個核心語法。

如果你有興趣玩玩原生 CSS 的最新函式,也許可以考慮使用 Myth 幫你編譯唷!


安裝與使用 Myth,並搭配 gulp 自動化編譯

請先安裝 myth 這個套件,請使用 npm 套件管理:

Shell

他的使用方法很簡單~,假設我們在 input.css 寫好檔案,想把它編譯成 output.css,只要使用myth指令即可:

Shell

當然,每次要這樣輸入還蠻累的,所以可以搭配 gulp-myth 自動化工具。他除了支援 gulp 之外也有支援 grunt,不過我比較喜歡用 gulp,所以只提供 gulp 的設定方法 XD,如果你自己有在用 grunt,想必如何設定對你也不是難事啦😊 ~

專案目錄結構

先假設我們的專案目錄結構如下:

Plain Text

我們會在 dev/ 底下開發 CSS 檔案,最後希望透過 Myth 幫我們編譯到 build/ 目錄下。

⚒ 先安裝 gulp-myth

Shell

⚒ 新建 gulpfile.js 檔案

JS
gulpfile.js

最後到 terminal 執行gulp就大功告成啦!只要寫好 CSS,就可以透過 gulp 自動幫你編譯成另外一個 CSS,並存放至 build/ 目錄底下唷!


利用 gulp 結合 Compass 與 Myth

Myth 的存在並不是為了取代各種預處理器,透過前面的介紹,希望各位能理解它們存在的意義。Myth 的網站也清楚地提到:

You can still use variables and math functions, just like you do in preprocessors.

所以接下來讓我們試著把這兩個預處理器合在一起吧 ~

我自己使用的預處理器是 Compass,所以等等一樣只以 Compass 做例子,然後這次的目錄結構更改如下:

Plain Text

ps. 記得要先compass create啊 XDDD

⚒ 先安裝 gulp-compass

Shell

⚒ gulpfile.js 設定如下

JS
gulpfile.js

最後同樣到 terminal 執行gulp就完成了。利用 gulp 自動化工具,會先將 scss 檔案編譯完成,再交給 myth 編譯,最後再覆蓋到 stylesheets/ 目錄下。

以上兩種方法提供給各位參考,有興趣使用 Myth 的朋友也可以玩玩看唷~


昨天在看某篇技術文章時,看到最後心有慼慼焉,節錄如下:

大家大可不必過分在意一點點的 CSS 細節,CSS對於產品的商業價值有,但是到了一定階段以後,實際上就有限,或者說很難直觀的體現,或者說性價比就不高了。

以現在瀏覽器的渲染性能以及我們實際的開發需求,就算有差異,有價值嗎,肯定沒有!

大環境如此浮躁,你會發現,自己遇到的困境並不是技術成長遇到了瓶頸,而是根據不需要你這方面進一步的技術成長,來,幹點收益更明顯的事情!

我想,很多前輩技術博客斷掉了,怕也是人在職場,身不由己!

我能不能走出一條不一樣的路呢?

玩這些新的技術到底對現在的工作 / 生活有沒有幫助?其實想想還蠻哀傷的 XDD

不過我又想起了自己寫部落格的初衷,原本就不是要給誰誰誰看,也不是為了流量或是各種附加利益,畢竟我要賺錢我就轉行去寫 美妝 / 3C / 生活了 😂,我之所以想寫這些東西,純粹是為了記錄,畢竟大腦容量有限,我所能做的就是利用紙筆、利用打字幫我記錄下來。如果哪天我忘記了,至少還有這些記錄可以翻閱。

這就是我的初衷,直到現在依然不變,所以轉而想想,也不用怕別人需不需要,不違本心而已 XDD

扯遠了,哈,總之有任何問題都歡迎一起交流討論,針對 gulp 有更好的寫法也歡迎告訴我喔!

使用 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

用 data-* 屬性做出純 CSS 的 tooltip

最近因為案子需求,要做「tooltip」的功能,簡單來說,tooltip 是一種「當滑鼠移過文字時,會跳出一個簡短的提示說明」的特效。

tooltip 技術已存在很久,發展也有一段時間了,不論是用純 CSS 製作,或是透過 JavaScript 控制都有人寫過,不過最近我發現還可以利用 HTML5 的新標籤 data-* 達成。去年我有寫過一篇利用data-*在 HTML 以及 jQuery 存取資料的文章,但 data-* 厲害的地方不僅在此,我們還可以直接利用 CSS 的 attrdata-* 資料抓出來噢!!

那話不多說,就先上範例吧:

可以看到當滑鼠移過「Hover Me」的文字時,右方會淡出一個提示訊息;滑鼠移過「Push you mouse here」文字時,右方會出現多行的提示。

在此跟各位簡單介紹一下,如何使用 data-* 達成該功能。

在 html 加入 data-* 屬性

首先要做的第一件事情,就是設定 tooltip 的 html 程式碼。我的寫法為:

HTML

span裡面寫上data-tooltip的屬性,然後可以把它當作 HTML 屬性直接使用,在值(value)裡寫上提示文字。data-tooltip的「tooltip」名字可以自取,只要前面的格式以data-為開頭即可。

在 CSS 利用 attr 抓取 data-* 屬性

CSS 的偽元素是個很強大的東西,我們可以利用他做很多運用,通常為了做一些效果,content:" "多半會留空,但其實可以在裡面寫上attr抓資料歐!

我們可以這樣寫:

CSS

attr裡面塞入我們在 html 新增的data-tooltip屬性,這樣偽元素(:before) 就會得到該值。

利用 pre 解決 tooltip 自動換行

將 tooltip 的樣式做好後,也許你會發現文字的換行有點奇怪,可能會出現這樣的情況:

「Hello World」文字並沒有按照預期的情況換行,簡單來說是因為預設會使用空白換行,因此我們可以使用pre標籤保留空白字元,寫法為white-space: pre;

利用 Unicode 字元顯示多行 tooltip

最後,如果我們希望 tooltip 可以顯示多行文字該怎麼辦呢?
一開始我很直覺的在 data-tooltip 裡面加入 br 標籤,但他會直接將br秀出來:

後來我發現 bootstrap 有寫好 tooltip 的元件,他的做法是如果你要在 data-* 裡面使用 HTML 標籤,就必須加入一行 data-html="true" 的設定,當時看完覺得超神奇的,他把這串設定寫在 javascript 裡面做判斷,但我還是似懂非懂,不知道 bootstrap 的具體設定方法。

最後,我採用 Unicode \a 作處理。

在想要換行的地方改用&#xa ;取代br,這樣文字就會自動換行囉!!

HTML

☞ 補充

; 的前面其實不需要空格,但如果我不空格,字元會被編輯器吃掉。想看比較完整的語法可以參考 codepen 範例喔。

參考來源:http://stackoverflow.com/questions/16451553/css-data-attribute-new-line-character-pseudo-element-content-value

雖然我還是很想知道 bootstrap 到底是怎麼寫的,有在 FB 問過朋友,但其實還是看不懂,OTL

總之,data-* 真的是一個強大又好玩的東西,不僅可以自定義屬性(把自己當成 HTML 的規則制定者?),還可以透過 jQuery & CSS 存取~,大家一起來玩吧 😀