html5-boilerplate 打算不支援 IE8 瀏覽器

html5 boilerplate 是一套免費前端 Html5 模板,裡面支援 Normalize.cssjQuery (透過 Google CDN 或本地端讀取) 及 Modernizr,目前支援 IE 8 以上瀏覽器,但是最近看到官方正在討論是否該拿掉 IE 8 支援,原因是 Microsoft 今年宣佈 2014 年 4 月 8 日以後將不再支援 Windows XP,討論中也提到目前 IE 8 的市占率,其實還不小,雖然大部分使用者可能來自亞洲

Continue reading “html5-boilerplate 打算不支援 IE8 瀏覽器”

HTML5 Boilerplate 不再支援 legacy browser

HTML5 Boilerplate 在 V5.0 版本將不支援舊有瀏覽器,包含 IE6/7. Firefox 3.6 (Mozilla 已經不再維護) 及 Safari 4,詳細資料可以參考 V5.0 的 Milestone (Drop legacy browser support) 下一版本會有哪些改變呢?
  • html tag 將不會出現 conditional comments
  • normalize.css 升級到 2.1.x
  • main.css 移除 IE6/7 Hacks 部份
此次重大改變包含移除 IE conditional classes,因為 IE 10+ 將不再支援 conditional comments,至於 normalize.css 轉換到 2.1.x 版本,如果有用 Sass 的朋友們,可以參考我改的 normalize.scss,非常期待 Version 5 出來,會拿掉很多 legacy code。

HTML5 placeholder attribute 在 IE 上顯示

程式設計師在網頁表單上通常會設計很多提示的功能,而在 Html5 提供了 placeholder attribute 這功能,目前 FireFox Safari Google Chrome 都沒有顯示上的問題,唯獨 IE8(含以下)都沒辦法顯示這功能,所以必須透過 javascript 來解決這部份問題了,網路上找到這篇解決方式,底下是原始碼
解決原理其實很簡單,那就先將 placeholder 寫入到 input value 裡面,在 focus event 當下比對 input value 是否等於 placeholder 的值,如果是就清空,反之透過 onblur event 來寫回原先的 placeholder 值,缺點就是如果當 input type = password 的時候會很麻煩。底下提供轉成 CoffeeScript 的程式碼:
add_placeholder = (id, placeholder) ->
    el = document.getElementById(id)
    el.placeholder = placeholder

    el.onfocus = () ->
        if(this.value == this.placeholder)
            this.value = ''
            el.style.cssText  = ''

    el.onblur = () ->
        if(this.value.length == 0)
            this.value = this.placeholder
            el.style.cssText = 'color:#A9A9A9;'

    el.onblur()

# Login Form
add_placeholder('myInputField', 'IE Placeholder Text')
如果有用 jQuery 的話,可以把第二個參數改寫成
$("#input_id").attr("placeholder")

[網站] 好站連結 (八) Android, javascript, CSS, PHP, Perl, FreeBSD, Linux

PHP CSS Html5 Git: Javascript: FreeBSD: C/C++ Linux Python Android CodeIgniter Embedded System

Html5 模板架構(Boilerplate)

HTML5 Boilerplate - A rock-solid default for HTML5 awesome._1282574693481 今年在 COSCUP 大會上最主流的議題就是 Html5,今天看到一個網站 HTML5 Boilerplate,這網站提一個全新 html 5 模板,自從離開 Dreamweaver 樣板軟體,利用 Pspad 手動撰寫 html,此網站就發揮非常大的用處,提供全新 html,CSS 以及 javascript,支援了底下很多功能:
  • 跨瀏覽器 (IE6…)
  • 支援多種 html5 Tag
  • Compress 和 cache html 檔案
  • CSS IE6 , IE7 Hack
  • IE6 Png Fix (連這個都幫忙解決了)
  • 支援 CDN jQuery,避免在 local 端沒讀取到檔案
你還可以根據自己需要的功能做添加或者是減少,CSS reset、跨瀏覽器 CSS、robots.txt、Apache .htaccess cache 壓縮也有支援,如果不需要的功能,也可以參考看看,對於初學者也是非常好的學習例子。