[Web] Cookie 小觀念的補述

今天看到網站製作學習誌中提到 COOKIE 的問題

引用來源：[Web] Cookie 小觀念

setcookie('test', 'abc');
var_dump($_COOKIE);

如果你回答的是空陣列的話，那就表示你瞭解 Cookie 的作用了。

除了這個問題之外
其實在 COOKIE 簡單的操作上
有一些問題也常常被忽視

在過去的文章中也有提到我遇到的問題
cookie 路徑問題
apache 301 Redirect 永久重新導向

例如：

http://domain.com/
http://www.domain.com/
http://www.domain.com/dir

這三種都是 COOKIE 有可能的儲存路徑
這常常讓 COOKIE 的存取上造成問題
上層路徑的程式無法取得下層路徑的 COOKIE
而下層路徑在 COOKIE 寫入上卻會不小心造成雙份的問題

寬度(width)不要與其他屬性同時設定[CSS]

這是一個很基礎的 CSS 設計觀念，在設有寬度(width)的 Box 上，別加入 border , padding 及 margin 這三個屬性，這對於維護及變更上有相當的好處。

這下面就是全部都設在同一個 Box 上的例子，雖然所需要的語法很少，但在固定寬度的情況下，當要變更其他一個屬性時，勢必要重新設定寬度的大小，是非常不明智的作法，有嘗到苦果的朋友，想必就會瞭解。

.widget{
    width:200px;
    border:2px solid #000;
    padding:3px;
    margin:5px;
}

<div class="widget">text text</div>

最好的方式就是將寬度的屬性獨立成單一的 Box，其他屬性則設定在內層 Box 上，雖然需要較多的語法，但在未來的修改變動上會比較直覺，除了排版上的設定，其他 Box 盡可能使用相對寬度(%)的設定，在對整體欄寬做調整時會比較快樂。

.widget{
    width:200px;
}
.widget div{
    border:2px solid #000;
    padding:3px;
    margin:5px;
}

<div class="widget">
    <div>text text</div>
</div>

改寫 dp.SyntaxHighlighter 中 CSS 的 Highlighter 方式

最近掙扎了很久，考慮要不要用 dp.SyntaxHighlighter 來處理 Blog 中程式碼的 Highlighter，因為之前用的 Iris Syntax Highlighter 已經收起來了，而且在文章撰寫上十分不方便也不直覺，所以花了一點心思改成 dp.SyntaxHighlighter 的模式，但 1.5.1 版還蠻陽春的，花了一點時間做語法增強及檔案瘦身，希望這個套件可以用久一點。

原本 dp.SyntaxHighlighter 中 CSS 的 Highlighter 是用 keyword 的方式去處理的，未定義的 keyword 將不會有 Highlighter，為了得到更好的效果，又必須增加更多的 keyword，實在是很不划算。

所以我改用解析 Syntax 結構的方式去處理 Highlighter 的動作，雖然還不是很完整，但整體的效果比原生好多了。

/**=[ CSS ]===========================================*/
dp.sh.Brushes.CSS = function(){
    // 樣式定義
    this.CssClass = 'dp-css';
    this.Style = '.dp-css .value{color:blue;}' +
                  '.dp-css .important{color:red;font-weight:bold;}'+
                  '.dp-css .keyword{color:#7F0055;font-weight:bold;}'+
                  '.dp-css .func{color:#F55;font-weight:normal;}';
};

dp.sh.Brushes.CSS.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.CSS.Aliases   = ['css'];

dp.sh.Brushes.CSS.prototype.ProcessRegexList = function(){
    function push(array, value){
        array[array.length] = value;
    }
    var match1,match2,regex1,regex2;
    
    /* 加入註解解析 */
    this.GetMatches(dp.sh.RegexLib.MultiLineCComments, 'comments');
    /* 加入 !important 解析 */
    this.GetMatches(new RegExp('!important', 'g'),'important');

    /* 解析屬性區塊 */
    // 匹配 '{' 至 '}' 之間的文字
    regex1 = new RegExp('\{[^}]+\}', 'gm');
    // 匹配 'xxx:xxx[;\n\(!]' 格式的文字
    regex2 = new RegExp('([:\\w-\.]+)\\s*:\\s*([^;\n\(!]+)[;\n\(!]', 'gm');
    while((match1 = regex1.exec(this.code))){
        while((match2 = regex2.exec(match1[0]))){
            if(!match2[1]){continue;}
            // 匹配屬性名稱
            push(this.matches, new dp.sh.Match(
                match2[1], 
                match1.index+match2.index, 
                'func'
            ));
        
            // 匹配屬性值
            if(match2[2]){
                push(this.matches,new dp.sh.Match(
                    match2[2], 
                    match1.index+match2.index+match2[0].indexOf(match2[2]), 
                    'value'
                ));
            }
        }
    }
  
    /* 解析選擇器區塊 */
    // 匹配 'xxx[,\{\n]' 格式的文字
    regex1 = new RegExp('^([\\s\\w\.#*:+-]+)[,\{\n]', 'gm');
    while((match1 = regex1.exec(this.code))){
        if(!match1[1]){continue;}
        push(this.matches, new dp.sh.Match(
            match1[1], 
            match1.index, 
            'keyword'
        ));
    }
};

