五大主流瀏覽器 HTML5 和 CSS3 兼容性比較

轉眼又已過去了一年,在這一年里,Firefox 和 Chrome 在拼升級,版本號不斷飆升;IE10 隨著 Windows 8 在去年10月底正式發布,在 JavaScript 性能和對 HTML5 和 CSS3 的支持方面讓人眼前一亮。這篇文章給大家帶來《五大主流瀏覽器 HTML5CSS3 兼容性大比拼》,讓我們一起來看看2013年的瀏覽器現狀。

?

?

  瀏覽器廠商之間的競爭促使各大瀏覽器對 HTML5CSS3 的支持越來越完善,下面的圖表列出了 IE,Chrome,Firefox, Safari,Opera 五大主流瀏覽器,在 Mac 和 Windows 兩個平臺,對 HTML5 和 CSS3 各種特性最新的支持情況的詳細清單(個別數據可能不準確,大家可以通過 caniuse.com 查詢更為詳細的信息)。

CSS3 屬性

  從表中可以看出,除了 Overflow Scrolling 還沒有瀏覽器支持之外,其它屬性都已經有瀏覽器實現了。在 Windows 平臺,Chrome 支持除 Overflow Scrolling 以外的所有屬性(圖片數據有誤,CSS3 3D Transforms 在 Chrome 25 開始已支持,需要加 -webkit- 前綴),其次支持比較好的是 Firefox,還不支持 CSS3 Reflections。

  曾經一片紅叉的 IE 開始迎頭趕上,IE10 已經和能和 Opera 比拼了。在 Mac 平臺情況要好很多,Safari 、Chrome 和 Firefox 幾乎支持全部的 CSS3 特性。Opera 也只有少數幾個屬性不支持。

  (注:CSS3 的 Overflow Scrolling 屬性用于模擬移動設備原生的阻尼滾動,類似于 iScroll 實現的滾動效果,目前只有 iOS 5 內置的 Sarari 瀏覽器支持,詳情:Native style momentum scrolling to arrive in iOS 5)

?

CSS3 選擇器

  CSS3 選擇器兼容情況最讓人欣慰,除了 IE9 以下的版本,其它瀏覽器已全部支持 CSS3 選擇器特性。IE6 悲劇的一個都不支持,IE7 和 IE8 僅支持少部分,IE9 和 IE10 給力,竟然也全部支持。

?

?

HTML5 Web 應用程序

  HTML5 為支持 Web 應用程序開發新增的這些特性是 HTML5 最激動人心的部分,包括本地存儲、離線存儲、地理定位、Workers 和 WebSockets 等等。Chrome 最給力,支持全部特性(表中數據有誤,Touch(觸控)事件,Chrome 25 和 Firefox 19 已支持)。

  WebSQL Database 已經被 W3C 放棄了,瀏覽器不支持也沒關系,而 Indexd Database,IE10、Chrome 和 Firefox 都支持,這是開發者的福音啊。IE10 很給力,就 Meter 標簽和 Touch Event 不支持。

?

?

HTML5 圖形和內嵌內容

  這應該是 HTML5 最令人期待的東西了,內置Canvas,Audio,Video,SVG、WebGL 和 SMIL 等重要特性對象。Chrome、Firefox、Safari、Opera 以及 IE9/IE10 都支持,太棒了!

?

?

HTML5 音頻編碼

  Chrome 依然給力,對 HTML5 音頻格式又是全部支持,Safari 除 Ogg Vorbis 格式外全部支持。讓人感到奇怪的是 IE 竟然不支持自家的 WAV 格式,而 Chrome、Firefox、Opera 和 Sarari 卻都支持,⊙﹏⊙b汗。

?

?

HTML5 視頻編碼

  對 HTML5 視頻的支持還是 Chrome 最好,包容天下。Firefox 和 Opera 支持 Ogg Vorbis 和 WebM 兩種視頻格式,不支持 H.264,相反的 IE9/IE10 和 Safari 只支持 H.264。據統計,目前 80%的視頻使用 H.264 編碼,期待 H.264 早日統一的視頻編碼標準!

?

?

HTML5 表單輸入

  HTML5 新增了眾多新的 input 類型,例如 DateTime、Range、Colour 等等,以前這些都是需要使用 JavaScript 才能實現的功能,如今只需要設置 input 類型就能實現。淡定的 Opera 竟然全部支持,有點意外!Chrome 還不支持 DateTime 類型,其它的都支持,IE10 和 Safari 都支持程度相當,而 Firefox 這方面還需努力。

