CSS Style 及 JS Style 對照表

CSS Properties To JavaScript Reference Conversion

CSS Property	JavaScript Reference
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
border	border
border-bottom	borderBottom
border-bottom-color	borderBottomColor
border-bottom-style	borderBottomStyle
border-bottom-width	borderBottomWidth
border-color	borderColor
border-left	borderLeft
border-left-color	borderLeftColor
border-left-style	borderLeftStyle
border-left-width	borderLeftWidth
border-right	borderRight
border-right-color	borderRightColor
border-right-style	borderRightStyle
border-right-width	borderRightWidth
border-style	borderStyle
border-top	borderTop
border-top-color	borderTopColor
border-top-style	borderTopStyle
border-top-width	borderTopWidth
border-width	borderWidth
clear	clear
clip	clip
color	color
cursor	cursor
display	display
filter	filter
font	font
font-family	fontFamily
font-size	fontSize
font-variant	fontVariant
font-weight	fontWeight
height	height
left	left
letter-spacing	letterSpacing
line-height	lineHeight
list-style	listStyle
list-style-image	listStyleImage
list-style-position	listStylePosition
list-style-type	listStyleType
margin	margin
margin-bottom	marginBottom
margin-left	marginLeft
margin-right	marginRight
margin-top	marginTop
overflow	overflow
padding	padding
padding-bottom	paddingBottom
padding-left	paddingLeft
padding-right	paddingRight
padding-top	paddingTop
page-break-after	pageBreakAfter
page-break-before	pageBreakBefore
position	position
float	styleFloat
text-align	textAlign
text-decoration	textDecoration
text-decoration: blink	textDecorationBlink
text-decoration: line-through	textDecorationLineThrough
text-decoration: none	textDecorationNone
text-decoration: overline	textDecorationOverline
text-decoration: underline	textDecorationUnderline
text-indent	textIndent
text-transform	textTransform
top	top
vertical-align	verticalAlign
visibility	visibility
width	width
z-index	zIndex

Usage

Internet Explorer

document.all.div_id.style.JS_property_reference = "new_CSS_property_value";

Older Netscape's (4.7 and earlier)

document.div_id.JS_property_reference = "new_CSS_property_value";

Netscape 6.0+ and Opera (and other Mozilla)

document.getElementById(div_id).style.JS_property_reference = "new_CSS_property_value";

Note the use of parentheses instead of square brackets in newer Mozilla's "getElementById()" reference.

輕鬆讓網頁支援過時的 IE6

昨天搞了一個晚上就是要讓網頁支援 IE6！除了花大筆的時間之外，也不斷重覆著 display:inline, _height:0 又或是 zoom:100 (乃威建議的)，真是辛苦了。現在的工具都太新了，從生產到測試都是最新版，但話說回來，舊的東西也不能不顧，真是痛苦的人生呀！(案編：還是快躲進理想屋裡頭!)

首先當網站不支援 IE6 的時候要怎麼辨？
方法1. 告訴使用者：不行了？
IE6 blocker script 是使用 CSS position: fixed 把背景黑掉引起使用者注意的東西。
當然因為是容易的東西，IE6 不支援 position: fixed 因此，還是不支援 =_= ，儘管是 javascript，用起來卻像是 position: absolute 的效果，沒有針對操作上的 scroll-down 情形，結果來說並不是很好看，也不算是好方法。

方法2. 把它修好：當然啦，不是一般的苦力就行的
網路是一個很方便的東西，可惜它並不會教人們如何思考。我還是只說我的心得吧！
就請讀者試過之後，再來交換一下心得吧！

心得1. float:left/right 會有傳說中的 double margin bug,
加一行 _display:inline 即可修正。有兩的以上的 floating 在一起的時候，就必須要修
(不要因為看起來沒事就不修，它們還是會互相影響！)

心得2. float:left/right 的東西如果有 wrapper(就是大 div 將他們包起來的話)，可使用 overflow:hidden (IE7), 或 _height:100% (IE6), 或 elementnameXxx:after { content " "; clear:both; }

心得2.1 使用_height:100% (IE6) 的修法的話：
如果有 padding 的話，用 height:100% 會看不到下面的 padding/border 相當麻煩，只能用 javascript修改 height 或多一個 dummy container with style { clear:both } 放在下面，就會包的很漂亮。建議使用後面的方法

心得2.2 使用overflow:hidden (IE7) 的修法的話：
注意 ajax 配合使用上的問題，overflow:hidden 的層上如果疊上另一層邊邊會被消掉

