讓 CSS 讀取 vue i18n 的語系並顯示對應的樣式

如果網站有多語系的需求,除了修改文字之外,有可能還需要根據不同的語系,調整對應的 CSS 樣式。

通常會碰到以下兩種情況:

  • 不同的語系有不同的色彩 / 樣式 / 或排版
  • 不同的語系有不同的寬度 (因為有的語系文字特別長)

我們可以直接用this.$i18n.locale 抓出當前的語系名稱,然後直接用這個語系名稱當做 CSS 的 class 即可。

詳細的程式碼如下:

JS

而 i18n 的語系名稱是怎麼來的呢?預設位置在 lang/index.js 裡:

JS

這裡的 en_US 以及 zh_TW 就是他的語系名稱,我們可以依照需求自行調整。

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?

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

參考資料:

將檔案快速 push 到 gh-pages branch

github 提供一個簡易的環境可以執行 HTML/CSS/JS 等前端程式,使用方法很簡單,只要把在 repo 新增一個gh-pages分支,然後將檔案 push 到該分支即可。

但用 sourcetree 切換 branch,檔案也會隨之改變,並不是個好方法。也許用 sourcetree 有其他的解法,但目前我研究不出來,所以我目前的做法是用npm套件去管理。

gh-pages 套件介紹

這個套件就叫做 gh-pages,可以直接在 cmd 執行以安裝 (當然前提是要先安裝 npm 套件管理):

Shell

套件頁面有詳細的文件說明,會告訴你如何做更多進階的設定。

但我要的功能很簡單,只希望把當前 branch 的檔案 push 到gh-pages即可,因此請在 Terminal 輸入該指令即可 (最後面可以輸入資料夾位置):

Shell

這個原理很簡單,就是先把你要的檔案抓下來,再移除gh-pages裡的檔案,最後再上傳。也因此這些動作都需要輸入 github 的帳號密碼,最少可能要輸入三次,為了避免這種情況,我們必須要修改 config,將你的 repo 位置從http://改為git@

修改 config 檔案

請在 Terminal 利用 vim 或任一編輯器打開 config (該檔案為隱藏檔)

Shell

[remote "origin"]裡面有一個url,將它的路徑改為git@開頭的 repo 位置即可。

最後存檔再試著執行gh-pages -d .,就會發現不用再輸入密碼了唷!

讓 WordPress 的 RSS Feed 也能讀到自訂的文章類型 (post type)

如果你有使用 WordPress 的自訂文章類型 (custom post type),應該會發現預設的 RSS Feed 是讀不到該內容的,那是因為 WordPress 的 RSS,預設只會讀到「post type = post」的文章,也就是我們後台系統的「文章」。

因此我們可以在 functions.php 加入一些語法,就可以讓 RSS Feed 讀到自訂文章類型:

PHP
functions.php

以上這段語法會顯示所有的自訂文章類型,但如果你不希望顯示所有文章類型的話,只要將語法稍作修改即可:

PHP
functions.php

在第 4 行修改你要放到 RSS Feed 的 post type 即可,如此一來你就可以自由決定要出現與消失的文章類型囉!

✏️ 以上語法參考來源:http://www.wpbeginner.com/

用 Bootstrap 3 製作高度相同的 div (column)

排版網頁時,常常會碰到的一個需求,就是希望左右欄位的高度可以相同。而讓欄位的高度相同已經不是什麼新奇的事了,所以今天要分享的是,當你使用 Bootstrap Grid 製作網頁時,該如何將這個效果套用在 Bootstrap 裡。

會想分享這樣的內容,也是因為之前在上 RWD 入門與實戰時,有同學問過這樣的問題。所以就寫成一篇文章分享給大家囉!


使用 flex 讓 column 高度相同

第一個最簡單的方法,就是使用 display: flex 讓所有欄位的高度相同。但 flex 有一個令人哀傷的事實:他不支援 IE9 以下的瀏覽器。但我想 flex 一定是未來排版的主流,所以一樣分享給大家。

