fbpx

很想學CSS嗎？先讓哆啦A夢教你CSS在各瀏覽器下有什麼不同吧！

2010/05/26 WordPress 筆記

雖然不斷的改版佈景來融合自己所學習的東西，不過還是得不斷的吸收學習更多的技術，今天在逛網站赫然發現了一個很屌的CSS範例，居然是利用CSS3製作出一支哆啦A夢，而且不靠任何圖片就完成了，丫湯好奇的檢視原始檔，哇靠，真的是太強了，看來哆啦A夢也開始教起了CSS語法，不過由於是CSS3語法製成，在各大瀏覽器下的呈現效果都有所不同，不僅很有效果也很有笑果啦。

01

純CSS哆啦A夢：

在開始說明之前看到上面那張圖各位應該都很驚訝，怎麼有那麼多種哆啦A夢，是有人惡搞的嗎？出現了方形的、畸型的也有，眼尖的網友一定有發現，每一個都是用不同的瀏覽器所開啟的，不過大家可別誤以為這只是網友惡搞哆啦A夢的改造圖片，這可是『純CSS語法』所畫出來的哆啦A夢，沒錯，是真的，你沒有看過，這可是CSS高手基於CSS3技術所製作出來的哆啦A夢，你一定很好奇的想要馬上看看這個頁面，大家可以先用各種不同瀏覽器來開以下頁面看看，開啟後可以檢視原始檔，確實是沒用到半張圖片的純CSS製作哦：

CSS3哆啦A夢：https://steachs.com/wp-content/uploads/doria/

各瀏覽器的CSS哆啦A夢比較圖及分析：

首先我們先來看看表現最優異的Chrome(左)及Firefox(右)，看起來似乎是不相上下，不過只要仔細看在嘴巴的部份感覺是Chrome的表現比較優異一些。

chrome




firefox

再來我們來看看評價也很不錯的Opera(左)及Safari(右)，在Opera之下的顏色呈現與Chrome不同，陰影似乎也較弱一點，而在Safari下很可惜的，居然對CSS3的支援弱掉了，但陰影表現還不錯。

opera safari

最後我們就來看看本來就對CSS3不支援的IE(右)及KKMAN(左)，雖然KKMAN是基於IE核心的瀏覽器，不過IE的核心又分為不少版本，從這邊我們就可以看的出來，在右邊的IE瀏覽器下，很可愛的圓形小叮噹變成了方型的變形金鋼了，而左邊的KKMAN下，小叮噹不僅變成變形金鋼，還加入了ET的世界，真的是太誇張了。

kkmanie8

結論：

以上可以得到一個最簡單的結論，目前市佔率最大的IE針對CSS3語法支援度不僅非常的差，感覺還有點悲哀，而繪圖玩家最愛用的MAC所開發的瀏覽器Safari也在這樣的測試下感覺有點失望，所以如果大家想要在瀏覽網頁時都能呈現最好的效果的話，建議還是使用Chrome、Firefox或是Opera。

說到這裡，愛用IE的人一定會覺得，沒關係，聽說IE9大大的支援新的技術，改良了核心引擎，網頁上也直接標明了支援『CSS3』，我們等就好，好吧～為了讓大家從IE的夢中醒來，丫湯只好再截了一張目前IE9的Demo版的呈現效果，把大家從IE中搖醒吧！！

ie9

沒錯，是有進步了，想要變成變形金鋼在改造後因為失敗，所以只有手臂變成方形，快換掉IE吧，別再害網頁設計的人頭痛腳痛的只為了讓IE也呈現正常…

你可能對這些內容也有興趣

作者：阿湯

對電腦 & 網路資訊充滿興趣與熱情、瘋了似的每日堅持發文，「阿湯」這個名字是由湯姆克魯斯而來的，雖然我沒有他帥氣，也不會演電影，但我會寫文章....

更多關於的文章》

