在 Slashdot 上看到 Opera 打算在 9.5 版 (現在最新版是 9.21) 完整支援 CSS Selector (Slashdot 所下的標題有點誇張):Opera 9.5 To Fully Support CSS?。
除此之外,Opera 9.5 還會實做某些 CSS3 的規格,並且再改善速度...
幹壞事是進步最大的原動力
用 Google 找到的 bug 似乎是講用 Javascript 動態改變 display 時的 bug,不過我遇到的是純 CSS 的 layout 問題...
這頁 丟到 IE6/Firefox2/Opera9/Safari2/Safari3 測試,發現在 Safari 2.0.4 (Mac) 及 3.0.1 (Win) 上都會先出現 #id2 再出現 #id1,但是其他的瀏覽器都是先顯示 #id1 再顯示 #id2。
這是在我的 Windows 上顯示出來的結果,Safari 2.0.4 (Mac) 的結果跟 Safari 3.0.1 (Win) 的結果一樣,再加上我手邊沒有 Mac,就不貼了:
我的問題是,Opera 與 Safari 這兩個都通過 ACID2 的 Browser 到底哪個才是正確的?
Update:The display declaration 上早就提過這個問題了。
Note:這只是在 Javascript 裡跑 CSS Selector 的速度。
剛好看到 SlickSpeed CSS Selector TestSuite 這篇文章,在 Windows 上測了幾個瀏覽器,單位都是 ms (所以數字愈小愈好),測試的時候都儘量保持不動電腦的情況下跑完:
prototype 1.5.1 | jQuery 1.1.2dev | MooTools 1.2dev | ext 1.1b1 | cssQuery 2.02 | |
---|---|---|---|---|---|
IE 6 | 1600 | 3238 | 1302 | 839 | 6511 |
Firefox 2.0.0.5 pre | 176 | 4289 | 144 | 965 | 5411 |
Opera 9.20 | 68 | 1445 | 112 | 198 | 1122 |
Safari 3 beta | 120 | 733 | 140 | 152 | 931 |
呃,Firefox 2 的速度... (想裝地雷看看有沒有進步,結果想到早上才失敗過,沒辦法測 XD)
Update:網頁上多了 Dojo 的測試項目,速度也還不錯。
這篇是在講 Clearing floats。情況是有有個 #container1,包了 #block1 與 #block2:
<div id="container1"> <div id="block1">content</div> <div id="block2">content</div> </div> <div id="container2"></div>
其中 #block1 與 #block2 都設有浮動 (float) 屬性:
#block1 { float: left; width: 50%; } #block2 { float: left; width: 45%; }
另外 #container2 裡面也許會有其他的浮動屬性,但是你不想將 #container2 裡面的東西跑到 #container1 的右邊,所以對兩個 container 用 clear: both 處理:
#container1, #container2 { clear: both; }
現在想要對 #container1 設定 margin-bottom,使之與 #container2 有邊距:
#container1 { clear: both; margin-bottom: 1em; }
但這樣是不會動的,#container1 要加上 overflow 屬性 (參考原文內容):
#container1 { clear: both; margin-bottom: 1em; overflow: hidden; }
不過這樣的話 IE6 還是不會動,所以要再加上:
#container1 { clear: both; margin-bottom: 1em; overflow: hidden; width: 100%; }
理論上這樣就可以解決這些問題了... (真是麻煩 :/)
問個 YUI Grids CSS 的問題... 在 IRC 上跟 布丁 都沒有找到答案,所以還是開一篇問一下...
如果我想要用 YUI CSS Grids 做到 1/8 - 1/8 - 1/8 - 1/8 - 1/6 - 1/6 - 1/6 的切割,要怎麼做?(平常應該是用不到這種 case,所以只是問問而已,想知道 YUI CSS Grids 的極限在哪裡)
順便給個失敗的例子:netnews.nctu.edu.tw/~gslin/a.html,這裡面 1-3-1 與 1-3-2 換行了...
Yahoo UI Library 2.2.2 釋出:YUI Version 2.2.2: Bug-Fix Release,修正一些 bug,詳細的修正內容可以參考 YUI 2.2.2 — Bug Fix Release 這篇。
主要是修正 Javascript 的部份。
用 <pre></pre> 如果遇到文字過長的時候就會炸掉,所以我 Blog 上偶爾會因為我貼 code 發生慘劇 (因為也不知道怎麼解),結果剛剛在 Wrapping the pre tag 這篇看到解法:
pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ }
有 CSS3 的就以第一條支援 (在 CSS 2.1 裡也有),Mozilla 系列以第二條,Opera 以第三與第四條,最後則是處理 IE。