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/

使用 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 存取~,大家一起來玩吧 😀

淺談 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.

@HTML/Elements/section – W3C

看得懂 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:

Plain Text

通常會用 heading tag 給 outline 做階層 (可以直接貼到 HTML5 Outliner 檢測工具看喔):

HTML

簡單來說,就是用 <h1>, <h2>, <h3> 做組合。

<h1> 是階層一,<h2> 是階層二 … 以此類推

但是問題來了,heading tag 除了可以幫助做出層級大綱外,他也代表著每個網頁的重要性,我們習慣設定 <h1> 為整張網頁最重要的部分,依序為 <h2><h3>

如果我今天覺得「1. 流量來源」跟「1.1 總覽」、「1.2 來源」是一樣重要的文章大綱,畢竟「1. 流量來源」只是一個引言,真正重點內容是放在後面的 1.1 以及 1.2,我希望他們同樣是 <h2>,那該怎麼做呢?

在 HTML5 以前,這個問題無解。因為即使你用 <div> 包覆的很漂亮,或是做了很棒了縮排,但是對網頁標準來說, 沒有任何的意思(無語意),他只是一個用來做排版的容器罷了。

HTML

所以你用 Outline 工具跑出來會是長這樣,沒有任何的階層:

Plain Text

那麼,如果我們同時要滿足大綱的「重要性」以及「階層性」,該怎麼做呢?所以 W3C 幫我們定義了這個新的 HTML 標籤:<section>

承接我們剛剛舉例的程式碼,如果我們把 <div> 換成 <section> ,會發生甚麼事情呢?

HTML

讓我們丟到 Outliner 檢測工具看看,會出現這樣的結果:

Plain Text

初步來看,是達到了我們的期望,即使都用 <h2>,也可以做出階層的 outline。只是你會發現最上面多出了一個「Untitled Section」,所以請移除最外層的 <section>,將語法改成:

HTML

這樣就會是我們想要的結果了:

Plain Text

<section> 所包覆的區塊可以用來做每一段的大綱,而大綱的標題就是用 heading tag <H> 表示。但是 <section> 的最上層還是要有一個主標題才會讓整張網頁的大綱完整。

section 的進階運用

1. section 內同樣有階層之分

HTML

輸出結果:

Plain Text

2. section 可搭配 hgroup 做大綱的微調

被 包覆的 heading tag,除了第一個 heading tag 之外,其餘的 heading tag 都不會出現在大綱中。( <hgroup> 已被 W3C 移出 HTML5 標準,所以我就簡單舉例,想要測試的朋友可以自行玩玩看)

HTML

3. section 碰到特定語法將不視為大綱

<section> 碰到像是 <blockquote>, <details>, <fieldset> 時,被包住的 heading tag 不會出現在大綱。

HTML

輸出結果:

Plain Text

讓不支援 HTML5 的瀏覽器支援 <section>, <article> 等標籤

步驟一

打開 reset.css 或是其他的樣式檔案,如 style.css,加入以下語法 (默認為display:inline):

CSS

步驟二

開啟網頁檔案,再網頁最上方加入語法,用 JavaScript 幫這些不支援 HTML5 的瀏覽器,建立新的元素。

JS

以上。有任何問題都歡迎留言指教 🙂

使用 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-* 非常簡單,以下是參考語法:

HTML

在不影響版面情況下,可以看到我們在 增添了一個屬性:data-myid="test1

myid 以及 test1 都是我們可以自定義的項目。myid 可以用來當作該 DIV 的識別標記,test1 則是該 DIV 的值。

接著我們可以很方便的使用 jQuery 取出這個 DIV 的值:

JS

按下按鈕後,跳出來的 alert 視窗值會是 test1 。

範例 2

假使有多組 DIV 的值要讓我們做選擇,同樣可以利用 data-* 實現該效果。
首先先把 HTML 的 data 寫好:

HTML

以及利用 jQuery 取出 data-myid 的值

JS

兩個 DIV 的 data-myid 不一樣,點選區塊之後顯示的結果也會不同。