CSS 技巧

慎用CSS屬性：

• overflow
• position:fixed(iphone safari確定不支援)
• font-size: 用small, medium, large，最好不要用px設死
• margin與padding的算法可能有個別差異

box model的處理

手機版網頁在自動適應畫面寬度時，目前標準的padding算法會是個困擾，因為如果width:100%，加上padding可能就破版了，但不使用width:100%又很難估計內容的實際寬度。這時可考慮回復到IE6模式，把border和padding的移到box內部，如此一來宣告width為100%就能保證不破版。

div{      -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */      -moz-box-sizing: border-box;    /* Firefox, other Gecko */      box-sizing: border-box; }

*註:border-box是IE6的模式，content-box是目前的標準模式

* {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

網站安全設定

趁著這此網站體檢，將一些安全設定寫一下

1. Clickjacking and X-Frame-Options

If mod_headers is installed：

Header always append X-Frame-Options SAMEORIGIN

or

header('X-Frame-Options: SAMEORIGIN');

header("X-Frame-Options: DENY");

or

<script> if (top != self) top.location.href="http://your.website.xxx/" ; </script>

2. Cookie secure & HttpOnly flag 

ini_set('session.cookie_secure',1);  /* https useful*/

ini_set('session.cookie_httponly',1);

ini_set('session.use_only_cookies',1);

3.HTML form without CSRF protection

如果沒有用圖形辨識，可以考慮下面簡便的session作法

1. http://bkcore.com/blog/code/nocsrf-php-class.html

IE HACK

Hacks 語法的整理：

• 只有 IE6 才能解析的屬性，在屬性名稱之前加上一個底線 ( _ )

#style1 { _color: blue }

• 只有 IE6, IE7 才能解析的屬性，在屬性名稱前面加上星號 ( * ) 或井號 ( # )

#style1 { *color: blue; }

#style1 { #color: blue; }

• 只有 IE7, IE8, IE9 才能解析的屬性，在屬性名稱後面加上一個空白與一個註解 ( /**/ )

#style1 { color /**/: blue }

• 只有 IE6, IE7, IE8, IE9 才能解析的屬性，在屬性值最後加上一個 \9 字串

#style1 { color: blue\9; }

• 只有 IE8, IE9 才能解析的屬性，在屬性值最後加上一個 \0/ 字串

#style1 {color: blue\0/;} 

選取器類型的密技 ( Selector Hacks )

• 只有 IE6 才能解析的選取器，在選取器名稱之前加上 * html

* html #style1 { color: red }

• 只有 IE7 才能解析的選取器，在選取器名稱之前加上 *+html 或 *:first-child+html

*+html #style1 { color: red }  *:first-child+html #style1 { color: red }

• 只有 IE8 才能解析的選取器，在整個 CSS 樣式規則前後用以下 @media \0screen 定義

@media \0screen {   .style1 {color: red;} }

• 只有 IE9 才能解析的選取器搭配屬性 Hack，在選取器名稱之前加上 :root 與屬性值後面加上\9

:root #style1 {color: #FF0000\9;}

• 只有 IE7, Firefox, Safari, Opera 才能解析的選取器，在選取器名稱之前加 html>body

html>body #style1 { color: red }

• 只有 IE8, IE9, Firefox, Safari, Opera 才能解析的選取器，在選取器名稱之前加 html>/**/body

html>/**/body #style1 { color: red }

• 只有 Opera 9.27 以下與 Safari 2 才能解析的選取器，在選取器名稱之前加 html:first-child

html:first-child #style1 { color: red }

• 只有 Safari 2 ~ 3 才能解析的選取器，在選取器名稱之前加 html[xmlns*=""] body:last-child

html[xmlns*=""] body:last-child #style1 { color: red }

• 只有 Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+才能解析的選取器，在選取器名稱之前加body:nth-of-type(1) 或 body:first-of-type

body:nth-of-type(1) #siete { color: red }  body:first-of-type #ocho { color: red }

• 只有 Safari 3+, Chrome 1+ 才能解析的選取器，在整個 CSS 樣式規則前後用以下 @media 定義

@media screen and (-webkit-min-device-pixel-ratio:0) {  #style1 { color: red  } }

• 只有 iPhone 與 Mobile Webkit 的瀏覽器才能解析的選取器

@media screen and (max-device-width: 480px) {  #style1 { color: red  } }

• 只有 Safari 2 ~ 3.1 才能解析的選取器，在選取器名稱之前加 html[xmlns*=""]:root

html[xmlns*=""]:root #style1  { color: red  }

• 只有 IE6, IE7, IE8 才無法解析的選取器，在選取器名稱之前加 :root *>

:root *> #style1 { color: red  }

• 只有 Firefox 1.0+ 才看的懂得選取器，在選取器名稱後面加上 , x:-moz-any-link

#veinticuatro,  x:-moz-any-link { color: red }

• 只有 Firefox 3.0+ 才看的懂得選取器，在選取器名稱後面加上 ,  x:-moz-any-link, x:default

#veinticuatro,  x:-moz-any-link, x:default { color: red }

• 只有 Firefox 3.5+ 才看的懂得選取器，在選取器名稱前面加 body:not(:-moz-handler-blocked)

body:not(:-moz-handler-blocked) #veinticuatro { color: red }

 

<!--[if IE 8]> <p>Welcome to Internet Explorer 8.</p> <![endif]-->

紅字部分要完全一樣才可以生效。

把條件式註解變成條件式標籤：

<![if IE 8]> <p>此內容只會在 IE8 與其他非 IE 瀏覽器顯示</p> <![endif]>

「條件式標籤」差別僅在於把 -- 字元給刪除。

在條件式註解的判斷式中可以寫判斷條件的語法：

• !     NOT 邏輯運算  [ 注意: 判斷 !IE 時應該要用條件式標籤才對 ]

<![if !IE]> <p>任何非 Internet Explorer 瀏覽器</p> <![endif]>

• lt    小於

<!--[if lt IE 9]> <p>任何小於 IE9 的瀏覽器，例如: IE8, IE7, IE6 </p> <![endif]-->

• lte   小於等於

<!--[if lte IE 8]> <p>任何小於等於 IE8 的瀏覽器，例如: IE8, IE7, IE6 </p> <![endif]-->

• gt    大於

<!--[if gt IE 7]> <p>任何大於 IE7 的瀏覽器，例如: IE8, IE9 </p> <![endif]-->

• gte   大於等於

<!--[if gte IE 7]> <p>任何大於等於 IE7 的瀏覽器，例如: IE7, IE8, IE9 </p> <![endif]-->

• ( )   子條件式

<!--[if !(IE 8)]> <p>任何非 IE8 的 IE 瀏覽器，例如: IE6, IE7, IE9 </p> <![endif]-->

• &     AND 邏輯運算

<!--[if (gt IE 6) & (lt IE 9)]> <p>僅大於 IE6 以及小於 IE9 的瀏覽器，例如: IE7, IE8</p> <![endif]—>

• |     OR 邏輯運算

<!--[if (IE 7) | (IE 8)]> <p>僅 IE7 與 IE8 瀏覽器</p> <![endif]-->

• true   永遠為真的邏輯運算，等同於 [if IE] 判斷式

<!--[if true]> <p>在 IE 瀏覽器中永遠顯示</p> <![endif]—>

• false  永遠為假的邏輯運算，等同於 [if !IE] 判斷式

<!--[if false]> <p>在 IE 瀏覽器中永不遠顯示</p> <![endif]-->

活用條件式註解或條件式標籤的技巧有很多，你不只可能那來顯示不同的 HTML 內容，還可以用來載入不同的 CSS 檔，這種撰寫技巧又被稱為條件式樣式表 (Conditional stylesheets)，如下範例所示，你可以透過條件式註解來完成條件式樣式表的載入，如此一來就可以避免在 CSS 樣式表內使用「不安全」的 CSS Hacks 語法：

<!--[if lte IE 8]><link rel="stylesheet" href="lte-ie-8.css"><![endif]--> <!--[if lte IE 7]><link rel="stylesheet" href="lte-ie-7.css"><![endif]--> <!--[if lte IE 6]><link rel="stylesheet" href="lte-ie-6.css"><![endif]-->

還有一種撰寫技巧被稱為條件式類別名稱 (Conditional classnames)，這技巧經常用在 HTML5 的網頁裡，我們為了做到不支援 HTML5 的舊版瀏覽器也能讀取正確的樣式，有時會採用這種方式搭配 CSS 撰寫，達到不同 IE 版本也能套用不同樣式的目的。例如在 Initializr 與 HTML5 Boilerplate 這些 HTML5 範本產生器裡都能看到使用條件式類別名稱的技巧。

<!doctype html> <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--> <!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]--> <!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]--> <!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--> <head>

透過條件式類別名稱的技巧，你的 CSS 內容就可以寫成以下這樣，也可以有效避免使用 CSS Hacks：

.style1 { color: black; } .ie8 .style1 { color: green; } /* IE8 */ .ie7 .style1 { color: blue; }  /* IE7 */ .ie6 .style1 { color: red; }   /* IE6 */

 

※ 注意事項 ※ 
微軟已經決定 Internet Explorer 10 之後的版本將移除條件式註解功能，因此下一代 IE 瀏覽器在解析條件式註解時將會與現有其他瀏覽器一樣，針對條件式註解或條件式標籤裡的條件式都會自動忽略，因此未來該功能只能用於 IE9 以下的瀏覽器裡。

<以上引用自 http://blog.miniasp.com/post/2012/05/02/Building-Website-is-not-that-easy-CSS-Hacks-and-IE-Conditional-Comments.aspx>

jquery confirm dialog

<input type="button" id="btnOpenDialog" value="Open Confirm Dialog" />

<div id="dialog-confirm"></div>

function fnOpenNormalDialog() {

    $("#dialog-confirm").html("Confirm Dialog Box");

    // Define the Dialog and its properties.

    $("#dialog-confirm").dialog({

        resizable: false,

        modal: true,

        title: "Modal",

        height: 250,

        width: 400,

        buttons: {

            "Yes": function () {

                $(this).dialog('close');

                callback(true);

            },

                "No": function () {

                $(this).dialog('close');

                callback(false);

            }

        }

    });

}

$('#btnOpenDialog').click(fnOpenNormalDialog);

function callback(value) {

    if (value) {

        alert("Confirmed");

    } else {

        alert("Rejected");

    }

}

php json_encode 與 serialize

json_encode轉換保留中文

 $data_records=json_encode($data_records, JSON_UNESCAPED_UNICODE);

一般來說存入資料庫前要加入AddSlashes