效果可察看之前的文章：
IE6 對 visibility 負荷過大的問題[CSS]
IE6 中的最大最小寬度和高度
CSS fixed 定位( FF / IE6 )
利用 !important 修正 IE 與 Firefox 的差異

網頁常用編碼轉換 (iGoogle)小工具

將一些 JavaScript 中常用的 escape, unescapek, encodeURI, decodeURI, encodeURIComponent, decodeURIComponent 及 HTML 跳脫與反跳脫製作成小工具。

IE6 對 visibility 負荷過大的問題[CSS]

IE6 在對大量元件做 visibility 顯示及隱藏時
會有負荷量過大的問題出現讓整個瀏覽器變慢
解決的辦法就是用 filter 去代替相同的效果
就會得到很明顯的改善

.Action{
    visibility:hidden;
    _visibility:visible;/* for IE6 */
    _filter:alpha(opacity=0);/* for IE6 */
}

.Action:hover{
    visibility:visible;
    _filter:alpha(opacity=100);/* for IE6 */
}

IE6 在負邊界( margin )上的異常問題[CSS]

當負邊界( margin )加上 float 屬性時 在 IE6 上會出現詭異的邏輯問題 設定的數值會乘於二 也就是 margin:-100px; 會變成 margin:-200px; 解決這個問題只好做特別做修正設定 HTML 與 CSS 設定：

   .widget{
       padding-left:35px;
   }
   .widget .image{
       width:30px;
       float:left;
       margin-left:-30px;
       _margin-left:-15px;/*for IE6*/
   }

<div class="widget">
   <div class="image"><img /></div>
   <div>text text</div>
</div>

[PHP] 解析 URL 字串 parse_url , parse_str

parse_url 會解析一個標準的 URL 字串

<?php
$urlStr="http://user:passwd@host:80/path?a1=v1&a2=v2#anchor";
$url=parse_url($urlStr);
print_r($url);
/* output:
Array
(
    [scheme] => http
    [host] => host
    [port] => 80
    [user] => user
    [pass] => passwd
    [path] => /path
    [query] => a1=v1&a2=v2
    [fragment] => anchor
)
*/

echo parse_url($url, PHP_URL_SCHEME);
// prints:  http

echo parse_url($url, PHP_URL_HOST);
// prints: host

echo parse_url($url, PHP_URL_PORT);
// prints: 80

echo parse_url($url, PHP_URL_USER);
// prints: user

echo parse_url($url, PHP_URL_PASS);
// prints: passwd

echo parse_url($url, PHP_URL_PATH);
// prints: /path

echo parse_url($url, PHP_URL_QUERY);
// prints: a1=v1&a2=v2

echo parse_url($url, PHP_URL_FRAGMENT);
// prints: anchor

?>

parse_str 會解析 URL Query 格式的字串
這裡特別注意，別使用下面的第一種方式直接解析 URL 上的 query
這會造成資安上的漏洞，這會讓外部可以直接修改裡面的變數值

<?php
$url_query = "city=new+york&id=3456&paid%5Bcurrency%5D=euro&paid%5Bamount%5D=345&paid%5Breceipt%5D=fgf"
parse_str($url_query);

echo $city;
// prints: new york

echo $id;
// prints: 3456

print_r($paid);
/* output:
Array
(
    [currency] => euro
    [amount] => 345
    [receipt] => fgf
)
*/

/* 不建議上面的作法，因為會複寫原本的變數
 * 造成資安上的漏洞
 * */

parse_str($url_query, $query);
print_r($query);
/* output :
Array
(
    [city] => new york
    [id] => 3456
    [paid] => Array
    (
        [currency] => euro
        [amount] => 345
        [receipt] => fgf
    )

)*/
?>

參考來源：
Easy way to build GET query strings in php

HTML 中 Flash 遮蓋問題的解決方法

flash 在頁面中會顯示在最上層
想要用其他元素覆蓋在上面時
必須做以一下參數設定
但不管有沒有元素覆蓋
最好還是加入這個參數
避免意料之外的版面問題

<object ... >
    <param name="wmode" value="transparent"/>
    <!-- ... -->
    <embed wmode="transparent" ... />
</object>

wmode 的參數值：

• Window
• Opaque
• Transparent

參考來源：
【求助】关于下拉菜单被FLASH遮盖，怎样解决
wmode 三選一