你可以從範例語法的 Before 以及 After 看到前後差異。

而我只有在row裡面加上一行語法,即可做到該效果:

CSS

正常情況下,Bootstrap 一行最多容納 12 columns,但如果使用display: flex,同一個rowcol-*總數超過了 12,他們一樣會維持在同一行內,寬度也會自動均分。這是除了瀏覽器相容外,還需要特別注意的一件事。

使用 table 讓 column 高度相同

古早以前如果希望欄位的高度相同,用table不失為一個好方法,雖然現在我們不再使用表格做排版,但依然可以使用display: table將所有標籤的型態作轉換。

此外display: table的瀏覽器支援度很好,雖然語法較多,但是考量到 IE9 以下的兼容的話,推薦大家使用該方法。

Bootstrap 有 row 以及 column 的設定,所以在結構上很適合加入display: table,不需要再給予多餘的 DIV:

CSS

☞ 補充

  • 使用display: table之後,寬度會等於行內元素(inline elements),因此記得要加上width: 100%;讓寬度等於父層的寬度。
  • 記得在col-*將所有浮動給移除(float: none),不然display: table不會有作用。

以上兩種方法好記又方便,如果搭配 Bootstrap,也不需要增加額外的 DIV 標籤,希望大家會喜歡囉~

讓 Facebook 社交小工具(Page Plugin)能有 RWD 的效果


Facebook 的 Page Plugin (原先的 like box)預設沒有提供 RWD 的效果,如果希望小工具也可以用 RWD 效果的話,可以在 CSS 加入以下程式碼:

CSS

語法來源:http://stackoverflow.com/questions/10656038/how-to-make-the-facebook-like-box-responsive

初探 Sass Maps 與使用介紹

Sass Maps 是 Sass 3.3 版的新東西,我們可以利用它更有效的管理我們的變數;如果再搭配 if/else 條件式或 each 迴圈,可以寫出更簡單(也更程式導向) 的 CSS 語法。

雖然 Maps 有地圖或索引的意思,但你不妨把它想成是 JavaScript 的物件,這樣在觀念與使用上會比較接得起來 😊 ~

以往我們用 Sass 設定變數時,會用各種單字取名。通常會用這種比較沒有系統的寫法:

CSS

以上這些變數單拆開來,可能都看得懂。但真的要使用時,通常都要回頭翻閱;另外一個問題就是變數愈多管理愈不易。

所以我們可以利用 SASS Maps 幫我們解決這樣的問題。

Sass Maps 基本介紹

Sass Maps 的格式如下(Sass Maps 官方文件參考)

CSS

將剛剛那些變數按照 Sass Maps 格式整理一番,可以比較有系統化:

CSS

將上面的變數根據種類 / 屬性的不同,可以變成像物件一樣,需要哪一個資料再把它取出來即可。


利用 functions 包裝 Sass Maps

Sass Maps 看起來非常簡單也好上手,對吧!

不過每次都要寫 map-get 是不是覺得有點阿雜?如果不常用可能會忘記這段語法,又要回頭找資料。

會使用 Sass 的人,從本質上就是個懶鬼無誤,所以可以少寫幾個字,我們就要努力少寫幾個字💪,所以我們來利用 functions 幫我們包裝一下這段程式碼吧!

CSS

大家可以用 codepen 玩玩看


用迴圈跑 Sass Maps

除了 functions 之外,我們也可以用迴圈跑一段 Sass Maps 唷。

假設今天要做一個選單組合,而每個選單的背景顏色都不一樣,我們可以先用 Sass Maps 定義好每個選單的顏色:

CSS

接下來用迴圈跑出menu1menu5的顏色以及:hover

Sass

最後編譯出來的 CSS 如下:

CSS

有感受到,多寫一點迴圈可以省很多事情的 FU 嗎😊


我能使用 Sass Maps 嗎

