HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：測試及兼容性設(shè)置

HTML5+CSS3網(wǎng)頁設(shè)計與制作制作響應(yīng)式網(wǎng)頁能描述各個瀏覽器對HTML5及CSS3的兼容情況；能根據(jù)瀏覽器兼容性情況使用CSS3前綴解決兼容性問題；能夠使用W3C提供的驗證工具對D清單頁面進行驗證，并能根據(jù)驗證結(jié)果修改不符合W3C規(guī)范的代碼。任務(wù)目標測試及兼容性設(shè)置1、完善上一任務(wù)的D清單網(wǎng)頁，讓該網(wǎng)頁的兼容性更強。2、使用W3C對D清單頁面HTML和CSS代碼進行驗證，確認是否符合W3C標準。W3CCSS驗證測試頁面如圖1-23所示。任務(wù)描述圖1-23W3CHTML和CSS驗證測試頁面測試及兼容性設(shè)置完成對D清單頁面進行兼容性測試和W3C驗證測試，需要：學(xué)習常見的瀏覽器及其對H5的兼容性；學(xué)習并為D清單頁面添加CSS3瀏覽器前綴；對D清單頁面代碼進行W3C認證測試。任務(wù)分析測試及兼容性設(shè)置知識與技能準備目前，支持CSS3和HTML5的瀏覽器變得越來越多，包括最新版的MicrosoftEdge瀏覽器。但是，由于CSS3和HTML5的W3C規(guī)范在不斷的完善，瀏覽器的兼容性也在不斷的更新。目前IE，F(xiàn)irefox，Opera，Chrome，Safari五大主流瀏覽器對HTML5和CSS3各種特性都有比較好的支持，HTML5正在成為開發(fā)的主流。1、五大瀏覽器對CSS3和HTML5兼容性比較知識與技能準備1.1CSS3屬性目前我國用戶瀏覽器使用情況如下圖：注：第3、4、6列分別為Firefox、Chrome和Opera，數(shù)據(jù)來自

。各瀏覽器版本對CSS3、HTML5、JS、JSAPI、Other、Security、SVG等的支持情況由于版本不斷更新，請自行前往

了解。1、五大瀏覽器對CSS3和HTML5兼容性比較圖1-23-1國內(nèi)占98.09%市場份額瀏覽器各版本使用情況知識與技能準備瀏覽器一直都在實施CSS3，但它還未成為真正的標準。為此，當一些CSS3樣式語法存在波動時，它們提供針對瀏覽器的前綴?，F(xiàn)在主要流行的瀏覽器內(nèi)核主要有：（1）Trident內(nèi)核：主要代表為IE瀏覽器；（2）Gecko內(nèi)核：主要代表為Firefox；（3）Presto內(nèi)核：主要代表為Opera；（4）Webkit內(nèi)核：產(chǎn)要代表為Chrome和Safari。針對這些不同內(nèi)核的瀏覽器，CSS3部分屬性需要添加不同的前綴，也將其稱之為瀏覽器的私有前綴，添加上私有前綴之后的CSS3屬性可以說是對應(yīng)瀏覽器的私有屬性。2、CSS3前綴知識與技能準備2、CSS3前綴表1-23-2CSS3前綴這樣編寫代碼，無形之中給前端人員增加了不少工作量，那么如何在編寫CSS時不需要添加瀏覽器的私有前綴，又能讓瀏覽器識別呢？我們可以通過引用一個prefixfree腳本來解決這個問題。只需要在.html文件中插入一個prefixfree.js文件（建議把這個腳本文件放在樣式表之后）。添加這個腳本之后，使用CSS3的屬性時，只需書寫標準樣式即可。prefixfree腳本僅在IE9+、Opera10+、Firefox3.5+、Safari4+得到支持。但是對于開發(fā)人員來說，使用這個方法也是需要調(diào)試的。一旦客戶端禁用了JavaScirpt，它的功能會失效。另外對于客戶體驗來說，也有一定影響。打開VisualStudioCode，輸入如下標簽：課堂練習1-23-1制作如下圖效果的圖像html1<div></div>css123456789div{width:200px;height:100px;background:#80A060;background-image:linear-gradient(transparent,rgba(10,0,0,.3));/*線性漸變*/border-radius:50%;box-shadow:1em2em4em-2emblack;/*陰影*/transform:rotate(15deg);}js12<scriptsrc="prefixfree.min.js"type="text/javascript"></script>圖1-23-2圖像知識與技能準備在本教程的中我們已經(jīng)介紹過W3C標準了，知道我們在建設(shè)網(wǎng)站時應(yīng)該要保證代碼符合W3C規(guī)范。那要如何驗證我們編寫的代碼符合W3C標準呢？W3C本身已經(jīng)提供了該驗證服務(wù)，可以為互聯(lián)網(wǎng)用戶檢查HTML文件是否附合HTML或XHTML標準，并且向網(wǎng)頁設(shè)計師提供快速檢查網(wǎng)頁錯誤的方法。W3Chtml驗證地址：

W3Ccss驗證地址：

3、W3C驗證（1）將課堂練習1-23-1的代碼上傳到

網(wǎng)址，如果出現(xiàn)以下語句，則說明你的html已經(jīng)通過驗證。（2）將課堂練習1-23-1的代碼上傳到

網(wǎng)址，如果出現(xiàn)以下語句，則說明你的css也已經(jīng)通過驗證。課堂練習1-23-2驗證課堂練習1-23-1是否符合W3C標準圖1-23-3CSS驗證通過結(jié)果截圖任務(wù)實施1、下載并引用prefixfree腳本，讓網(wǎng)頁兼容性更強。在樣式表之后添