2012年9月2日 星期日

什麼是CDN?

最近在找jQuery的版本時發現的一個新名詞(對我來說...)

之前有過因為在蒐尋主機伺服器,結果發現也貫上"CDN"名詞,當時並不以為意的說...
後來才又在搜尋jQuery中又聽到這個字

CDN是什麼?

CDN是Content Delivery Network(內容傳遞網路)的縮寫,運用機制將檔案複製到全球各地的區域性伺服器,當使用者需要內容時,可以依距離就近取得,縮短傳輸時間,提高系統運作的流暢性。近年來,JavaScript Library在網頁開發扮演的角色日益吃重,常常一個網頁中就要載入數十個js檔,且隨著JavaScript功能的豐富化,js檔也愈來愈肥,於是GoogleMicrosoft及一些廠商組織開始提供CDN式JavaScript來源。 

對於網頁開發者而言,傳統做法是將要引用的js檔下載統一放在網站的特定目錄下(例如: /inc, /js, /Scripts...),現在則多了CDN的選擇,將網頁的<script>來源由../Scripts/jquery-1.7.2.min.js改成httq://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js後,使用者便可透過CDN的大頻寬快速下載js檔,若使用者先前拜訪其他網站已從該CDN下載過同一js,還可直接使用Cache中的暫存複本,連下載動作都省起來。如此一方面能改善網頁載入速度,一方面還可以減少自家網站流量,省下頻寬費用,除了檔案在自家掌握之外的不確定風險(自家網站的妥善率通常不比Google/Microsoft CDN高,所以不用太擔心,但不適合需客製化或指定特定版本的場合),選用JavaScript Library CDN是不錯的策略。


以上內容轉貼至黑暗執行緒:http://blog.darkthread.net/post-2012-06-02-my-js-cdn-list.aspx

好物好物~
對於空間與頻寬吃緊的"個人"前端開發者來說,這絕對是最好的選擇(反正頻寬都吃大廠的阿哈哈哈)。

內容補充:http://ten2.tw/blog/amazon-cloudfront-cdn/

2012年2月2日 星期四

使用PIE讓IE7~8支援CSS 3 屬性

以目前來說...IE就算進步到IE10,但他下面的孩子們789還是不支援,當我需要使用漸層(或CSS3其他的語法)到IE的作法時,就會碰到那不支援,這不支援的...

於是網上找了一些解決方式,以下介紹一個我用了還蠻方便的作法(當然不是我寫的=  =)
不想看的可以直接看這裡:http://css3pie.com/about/

PIE (progressive internet explorer)

目前 CSS3 PIE 的支援語法
PIE currently has full or partial support for the following CSS3 features:

border-radius: 圓角
box-shadow: 區塊陰影
border-image
multiple background images
linear-gradient as background image: 漸層顏色
詳見: About PIE
註: CSS3 PIE 是使用 .htc 的 hack 方式
使用 CSS3 PIE 官方文件
Getting Started – CSS3 PIE: CSS3 decorations for IE


如何使用:
1.下載PIE
2.將你在ie上需要css3地方加入
"-pie-background: linear-gradient(#EEFF99, #66EE33);
 behavior: url(/PIE.htc);"