文章最前面有提到,Sass Maps 是 Sass 3.3 版的新東西,因此只要你的 Sass 高於 3.3 版都可以使用喔!

簡單檢測方法,直接在 terminal 輸入sass -v就可以知道目前的 Sass 版本囉。

參考資料: Sass Maps – Jonathan Su

將 Google 搜尋框整合至 WordPress

WordPress 雖然是個非常強大的 CMS,但我覺得「搜尋」是他所有功能裡面最雞肋的,內建的搜尋功能無法結合多組字串,也沒有支援高亮或是進階搜尋等,其實不是很方便。有的人會選擇使用外掛增強 WordPress 內建的搜尋功能,或是額外自己寫一些 function 補足,不過我們也可以把搜尋這件事情交給強大的 Google,畢竟他們就是做搜尋起家的,透過 Google 搜尋我們的網站,比內建的方便很多喲。

▼ Google 搜尋結果示意圖

實際呈現結果,可以參考我的搜尋頁面:https://muki.tw/search/?q=muki

我最近也使用 Google Search 替換了內建的搜尋,使用方法很簡單,操作也是中文說明很好入手。不過要整合至 WordPress 還是有需要注意的部分,為了以後使用方便,特地將幾個重要的步驟記起來,也供大家參考使用。

使用 Google 自訂搜尋

Google 自訂搜尋改版後,總算將新舊控制台合併起來了,步驟也簡單許多,跟著以下的說明開始做吧!

步驟一

到新版 Google 自訂搜尋,新增你的網站資料。使用方法很簡單:

  • 「要搜尋的網站」欄位:填入你的 WordPress 位置
  • 「語言」:繁體中文
  • 「搜尋引擎的名稱」:填入你的網站名稱

最後按下藍色的「建立」按鈕,即可新建完成。

步驟二

在左側選單,點選「編輯搜尋引擎」,在下拉選單找到剛剛新增的搜尋引擎設定。點選後可以看到裡面有許多跟搜尋引擎相關的設定。請選擇「外觀和風格」,我們要調整搜尋顯示的樣式,才會更完整嵌入 WordPress。

  • 版面配置:請使用「2 頁」,它會讓搜尋框跟搜尋結果分開顯示。
  • 圖片搜尋結果的版面配置:隨便選,自己開心就好。
  • 選擇或自定樣式:可以選擇自己喜愛的樣式,也可以自定,之後都可以再回來修改。

▼ 不太清楚怎麼選擇的話,可以參考我的設定圖片,照著選就好囉!記得按下儲存才會更新你的設定。

步驟三(重要!)

終於到重頭戲了!在「外觀與風格」的選單內,找到下方的「儲存並取得程式碼」,我們要在這邊設定 WordPress 的一些資訊。
點擊「搜尋結果詳細資料」,會跳出一個視窗:

  • 指定要顯示搜尋結果的目標網站完整網址:這邊請填上你的 WordPress 網址,就是你的搜尋結果網址。網址結構可以從 WordPress 自訂。我是寫 https://muki.tw/wordpress/search/
  • 指定網址的內嵌查詢參數名稱:請輸入 q

最後記得按下「儲存」喔。

▼ 可參考以下截圖的設定

Google 搜尋的設定先到此告一段落,接下來請打開你的 WordPress 後台,要開始修改 WordPress 的檔案囉。


修改 WordPress 設定

步驟一

請複製剛剛 Google 提供的程式碼,請參考圖片,先複製紅框處的

▼ 參考圖片的紅框處範圍,進行選取與複製。

步驟二

打開header.php,找到,在他的上面貼上剛剛你複製的那段程式碼。

步驟三

同樣在header.php,搜尋search關鍵字,這邊會根據佈景主題的寫法而有所不同。你有可能會找到這段程式碼:

PHP

或者是找到input這樣的表單語法:

PHP

不管是那一種呈現方式,我們要找的程式碼是用來「顯示搜尋框」的語法。找到的後請替換成:

