codyhouse 的 tooltip 線上教學筆記與心得
剛剛收到一封 codyhouse 的線上課程通知,這一期他們推廣的是 CSS animation 應用,好奇點進去後發現有一堂課程是免費的,所以就打開來聽聽看啦 ~
▼ 有 play 可以選的 tooltip 就是這期的免費課程啦
花了半小時聽完後覺得受益良多,雖然講者的口音有點重,但可以把影片字幕打開,也可以直接看程式碼,聽完之後也是對其他付費課程有所心動 XD,非常棒的行銷手法呢,先試聽一堂課喜歡再買 😀
因為他的 youtube 影片連結是公開的,所以我也放一份在我的 blog 裡面,以下是自己聽完做的一些筆記跟重點,很多語法我自己也已實作了,所以看到國外講師也是這樣寫覺得很開心 😊
總之我覺得不錯的語法都會重點摘錄出來給大家參考,希望對你們有所幫助 🌹
筆記與心得
aria-hidden
:HTML5 語意,用於屏幕閱讀器的,幫助殘障人士更好的訪問網站。(參考來源)- 萬年水平垂直置中的另一種方法:
- 文字如果要垂直置中,可以將
height
以及line-height
設定成一樣的高度,但文字必須維持一行才有用。 - 如果不希望
hover
影響隱藏的元素,可以改用visibility: hidden
將元素隱藏,這樣滑鼠移過之後也不會啟動hover
效果 visibility
可以用在transition
,但display
不行- 假設元素的寬度是
50px
可以善用calc(50% - 25px)
將元素置中 - 利用偽元素製作三角形:
偶爾聽聽外國人的線上課程也很棒,可以學到很多不一樣的寫法以及詮釋的方法,codyhouse 的範例跟教學品質都很棒,有興趣可以連回他們的網站看更多資料唷: https://codyhouse.co/
使用 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 行)
唯一不同的是,即使原本的 name 有大小寫,我在data-index
一律改成小寫表示,如果要透過後端產生資料,可以從後端作處理,在樣板輸出的時候就先將大寫轉成小寫。
使用 :not 屬性做篩選
接著我們在 HTML 頁面加入以下語法(可以加在搜尋框的後面):
我們會利用 jQuery 動態在 style id="m-search"
裡加入 :not
語法,這樣就可以即時在頁面做篩選了。
:not
是 CSS 的偽元素,跟 :nth-child
有異曲同工之妙,他可以幫我們做到元素篩選,假設今天我們搜尋「j」,希望出現所有名字有「j」的人,可以利用:not
寫成:
這段意思是:「只要 data-index
的值沒有 J,就隱藏他」。
使用 data-index*=
是因為我們要做模糊比對,只要 data-index
有出現這個字都可以,畢竟我們不希望只搜尋字首或字尾,而是搜尋全部。
利用 jQuery 即時搜尋
最後,就可以利用 jQuery 即時搜尋,只要搜尋框有「改變、鍵盤輸入、貼上」等事件,我們就即時在 style id="m-search"
裡加入 :not
篩選,而他的篩選依據就是我們搜尋框的值:
結語
以上就是整個過程,只要利用 CSS 以及 JavaScript(jQuery) 就可以做到即時搜尋,但是他只能搜尋這個頁面的東西,畢竟只是單純抓取 HTML DOM,如果要搜尋後端資料,還是要用 ajax 囉。
相關 jQuery 插件應用
3/12 更新:
有朋友將該功能做成 jQuery 插件釋出,有興趣想玩玩看的話,可以直接套用 jQuery 插件喔。
用 data-* 屬性做出純 CSS 的 tooltip

最近因為案子需求,要做「tooltip」的功能,簡單來說,tooltip 是一種「當滑鼠移過文字時,會跳出一個簡短的提示說明」的特效。
tooltip 技術已存在很久,發展也有一段時間了,不論是用純 CSS 製作,或是透過 JavaScript 控制都有人寫過,不過最近我發現還可以利用 HTML5 的新標籤 data-*
達成。去年我有寫過一篇利用data-*
在 HTML 以及 jQuery 存取資料的文章,但 data-*
厲害的地方不僅在此,我們還可以直接利用 CSS 的 attr
將 data-*
資料抓出來噢!!
那話不多說,就先上範例吧:
可以看到當滑鼠移過「Hover Me」的文字時,右方會淡出一個提示訊息;滑鼠移過「Push you mouse here」文字時,右方會出現多行的提示。
在此跟各位簡單介紹一下,如何使用 data-*
達成該功能。
在 html 加入 data-* 屬性
首先要做的第一件事情,就是設定 tooltip 的 html 程式碼。我的寫法為:
在span
裡面寫上data-tooltip
的屬性,然後可以把它當作 HTML 屬性直接使用,在值(value)裡寫上提示文字。data-tooltip
的「tooltip」名字可以自取,只要前面的格式以data-
為開頭即可。
在 CSS 利用 attr 抓取 data-* 屬性
CSS 的偽元素是個很強大的東西,我們可以利用他做很多運用,通常為了做一些效果,content:" "
多半會留空,但其實可以在裡面寫上attr
抓資料歐!
我們可以這樣寫:
在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
作處理。
在想要換行的地方改用
 ;
