The Will Will Web

基本上，網頁遇到「中文字」超過一行時都可以正常的斷字，只是若是英文字寫了一大串沒有空白的字，就會導致網頁版型被撐開，如下圖例就是因為網址過長而導致網頁被撐版，進而影響頁面的呈現。

IE 從 5.5 ~ 8.0 版的 CSS 都有支援一個 word-wrap 屬性，當你指定屬性值為 break-word 時就可以強迫瀏覽器進行斷字的動作，這樣就可以避免文字被斷行了。

不過要在 Firefox 中使用 word-wrap 就不可行了，一直到前天才正式發佈的 Firefox 3.0 也還是不支援 word-wrap 屬性，不過 word-wrap 屬性已經被編進 CSS 3.0 的規格中了，相信遲早有一天可以支援的。

不過在 Firefox 中也不是完全沒辦法，網路上有篇文章就有寫到如何在 Firefox 中實現自動斷字的方式，有興趣的可以上去看看。

我這裡摘要一下要達到目的必須的步驟：

1. 在 CSS 中定義一個 wordwrap 類別

.wordwrap
{
    word-wrap: break-word;
    -moz-binding: url('wordwrap.xml#wordwrap'); 

    display: block;
    overflow: auto;
}

這幾行 CSS 定義都是有意義的，內容這四行我大致解釋一下：

第一行：給 IE 看的，讓斷字產生。

第二行：給 Firefox/Mozilla 看的，透過 binding 的方式執行一段 JavaScript，當 Element 套用此 wordwrap 類別時讀取 wordwrap.xml 檔案，裡面有定義一組JavaScript程式可動態執行。

第三行、第四行：wordwrap.xml 裡面定義當 overflow 事件發生時執行一段程式讓文字斷行，所以 display 屬性一定要設定成 block 才有可能引發 overflow 事件（使用 inline 是沒辦法的），而最後的 overflow 就設定成 auto 即可。

2. 新增一個 wordwrap.xml 檔案