PHP

步驟四

再來進入 WordPress 控制台,選擇「頁面」→「新增頁面」。我們要在這個頁面顯示 Google 的搜尋結果,所以請先將編輯器切換成「文字」模式,然後輸入以下語法:

PHP

接著我們要確認使用搜尋框之後,搜尋會跳到這一頁才對。還記得我們在設定 Google 搜尋的第 3 個步驟,有設定「指定要顯示搜尋結果的目標網站完整網址」嗎?我們要利用 WordPress 可以自定網址結構的特性,將這個 URL 新增到 WordPress 頁面的網址結構中。

我之前設定的網址是https://muki.tw/wordpress/search,所以我在固定網址的地方,只要打上search即可。

▼ 文字不懂沒關係,請看圖片示意:

最後按下「發表」,這樣使用 google 自訂搜尋框搜尋關鍵字之後,就會利用參數q代入我們的搜尋字串,然後將結果顯示在頁面上。

實際呈現結果,可以參考我的搜尋頁面:https://muki.tw/search/?q=muki

Google 搜尋框其他設定

要整合至 WordPress,最重要的步驟就是前面那大兩部分,包含在 Google 搜尋控制台,以及在 WordPress 的設定。最繁複的先做好,先讓 Google 搜尋框可以跑,後面的設定對你應該都是小兒科啦!

在「外觀風格」的選單,可以自由調整搜尋樣式;還有其他選單可以自行玩玩看,因為都是中文介紹,所以應該很好上手!

希望大家都可以自由打造屬於自己的搜尋喲~ enjoy it!

使用 sass 有效控管 z-index 圖層順序

利用z-index可以讓多個圖層互相重疊,這件事情已經不稀奇了。但假設今天碰到複雜的版面,需要很多個z-index圖層,通常我們會用99,100,101,9999… 這種無限上綱的的寫法。

但其實,這不是一種好的寫法,因為寫到最後你會不知道現在寫到哪個數字?如果是多人寫一份網站,維護也很不容易,說不定最後為了省麻煩,會 99999 不知道 9 到幾位數去 OTL…。為了解決這個問題,我們可以使用 SASS 幫我們有效管理z-index喲!

使用 SASS 管理 z-index

讓我們先從簡單的 Layout 來看,這邊有三個圖層,分別是header, nav, modal。我們最後希望的排列效果如下圖所示:

如果是用 CSS,只要注意每個圖層的先後順序,再指定相對大的值就可以了。寫法也如同圖片上的z-index數字。

接下來讓我們使用 SASS 換個寫法吧!

一開始我們先使用 SASS 的變數,幫每個 DIV 設定相對應的值:

Sass

element以及後面對應的值都可以依照你的喜好作調整。為了方便日後維護,將值寫成跟class相同是個不錯的選擇。

接著設定每個 class 的z-index

CSS

z-index會根據我們前面的設定,找到對應的數字填入。如果最前面的設定值有所更動,每次 compile 之後都會幫我們重新計算z-index,我們就不用因為多增加一個 div,而要回頭調整z-index的順序喲!

這並不是 SASS 為了解決z-index所提出的方法,我們只是單純利用 SASS 的 index function 幫我們做到這件事情。

index($list, $value)
// Returns the position of a value within a list.
(回傳 $value$list 裡的順序,也可看成是索引)

SASS index function

因此Function index回傳的會是一個索引值,我們就利用這個特性套在z-index身上,達成幫我們管理z-index的目標。

有了這個規律後,如果今天接到一個複雜的網站專案,也可以將z-index獨立出來做成一份_zindex.scss

Sass
_zindex.scss
Sass
style.scss

結論

雖然這只是一個 SASS Function 的簡單運用,但是卻很實用,所以在這邊分享給大家。對我來說,要手動管理z-index真的會很煩,用這種層級管理可以一目了然,又不用重新修改一堆程式碼,真的超好用的 XD。

