The Front Row

Posts match “ css ” tag:

使用 CSS Radial Gradient 模擬彎曲陰影

彎曲陰影示意圖

其實我也不知道用中文到底怎麼稱呼這個東西，找了一下英文叫做 Curved Shadow。

這類的陰影其實也蠻常見了，上圖示範的是有點像紙張中間隆起造成的陰影、另外一種常見的是紙張中間凹陷、兩邊捲起造成的陰影。最直覺上就是在 Photoshop 裡面先做好再轉成圖片出來，不過我一直都很懶得做圖片──另一方面，圖片也蠻不彈性的。

Read on

手動調整 Responsive 中日文斷行的實驗

前幾天，敝社的產品 Logdown 上了新翻譯完成的日文 Landing 首頁。這版 Landing 頁，我有做 Responsive Web Design1，讓網頁能稍微有點彈性地適應各種瀏覽寬度、而不至於看起來活像是壞掉。不過在日文的大標題填上去之後，稍微遇到了一個問題──他實際上佔的長度蠻寬的，比一開始的英文大標還要寬──而這讓他在小螢幕上面會產生斷行。

當然我可以透過 Media Query 的方法，確保他的字體在每個寬度都縮小到不致於斷到下一行，不過字體太小的標題顯然很難看起來像是「大標題」。試著實際拉了一下瀏覽器視窗，覺得還是讓他保留一定的字體大小而斷行比較好。不過在這邊引發我的興趣：要怎麼斷行，可以讓他盡量斷在「詞」的邊緣，而不是斷在「詞」的中間？

Read on

新版 Safari 9 對於開發者的幾項要事

在 OS X El Capitan 的測試版中，也放入了下一版的 Safari。雖然 beta 1 裡面的其實是 Safari 8.1，不過已經具有跟官網上介紹的 Safari 9 同樣功能，預計應該再下一版 beta 就會提昇版號了。簡單玩過之後，有注意到幾件事情比較有趣，而且跟網頁開發者比較有關的：

ECMAScript 6

Safari 9 一次補齊了一堆缺很久的 ECMAScript 6 新標準實作，官方給出的清單有下列項目：

  • Classes
  • Computed Properties
  • Weak Set
  • Number Object
  • Octal and Binary Literals
  • Symbol Objects
  • Template Literals

而在 ECMAScript 6 compatibility table 上可以看到，新的 Safari 進度直接飆到 52%（Safari 8.0.6 只有 20%），差不多追上了最新的 Webkit build、甚至還超過了 Chrome 的 48%。

Screenshot of ECMAScript 6 compatibility table

瀏覽器語系偵測

Update (7/18): 安裝了 El Capitan DP 3 1.0 (15A216g) 之後，Safari 9 的 navigator.language 又變回 zh-tw 了。

在系統設定主要語言為繁體中文、且地區為台灣的情況下，打開 iCloud 網站竟然是出現簡體介面。所以我在 console 下面檢查了 navigator.language，發現新版的 Safari 9 吐出來的結果是 zh-hant、而不是以前的 zh-tw 了。

雖然某種程度上可以理解這是因為台灣不是唯一使用繁體中文的地區，因此 zh-hant 會比 zh-tw 更適合來描述「繁體中文」這件事，但是如果網站是透過比對這個來決定介面語言的話，就可能在這邊出錯而 fallback 成 zh ──然後就變成簡體中文了。

還不確定這個未來會不會修改，不過如果你的網站有偵測瀏覽器語言，就會需要留意這個問題。

Screenshot for Safari 9 console

Unprefixed CSS 屬性

同樣在《What's new in Safari 9.0》文件中，提供了一份正式脫離 vendor prefix 的 CSS 屬性清單。大致上來說是關於 Transition、Animation、CSS Flexbox 跟 CSS Columns 的相關屬性。不過如果平常開發時有在用 autoprefixer 之類的工具的話，其實也就不用太煩惱了，丟給它處理就好XD

釘選分頁的 icon

Safari 9 終於支援了「釘選分頁」的功能。不過被釘選的分頁上顯示的是單色的 icon，不支援現行彩色的 favicon。官方建議是使用前景為 100% 黑色、透明背景的 svg 作為 icon 本身，然後在 <head> 裡面加一行 <meta> 標籤來指定 icon 的顏色。

<!-- 這行要放在其他 <link rel="icon"> 的前面，才不會蓋掉彩色的 favicon -->
<link rel="icon" sizes="any" mask href="website_icon.svg">

<meta name="theme-color" content="#ff0000">

Update (6/11): 經過實測，<link rel="icon"> 那行必須放在 <link rel="apple-touch-icon"> 的後面，不然 Safari 會試圖用 apple-touch-icon 來作為釘選分頁的 icon（然後就會失敗。）

其他

其他還有蠻多沒有在發表會上宣布的新功能，建議有興趣的話可以逛一下《What's new in Safari 9.0》。