首頁近期文章

快速公告

Cinema 4D動畫新世界論壇正式啟用,請造訪Cinema 4D動畫新世界論壇

Hair modules

分類標籤

資料搜尋

最直覺的3D動畫工具 來自德國

2007年11月25日 星期日

批判總檢討


好的,現在是批判的時刻了,首先,我將網頁的規劃區分成幾個區域,如圖所標示,下面來說明一下每一區的功用以及之後會提到哪幾區與瀏覽器之間的相容性問題:
A:logo區-使用Background-image,Illustrator繪製。
B:近期文章區-使用了小裝置:資訊提供。
C:相容性推薦區-使用embed語法帶入Flash按鈕。
D:小動畫-與menu一起的。
E:Menu-置底menu和按鈕。
F:公告區-連同RSS整合書籤。
G小圖區-秀小圖。
H:分類書籤-使用小裝置:標籤。
I:搜尋表單-使用Google生出的表單語法再利用CSS加以修改。
J:文章主體區-原則上使用Blogger的原生語法同樣利用CSS再修改一番。

在製作的過程中,如同前述,我安裝了IE6來測試相容度,其他參與測試的有Safari、Firefox、Navigator、Opera、Camino,總共六種,而且我也擺明了,以IE6為最糟糕相容底線,而以Safari為模範標準,事實上也的確,Safari的表現是最好的、最優的,而Mozilla核心的系列瀏覽器(Firefox、Navigator、Camino)則表現大致相同,意思就是,某一個看會有問題的,另外幾個都會有問題,而Opera屬於特立獨行的單位,它會出現其他幾家沒有出現的狀況,雖然旁邊我列了一個標準分數,Opera只拿到70%相容的分數,但是這不代表它是最差的,而是相反的,之所以拿了那個分數的原因是在於它採用了某些Opera認為更好的瀏覽器設計,這導致我的網站某些功能會被Opera自行定義,因而看起來有點怪怪的,但是這也不打緊,那麼再來說IE6吧,照理講,它應該只有0分,之所以可以得到80%的分數,這要歸功於我自己堅持完美,所以盡量的讓網站的設計可以符合各流派間的差異。不然我現在還是要說,IE6,零分。

來說說有問題的部份吧,以文章主體區來說,IE給我惹的麻煩是最大宗的,以文章從上往下算起的第一篇文章的篇幅如果過少,那麼在IE6就會整個網左邊凸出去,由於我的左方區域是設定成固定在頁面不動,所以當文章網左邊凸出去的時候,那將是一大敗筆,而且經過我徹底的不斷嘗試解決方案皆未果的狀況下,唯一解決的方法只有,讓文章保持於某種篇幅以上就可以消除這問題,好像字數限制就對了,但是如果只是那樣,那還算小問題,最大的問題在於舊文章會有某幾篇也搞出那紕漏,而且只在教學雜記區出現,我的老天,那邊是我最花費心力寫文章的地方啊大哥,這擺明要我刪文章了嘛,這之中奇妙點在於,明明那邊的文很長,卻也會有這個狀況,所以,我不得不先暫時將那邊的文章備份到其他地方,然後再慢慢的將文章重新拷貝近來,在過程中也許我能再度發現bug所在吧,這就是為何,我對IE6這麼憤怒的原因,它爛、它不長進、老舊、漏洞多、容忍錯誤語法程度最高,集各膿瘡於一身,這就是廣大windows使用者一天到晚使用的爛東西。

也許會有人說,是你自己工夫不夠好,是的,我承認,不過話說回來,其他瀏覽器都沒那問題,唯獨IE6有,那麼,到底是誰的問題啊?!我靠。

那麼再來說說頁面固定的元素好了,頁面中被固定的有左方區域以及下面的menu,以CSS排版來講,只消一句語法就可以搞定,然而為了那萬惡的爛IE6,我不得不多方嘗試,最後經過評估,採用的是以額外的div元素包住整個頁面,在另外撰寫一個只有IE6看得懂得語法,然後在那語法內將左方以及下面menu的元素的css寫進去,然後捲軸給設定成消失,這在IE6中就會當作,左方以及menu的捲軸設定消失,這樣就會不動了,嚴格來說,是無法控制它去動,而不是讓它固定,因此意義上是天壤之別,但是除了用這方法,別無他法了(javascript除外)。