<?xml version = "1.0"?>
<bindings xmlns = "http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml">
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
            
            var elem = this;

            elem.addEventListener('overflow',
                function()
                {
                    var exp = /<&#8203;\/*[&#8203;_\s="'\w]+>/g;
                    
                    var txt = elem.innerHTML;
                    var chars = txt.split('');
                    var newTxt = chars.join('&#8203;');                    
                    newTxt = newTxt.replace(exp, reconstructTag);                    
                    elem.innerHTML = newTxt;
                },false);
                
                function reconstructTag(_tag)
                {
                    return _tag.replace(/&#8203;/g, '');
                }

            //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

內容我就不詳述，請自行到 Emulating CSS word-wrap for Mozilla/Firefox 閱讀相關說明。

3. 最後，到你的 HTML 中會破版的那個標籤套上 wordwap 類別即可。

<span class="url wordwrap">一個非常長的網址.....</span>

在我的例子裡，套用之後在 Firefox 中的顯示效果如下：

就這樣三個步驟就可以達成完美、跨瀏覽器的自動斷字功能。這裡有個線上的 DEMO，你們可以用 Firefox 去看看執行的效果如何。

相關連結

• MSDN Library - word-wrap Attribute | wordWrap Property
• Cascading Style Sheets (CSS), Level 3 (CSS3)
• Emulating CSS word-wrap for Mozilla/Firefox

Web 的開發工作千頭萬緒，什麼樣的鬼事都遇的到，什麼 CSS, DOM, JavaScript, ... 在每個 Browser 都有些小地方不太一樣，難怪很多學 Windows AP 或 Windows Form 的開發人員都不太願意轉到 ASP.NET 開發（至少我遇過好幾個不太想轉換的朋友）。

Google 最近推出了個名為 Google Doctype 的網站，目的是想創立一個所有跟 Web 有關的百科全書，所有跟 Web 安全、JavaScript 的 DOM 處理、CSS 的撰寫技巧、網頁效能、跨瀏覽器的議題，或其他所有跟 Web 相關的東西都會在這上面。

我自己上去看了一下覺得有些文章還蠻不錯的，都是非常實用的技巧與觀點，例如說 Web security。其實目前所看到的這些文章都是 Google 的員工（Googler）寫的，不過只要你有 Google 的帳號就可以參與創作，一起貢獻你的想法、發表你的開發技巧、評論現有的文章或修改現有的文章。

雖然目前 Google Doctype 上面的內容還不多，不過我想未來應該會有不少東西吧！

相關連結

• Introducing Google Doctype
• Google Doctype
• Browse Google Doctype

我們在套版的時候，常常會遇到那種「文字寬度固定」的版型，我們通常的作法都是用 Substring 將長篇的文字擷取一部份起來顯示，但問題是「中文字的寬度常常無法估計」，但客戶又要求寬度一定要跟設計師設計的一模一樣，文字太多的時候不能超出版面，以免破壞美美的版面。

請看這段文字：

這是一段非常長的文字這是一段非常長的文字這是一段非常長的文字這是一段非常長的文字

如果客戶要求我們顯示文字的寬度不得超過 300px 怎麼辦呢？！如果你用 Substring 常常不是「長一點」就是「短一點」，尤其是中、英混雜的文字更是如此！

請再看這段文字：

這是一段非常長的文字這是一段非常長的文字這是一段非常長的文字這是一段非常長的文字

看出哪裡不一樣了嗎？ 沒錯，我們限定了固定的寬度，且最後面還會幫我們加上 "..." 符號（此效果只在 IE 有效）

其實我們可以透過簡單的 CSS 定義就可以達到這個維持版面配置的要求，而完全不需要使用 Substring，底下是上面那個範例的 CSS 定義，標注紅色的部分就是設定的重點：

<style>
.box2 {
    margin: 0 20px;
    text-overflow: ellipsis;
    overflow:hidden;
    white-space:nowrap;
    border: 1px dashed #333;
    width: 300px;
    padding: 10px;
}
</style>

相關連結

• text-overflow Attribute | textOverflow Property
  http://msdn2.microsoft.com/en-us/library/ms531174(VS.85).aspx
  
• Using Text-Overflow
  http://www.blakems.com/archives/000077.html 

另外補充一點，在寫 .NET 的時候愛用 String.Substring() 方法的人請注意，如果你在方法中使用以下程式碼的話很容易就會發生Exception：

[code:c#]

return strResult.Substring(0, 200);

[/code]

因為當 strResult 字串的長度不足 200 字元的時候就會發生 Exception 喔！這點是許多初學者都會犯錯的地方！建議改成以下的形式：

[code:c#]

if(strResult.Length > 200)
   return strResult.Substring(0, 200);
else
   return strResult;

[/code]

我們建置網站完成後，接下來就是將網站上線了，但當發現網站有問題要修改的時候，可能會遇到一個問題，就是當我們修改 JavaScript 或 CSS 的時候，預設的情況下 *.js 或 *.css 這類靜態網頁通常會被 Browser 快取(Cache)起來，除非你先主動清除這些快取資料，或人工將頁面重新整理才能讀到新的資料。但這個「人工手動」的動作客戶可無法接受！因為大部分網友不會知道需要做這個「重新整理」的步驟，看到的可能是錯誤的畫面、或 JavaScript 的問題。

一個最簡單的方法就是將 css 載入的地方加上「日期」或「版本編號」，請看下圖：

這是原本擺在 <head> 裡面的 CSS 與 JavaScript 宣告：

 加上版本編號就會變成這樣：

這兩個語法對 Web Server 來說是一樣的，因為這兩個檔都是「靜態頁面」；但是對 Browser 來說就不一樣了，因為 Browser 才不管你抓的是不是同一個檔案，對 Browser 來說唯一個依據就只有「網址」而已，所以只要是不同的網址就會重新向 Web Service 抓取新的檔案內容！

所以當修改網站的 CSS 或 JavaScript 後，你可以直接修改 ASP.NET 的 MasterPage 將檔案後面加上「日期」或「版本編號」就可以啦，一個最簡單、實用、好用又很少人知道的技巧喔！

我之前曾經發生過一件事，就是明明載入了 CSS 檔，但是所有的樣式都無法套用，怎麼改都沒用，只要把 CSS 複製到原本網頁的 <head> 中就可以運作了，除錯了很久才發現，原來 *.css 檔的檔案編碼必須跟網頁(*.htm, *.aspx)的編碼一致，瀏覽器才會正確的辨識，且不止 *.css 也包括 *.js 與其他動態載入的文字格式的檔案都需要有相同的編碼。

問題發生的原因就在於當初因為要把某的網頁的編碼從 Big5 轉換成 UTF-8，但是 *.css 卻忘了改，其實忘了改也沒關係，主要是我在該 css 檔的最上面還放了幾行註解，註解中用的是「中文」字，我原本想都已經註解掉了，為什麼還會出錯，但就是因為這個中文，將註解最後面的 */ 的星號(*)吃掉了，導致註解沒有結束，而整份文件也都被註解掉了。

所以，下次遇到 CSS 怪怪的時候，先檢查一下你的 css 檔與網頁編碼是否一致吧！

1. 首先，必須先抓到該 HTML 標籤在畫面中「左上角」的位置。

抓到 HTML 物件的絕對位址方法可以用以下 JavaScript function 取得：

function findPosX(obj)
{
    var curLeft = 0;
    if (obj.offsetParent) {
        do {
            curLeft += obj.offsetLeft;
        } while (obj = obj.offsetParent);
    }
    else if (obj.x) {
        curLeft += obj.x;
    }
    return curLeft;
}

function findPosY(obj)
{
    var curTop = 0;
    if (obj.offsetParent) {
        do {
            curTop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    else if (obj.y) {
        curTop += obj.y;
    }
    return curTop;
}

2. 再用 offsetWidth 屬性取得該元素的寬度即可。以下是 HTML 元素中各種不同關於寬高的示意圖：

我們在輸入日期欄位時，常常用 The Coolest DHTML Calendar 這個套件來增加輸入日期的易用度，但是自從 2005 年 3 月 7 日以後，就一直停在 v1.0 版沒有更新，導致一些錯誤都沒有修正，尤其是常見的定位問題，因為 IE 7 變的比較符合 W3C 的標準了，所以在 CSS Positioning 的部分跟 IE 6 不相容，也造成了 The Coolest DHTML Calendar 這個套件的 Popup Calendar 的部分定位常常會跑掉！

這邊已經有個 Patch 檔，可以知道改了哪些：
http://sourceforge.net/tracker/index.php?func=detail&aid=1679433&group_id=75569&atid=544287

或是你要下載我改過的版本也行: calendar.js (50.23 kb)

Steve Souders 這個傢伙寫了一本書叫做：High Performance Web Sites: Essential Knowledge for Front-End Engineers

這本書裡定義了14條讓你的網頁加速的方法，分別如下：

1. Make fewer HTTP requests
2. Use a CDN
3. Add an Expires header
4. Gzip components
5. Put CSS at the top
6. Move JS to the bottom
7. Avoid CSS expressions
8. Make JS and CSS external
9. Reduce DNS lookups
10. Minify JS
11. Avoid redirects
12. Remove duplicate scripts
13. Turn off ETags
14. Make AJAX cacheable and small

而以下是我研究後的心得分享：

1. Make fewer HTTP requests

    - 減少 Image 的 Request 次數

        - 使用 CSS Sprites 技巧
          http://alistapart.com/articles/sprites
       
        - 使用 Image Map 技巧
   
        - 使用 Inline Image 技巧 ( data: )
          http://tools.ietf.org/html/rfc2397
         
          P.S. 可以開發一個 Inline Image 產生器！
         
          P.S. 建議將 Inline Image 快取在 CSS 檔案中，這樣可避免 HTML 太大

    - 減少 CSS / JavaScript 的 Request 次數
     
        - 整合多個分開的 CSS / JavaScript

2. Use a CDN

    - N/A

3. Add an Expires header

    - 加入 Expires Header 到 Image, CSS, JavaScript 檔案裡

4. Gzip components

    - 壓縮 HTML, JavaScript, StyleSheet, XML, JSON，但切記「不要壓縮 Images, PDF 檔案」！

    - 設定方法
   
        Apache 2.x: 使用 mod_deflate
       
            AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

        IIS 6.0
       
            Enabling HTTP Compression (IIS 6.0)
            http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/502ef631-3695-4616-b268-cbe7cf1351ce.mspx?mfr=true
           
            Using HTTP Compression for Faster Downloads (IIS 6.0)
            http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/25d2170b-09c0-45fd-8da4-898cf9a7d568.mspx?mfr=true
       
            Enabling HTTP Compression in IIS 6.0
            http://dotnetjunkies.com/Article/16267D49-4C6E-4063-AB12-853761D31E66.dcik
           
            IIS Compression in IIS6.0
            http://weblogs.asp.net/owscott/archive/2004/01/12/57916.aspx

        IIS 5.0
       
            HOW TO： 啟用 IIS 中的 ASPX 壓縮
            http://support.microsoft.com/kb/322603
           
           
    - HTTP Header Style
   
        HTTP request

            Accept-Encoding: gzip, deflate

        HTTP response

            Content-Encoding: gzip
            Vary: Accept-Encoding            ( 這行是給 Proxy Server 看的 )

    - 其他注意事項
   
        - 個人化的頁面要加上 ==>  Cache-Control: Private
       
        - 移除 ETags (Rule 13)

5. Put CSS at the top

    - 一定要將 CSS 放在 <head> 區段載入!
   
    - 使用 <LINK> 標籤，不要使用 @import 語法

    - Avoid Flash of Unstyled Content (FOUC) in IE
      http://www.bluerobot.com/web/css/fouc.asp/

        <!-- Hack to avoid flash of unstyled content in IE -->
        <script type="text/javascript"> </script>

6. Move JS to the bottom

    - 一定要將所有 JavaScript 都擺在頁面最下方
   
        </body> 之前
        因為所有在 JavaScript Include 以下的 HTML 在 JS 還沒讀完前，都不會顯示畫面
   
    - 把 JavaScript 的 Code 都放在 onload 執行！！

7. Avoid CSS expressions

    - 不要使用 CSS expressions 因為可能這段 expression 會在每一次 mouse move, resize, scroll, key press 時執行!
   
    - 要使用 EventHandler 去執行這些 Expression (JS Code)

8. Make JS and CSS external

    - 反正 JS 跟 CSS 拉到外面成獨立檔案就是好的，但「首頁」可以例外！
   
    - 使用 Post-onload download 技巧

        download external files after onload
        window.onload = downloadComponents;
        function downloadComponents() {
            var elem = document.createElement("script");
            elem.src = "http://.../file1.js";
            document.body.appendChild(elem);
            ...
        }
       
        範例：http://stevesouders.com/hpws/dynamic-inlining.php
   
        作法：
       
            1. 在 Server-side 判斷使用者 Browser 有設定 Cookie["hasPostOnloadDownload"]

                1.1. 若沒有，就使用 post-onload download 動態下載 CSS & JS
               
                1.2. 若有用，就直接用 <script src="xxxx.js"></script> 下載，Browser 會抓取 Cache 的版本

            P.S. cookie expiration date is key
   
9. Reduce DNS lookups

    - 在一個頁面中，不要超過 2 - 4 個 Hostname，不然會降低頁面載入速度
    
    - 開啟 Keep-Alive 支援

10. Minify JS

    - jsmin
      http://crockford.com/javascript/jsmin
     
      下載後更名成 jsmin.zip 解壓縮出 jsmin.exe 即可執行
     
      jsmin.exe < input.js > output.js    (注意：所有 UTF-8 編碼的 js 檔會變成 ANSI as UTF-8 編碼)
   
    - dojo compressor
      http://dojotoolkit.org/docs/shrinksafe

11. Avoid redirects

    - 參考資料：http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

    - 避免 Redirect 產生的方式
   
        * 網址若省略檔名時，最後面一定要加上 / 結尾
       
        * 追查 Log 檔
       
            - 查看 Log Referer
   
12. Remove duplicate scripts

    - 這一點雖然很呆，不過連 MSN Space, Yahoo 都有類似的情況！
   
    - 在 ASP.NET 的元件中(UserControls, WebControls)，請多使用 Page.ClientScript.RegisterScriptInclude 的方式！

13. Turn off ETags

    - 基本格式
   
        * unique identifier returned in response

            ETag: "c8897e-aee-4165acf0"
            Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT
           
        * used in conditional GET requests
       
            If-None-Match: "c8897e-aee-4165acf0"
            If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT

    - if ETag doesn't match, can't send 304

    - ETag format

            Apache:
           
                ETag: inode-size-timestamp
           
            IIS:
           
                ETag: Filetimestamp:ChangeNumber

    - IIS 設定方式
   
        自動設定方式
       
            ETagFix - keep IIS eTags from changing
            http://www.snapfiles.com/get/etagfix.html
           
            原創公司：ISAPILab http://www.isapilabs.com/
           
            安裝 http://www.isapilabs.com/downloads/ETagFix-setup.exe 之後會重新啟動 IIS 之後就沒問題了！
           
            Related: http://www.snapfiles.com/Freeware/server/fwiis.html
           
            Note:
           
                在 IIS 5.0 可以正常運作
               
                在 IIS 6.0 必須要執行在 Isolate Mode 才可以使用 ISAPI，預設是不能用的！
    
        手動設定方式
   
        * 如果不是用 Windows Server 2003 SP1 要先安裝 Hotfix 900245
          http://support.microsoft.com/kb/900245/
     
        * 先安裝 IIS 6.0 Resource Kit
          http://www.microsoft.com/downloads/details.aspx?FamilyId=56FC92EE-A71A-4C73-B628-ADE629C89499&displaylang=en
       
        * 使用 Metabase Explorer 開啟 LM \ W3SVC 新增 DWORD to 2039 其 Value="0" ( 每一台 WebFarm 底下的電腦都要這樣設定 )
       
        * 重新啟動 IIS

              net stop iisadmin /y
              net start w3svc
              net start smtpsvc

        參考資料

            * 您可能會當您使用 Internet Explorer 6， 試著存取 Web 應用程式所裝載在 Internet Information Services 6.0 Web 效能非常低
              http://support.microsoft.com/kb/922703/

    - Apache 設定方式

        FileETag none

14. Make AJAX cacheable and small

    - XHR, JSON, iframe, dynamic scripts 都一樣可以被快取(Cached)、最小化(minified)和壓縮(gzipped)

    - 個人化的頁面回應時，一樣要做快取，但是針對「該使用者」做快取(Cache-Control: private)

        - 在使用 XHR 時，URL 可以加上「最近的修改時間」在 QueryString 裡。
       
            GET /yab/[...]&r=0.5289571053069156 HTTP/1.1
       
        - 回傳資料時的 Header 可以用 Cache-Control: private + Last-Modified，使用者就不會一直連到網站抓網站了!!

        設定 Cache Header 注意事項
       
        * 個人化的頁面一定要設定
       
            Response.Cache.SetCacheability(HttpCacheability.Private);
       
        * 如果要 Cache 頁面或 External Reference 檔案(CSS/JS)一定要加上
       
            Response.Cache.SetLastModified(DateTime.Now);
           
            如果不加上 MaxAge 的話，將會無限時間的 Cache 直到下次 Reload 或開新 Browser 手動輸入網址進入網頁
       
        * 如果要指定 Cache 的時間要加上
           
            Response.Cache.SetMaxAge(new TimeSpan(0, 0, 0, 10));
            Response.Cache.SetExpires(DateTime.Now.AddSeconds(10));
       
        * 如果不要頁面被 Cache 的話
       
            Response.Cache.SetMaxAge(TimeSpan.Zero);
           
            Response.Cache.SetExpires(DateTime.MinValue);

由於 Outlook 2007 的一個嚴重缺失，又讓電子報設計的創意再更少一些了，由於能用的CSS屬性實在不多，光是「背景圖」就很惱人了，設計師只能用簡單的背景色彩鋪陳網頁的版面，至於許多創意的背景圖設計就只能用單張圖片顯示了。

以下是依我個人經驗對設計的建議：

1. 因為現在許多人都使用像 Gmail, Hotmail 等 WebMail 的方式收信，所以郵件中若是有使用太多會影響 WebMail 原有版面的部分應該全部都會被刪除，導致版型亂七八糟的。
   這篇文章有完整且詳細的對照表：A Guide to CSS Support in Email: 2007 Edition
   或你可以下到這裡下載 PDF 檔回去列印。
   
2. 盡量不要用 CSS 來排版，用傳統的 TABLE 排版方式是比較安全的作法！
   注意：DIV標籤在 Outlook 2007 中「竟然不支援 CSS 中的 width 這個屬性」，所以你用 DIV 包網頁是沒用的！
   
3. 版型最外層最好用一個 TABLE 包裹住整個網頁，並設定固定的寬度，建議寬度為 700px 以內。
   
4. 如果網頁的頁首部分會用到漂亮而複雜的底圖，建議將整塊頁首都做成一張圖片，缺點是這裡就無法再貼上什麼動態的文字了。
   
5. 不要在電子報的網頁中放入「表單」，因為 Outlook 2007 不支援，且在 Outlook 2003 中使用表單也無法用快速鍵（如用 TAB 切換欄位），實在不方便又不實用。有很多人會在電子報中嵌入「問卷」實在不夠明智，都不知道填寫的人很痛苦，不小心按下空白鍵，Outlook會自動跳到下一封信去了，再回來的時候所有輸入的東西都消失了。=.=''
   
6. 文字與圖片的地方盡量切乾淨，版面設計的時候就不要設計「疊在一起的樣子」。
   
7. 如果要將電子報的版型加上圖片的外框，就用TABLE設計九宮格把圖放在四邊的 TD 裡，但如果電子報的長度不固定的話，建議不用做這樣的設計。
   
8. 盡量少用 GIF 動畫，因為在 Outlook 2007 中看不到這些動畫。
   
9. 不要用 PNG 圖檔做透明背景。

另外，以下是一些「非常強烈建議不要用」的設計方式：

1. 不要使用任何 JavaScript 或任何像 onclick, onkeypress, onmouseover 等等的事件(event)！
   
2. 不要在電子報網頁中嵌入 Flash 動畫。
   
3. 不要用 IFRAME 嵌入其他網頁。

老實說，製作 Outlook 2007 / Word 2007 團隊的人實在是太扯了! 

因為 Outlook 2007 採用 Word 2007 做為 檢視HTML 郵件的元件，但是 Word 2007 盡然不支援以下這幾個設計師十分常用的 CSS 屬性：

我的老天爺阿，沒了這些東西，還真不知道要怎麼設計網頁呢！！

經詢問微軟技術支援團隊確認後， 才知道他們從去年就被客戶抱怨到不行，至今還是沒有解決方案，還真的無言！

以下是參考的資料： 

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
http://msdn2.microsoft.com/en-us/library/aa338201.aspx

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
http://msdn2.microsoft.com/en-us/library/aa338200.aspx

2007 Office System Tool: Outlook HTML and CSS Validator
http://www.microsoft.com/downloads/details.aspx?familyid=0b764c08-0f86-431e-8bd5-ef0e9ce26a3a&displaylang=en