?

?

HTML5 表單屬性

  HTML5 表單屬性也是對表單功能的重要改進,簡化了 Web 應用開發。在 Mac 平臺,除了 Safari 還不支持 List 屬性外,其它屬性都支持。在 Windows 平臺,Chrome、Opera 和 IE10 全部支持,Firefox 又掉隊了,竟然落后 IE 了,Min、Max 和 Step 屬性都還不支持。

?

?

寫在最后

  目前,對 HTML5CSS3 支持最好的是 Chrome,IE10 已經能和 Safari、Firefox、Opera 旗鼓相當了。總的來說,各大瀏覽器對 HTML5 和 CSS3 的支持正在不斷完善,越來越多的各大企業和開發者也在嘗試在項目中使用 HTML5CSS3,特別是在移動互聯網領域,已經有很多優秀的應用開發出來,未來的 Web 有很多令人期待的東西。

(文/夢想天空,數據來源:http://fmbip.com/litmus)

轉載于:https://www.cnblogs.com/powerzhang/archive/2013/06/07/3125331.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/376619.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/376619.shtml
英文地址,請注明出處:http://en.pswp.cn/news/376619.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Ubuntu下將Sublime Text設置為默認編輯器

轉自將Sublime Text 2設置為默認編輯器 修改defaults.list 編輯/etc/gnome/default.list文件,將其中的所有gedit.desktop替換為sublime_text.desktop。 sublime_text.desktop在/opt/sublime_text目錄下,使用ls -al *sublime*命令查看具體文件名。 轉載于…

python獲取最近N天工作日列表、節假日列表

# 獲取最近兩周工作日列表、節假日列表 import datetime import chinese_calendar import time import pandas as pd# 將時間戳轉換成格式化日期 def timestamp_to_str(timestampNone, format%Y-%m-%d %H:%M:%S):if timestamp:time_tuple time.localtime(timestamp) # 把時間…

保存頁面的瀏覽記錄

我的設計思想是將用戶的瀏覽記錄保存到cookie里面,然后根據情況處理。cookie里面的數據格式是json格式,方便根據自己的需要添加或者修改屬性。引用了3個js文件,下載地址如下。 https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js …

開竅小老虎,一步一個腳印之 初識匯編(一)

最近一直浸淫在計算機編程中無法自拔。哲學 認識論中講過。人類的求知的過程是由兩次飛躍。第一是從感性認識到理性認識;第二是從理性認識到實踐。這段話對有些人是適用的。我就是其中的一名。在知乎上求助問題“學計算機要懂匯編嗎?”,地下有…

python腳本 請求數量達到上限,http請求重試

由于在內網發送http請求同一個token會限制次數,所以很容易達到網關流量上限。 業務中使用了多線程并發,一個線程發起一次http請求,得到正確結果后返回。這里采用的策略是,如果解析出來達到流量上限,那么該線程休眠一段…

shell 字符串操作

string"abcABC123ABCabc" 字符串長度: echo ${#string} #15 echo expr length $string #15 索引 用法:expr index $string $substring expr index $string "ABC" #4 提取子串 用法:${string:position} echo ${string:3} #A…

Linux 之目錄 -鳥哥的Linux私房菜

因為利用 Linux 來開發產品或 distributions 的社群/公司與個人實在太多了, 如果每個人都用自己的想 法來配置檔案放置的目錄,那么將可能造成很多管理上的困擾。 你能想象,你進入一個企業之后,所 接觸到的 Linux 目錄配置方法竟然跟你以前學的完全不同嗎? 很難想象吧~所以,后來…

python腳本:向表中插入新數據,刪除表中最舊的數據

一張表存儲歷史數據,最多存儲HISTORY_TABLE_MAX_ROWS條數據,當表中數據未達到HISTORY_TABLE_MAX_ROWS,直接插入;如果達到的話需要保證插入新數據的時候將最舊的數據刪除 這里使用先update最新數據,然后再重新update全表…

精通 VC++ 實效編程280例 - 02 菜單和光標

菜單和關閉時重要的 Windows 資源之一。SDK 中,用 HCURSOR 和 HMENU 分別表示菜單和光標的句柄。MFC 中,CMenu 類封裝了菜單的功能。 23 動態添加和刪除菜單項 添加菜單項可以調用 CMenu::AppendMenu 或 CMenu::InserMenu 函數,刪除菜單項可以…

POJ 1860: Currency Exchange 【SPFA】

套匯問題,從源點做SPFA,如果有一個點入隊次數大于v次(v表示點的個數)則圖中存在負權回路,能夠套匯,如果不存在負權回路,則判斷下源點到自身的最長路是否大于自身,使用SPFA時松弛操作…

python腳本:判斷字符是否為中文

# 判斷字符是否為中文 def is_chinese(ch):if u\u4e00 < ch < u\u9fff:return Trueelse:return False

Android 廣播 Broadcast學習

Android Broadcast 廣播 進程內本地廣播 如果你是在你的應用之內使用廣播&#xff0c;即不需要跨進程&#xff0c;考慮使用LocalBroadcastManager &#xff0c;這樣更有效率&#xff08;因為不需要跨進程通信&#xff09;&#xff0c;并且你不用考慮一些其他應用可以發送或接收…

python:將時間戳轉換成格式化日期

import time # 將時間戳轉換成格式化日期 def timestamp_to_str(timestampNone, format%Y-%m-%d %H:%M:%S):if timestamp:time_tuple time.localtime(timestamp) # 把時間戳轉換成時間元祖result time.strftime(format, time_tuple) # 把時間元祖轉換成格式化好的時間retur…

WebApp 里Meta標簽大全

1.先說說mate標簽里的viewport&#xff1a; viewport即可視區域&#xff0c;對于桌面瀏覽器而言&#xff0c;viewport指的就是除去所有工具欄、狀態欄、滾動條等等之后用于看網頁的區域。對于傳統WEB頁面來說&#xff0c;980的寬度在iphone上顯示是很正常的&#xff0c;也是滿屏…

python:封裝CRUD操作

# 封裝數據庫操作 def SELECT(db, cursor, sql):try:# 執行SQL語句db.ping(reconnectTrue)cursor.execute(sql)# 獲取所有記錄列表results cursor.fetchall()logging.debug("select commit")except:logging.error(sql)logging.error("select 語句執行出錯"…

我的osu游戲程序設計(oo)

osu是一款社區元素為主旨的音樂游戲,由澳大利亞人Dean Herbert (peppy)獨立制作并運行. 游戲的方法簡單,就是 1. 圈圈(Circle)&#xff1a;圈圈(Circle) 50。沒打中顯示X,并減少生命值。圈中序號的最后一個的300、100會顯示為激300、喝100。2.滑條(Slider) : 在開始端點擊按住不…

影像數據庫調研

參考Paul Graham比較各種編程語言的方法&#xff0c;我們比較各種數據庫的特點如下&#xff1a; Oracle: 我們需要企業級數據庫。 MySQL: Oracle不開源。 PostgreSQL: MySQL的功能不夠多。 SQLite: 你可以把我嵌入到任何地方。這樣&#xff0c;4種數據庫夠大家用了。 MongoDB: …

linux進程間通信快速入門【三】:信號量(XSI、POSIX以及PV原語)

文章目錄XSIsemgetsemop、semtimedopsemctl基于共享內存demo修改XSI信號量的限制PV原語PV控制并發進程數POSIX信號量使用posix命名信號量使用posix匿名信號量參考在前兩篇文章中我們使用的racingdemo都沒有對臨界區代碼進行加鎖&#xff0c;這里我們介紹以下信號量的使用。Linu…

QTableWidget的使用詳細介紹和美工總結(轉)

基本外觀設置 FriendTable->setFrameShape(QFrame::NoFrame); //設置邊框 FriendTable->setHorizontalHeaderLabels(HeadList); 設置表頭 FriendTable->setSelectionMode(QAbstractItemView::SingleSelection); 設置選擇的模式為單選擇 FriendTable->setSelect…

Android programming on Mac 之安裝Eclipse

1.安裝包在此鏈接下載&#xff1a; http://developer.android.com/sdk/index.html google GoAgent翻墻不好用&#xff0c;更新了host文件也不行&#xff0c;整了半天&#xff0c;還是一怒之下續簽了vpn賬號。早知如此&#xff0c;何必折騰。~~~~(>_<)~~~~ 更新文件時…