各瀏覽器對HTML 與CSS 相容性如何？從一幅畫就可顯出差異

由於這項目的藝術性，因此我不關心跨瀏覽器的相容性，所以即時預覽可能在除Chrome 外的任何瀏覽器看起來都很可笑。

Safari 瀏覽器中，蕾絲的花邊裝飾 ... 如果你的瀏覽器會畫畫，那會畫出怎麼樣的畫？ 如果瀏覽小說多，可能是文​​字組合多的黑白圖畫；如果是線上狂看動漫作品，那估計是色彩繽紛的波普畫；要是每天都在看藝術攝影照，那可能畫出光影變幻的印象畫。

可惜瀏覽器不是AI，沒辦法根據自己的程式碼、特性來畫一幅畫。

▲Chrome的畫。

（Source：VICE） 但這也沒關係，數位藝術家DianaSmith設計一串純web的程式碼，每個瀏覽器在加載頁面時都會呈現為圖畫。

DianaSmith一直以來都在嘗試用CSS和HTML作畫。

所有元素都是手動輸入，僅允許使用Atom文本編輯器和Chrome的開發者工具，同時SVG元素使用也可能受限制。

此項目和原始碼都可在GitHub 查詢。

這一次，DianaSmith「作畫」和不同瀏覽器有關。

除了Chrome瀏覽器能呈現圖片本身預想的畫作外，其他瀏覽器都會「畫」出不同的圖像。

這也展示了不同瀏覽器轉換工作的差別。

▲DianaSmith的藝術作品。

（Source：GitHub） 這不是說其他瀏覽器都不如Chrome，只是作者一開始並沒有考慮跨瀏覽器相容的問題。

但就是因為沒有相容，這串代碼反而畫出不同的「有趣」圖畫。

由於這項目的藝術性，因此我不關心跨瀏覽器的相容性，所以即時預覽可能在除Chrome外的任何瀏覽器看起來都很可笑。

Safari瀏覽器中，蕾絲的花邊裝飾蓋在女士臉上，這片蕾絲本應該出現在女士的脖頸後方當裝飾品。

▲Safari的畫。

（Source：VICE，下同） 而2014版Opera瀏覽器，畫變得更詭異，風格全然不同。

脖子分成三部分，眉毛、頭髮、眼睫毛的位置都偏移錯位，以更像條碼的方式展現。

脖子、眼睛也偏移，是一張平面、詭異的畫作。

▲Opera的畫。

讓人感覺十分複雜的是Edge瀏覽器。

雖然名字Edge有「邊緣」之意，但畫中它自動「畫」掉所有邊線，讓項鍊消失，整幅圖畫更平滑。

這幅畫作還是看起來最陰沉的一幅。

▲Edge的畫。

還有曾是網路開始時最流行的瀏覽器──NetscapeNavigator（網景領航員），儘管市占率一度達90%，但可能很多人都沒聽過這名字。

即便如此，它依然是最有風格的瀏覽器創作者，圖像自成一派。

臉變成方塊，嘴巴、眼睛等五官變成不同大小的方塊，深色毛髮變成條碼狀線條，有點像樂高，也有點像《當個創世神》風格。

Vice覺得這個顏色和微軟Edge基本保持一致，或許是因為這兩家公司都曾統治1990年代。

▲NetscapeNavigator的畫。

DianaSmith說：「當你在不同瀏覽器查看這張圖片時，就像查看網際網路的歷史，以及當時用戶對瀏覽器的要求。

」 事實上，雖然此數位藝術完全是藝術方面的探索，但也很容易讓人聯想到中國多年前的行銷活動──IE6殲滅戰。

當時還有很多用戶使用有較大安全問題的IE6，於是360號召大家和周鴻禕一起「真槍實彈」消滅IE6。

用戶只需登錄活動主頁就能自動檢測用戶瀏覽器的IE內核版本，檢測是否使用不安全的IE6。

若用戶瀏覽器內核為IE6版，主頁的哆啦A夢就無法顯示原本形象，而會五官扭曲，分辨不清。

IE8內核的瀏覽器則能清晰顯示哆啦A夢，圖片不同也能提醒用戶升級瀏覽器。

7年前的行銷活動和今天的數位藝術品，兩者都很有趣。

（本文由愛范兒授權轉載；首圖來源：DianaSmith） 科技新知，時時更新 科技新報粉絲團 訂閱免費電子報 關鍵字:CSS,DianaSmith,HTML,PureCSSLace,數位藝術,瀏覽器 Postnavigation ←iPhone11支援系統級封裝，三大廠受惠 劉德音為何能帶領台積電安全度過地緣政治風暴？→ 我們偵測 到您有啟用 ADBlock 請您暫停使用ADBlock，以支持我們持續能提供更多新聞資訊與優質的閱讀環境。

CurrencyRate 新報特企 焦點動態 系列專題 2022-10-13(四) 臺北市 台灣創新技術博覽會邀請您參與亞洲發明界盛事！ 本屆創博會將於10月實體線上盛大登場，現在就預先登記參觀！ 前往活動 本週熱門Google員工抱怨福利被刪，CEO：不要把工作樂趣與金錢畫等號 請關閉Chrome或Edge「進階拼字檢查」功能！所有輸入內容與密碼會上傳雲端RTX40系列顯卡從三星8奈米升級到台積電4奈米，黃仁勳：非常失望漲價有理？黃仁勳：摩爾定律已死，12吋晶圓貴超多新iPhone用舊晶片：或許是新時代的開始NVIDIARTX40系列台積電4奈米助攻，RTX4090/4080上市GitHub全站程式碼21TB資料入庫北極次世代疫苗對BA.5有用嗎？施打族群、間隔時間一篇了解 財訊快報 遠傳8月營收月增1.8% 中華電8月營收173.37億元 漢唐8月營收52.67億元 台灣大8月營收月增1.6% 日月光投控8月營收月增9.7% 康控-KY8月營收1.44億元 台達電8月營收月增3.0% 訊芯-KY8月營收月增24.9% 弘塑8月營收月減14.9% 金居8月營收4.50億元 更多>> 編輯精選 [專欄]正視楊金龍總裁正在傷害中央銀行公信力的嚴重性 [專題]拚贏中國和OLED競爭，錼創李允立：紅光MicroLED效率是關鍵 [專題]蘋果分散供應鏈風險，越南將取代中國成生產基地？ [專題]iPhone14備貨9,000萬支！這15檔蘋概股下半年發光 [專題]蘋果秋季新品發表會快來了，除了iPhone14還有哪些看點？ [專題]今年真的有驚歎號？iPhone14系列傳聞一次看 [專題]材料缺點成突破口！英新創Porotech翻轉氮化鎵特性，克服MicroLED單色瓶頸 [專題]新技術、新產品、合作案齊發，全面盤點上半年全球MicroLED廠商動態 FB粉絲團 請您暫停使用ADBlock，以支持我們持續能提供更多新聞資訊與優質的閱讀環境。