然而,盡管那問題解決了,但是眼尖的觀眾也許會注意到,固定元素也不是那麼好用的,當使用者將瀏覽器的視窗橫向壓縮的情況下,使用position:fixed的元素由於盡忠職守的待在原地,所以,使用者如果此時將左右的捲軸拉動一下,好比往左邊拉動,那麼同樣會穿幫,這點在IE6反而不會穿幫,意思就是,當瀏覽器視窗左右壓縮的時候,拉動左右捲軸,我左方的logo區在IE6之中反而會乖乖的跟著過去,這是因為IE6並沒有真正固定的關係,那麼問題該怎麼解決呢?

我做了一個假設,此blogger需要被左右捲軸拉動的機會並不大,首先,我的寬度只設定成900,以現今大螢幕當道的情況來看,這個設定並不過份,現在使用800*600的已經十分稀有了,縱使使用800*600瀏覽此blog,也不需要真正去拉動左右捲軸,除非故意的將瀏覽器左右壓縮,否則會出現需要拉動左右捲軸的機會非常少,事實上根本就沒有,所以,我根據假設做了一個設定,就是將此blog的左右捲軸都取消了,意思就是,不論在IE6或任何瀏覽器,都永遠看不到左右捲軸,這代表一件事情,需要左右拉動的情況如果發生,只會出現在,使用者(還有我),故意的將瀏覽器左右壓縮,如圖:


所以,很好,看來,我似乎再也不用擔心穿幫狀況了吧?錯,錯錯錯錯錯!請各位看倌看看那張圖的左下角,有沒有看到一個捲軸的馬腳露出來了,對,就是它,那個捲軸是body元素的,咦?有沒有搞錯啊,不是已經設定overflow-y:hidden了嗎?怎麼還會跑邊?答案在於,又是那該死的IE6了,我之前說過,IE6因為無法設定真正固定元素,所以只能透過隱藏捲軸的方式來偷吃步,但是如果真正的隱藏捲軸,那麼整個頁面將無法捲動(請注意,我要固定的東西除了左方以外,還有下方的menu,而menu又必須不只是固定,還要永遠貼底,所以我不得不設定別的東西來幫忙輔助),所以我額外的設定一個包住全頁面的div區塊來排除這個狀況,然而,這個區塊當辨識到瀏覽器被左右壓縮的時候就會出現那個捲軸,我不可能設定它消失,因為事實上,現在可以上下捲動就是靠它,而它的左右寬度我並沒有設定px,而是設定100%,所以它出現了,大王,是的,它是大王,我不能去惹它,除非開除它,當然,我的確可以開除它,只要我不在乎IE的話,所以,總得來說,這是我唯一目前為止,同意容忍全瀏覽器會出現的bug,只是幸好,真的需要左右拉的情況確實近乎於零,就算出現捲軸也並不明顯,加上它會被menu擋住,我說過,menu是永遠貼底,而那個大王是body區塊的部份,所以擋住它是很正常的事情,
然而雖然那個捲軸無法透過滑桿去左右拉動,但是還是有辦法讓它動的,對,就是所謂的四方向軌跡球滑鼠,那東西會讓這個設定破功,只要使用者故意的將瀏覽視窗左右壓縮,然後使用軌跡球左右滑動一下,馬上敗筆,因此我真的有想過找找看有沒有什麼javascript可以強迫使左右軌跡在本網站失效,但是這樣太機車了,包含某些網站會使用javascript讓頁面固定於某種長寬比例,這也很不尊重,不過解決方案不是沒有,就是我寫一個javascript按鈕,這個javascript可以設定視窗大小,比方900*600啦、多少多少之類的,但是,我累了,不想再搞了,這個版型裡面牽扯太多元素了,因為原先並沒有設定這個東西的存在,現在如果要加,那就是等我心情好再來弄,而且,縱使加上這按鈕,使用者也未必真的會去按,以正常的思考來說,當視窗左右壓縮成那樣了,無非只是為了要測試一下網站罷了,不然真的沒有什麼機會會去故意這樣弄,所以,我打消了這個念頭,也容忍了。

