What 3.0 改版上線

Category: HTML & CSS

  • How to disable phone number linking in Mobile Safari?

    同事問了這個問題，如何將 iOS webview 裡出現的電話連結移除，因為畫面中出現了不是電話的數字，卻被系統自動加上了電話連結。 有一個非常簡單的方法，在 HTML 檔案的 <head> 區段加一行宣告即可。 <meta name = “format-detection” content = “telephone=no”> 這行宣告會停用所有的電話連結。若是反過想要在停用的情況下，加上例外，則可以自行宣告電話連結，語法如下： <a href=”tel:0932123456″>0932123456</a> 主要就是用 tel: 關鍵字來達成。

  • Smooth Touch Scrolling in iOS with -webkit-overflow-scrolling

    在開發一個兼容 iPad 的網站專案時，發現 <div style=”overflow: scroll;”> 在 iOS 下捲動很不順暢，手感很糟糕。好奇地搜尋了一下，找到一個 webkit 特有的語法：-webkit-overflow-scrolling: touch。加上這個屬性後，在 iOS Safari 上連回彈的效果都出來，手感與原生程式無異。 可惜 Android 上的 Chrome 似乎沒有作用，有點希望這屬性能成為正式語法。 範例先丟在 Codepen，不過看來要註冊才能 embed，先醬。 http://codepen.io/anon/pen/oXvjvJ

  • Bookmark: PNotify, JavaScript notifications

    Bookmark: PNotify, JavaScript notifications

    對 programmer 來說，Bootstrap 真的是一套非常便利前端框架，使用簡便、功能完整。但是一直覺得 Bootstrap 缺少了關於 notification 的解決方案。雖然有內建 alert 的效果，但這個 alert 是會佔據畫面空間的，我之前是透過擴充 CSS 的方式來實現 alert 浮空的效果。 最近用 Laravel + Bootstrap 的組合來修改個人網站，就順便找找有沒有現成的 notification 套件，結果不費吹灰之力就找到這個看起來功能超完整的 solution…. PNotify。 語法與設定都相當簡單，支援的效果和情境也夠豐富，就決定用它了。

  • Pure CSS One Div Weather Animated Icons

    用純 CSS 做出來的天氣動畫圖示，真厲害 See the Pen Pure CSS One Div Weather Animated Icons by Fabrizio Bianchi (@fbrz) on CodePen.

  • Bookmark: CSS Text Filling With Water

    用 CSS 與 Javascript 模擬出液體填充的效果，附上實際的效果。 See the Pen CSS Text filling with water by Lucas Bebber (@lbebber) on CodePen CSS Text filling with water – CodePen

  • Bookmark: CSS Number Scroll

    Bookmark: CSS Number Scroll

    用 CSS 和 Javascript 製作數字轉動的效果，還沒用過，先留個書籤。 CSS Number Scroll

  • The correct meta viewport syntax

    根據 Apple Web Content Guide 的說明，在撰寫手機版或給特定裝置的網站時，可以在 <head> 中用 <meta> 標籤來設定 viewport 相關的設定。 不過通常這段設定都是 copy / paste，然後再根據需求調整參數。在開新專案的時候也貼了前人的 code，但是卻注意到 Chrome 裡會有錯誤訊息，無法識別這段設定。 Viewport argument value “device-width;” for key “width” not recognized. Content ignored. Viewport argument value “1.0;” for key “initial-scale” was truncated to its numeric prefix. Viewport argument value “1.0;” for key “maximum-scale” was truncated to its numeric…

  • Creating Retina Images for Website

    最近在撰寫一個給 iOS UIWebView 用的迷你網站，在等待設計師繪製網站圖片的時候，好奇地看起來了一些關於視網膜螢幕 (retina display) 的資料。順便找了些用 CSS 顯示 retina image 的資料。 感謝行動平台上的瀏覽器對 CSS3 的普遍支援性，透過 CSS3 的 media queries 來分辨平台就可以切換內容了。 .navbar { background-image: url(‘../img/button01.png’); background-size: 320px 49px; } /* — for Retina Display — */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio:…

  • Bookmark: Google HTML/CSS Style Guide

    這是 Google 的 HTML / CSS 編寫指南，用以解決大型專案或多人開發情境下程式碼風格混亂的現象。內容淺顯易懂，部份寫法是針對 HTML5 最佳化。   updated on 2017/02/03 : 原連結已失效，更新為 https://google.github.io/styleguide/htmlcssguide.xml Google HTML/CSS Style Guide  

  • CSS: How To Use @font-face

    過去在開發網站時，字體的選擇一直都很保守，因為每個瀏覽器與作業系統對字型的支援很有限，幾乎就那幾種安全字型可以用。不過自從 CSS 多了 @font-face 這個指令後，事情開始有了些微的變化。@font-face 允許設計師在 CSS 指定特殊別的字型，瀏覽器會根據設定去下載這個字型來顯示，就像 background-image: url(‘link/to/image’); 一樣，瀏覽器會下載背景圖來顯示。

  • Image Problems in HTML Emails

    身為一個 PHP 工程師，寫過好幾支 Email 程式也是很正常的經歷，尤其是寄送廣告傳單 EDM 之類的功能。EDM 還是很多公司行號及機關愛用的行銷模式。美術人員製作 EDM 的時候通常會將廣告內容製成一張大圖，然後根據各個連結或功能來切割圖片，最後用表格 <table> 標籤來排版。雖然聽起來很古老，不過因為在 Email 裡能使用的 HTML、CSS 有限，所以老派的做法有其優點。

  • CSS 變更選取文字的背景色

    在 CSS3 的規範中，多了一些選擇器 ( selector ) 的定義，提供設計師更多元的元素操作方法。其中一項新增的選擇器是 ::selection，表示被選取的文字。 透過這項選擇器便能做出不同的選取區背景色。簡單的範例如下 <style> p.yellow::selection { background: #fff2a8; } p.yellow::-moz-selection { background: #fff2a8; } </style> 選取以下的文字試試 If you want a reason as to why this decision has been made, Blizzard is happy to provide you with two. The first is of course piracy, which they believe an always-connected game…