摘要:個人認為兼容性的問題也是對這三個方面進行處理。能力檢測需要注意兩點先檢測達成目的的最常用的特性,可以保證代碼最優化,并避免檢測多個條件必須測試實際要是用到的特性這些就是小可對兼容性的理解,有不對的希望各位朋友指正探討,嘻嘻
這里和朋友們簡單探討一下個人對于前端兼容性的一些理解:
在項目中,前端主要處理html,css,javaScript代碼,當然還有可能接觸到razor等渲染引擎方面的知識,不過主要處理的還是HTML、CSS、JavaScript。個人認為兼容性的問題也是對這三個方面進行處理。
首先,是html方面兼容性的處理,大家都知道,雖然有一個W3c標準的存在去規范html、xml/xhtml/css/javaScript/dom的標準,但是這只是個標準,真正體現出效果的是瀏覽器,而瀏覽器卻有很多種,firefox/chrome/ie等等,每個瀏覽器又有不同的版本,不同瀏覽器不同版本因為瀏覽器本身渲染引擎的不同,在對于w3c標準的支持版本不同造就了一大堆的兼用性問題。對于html的兼容性問題,這里只講兩個處理方案:
1、使用樣式重置css文件解決相同html標簽在不同瀏覽器或者相同瀏覽器不同版本上渲染不同的兼容性問題。(個人推薦normalize.css),當然這只供參考,樣式重置要適應所在的項目風格,公司的開發規范要求等進行定制,所以要看具體要求,不過大致的重置樣式都差不多,無非就是對padding,margin、字體屬性等一些進行重置,具體大家可以去normalize.css查看里面的css樣式。
2、在網頁的頂部加上 doctype (文檔類型)標簽聲明。這里涉及一個盒子模型的問題,大家知道,ie是特立獨行的,在盒子模型上,ie的處理也不同,在ie中標簽的width,height屬性是包括padding和border的。當沒有加上doctype時,每個瀏覽器都按照它自己的方式來渲染標簽,這就會造成兼用性問題,而加上之后,瀏覽器會按照w3c標準盒子模型渲染標簽。
再者是css兼用性問題,reset重置樣式只解決了一些比較簡單的樣式問題,而類似于雙邊距、最小高度等問題,還需要開發者在各自的項目中進行對應的處理,這里還是總結的比較全面的,有興趣朋友可以看一下(https://zhuanlan.zhihu.com/p/...)。
最后,就是JavaScript的兼容性問題,由于瀏覽器的發展及引擎不同,瀏覽器所自帶的api也會不同,這就引起了JavaScript的兼用性問題,在引用對象屬性或者方法時需要進行客戶端檢測,就是檢測當前瀏覽器所處系統、所支持的語法、所具有的特殊性能。包括能力檢測、怪癖檢測和用戶代理檢測三種,個人比較推崇能力檢測:
能力檢測的目標不是識別特定的瀏覽器,而是識別瀏覽器的能力。使用這種方式無需顧及瀏覽器如何如何,只需確定瀏覽器是否支持特定的能力,就可以給出相關的方案。能力檢測需要注意兩點:
1、先檢測達成目的的最常用的特性,可以保證代碼最優化,并避免檢測多個條件; 2、必須測試實際要是用到的特性;
這些就是小可對兼容性的理解,有不對的希望各位朋友指正探討,嘻嘻~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51099.html
摘要:個人認為兼容性的問題也是對這三個方面進行處理。能力檢測需要注意兩點先檢測達成目的的最常用的特性,可以保證代碼最優化,并避免檢測多個條件必須測試實際要是用到的特性這些就是小可對兼容性的理解,有不對的希望各位朋友指正探討,嘻嘻 這里和朋友們簡單探討一下個人對于前端兼容性的一些理解: 在項目中,前端主要處理html,css,javaScript代碼,當然還有可能接觸到razor等渲染引擎方面...
摘要:為此決定自研一個富文本編輯器。例如當要轉化的對象有環存在時子節點屬性賦值了父節點的引用,為了關于函數式編程的思考作者李英杰,美團金融前端團隊成員。只有正確使用作用域,才能使用優秀的設計模式,幫助你規避副作用。 JavaScript 專題之惰性函數 JavaScript 專題系列第十五篇,講解惰性函數 需求 我們現在需要寫一個 foo 函數,這個函數返回首次調用時的 Date 對象,注意...
摘要:探討判斷橫豎屏的最佳實現前端掘金在移動端,判斷橫豎屏的場景并不少見,比如根據橫豎屏以不同的樣式來適配,抑或是提醒用戶切換為豎屏以保持良好的用戶體驗。 探討判斷橫豎屏的最佳實現 - 前端 - 掘金在移動端,判斷橫豎屏的場景并不少見,比如根據橫豎屏以不同的樣式來適配,抑或是提醒用戶切換為豎屏以保持良好的用戶體驗。 判斷橫豎屏的實現方法多種多樣,本文就此來探討下目前有哪些實現方法以及其中的優...
閱讀 1588·2019-08-30 13:18
閱讀 1578·2019-08-29 12:19
閱讀 2094·2019-08-26 13:57
閱讀 4137·2019-08-26 13:22
閱讀 1179·2019-08-26 10:35
閱讀 2991·2019-08-23 18:09
閱讀 2500·2019-08-23 17:19
閱讀 677·2019-08-23 17:18