不過這個問題在Opera卻會發生無法抵擋的大大大大狀況,這也是Opera自己的問題,Opera對於隱藏捲軸有自己的看法,大家都沒有,就它有,我勒,所以造成Opera在看網站會出現多餘的捲軸,而且這個問題我查詢過,照理說,是Opera9才有的狀況,Opera9.2聽說已經排除,怎麼我看還是會有?!算了,不管了,反正Opera的使用者太少了,加上Opera的特長是看圖,圖多的網站Opera絕對速度第一名,這點是無可取代的,所以我也不想責難Opera了。

不過除了這點以外,Opera看本網站還是有幾個無可奉告的大栽問,就是我左下方的瀏覽器相容推薦度的地方,會跑勒,唉我的老天,難道要我再寫一組解決它的狀況嗎?算了.....誰叫我一開始只把IE6當作唯一的壞學生而忽略了它。不過,因為我喜歡Opera,所以我仍然不怪它,我怪我自己工夫不到家,這是我的錯。

再來就是右方的區塊,那邊原則上沒有什麼大問題,多使用CSS定義,除了IE6和眾家在某些單位上的判定有差異以外,這問題都好解決,之前說過了,我為了IE6寫了一個專屬於IE6判斷的CSS區塊,我的做法很簡單,寫好第一組CSS以後,確認無誤,就進入IE6去看,然後根據IE6的狀況,將新的定義或修正定義寫進 IE6專屬的CSS裡頭去,IE6就會優先辨識那組CSS,也就因此忽略了其他瀏覽器會看得CSS定義,就是手續多一道就對了。

最後來說說Mozilla家族的共通狀況,就是對flash元素敏感,首先是Navigator,當使用滑鼠去拉動上下捲軸的時候,menu的陰影會無限制增長,最後就會變成一片黑,這很怪,我可以拿掉陰影,但是我不想,幸好,當頁面flash元素有任何動靜,那個黑色陰影就會消失,所以這就是為什麼我加入小動畫的原因,動畫一動,就一切正常了,缺點就是menu看起來偶爾會有閃爍一下的狀況發生,而FireFox也會有那狀況,但是它卻不是發生在以滑鼠手動上下拉動捲軸,而是當menu只要遮住可以開啟的連結圖片,而滑鼠又移動到圖片上頭時,陰影就會開始增長,不過同樣的只要動畫有在動,那個陰影也會消失,只是看起來也是一樣menu好像也會偶爾閃爍一下罷了,我有去測試過,某些網站只要有採用陰影性質且又是透明背景的flash時,那狀況都會出現,不知道是我flash學藝不精轉檔出錯誤還是怎樣,總之,排除不了,卻又不會出人命,所以,算了,同樣列入缺失吧。不過除此以外,Navigator對於上下捲軸只要位於menu的高度時,會出現類似被遮住的狀況發生,我認為這應該是因為我的捲軸是body的原因而造成的,反正那個元素的功用十分重大,所以也只好忍住,幸好,FireFox反而不會,而Navigator的使用者又比FF少很多,所以就不管了,畢竟那並不致命,只是一點點、小小的不習慣。

以上,大致上就是這樣了,最後Safari仍然是最優秀的模範生,它,沒有任何狀況發生,真的,它忠實的傳達了我一開始的設定,而Mozilla系列的也相去不遠,產生的狀況我歸類於顯示的差異,所以也可以接受,不過Mozilla中的Camino會出現對我設定用來Go Top的小按鈕敏感的狀況,就是頁面上下捲動的時候,那個小按鈕看起來慢半拍,這我就不知道為什麼了,因為沒有任何一個瀏覽器會那樣,就它有,類似顯示延遲就對了,不過仍然會到位,所以沒關係,而Opera使用者,我真的只能說抱歉了,本人工夫不夠,無法眾家兼顧,非常抱歉,而IE6......算了吧,不想講它了,至於IE7?我不知道,沒有機會用到它,我只能猜測理論上不會有狀況才對,不過如果IE7使用者有發現狀況,請告訴我,我會仔細的研究一下。


=====================
Cinema 4D動畫新世界/Cinema 4D new animation
Cinema 4D動畫新世界論壇

1 意見:

海狗 提到...

意見測試