google analysis study (3) – CSS format

平時打 css , 會咁打

#idname

{

width: 200px;

}

但原來個format 變做一行, 個file size 會minimized, 如下:

#idname { width: 200px; }

google analysis study (2) – set image width and height

平時好lazy, insert 張img 之後就不會set width and height , set 番個alt 同title 就算~~

但原來set 個dimension 有助reduce loading size~~

A width and height should be specified for all images in order to speed up page display. Specifying image dimensions prevents the browser from having to re-position the contents of the page.

其他information:

for ie7 , 同alt

for ie8, detect 不到alt, 要用title

(汗…)

google analysis study (1) – gzip compression

今日同google analysis 睇過個site, 有幾樣suggestion 幾funny ~~ 記下來先

(1) gzip compression

起初唔知係咩, 不過search 過~~原來都係有用既野, 呢個site explain 得好clear. 但gzip 應該係apache 先行到 and 只是針對某d file type: compress XHTML, JavaScript, CSS, and other text files at the server

quote: http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/

How To Optimize Your Site With GZIP Compression

Compression is a simple, effective way to save bandwidth and speed up your site. I hesitated when recommending gzip compression when speeding up your javascript because of problems in older browsers.

But it’s 2007. Most of my traffic comes from modern browsers, and quite frankly, most of my users are fairly tech-savvy. I don’t want to slow everyone else down because somebody is chugging along on IE 4.0 on Windows 95. Google and Yahoo use gzip compression. A modern browser is needed to enjoy modern web content and modern web speed — so gzip encoding it is. Here’s how to set it up.

Flash overlay z-index control in web

flash in the website

we can set the wmode (WMODE=transparent) into differnt condition : window , opaque, transparent.

window, opaque:  will cover the web content, the flash will show at the top. has background

transparent:  flash become backward of the web content. and no background anymore

In order to make the text above the flash, make the following setting:

(i usually set the css in div , success with Flash CS4 and IE7. IE8)

Flash animation with z-index:0

Text BELOW (z-index:-1) 

Text ABOVE (z-index:1)

CSS Hack IE6, IE7, IE8, FF

always meet the css problem in different version/type of browser, so trouble in development…

below some remarks for the css hack:

I have captured some information from the web but the * cannot run in IE8, not success, so use \9 for all IE

.classname
{
 color: blue\9
}

本文據說的主要是通過“.”，“>”，“*”，“_”来区分。以下是本人對這四種符號的測試結果：
———————IE6—— IE7——IE8——FF2——FF3— Opera9.5
>property—— Y——--- Y—— Y-—— N—— N--—— N
.property—— Y——--- Y—— Y-—— N—— N--—— N
*property—— Y——--- Y—— Y-—— N—— N--—— N
_property—— Y——--- N—— N-—— N—— N--—— N


因此這就實現了跨流覽器的表現問題。_property和*property也是一樣的。對於_property來說，只有IE6才能識別，因此可以用於單獨對IE6的設置中。

不過這裡要注意書寫的順序：現在流覽器的寫法要寫在最前面，IE6的寫法要寫在最後面用於覆蓋，其他流覽器寫在中間。
 

方法二：

其實主要是流覽器：IE6/IE7/firefox下，各個對CSS代碼的解釋有區別，下邊轉載一篇HACK的文章，相當實用。

區別IE6與FF： background:orange;*background:blue;

區別IE6與IE7： background:green!important;background:blue;

區別IE7與FF： background:orange; *background:green;

區別FF/IE7/IE6： background:orange;*background:green!important;*background:blue;

注：IE都能識別*標準流覽器(如FF)不能識別*
IE6能識別*，但不能識別 !important
IE7能識別*，也能識別!important
FF不能識別*，但能識別!important

另外再補充一個，底線”_“,
IE6支援底線，IE7和firefox均不支援底線。