用 css 讓區塊水平垂直置中

有時候我們需要做個前導頁或是簡單的名片形象頁,在內容不多的情況下,可能需要讓 DIV 垂直以及水平置中;除了 DIV 外,甚至連文字也需要垂直與水平置中。

就如同下圖範例,這是一個很簡單的名片形象頁,深灰色底是一個 DIV。可以看到除了 DIV 之外,文字也是垂直水平置中。

另外當你移動畫面時,他也會固定在畫面中央,不會因為視窗縮放而有任何跑版情況。(線上 DEMO 網址:http://codepen.io/mukiwu/full/Iuncz/

看起來很難的效果,其實只要短短幾行語法就能達成。就讓我們一步一步的拆解吧 🙂


DIV 垂直水平置中

先跟大家分享一張非常清楚的圖解,取自 Smashing Magazine 的大作。

(圖片來源:smashingmagazine

如圖所示,不管該元素(DIV)多大,我們都可以先用position: absolute 讓元素放在中央。

CSS

但事情可沒那麼簡單,利用absolute調整位子的基準,是從該元素的「左上角」開始算起。所以如果在 X 以及 Y 軸各設 50%,是針對元素左上角(紅色點)的 50%


▼ 因此該元素(DIV)位子會掉到淺灰色區塊的地方,但是紅點剛好在畫面正中央。

我們必須要再給予元素明確的高與寬,利用margin-top以及margin-left把元素往回推。往回推的數值就是(高/2)以及(寬/2)。如果高是300px,就往回推150px,依此類推。

最後垂直置中的程式碼會如下所示:

CSS

文字垂直水平置中

想讓文字水平置中,只要寫text-align:center就可以囉!算是置中規則裡最簡單的一種。

而垂直置中卻沒那麼直覺,單純寫上vertical-align:middle,瀏覽器是不會鳥你的。

垂直置中有很多種解法,今天跟大家分享其中一種,透過display改變元素的形態,進而讓垂直置中有用。

HTML 必須要有一組二層的巢狀結構:

HTML

利用 CSS 修改display

CSS

使用這種方法就可以讓文字垂直置中囉 ~。

延伸閱讀:In the Woods 有提供更多種垂直置中的解法,好處與壞處也寫得很詳細,可以參考看看。

最後你也可以將兩種垂直置中的效果合併在一起,完整的程式碼請參考我的 DEMO:http://codepen.io/mukiwu/full/Iuncz/

display: table-cell 無法使用 margin/ padding 的解法

只要是使用 HTML+DIV 排版的人,應該都很清楚table 是用來繪製表格,而非用來排版的這件事情。然而因為 DIV 真的太好用了,現在很多人幾乎都不知道table, tr, td… 該怎麼互相搭配與運用。雖然不清楚是哪些因素影響,但是 W3C 卻在 CSS 的display屬性裡面支援table值,讓我們可以使用 DIV 就做出跟 HTML 的 table 標籤一樣的效果。(該說是 CSS 跟 HTML 互打臉嗎?)

關於display: table的介紹與運用,知名部落客香腸已經有一篇很深入淺出的文章,我就不多贅述了。完全沒用過display: table的朋友、或想了解該怎麼使用的朋友,可以參考香腸的:用CSS+DIV畫表格(table)進行網頁排版

我這篇針對的族群,是已實際用過display: table的朋友,當你們在使用的時候,也許會碰到「間距調整」的問題,例如要在每一個table-cell裡頭設定margin等間距調整,卻發現修改無效。假設你碰過這種狀況,不妨參考一下我推薦的解法


話不多說,先上個範例!我使用圖片+圖說當作範例,例子包含:

  • 正常狀況下,圖片緊密排列
  • 使用margin調整的結果
  • 將寬度寫死的結果
  • 使用border-spacing調整的結果

如果看完例子還是似懂非懂,或想更了解原理的朋友,可以繼續往下閱讀喲。

正常狀況下,圖片緊密排列

一般我們要做水平排列的圖層,多半會使用floatdisplay等屬性設定。如果今天你有製表的需求,或是其它因素考量,也可以嘗試使用display:table達成。

display:table在預設情況下,只要我們給他一個寬度,裡面的元素就會自動依據總寬度分散對齊。

在這邊,因為每張圖寬為 120px,所以我先設定總寬是 480px,這樣他們就會緊密排列在一起,如下圖所示:

使用 margin 調整的結果

如果我們希望每張圖都有一點空隙,不要緊密排列的話。正常思維下,都會使用margin達成。因此我在範例二加入了這段語法:

CSS

▼ 顯示結果為(你可以嘗試將 10px 修改成 100px,會發現沒有任何作用):

因此可以發現,margindisplay:table*一家子是沒有任何作用的。透過 MSDN Document 對 margin 的介紹可以了解

Applies to: all elements except elements with table display types other than table-caption, table and inline-table
除了 display 為 table 的屬性不支援外,適用所有元素(包含 table-caption, table, inline-table )。

margin – CSS | MSDN

因為不支援margin,所以沒有任何效果也是正常的喔。

將寬度寫死的結果

既然margin沒有任何作用,我們可能會利用display:table分散排列的特性,手動設定寬度讓圖片對齊。

例如:4x120px + 5x5px = 480 + 25 = 505px

將整體寬度設定為 505px 後,就會根據寬度分散對齊,變成下面的圖片效果:

乍看之下達到了我們想要的效果,每張圖片中間都有間隙。但仔細研究後你會發現兩個問題:

  1. 第一張圖片的最左邊還是貼齊 div,沒有任何空隙
  2. 假使圖片超過四張,間隙就會消失了(因為圖片寬度寫死,所以沒彈性)

由此可知,將寬度寫死,絕對不是一個好解法。曾經嘗試過用這種解法的朋友,建議把它拋諸腦後吧!

使用 border-spacing 調整的結果

利用border-spacing,是目前普遍認為較適當的解法。

我們只要在display:table-cell的父層,也就是display:table這層加上第 3 跟 4 行的兩行語法就可以囉:

CSS

▼ 顯示結果如下

跟剛剛使用寬度寫死的範例圖片相比,可以方便每一張圖片的左右空隙都是一樣的,不管是第一張或是最後一張,都留有 5px 的空隙。

但因為我們必須將這個設定寫在父層,所以在image-list底下的所有display:table-cell都會套用此設定,如果有的 table 不想要有空隙設定,就必須單獨把 HTML 的結構拉出來,或是再用 CSS 權重覆蓋,算是比較麻煩的一點。

目前還無法只針對table-cell做調整,希望以後 W3C 可以增加更多對display:table*的支援度囉!

最後再看一次線上範例,加深自己的印象吧!請記得,將寬度寫死,絕對不是一個好解法喲 🙂

利用 css 讓 ul div 置中

我們常利用ul做選單、做列表、做頁碼 …等等,但會碰到一種狀況,是想讓ul置中,如果你直接寫text-align:center會發現ul完全不鳥你!

這是因為ul預設為display:block,所以如果想讓他置中,必須更改他的display狀態。

想瞭解一些 element 預設的 display 狀態,可參考以下資料:

CSS

摘自:Appendix D. Default style sheet for HTML 4

我提供兩種不同的結構,跟大家分享如何讓ul置中

ul 外還有父層 div

假設你的結構為「ul 還有父層」,亦即:

HTML

那我們可以在父層設定text-align,並修改uldisplay 狀態為 inline-block

CSS

ul 沒有父層

如果你的 HTML 結構中,ul沒有父層包覆,例如:

HTML

那我們可以利用 margin: 0 auto 以及 display:table 調整 ul

CSS

以上兩種方法供大家參考,可以針對不同的結構,採用不同的置中處理。