取代br
,這樣文字就會自動換行囉!!
☞ 補充
;
的前面其實不需要空格,但如果我不空格,字元會被編輯器吃掉。想看比較完整的語法可以參考 codepen 範例喔。
雖然我還是很想知道 bootstrap 到底是怎麼寫的,有在 FB 問過朋友,但其實還是看不懂,OTL
總之,data-*
真的是一個強大又好玩的東西,不僅可以自定義屬性(把自己當成 HTML 的規則制定者?),還可以透過 jQuery & CSS 存取~,大家一起來玩吧 😀
淺談 section 運用以及與 outline 間的關聯
HTML5 正夯? 恩,其實夯很久了!而 HTML5 絕對不只有語意那麼簡單罷了,它包含了很多前端的新功能與新技術,語意只是其中的一小小小塊。
今天要跟大家分享的是 <section>
標籤,網路上有很多關於 <section>
的解說,常見的文章是拿來跟 <article>
比較,可是我看了很多篇都似懂非懂…,所以又跑去看了國外的文件。
從今年開始,我寫的 HTML 會漸漸從 XHTML 的 !DOCTYPE 走向符合 HTML5 的 !DOCTYPE,隨著 HTML5 的規格釋出,語意會是我優先嘗試的部份,從整個網頁結構以及 SEO 來看,語意是 HTML5 的必備基礎知識,所以我們就先從 <section>
開始吧!
W3C 對 Section 的定義
不免俗的,一定要寫一下 W3C 的原文說明:
The <section> element represents a generic section of a document or application.
- A section, in this context, is a thematic grouping of content:
- chapter
- various tabbed pages in a tabbed dialog box
- numbered sections of a thesis …
- A Web site’s home page could be split into sections for an introduction, news items, and contact information.
- The section element is not a generic container element. The section element is appropriate only if the contents would be listed explicitly in the document’s outline.
- A section typically with a heading.
看得懂 W3C 原文的朋友,其實可以按右上角的 Close 離開了 😛 ,看不懂的朋友,歡迎繼續往下看 🙂
section 到底是甚麼意思
先撇開 W3C 這些落落長的解釋名詞,我們先用常識去判斷甚麼是 section ?透過萬能的谷歌大神可以了解:
- section 不是一段完整的文章,article 才是
- section 可以作為一個章節、或一個段落的區隔。
另外,如果我們單純搜尋 section 這個單字,可以看到他是空間設計的隔間
上圖用灰色粗線條一個一個分隔的區塊,就是 section(一個章節、段落的區隔)。而整個一大棟的建築物是 article (獨立完整的文章)
再從空間設計拉回網頁設計,以結構面來說,可以做成以下的示意圖
如果你曾搜尋過 , ,會發現每個人畫的結構圖都不太一樣。有的跟我提供的示意圖一樣,是用 <section>
包覆 ;但有的剛好相反,是用 <article>
包覆 。
我沒辦法告訴你哪種才是正確的?或者該有怎樣的準則。
因為兩種都可以,怎麼去撰寫 HTML tag,是根據你網頁的結構而定,因此他沒有標準的答案。我們唯一能做的是把他們的差別搞清楚,也把你網頁的結構搞懂;唯有都清楚了,才能正確的寫出對搜尋引擎友好的語意。
我對 section 的理解與定義
最後,結合 W3C 對 section 的定義,以及透過網路上對 section 名詞的解釋,我將 section 的定義總結如下:
- section 用來作為一個有意義的章節,或段落的區隔。
- section 在一張網頁可以出現很多次。
- section 不是用來包覆一段完整且獨立的文章(例如 Blog 的內文),要做這件事請交給 article
- 被 section 包覆的段落,通常都會帶有 headling 標籤(這跟等等提到的 outline 有強大的關聯)
看完這些定義,大家有沒有發現,其實最重要的一點是要去「判斷這些區塊,到底是不是獨立的文章」?或者是「有意義的章節或段落」。而判斷這樣的頁面結構,就是要跟案主做良好的溝通,了解他們網站的需求,並且先將 outline 定義出來 =)
※ 如果你已經知道甚麼是 outline,可以選擇跳過 outline 的介紹 ※
什麼是 outline
outline 就是我們常說的「大綱」。當搜尋引擎在爬網站文章時,可以根據網站提供的大綱抓出每張網頁的目錄以及重點,每張網頁都可以有自己的一份大綱。
以部落格文章為例子,我們在寫文章的時候,都習慣用 heading tag 做大標、小標…等等,方便使用者閱讀,而這樣的標記在網頁結構裡,就算是一個大綱。只是我們用顏色區分讓使用者容易閱讀、而對搜尋引擎來說,他就是利用 heading tag 來了解每一段的大綱與章節。
如果想要知道你的網站大綱長甚麼樣子,以下有幾個方便的工具讓你運用:
1. Google 擴充元件: HTML5 Outliner
這個 outline 檢測工具非常好用,只要網站有把結構做出來,他就可以根據你的 HTML tag 秀出網站的大綱。另外如果文章很多懶得爬文,也可以直接點選有興趣的大綱文字,它會自動跳到該段落,有點像書籤的效果。
2. HTML 5 Outliner
方便的 Outline 檢測網站,可以上傳 HTML 檔案、用 URL,或是直接貼 HTML code 在文字欄位裡,他就會秀出這個 HTML 的大綱,適合在本機測試或不是用 Google Chrome 的朋友。
怎麼寫 outline
在 HTML5 尚未問世,還沒有 section tag 時,如果我們要做出像下面這種層級目錄的 outline:
通常會用 heading tag 給 outline 做階層 (可以直接貼到 HTML5 Outliner 檢測工具看喔):
簡單來說,就是用 <h1>
, <h2>
, <h3>
做組合。
<h1>
是階層一,<h2>
是階層二 … 以此類推
但是問題來了,heading tag 除了可以幫助做出層級大綱外,他也代表著每個網頁的重要性,我們習慣設定 <h1>
為整張網頁最重要的部分,依序為 <h2>
→ <h3>
如果我今天覺得「1. 流量來源」跟「1.1 總覽」、「1.2 來源」是一樣重要的文章大綱,畢竟「1. 流量來源」只是一個引言,真正重點內容是放在後面的 1.1 以及 1.2,我希望他們同樣是 <h2>
,那該怎麼做呢?
在 HTML5 以前,這個問題無解。因為即使你用 <div>
包覆的很漂亮,或是做了很棒了縮排,但是對網頁標準來說, 沒有任何的意思(無語意),他只是一個用來做排版的容器罷了。
所以你用 Outline 工具跑出來會是長這樣,沒有任何的階層:
那麼,如果我們同時要滿足大綱的「重要性」以及「階層性」,該怎麼做呢?所以 W3C 幫我們定義了這個新的 HTML 標籤:<section>
承接我們剛剛舉例的程式碼,如果我們把 <div>
換成 <section>
,會發生甚麼事情呢?
讓我們丟到 Outliner 檢測工具看看,會出現這樣的結果:
初步來看,是達到了我們的期望,即使都用 <h2>
,也可以做出階層的 outline。只是你會發現最上面多出了一個「Untitled Section」,所以請移除最外層的 <section>
,將語法改成:
這樣就會是我們想要的結果了:
<section>
所包覆的區塊可以用來做每一段的大綱,而大綱的標題就是用 heading tag <H>
表示。但是 <section>
的最上層還是要有一個主標題才會讓整張網頁的大綱完整。
section 的進階運用
1. section 內同樣有階層之分
輸出結果:
2. section 可搭配 hgroup 做大綱的微調
被 包覆的 heading tag,除了第一個 heading tag 之外,其餘的 heading tag 都不會出現在大綱中。( <hgroup>
已被 W3C 移出 HTML5 標準,所以我就簡單舉例,想要測試的朋友可以自行玩玩看)
3. section 碰到特定語法將不視為大綱
當 <section>
碰到像是 <blockquote>
, <details>
, <fieldset>
時,被包住的 heading tag 不會出現在大綱。
輸出結果:
讓不支援 HTML5 的瀏覽器支援 <section>, <article> 等標籤
步驟一
打開 reset.css 或是其他的樣式檔案,如 style.css,加入以下語法 (默認為display:inline
):
步驟二
開啟網頁檔案,再網頁最上方加入語法,用 JavaScript 幫這些不支援 HTML5 的瀏覽器,建立新的元素。
以上。有任何問題都歡迎留言指教 🙂
使用 HTML5 和 jQuery 簡易存取資料
HTML5 增加了一個 data-*
的屬性,可以讓大家很方便的存取這些數據,而且完全不會影響你的版面。假使要做網頁互動,或是需要將資料存到後端紀錄,都非常的方便喔!
A custom data attribute is an attribute in no namespace whose name starts with the string 「data-「, has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).
Embedding custom non-visible data with the data-* attributes
範例 1
HTML5 使用 data-*
非常簡單,以下是參考語法:
在不影響版面情況下,可以看到我們在 增添了一個屬性:data-myid="test1
。
myid
以及 test1
都是我們可以自定義的項目。myid
可以用來當作該 DIV 的識別標記,test1
則是該 DIV 的值。
接著我們可以很方便的使用 jQuery 取出這個 DIV 的值:
按下按鈕後,跳出來的 alert 視窗值會是 test1 。
範例 2
假使有多組 DIV 的值要讓我們做選擇,同樣可以利用 data-*
實現該效果。
首先先把 HTML 的 data 寫好:
以及利用 jQuery 取出 data-myid
的值
兩個 DIV 的 data-myid
不一樣,點選區塊之後顯示的結果也會不同。