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 瀏覽器”

Javscript 18 歲生日歷史演進

resin.io 看到這篇 Happy 18th Birthday JavaScript! A look at an unlikely past and bright future. 裡面有些 Javascript 發展史,蠻有趣的,分享給大家看看。18 年前由 Netscape 和 Sun 共同 Release Javscript,在當年18天後,Ruby 也同時發佈了,底下來看看 Javscript 歷史演進。 Continue reading “Javscript 18 歲生日歷史演進”

jquery-serialize-object 不支援 IE7,8 瀏覽器?

最近專案需求用到 jQuery Serialize Object plugin,它能夠自動將 Form 表單內的值,全部轉成 object 或 json 字串,減少開發者每次都要寫抓取 Form 表單內全部欄位的值。此套件安裝及使用方法都很容易,安裝可以透過 Bower 方式,或者是下載 source code 直接 include 即可,在 IE 7 或 8 為什麼沒辦法使用呢,原因是作者使用了 Array.prototype.forEach,此語法需要 JavaScript 1.6 版本,很抱歉,在 IE8 並不支援 forEach 寫法,所以 Mozilla Javascript 開發者文件內有提供 Compatibility 方法: if (!Array.prototype.forEach) { Array.prototype.forEach = function (fn, scope) { 'use strict'; var i, len; for (i = 0, len = this.length; i < len; ++i) { if (i in this) { fn.call(scope, this[i], i, this); } } }; }[/code] 但是既然這是 jQuery Plugin,就可以透過 jQuery 內建的 each 函式來解決,最後發了 Pull request 給作者,就看作者收不收了 XD

IE 6 瀏覽器用戶全球分佈

IE_world
此資料來自 The Internet Explorer 6 Countdown,大家注意上面圖示,沒想到台灣高居第二名,佔了 3.5% 僅次於大陸的 24%,大陸不感到意外,但是台灣的比例還真是高,難怪一堆程式開發者,抱怨連連 XD,這是統計到 2013 年 04 月,在這邊紀錄一下,等到明年這個時候再來看看此統計圖。

Backbone Routing pushState in IE

backbone
Backbone.js 幫忙處理掉所有瀏覽器 Html5 History pushState 功能,除了 IE 9 以下(含 IE 9)不支援 history.pushState()history.replaceState(),其他 Browser 幾乎都支援了,在 Backbone.js 如何處理 URL 變化呢?以往透過 handle URL hash 來決定網頁要處理哪些資料,這也是 Backbone 預設的處理方式,範例如下 URL:
http://xxx/#!/user/list http://xxx/#!/user/add
Continue reading “Backbone Routing pushState in IE”

[小技巧] JavaScript Cross Browser Best Practices

ie-logo-small
先前寫了一篇 modern.IE 的使用方式及介紹,今天在 Facebook 上看到 Eric Shangkuan 說已經有了中文介面,如果你的瀏覽器是中文版,應該就可以直接看到中文介面了,裡面有篇文章非常重要,寫 Web 的工程師都必須注意,那就是 Cross Browser Best Practices,這篇文章教您如何撰寫相容於舊版 IE 瀏覽器的一些小技巧,這些技巧也不只用在 IE 上,更是教您在實做 CSS,JavaScript 的注意事項。我們來看看 Javascript 的小技巧。 Continue reading “[小技巧] JavaScript Cross Browser Best Practices”

[jQuery] 解決 IE6 PNG 透明背景 (Supersleight jQuery Plugin for Transparent PNGs in IE6)

今天無意間看到 Drew McLellan 在 2007 年寫了這篇 Transparent PNGs in Internet Explorer 6,真的是太晚發現這篇了,之前自己寫到一篇:『[CSS] IE 6, 7, 8 FireFox hack 支援透明背景圖 background or img javascript』,雖然 Google 官方網站宣佈完全不支援 IE6 瀏覽器,打算只支援 Microsoft Internet Explorer 7.0+, Mozilla Firefox 3.0+, Google Chrome 4.0+, Safari 3.0+,可是我們這些 Web Developer 還是需要考慮客戶的瀏覽器阿,因為客戶才是最大的,尤其是在一些學術機構,安裝好 XP,預設就是 IE6,從 Google 分析裡面,IE6 也是網站的客戶大群。

先來介紹 Drew McLellan 寫的一支好用 js 來改善所有 png 透明圖檔,最主要是修正 background-image 跟 img tag 所包含的 png 圖檔

  1. 先下載:Download SuperSleight,解壓縮放到 js 資料夾

  2. 針對 IE6 瀏覽器寫入 html

    <!--[if lte IE 6]>
    <script type="text/javascript" src="supersleight-min.js"></script>
    <![endif]-->
    

來分析 supersleight.js 檔案,看它是如何運作,底下是完整程式碼:

var supersleight = function() {
    var root = false;
    var applyPositioning = true;
    // Path to a transparent GIF image
    var shim = 'x.gif';
    // RegExp to match above GIF image name
    var shim_pattern = /x.gif$/i;
    var fnLoadPngs = function() {
        if (root) {
            root = document.getElementById(root);
        }else{
            root = document;
        }
        for (var i = root.all.length - 1, obj = null; (obj = root.all); i--) {
            // background pngs
            if (obj.currentStyle.backgroundImage.match(/.png/i) !== null) {
                bg_fnFixPng(obj);
            }
            // image elements
            if (obj.tagName=='IMG' && obj.src.match(/.png$/i) !== null){
                el_fnFixPng(obj);
            }
            // apply position to 'active' elements
            if (applyPositioning && (obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position === ''){
                obj.style.position = 'relative';
            }
        }
    };
    var bg_fnFixPng = function(obj) {
        var mode = 'scale';
        var bg  = obj.currentStyle.backgroundImage;
        var src = bg.substring(5,bg.length-2);
        if (obj.currentStyle.backgroundRepeat == 'no-repeat') {
            mode = 'crop';
        }
        obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')";
        obj.style.backgroundImage = 'url('+shim+')';
    };
    var el_fnFixPng = function(img) {
        var src = img.src;
        img.style.width = img.width + "px";
        img.style.height = img.height + "px";
        img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
        img.src = shim;
    };
    var addLoadEvent = function(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            };
        }
    };
    return {
        init: function() {
            addLoadEvent(fnLoadPngs);
        },
        limitTo: function(el) {
            root = el;
        },
        run: function() {
            fnLoadPngs();
        }
    };
}();
// limit to part of the page ... pass an ID to limitTo:
// supersleight.limitTo('header');
supersleight.init();

bg_fnFixPng: 針對背景圖修正 el_fnFixPng: 針對單一 element 修正 fnLoadPngs: js 主要 function,會使用到上述兩個 function

列出 supersleight 特性:

  • 針對 inline and background images tag 作處理修正
  • 可以針對特定區域進行 PNG 透明修正,加速網站 Performence (預設是針對整個 body 進行轉換)

第二點的意思是說,本來是寫 supersleight.init(); 針對整個 body 作轉換動作,可以改為 supersleight.limitTo(“header”); 假設您知道只有 header element 需要進行 PNG 的轉換,就可以使用此語法來加速網站執行速度。

jQuery Plugin

Supersleight jQuery Plugin for Transparent PNGs in IE6 作者也寫了 jQuery Plugin,造福了 jQuery 使用者,使用方式也相當簡單。

可以針對單一區域進行變換

$('#content').supersleight();
或者是針對整個 body
$('body').supersleight();
因為 plugin 需要 transparent GIF shim image,所以將語法改成:
$('body').supersleight({shim: '/img/transparent.gif'});