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

三月 28, 2014

小惡魔AppleBOY
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.

五月 7, 2010

小惡魔AppleBOY
AppleBOY
小惡魔 – 電腦技術 – 工作筆記 – AppleBOY is about »

tag cloud

» [筆記] iframe 父頁子頁呼叫函式 parent call function

紀錄 iframe 如何呼叫子頁或者是父頁函式,iframe 在現今 Web 2.0 時代已經不流行了,因為有很多問題的存在,例如對於 SEO 搜尋引擎也沒有幫助,但是也是很多人在使用,底下筆記心得,說不定之後會 google 到自己的文章,哈哈。

父頁(主視窗)呼叫子頁函式:

/* iframeID 是 iframe ID*/
window.iframeID.formSubmit();
/* ifr 是 iframe ID */
document.getElementById('ifr').contentWindow.formSubmit();

子頁(iframe)呼叫父頁(主視窗)函式:

parent.formSubmit();

如果有兩層

parent.parent.formSubmit();

注意 timing issue,等 iframe 視窗 load 完之後才可以呼叫 iframe function。至於如果取主視窗跟 iframe 的變數 value,可以利用 jQuery $(”#ID”) 方式來得到。

reference:
【程式】JS : parent , iframe function call
Access child function from iframe

Related View

四月 5, 2010

小惡魔AppleBOY
AppleBOY
小惡魔 – 電腦技術 – 工作筆記 – AppleBOY is about »

tag cloud

» [CSS] IE 6, 7, 8 FireFox hack 支援透明背景圖 background or img javascript

先前在國外部落格發現一篇非常好用的教學:Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters,裡面有提供一部教學影片,非常好用,也很實在,底下可以先看影片,看完大概就可以針對 IE, FireFox, Chrome 進行 CSS Hack。

目前網頁製作,要符合多瀏覽器跨平台(IE, Safari, Chrome, FireFox…等),就必須動到 CSS Hack,雖然 Google 已經宣稱不支援 IE6,但是很多單位,很多學校跟客戶都是使用 IE6 瀏覽器,不只國內這樣,國外大廠也都希望支援 IE 系列,包含 IE6, IE7, IE8,這時候就必須知道如何分別針對各種不同 IE 做設定,底下就來看看實做例子。

包含 IE8 底下瀏覽器

先看底下例子:

body {
 color: red; /* all browsers, of course */
 color : green\9; /* IE8 and below */
}

請注意 color 後面的 \9,這是 IE only 的 tag,不可以任意修改,只有 IE 瀏覽器可以讀取,請勿修改成 \IE 或者是 \8 這些都是不對的,您會發現IE8,IE7,IE6 所有文字顏色都是綠色,但是 FireFox 是紅色。

包含 IE7 底下瀏覽器

先看底下例子:

body {
 color: red; /* all browsers, of course */
 color : green\9; /* IE8 and below */
 *color : yellow; /* IE7 and below */
}

上面例子可以發現,重點是在 *color 前面的 *,只有 IE7 跟其版本底下才看的到效果,上面程式碼會得到,FireFox Chrome 瀏覽器字型顏色是紅色,IE8 會是綠色,IE7 則是黃色。

包含 IE6 底下瀏覽器

先看底下例子:

body {  
 color: red; /* all browsers, of course */  
 color : green\9; /* IE8 and below */  
 *color : yellow; /* IE7 and below */  
 _color : orange; /* IE6 */  
}

可以發現 _ 是屬於 IE6 所認得的字元,全部瀏覽器會是紅色,IE8 會是綠色,IE7 會是黃色,IE6 會是橘色,這些都是 CSS Hack 的方法,大家可以注意到本篇重點就是在 \9 * _ 這三個符號,這三個符號針對了 IE8 IE7 IE6 這三個瀏覽器 CSS 的 Hack,也請大家注意優先權順序,如果把順序兌換,改成底下:

body {  
 color: red; /* all browsers, of course */  
 _color : orange; /* IE6 */
 *color : yellow; /* IE7 and below */
 color : green\9; /* IE8 and below */  
}

可以去看看會出現什麼結果?

IE6 Png 透明背景修正,以及 background-image filter

大家都知道 IE6 不支援透明背景 PNG 圖檔,所以網路上有很多解法,一種就是針對 img tag 做處理,另一種就是設定在 css background 的 IE6 filter,底下提供兩種不同狀況解法,第一種是 js 修改 img tag PNG 圖檔:這是網路上寫好的 js 檔案

/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/


var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

存檔之後,請在 header 中間加入底下:

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

另一種就是 css 狀況解法:

#pic{
 background-image: none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/test.png', sizingMethod='scale');
}

如果要針對 IE6 瀏覽器,請改寫為

#pic{
 background-image: url('./images/test.png');
 _background-image: none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/test.png', sizingMethod='scale');
}

這樣就可以了。當然您可以針對 IE6 去 import 不同 CSS 檔案

<!--[if lt IE 7]>
 <style type="text/css">@import'ie6BradHack.css';</style>
<![endif]-->

另外就是要提一下 html 針對不同 IE 的 hack,這是微軟在 IE5 就開始支援的功能,在 html 註解都是使用 ,這是所有瀏覽器都看得懂得註解,那微軟針對 IE 有提供不同的方式來針對各種 IE 瀏覽器版本進行 Hack,例如底下:

<!--[if lt IE 7]>
 我是 IE6 才會執行
<![endif]-->
<!--[if IE]>
 IE 才會執行的內容
<![endif]-->
<!--[if gte IE 8]>
 只有IE8以上(包含IE8)才會執行內容
<![endif]-->
<!--[if !IE]>-->
 <p>您正在使用的瀏覽器不是 ie 。</p>
<!--<![endif]-->

大致上是這樣,如果有任何問題,可以提出來一起討論,CSS Hack 真是好玩 ^^。因為以前在學校常常被 IE6 折磨所整理出來的 Q&A。希望對於 CSS 愛好者有幫助。

reference:
Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters
Conditional Comments [if IE] : IE 專用 (IE only) 條件式 HTML 註解的語法
IE6支援PNG透明背景 CSS設定

Related View

support:

biggo.com.tw

A Django site.