例如:
.boxGradient{
  border-radius: 2px;
  /*讓IE支援漸層的語法*/
-pie-background: linear-gradient(#fff, #e1e0dd);
behavior: url(pie/PIE.htc);
}

3.執行IE觀賞美麗的CSS3漸層

-------------------------------------------------------------------------
後記:
還真的有用!!
但IE7、8、9呈現出來的感覺還是有點不一樣,7跟8比較相近,9的陰影呈現跟圓角反而怪怪,大概有1px的差距


網路上的怪招真的很多........

參考網址:
http://css3pie.com/documentation/getting-started/
http://blog.longwin.com.tw/2010/07/favorite-css3-pie-2010/

//2012/6/5 補充
ie如果使用了PIE之後呢,在包覆這個樣式的外層DIV,就不能在設定background屬性,這樣會影響PIE的背景顯示,意思就是說,如果你有依靠PIE設定div的背景色,那包覆此div的外層div就不能另外設定背景色,裡面設定PIE的div會直接吃到外層的div的 background屬性。


解決方式:在pie外層加上position:relative與z-index:1樣式即可解決(目前是用此解決,如後續遇到問題在繼續補充)
參考pie3 Known Issues http://css3pie.com/documentation/known-issues/#relative-paths

//2012/7/4 補充
ie7還是出現了一大塊底色...這邊我就真的投降了...只好寫ie hack 放棄PIE了...希望有高手解答..
環境是php,作了一個a連結的按鈕讓user滑過時出現陰影的效果...


CSS3‧漸層


CSS3的漸層語法,在各瀏覽器的語法略有不同,分別說明如下:


Chrome / Safari 4+:


/*由上到下*/
background:-webkit-gradient(linear, left top, left bottom, from(#00475E), to(#007276));


/*由左至右*/
background:-webkit-gradient(linear, left top, right top, from(#00475E), to(#007276));


/*在Chrome 10 之後語法可簡化為:*/
background:webkit-linear-gradient(top, #00475E, #007276);


Firefox 3.6+
/*由上到下*/
background:-moz-linear-gradient(top, #00475E, #007276);


/*由左至右*/
background:-moz-linear-gradient(left, #00475E, #007276);


IE6~IE8
基本語法 
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00475E', endColorstr='#007276'); 


參數說明 
上下漸層GradientType=0 
左右漸層GradientType=1 
漸層起始色彩startcolorstr=# 
漸層結束色彩endcolorstr=# 




跨瀏覽器綜合語法
body {
        /*預設背景顏色, 讓不支援漸層的瀏覽器能呈現基本底色*/
        background: #278092;
        /******跨瀏覽器的底色漸層CSS語法 (由上到下)********/ 
        /*Chrome的語法*/
        background:-webkit-gradient(linear, left top, left bottom, from(#00475E), to(#007276));
        /*FireFox的語法*/
        background: -moz-linear-gradient(top, #00475E, #007276);
        
        /*IE6~IE8的語法*/
        filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00475E', endColorstr='#007276');
        /* Opera 11.10+ */
        background: -o-linear-gradient(top, #00475E, #007276);
        margin: 0px;
}
--------------------------------------------------------------
後記:
上述語法精我實際測試後,Opera沒有安裝..= =和除了ie的效果不知道為什麼出不來外
其他皆能呈現我要的效果測試OK


引用網站:
http://mepopedia.com/forum/read.php?844,17157,17157#.E4.B8.89.E3.80.81.E8.B7.A8.E7.80.8F.E8.A6.BD.E5.99.A8.E7.B6.9C.E5.90.88.E8.AA.9E.E6.B3.95
參考資料: 
CSS Tricks: http://css-tricks.com/examples/CSS3Gradient/ 
CSS3 Maker: http://www.css3maker.com/

2011年12月8日 星期四

簡易解決圖片置中問題(自認為....)

基本上...這只能解決有固定高度與寬的DIV內的圖片置中,如果不設定高度與寬度...就會無法呈現上下左右圖片置中問題...

可先參考此篇:http://www.cnblogs.com/shabingliang/archive/2008/09/15/1291115.html
(以上此篇隨邊找都能找到一模一樣的內容文章...真的是相似度極高阿...)

以下是我針對實作修改後的樣式


<style>
.photoLists { width:201px; height:134px; position:relative;}
.photoBox { position:absolute; left:-1px;}
.photoListImg { float:left; margin:1px; background:#CCC url(/img/album/photoBg.gif);}/*設定放圖片的樣式
.photoLists a {
 /*非IE的置中方法*/
 display: table-cell;
 vertical-align:middle;
 text-align:center;

 /*針對IE的hack */
 *display: block;
 *font-size:56px;/*約為高度的0.873,65*0.873 約為56 (PS1.要將放置圖片的div高度乘以0.873倍*/)
 *font-family:Arial;/*防止非utf-8引起的hack失效,如gbk編碼*/

 width:65px;
 height:65px;
 }
 .photoLists img {
 /*設置圖片置中*/
 vertical-align:middle;
 }

</style>

<div class="photoBox">
<div class="photoListImg">
<a href="#">
<img src="img.gif" width="50" height="50" />
</a>
</div>
</div>
--------------------------------------------------------------------------------
所以以上..解決了我在三大瀏覽器上的圖片置中問題
firefox、chrome、IE7.8.9 都OK
雖說有點怪招,卻很簡易....自己試了很久都試不出來,GOOGLE一下就試出來了
(GOOGLE真是神)

PS1.關於0.873是怎麼來的,上網又查了一下..說是:"抓出特定字型在 IE font-size 和所產生行高的比例,然後就以此比例來算出要垂直置中 font-size 該設多少。他算出來字型 Arial 的比例是 0.873"....balabala..
此篇還有額外的應用實例可參考(果然還是繁體好)

還有好多好多延伸閱讀...

但我很懶.......
很懶的打字
很懶的作編輯
..............................
........
...

























2011年11月17日 星期四

建立div的範圍後 讓範圍內的文字超過呈現點點點...(不知道該下什麼標題...)

一般來說,當我們有需要一段文字只呈現一行的時候,我們需要請程式判斷一行內出現的文字字元數,現在可以讓CSS完成這個工作

先建立限制範圍內的div寬高
加入white-space: nowrap; \\使這段文字強制不斷行,因為我們只需要一行而不因為div的寬度限制換行
加入overflow:hidden; \\使超出div寬度的範圍後隱藏
加入text-overflow:ellipsis; \\讓文字超出範圍後可以呈現...

以下為css

p{
      height:18px;
      line-height:18px;
      width:100px;
      white-space: nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

就會變成:

原文:

歷年秋末少見的「南方低壓挾大雨」,這幾天就發生在台灣!繼本月十二日南方低壓挾雨大澆阿里山,破了該站十一月份最大雨量紀錄後,台灣昨起再受到南方低壓雲系影響,台東長濱降下三百六十二毫米的「超大豪雨」,更破了設站以來的最大單日雨量紀錄;氣象局預報中心主任鄭明典表示,往年時序走到十一月中,應已逐漸轉成乾冷天氣型態,「今年的確很特別」。

修改後:
歷年秋末少見的「南方低壓挾大雨」,這幾天就...

測試 firefox、chome、ie7、ie8、ie9 都OK  ie6 去死。


參考:http://mid.lt263.com/mb/divcssjiaocheng/14015.html 不過文中說Firefox是無效的,不過我看有效就是了...另外,他說這篇是基礎阿阿阿阿~~...


2011年10月11日 星期二

EDM設計請注意,Outlook 2007無法支援部分語法


Outllook 2007基於商業考量,Outlook 2007的網頁信件解析軟體不再是IE,而是Word2007,因此寄出的網頁形式信件必須符合Word2007規格,而非IE。
而Word 2007對於HTML的支援較少,造成許多語法是無法在outlook 2007上被正確顯現,在發包設計時要多加注意。
————————————————————————-
Word 2007 不支援以下這幾個網頁常用的 CSS 屬性:
#background-attachment
#background-image
#background-position
#background-repeat
#clear
#display
#float
#list-style-image
#list-style-position
另外,也不支援以下項目:
1. 不要使用 <DIV>標籤 , 因為定位一定會出錯
2. 不要使用<style></style>, 如果一定要使用,
請網頁設計時將一個點就要讓它變成兩個點
例如: .test{font-size:10pt } 要改成 ..test{font-size:10pt }
3. 如果要用背景圖 background語法 只有<body>標籤支援,其他如<table><TR><TD>
等其他標籤完全不支援background語法但支援bgcolor語法,所以如果要做背景圖或是某個
造型表格,請不要使用背景圖請直接切表格在配合使用 <img>以及<bgcolor>這兩個語法
4.不支援Flash及Plugins
5.不支援列表清單替代圖示
6.不支援 Float 跟 Position (css裡面用來定位或是調整 Layout的語法)
7.不支援動態GIF
這個連結是 Microsoft 列出來 Outlook2007對Html的支援列表。
另外還有一個 validator, 可以測試所做出來的 Email template 是否支援 Office 2007
————————————————————————-
Outlook 2007 將採用 word 2007 取代原本的 Internet Explorer 來當做預設的 Html render 核心,
以下是一些對設計產業比較有影響的變革

No background images – Background images in divs and table cells are gone, meaning Mark’s image replacement technique is out the window.
Poor background color support – Give a div or table cell a background color, add some text to it and the background color displays fine. Nest another table or div inside though and the background color vanishes.
No support for float or position – Completely breaking any CSS based layouts right from the word go. Tables only.
Shocking box model support – Very poor support for padding and margin, and you thought IE5 was bad!
將不會有背景圖片 不管是 div, Table 裡的 Background, 將會不能使用
更差的背景顏色支援
將不支援 Float 跟 Position (css裡面用來定位或是調整 Layout的語法)
差勁的 Css 支援 (差勁的 Padding, Margin 定位, 差不多就像 IE5 對 Css 那樣差的支援度)
這個連結是 Microsoft 列出來 Outlook2007對Html的支援列表
還有一個 validator, 可以測試所做出來的 Email template 是否支援 Office 2007
其實看上列的縮圖可以輕易比較出同一個Html信件在 Outlook2000/ Outlook2007 下顯示的差別
基本上以M$ Outlook 75-80% 的市佔率, 這樣的做法已經改變了 Email 的遊戲規則, 雖然Office 2007去年11/30才發售
而使用者也有其它的WebMail Client可以選擇 (exp. Gmail, YahooMail, Hotmail….)
但是慢慢的, 這樣的變革還是會對Email行銷, 帶來一些影響
引用自http://blog.stormcrm.com:8080/it-knowledges/css-not-supported-in-outlook-2007/


--------------------------------------------------------------------------------------------
真是弱智outlook.....