19 個留言▼

  1. K表示:
    2013 年 08 月 22 日10:22:29

    阿湯哥很笨唷～這是偏頗G粉做的惡意比較，IE跑不出來是因為webkit 專屬語法的關係。

    阿湯 說：

    嗯嗯~

  2. 執事貓表示:
    2012 年 12 月 11 日01:32:11

    回頭又看到阿湯的這篇突然想到IE終於在10裡面的哆啦A夢是正常的了
    不過陰影部分還是要加強

    阿湯說：

    等 IE 20 再來看

  3. 小歐表示:
    2012 年 11 月 08 日11:24:41

    個人是非常喜歡Chrome，因為速度快
    而且比較不會愛當機
    之前有過IE一直當機的悲慘經驗…

    只不過Chrome有一些缺點
    就是它的快取很麻煩，像我在網站上覆蓋圖片後要瀏覽時，常常要重新整理三四次才會更新圖片
    (雖然可以清除快取，可是我比較懶XD)

    阿湯說：

    呵呵，他的快取比較粘

  4. akw28888表示:
    2011 年 10 月 26 日23:42:47

    這代碼 已經有人提出 這根本是假的
    因為他的CSS 仔細看 會發現 ……… chrome-……. 以下省略
    或者是……firefox-……. 這是在以前CSS3未規定出來對流覽器適用的語法 IE當然不支援= =

    阿湯說：

    呵~不過只能說IE開發速度太慢了

  5. Zhong表示:
    2011 年 03 月 28 日10:52:09

    fireofox 4.0的嘴巴不正常喔XD

    阿湯說：

    firefox acid 3 97分…

  6. Devis表示:
    2010 年 12 月 07 日20:39:12

    老大~ 可以分享怎么做的吗？xD
    很想学~^^(我之前一直Save不到图片的一些图片原来是CSS3的>”<)

    阿湯說：

    這不是我做的哦,如果你CSS功力夠強..你也可以

  7. 佳佳表示:
    2010 年 08 月 12 日10:27:21

    哪裡有眼珠會動
    我看沒動呢!!

    css能做到這樣真強
    要很了解語法!!!!

    阿湯說：

    眼珠要動我記得好像是要用firefox還是chrome

  8. Mr.OPR表示:
    2010 年 06 月 23 日20:36:11

    太可怕了…
    我突然發現…
    哆啦A夢的眼珠會動…！

    阿湯說：

    本來就會呀@@,這利用核心的特性做的

  9. 小崇表示:
    2010 年 06 月 09 日15:45:12

    努力的幫客戶洗腦使用Chrome中＝ ＝……

    阿湯說：

    加油

  10. M.A.表示:
    2010 年 05 月 29 日12:53:55

    你的Safari是什麼版本的…
    我的Safari顯示的效果跟Google Chrome一樣好!!!

    阿湯說：

    4.X版~

  11. jackey表示:
    2010 年 05 月 28 日04:39:10

    剛好今天有看過這篇，沒看懂！不過看完阿湯哥的詳細解釋才知道，原來都是用css3寫出來的呀！

    阿湯說：

    是呀.超強的

  12. kalahan表示:
    2010 年 05 月 26 日22:39:34

    偶來看看不同的小叮噹
    用的firefox ！支持丫湯 繼續分享！

    阿湯說：

    改天做一支賤兔吧

  13. ansen表示:
    2010 年 05 月 26 日22:18:11

    好像，据说，这个东西的源代码有问题，专门针对Chrome做了优化。

    阿湯說：

    但也不能這麼說,如果扣掉Chrome的部份,整體的效果依然是最好..

  14. Mr.OPR表示:
    2010 年 05 月 26 日17:29:21

    “快換掉IE吧，別再害網頁設計的人頭痛腳痛的只為了讓IE也呈現正常…”
    這句話實在太經典了，能不能叫M$不要再繼續開發IE了…
    讓IE隨著時間消失吧…。
    那個網址裡看見”相当悲剧的IE家族”時我笑了…

    不過這也太神了吧，我從來不知道CSS有這麼強大，
    我竟然都看不懂。

    阿湯說：

    這個要真的很了解…

  15. 好手表示:
    2010 年 05 月 26 日13:05:15

    雖然結果有點搞笑，不過這還真是一個「掛著CSS3標準的羊頭，賣著推廣Webkit核心」的黑心廣告阿XD

    阿湯說：

    還可以啦~

  16. jhangyu表示:
    2010 年 05 月 26 日12:34:55

    瀏覽器之家的那篇文章根本不知所云，
    感覺一個門外漢拿CSS在說嘴，無言…

    阿湯說：

    加減是這樣啦@@

  17. Werboy（硬是要學）表示:
    2010 年 05 月 26 日09:35:34

    哈哈！KKMAN那個看起來超囧的啦！非但沒有圓角，連線條都跑掉了
    不忍心看到小叮噹變成大金剛就要趕快換瀏覽器哦！！（誤）

    阿湯說：

    = =

  18. 碳碳表示:
    2010 年 05 月 26 日08:28:25

    現在只等以後教學圖片是不是就只用CSS來達成就好(想太多啦！)xDD

    阿湯說：

    那一篇大概要做5天

  19. 艾西表示:
    2010 年 05 月 26 日01:00:53

    提醒一下站長,這個似乎還有點值得討論的地方
    不過意念很棒
    http://pcedu.pconline.com.cn/softnews/yejie/1005/2131117.html

    阿湯說：

    嗯嗯,這個我有看過

發表留言 »

姓名(*)
信箱(*)

↑