心得2.3 使用elementnameXxx:after { content " "; clear:both; } 的修法的話：
目前沒有試成功耶，你們真的有試成功嗎？這只是我自己猜想出的修法而己，理念上是對的

心得3. 如果有一個 wrapper，它有 background-image 的 style, 而 children 裡面的東西沒有任何的 float:left/right containers, 那麼就應該用 _height: 0; 來代替心得2 的例子。原因是 IE6 不管怎麼樣都會把外包的 wrapper 撐大，使用 _height: 100% 也有同樣的結果，這裡特別說明是因為 height: 0 居然可以在設特例下使用，非常好玩！

心得4. 關於透明 png 的支援，恐怕是最難解決的問題，如果只是 img 又或 background-image 皆可使用 IE6 的 filter 解決。先決條件就是會有 z-index 問題，所以上面幾乎不能疊東西，用 png 做 button 可算是自殺式行為。

心得5. 使用 Browser-Specific selectors

IE 6 and below

* html {}

IE 7 and below

*:first-child+html {} * html {}

IE 7 only

*:first-child+html {}

IE 7 and modern browsers only

html>body {}

Modern browsers only (not IE 7)

html>/**/body {}

Recent Opera versions 9 and below

html:first-child {}

Safari

html[xmlns*=""] body:last-child {}

但是有可能，真的很可能，你不會需要這些 selectors, 因為專門給 IE 用的版本

.classname {
background: #fff; /* all browsers including Mac IE */
*background: #fff; /* IE 7 and below */
_background: #fff; /* IE 6 and below */
_bac\kground: #fff; /* IE 6 only */
}

看出分別了嗎？
那麼我們下次再會了~

Reference:
Introducing SuperSleight
The PNG problem in Windows Internet Explorer
IE CSS Bugs That’ll Get You Every Time

printf / sprintf in PHP

Most programmers are familiar with printf/sprinf in languages such as C/C++.
They have the following benefits
1. Ease of use and clarity - the flexablility to define a format string such as "%d, %s"
2. Maximum efficiency (ability to directly use existing buffers)
and drawbacks
3. Length safety
4. Type safety
5. Templatability

#3.,#4. #5. doesn't apply to PHP language in general, therefore its a good idea to use printf/sprintf exclusively. Question is how? How to enhance printf without going through much work?

First we look at what kind of enhancement could be done? We can obviously enhance #1. by creating a new string symbol, for example %dbs, %dbs would work like %s, except it would perform mysql_escape_string implicitly.

The perl regular expression and callback comes to rescue.
The following is a snap from drupal source.

/**
 * Helper function for db_query().
 */
function _db_query_callback($match, $init = FALSE) {
  static $args = NULL;
  if ($init) {
    $args = $match;
    return;
  }

  switch ($match[1]) {
    case '%d': // We must use type casting to int to convert FALSE/NULL/(TRUE?)
      return (int) array_shift($args); // We don't need db_escape_string as numbers are db-safe
    case '%s':
      return db_escape_string(array_shift($args));
    case '%%':
      return '%';
    case '%f':
      return (float) array_shift($args);
    case '%b': // binary data
      return db_encode_blob(array_shift($args));
  }
}

/**
 * Indicates the place holders that should be replaced in _db_query_callback().
 */
define('DB_QUERY_REGEXP', '/(%d|%s|%%|%f|%b)/');

/**
 * Runs a basic query in the active database.
 *
 * User-supplied arguments to the query should be passed in as separate
 * parameters so that they can be properly escaped to avoid SQL injection
 * attacks.
 *
 * @param $query
 *   A string containing an SQL query.
 * @param ...
 *   A variable number of arguments which are substituted into the query
 *   using printf() syntax. Instead of a variable number of query arguments,
 *   you may also pass a single array containing the query arguments.

 *   Valid %-modifiers are: %s, %d, %f, %b (binary data, do not enclose
 *   in '') and %%.
 *
 *   NOTE: using this syntax will cast NULL and FALSE values to decimal 0,
 *   and TRUE values to decimal 1.
 *
 * @return
 *   A database query result resource, or FALSE if the query was not
 *   executed correctly.
 */
function db_query($query) {
  $args = func_get_args();
  array_shift($args);
  $query = db_prefix_tables($query);
  if (isset($args[0]) and is_array($args[0])) { // 'All arguments in one array' syntax
    $args = $args[0];
  }
  _db_query_callback($args, TRUE);
  $query = preg_replace_callback(DB_QUERY_REGEXP, '_db_query_callback', $query);
  return _db_query($query);
}

Happy Coding!