聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

三月 28, 2014

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

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

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

討論列也有人提到,是否可以跟 [Google 一樣直接捨棄 IE8 及 IE9],可以看到

As previously announced, Internet Explorer 11 launched on October 17, 2013, and as a result, we’ve discontinued support for Internet Explorer 9.

Google 的做法相當棒

At Google, we’re committed to developing web applications that go beyond the limits of traditional software. Our engineering teams make use of new capabilities available in modern, up-to-date browsers. That’s why we made the decision last year to support only modern browsers, which also provide improved security and performance.

二月 13, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 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。

十一月 1, 2011

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» HTML5 placeholder attribute 在 IE 上顯示

程式設計師在網頁表單上通常會設計很多提示的功能,而在 Html5 提供了 placeholder attribute 這功能,目前 FireFox Safari Google Chrome 都沒有顯示上的問題,唯獨 IE8(含以下)都沒辦法顯示這功能,所以必須透過 javascript 來解決這部份問題了,網路上找到這篇解決方式,底下是原始碼

<!--[if IE]>
<script type="text/javascript">
// A no-dependancy quick and dirty method of adding basic
// placeholder functionality to Internet Explorer 5.5+
// Author: Jay Williams <myd3.com>
// License: MIT License
// Link: https://gist.github.com/1105055

function add_placeholder (id, placeholder)
{
    var el = document.getElementById(id);
    el.placeholder = placeholder;

    el.onfocus = function ()
    {
        if(this.value == this.placeholder)
        {
            this.value = '';
            el.style.cssText  = '';
        }
    };

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

    el.onblur();
}

// Add right before </body> or inside a DOMReady wrapper
add_placeholder('myInputField', 'IE Placeholder Text');

</script>
<![endif]-->

解決原理其實很簡單,那就先將 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")

Related View

四月 2, 2011

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

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

PHP

CSS

Html5

Git:

Javascript:

FreeBSD:

C/C++

Linux

Python

Android

CodeIgniter

Embedded System

Related View

八月 23, 2010

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Html5 模板架構(Boilerplate)

今年在 COSCUP 大會上最主流的議題就是 Html5,今天看到一個網站 HTML5 Boilerplate,這網站提一個全新 html 5 模板,自從離開 Dreamweaver 樣板軟體,利用 Pspad 手動撰寫 html,此網站就發揮非常大的用處,提供全新 html,CSS 以及 javascript,支援了底下很多功能: ...詳全文(共366字)

support:

biggo.com.tw

A Django site.