[發明專利]網絡頁面中CSS樣式的兼容顯示方法

在審

• 申請號: 201611245758.7
• 申請日: 2016-12-29
• 公開（公告）號: CN106599306A
• 公開（公告）日: 2017-04-26
• 發明（設計）人: 江勇;冉露;吳晟昊;羅敏;王鈺博;吳誠;徐江湖
• 申請（專利權）人: 重慶南華中天信息技術有限公司
• 主分類號: G06F17/30
• 分類號: G06F17/30
• 代理公司: 上海光華專利事務所31219
• 代理人: 趙絲絲

技術領域

本發明涉及WEB軟件前端技術領域，特別是涉及一種網絡頁面中CSS樣式的兼容顯示方法。

背景技術

隨著網絡技術的發展，用戶對網絡產品的依賴性越來越高。一方面隨著手機、平板電腦等移動設備的普及，訪問網絡頁面的終端設備類型變得越來越豐富；另外，可以運行在終端設備上的瀏覽器類型也很多，除了常見的IE瀏覽器，還存在谷歌瀏覽器、safari瀏覽器、火狐瀏覽器等諸多的瀏覽器類型。另一方面，隨著顯示技術的發展，終端設備類上的顯示器由1080P逐漸過渡到2K、4K等分辨率，尺寸、分辨率提升的同時，用戶對互聯網系統的要求越來越高，用戶希望能在大屏的顯示器上看見更大的字體，更豐滿的圖片等。

為此，作為軟件開發商除了需要提供默認的風格外，還需要根據特定的用戶群，或者單獨的用戶滿足其“私人定制”的需求。目前面對這些問題有幾種做法：第一，為解決瀏覽器兼容性問題在引入的CSS文件中設置只有某種特定瀏覽器能夠識別的“偽類”，這樣特定瀏覽器就只能讀取這個這個“偽類”的樣式；第二，為解決多顯示設備、多分辨率問題在頁面加載完成后，通過執行一個javascript腳本來判斷設備類型、分辨率大小來動態引入對應的CSS；第三，為滿足用戶個性化需求，提供了若干皮膚允許用戶自行切換。

上述方法在解決獨立問題時都有各自的缺陷，例如，采用“偽類”的方式雖然可以一定程度上解決瀏覽器兼容問題，但目前市面上瀏覽器種類繁多主流的IE6-IE11、Chrome、Firefox、Safari、360等加起來就有15種以上，“偽類”的數量大增，導致CSS過于臃腫，在互聯網發展的今天，這會導致網站的下行流量大增，增加服務器負擔影響用戶體驗。再例如，動態執行javascript腳本的方式可以解決跨設備的問題，但是由于是二段加載，部分客戶端會有較為明顯的卡頓，影響用戶體驗。

綜上所述，如何解決在通過瀏覽器來瀏覽網頁的過程中由于瀏覽器所在的電子設備的配置不同以及瀏覽器版本的不同而造成網頁中的各種樣式無法得到有效兼容的問題，是本領域技術人員一致想要克服的問題。

發明內容

鑒于以上所述現有技術的缺點，本發明的目的在于提供一種網絡頁面中CSS樣式的兼容顯示方法，用于解決在通過瀏覽器來瀏覽網頁的過程中由于瀏覽器所在的電子設備的配置不同以及瀏覽器版本的不同而造成網頁中的各種樣式無法得到有效兼容的問題。

為實現上述目的及其他相關目的，本發明提供以下技術方案：

一種網絡頁面中CSS樣式的兼容顯示方法，包括：發送網絡頁面顯示請求，所述網絡頁面顯示請求包括所述網絡頁面的地址信息和用戶配置信息；接收響應信息，所述響應信息包括響應所述地址信息得到的資源文件和第一CSS資源文件，所述資源文件用于顯示所述網絡頁面，以及響應所述用戶配置信息得到的第二CSS資源文件；依次解析所述第一CSS資源文件和第二CSS資源文件，當第二CSS資源文件和所述第一CSS資源文件中存在相同屬性的CSS資源，根據所述第二CSS資源文件中的CSS資源設置所述網絡頁面的顯示屬性以顯示所述網絡頁面。

在一優選方案中，所述第二CSS資源文件中的CSS資源為預先設置，且每一CSS資源對應于所述用戶配置信息中的一種配置信息。

在一優選方案中，所述用戶配置信息包括瀏覽器版本信息、以及運行所述瀏覽器版的電子設備的設備信息和分辨率信息中的至少一種。

如上所述，本發明具有以下有益效果：本發明通過對相關文件進行目錄劃分、并根據當前系統配置、用戶登錄信息、瀏覽器信息、頁面信息等，按照優先級從低到高的方式經過篩選后引入相關文件，保證輸出的樣式文件都是有效的，同時高優先級的樣式覆蓋低優先級的樣式，從而使用戶在訪問網頁時其中的CSS樣式支持多顯示設備，又支持多分辨率、多瀏覽器顯示。

附圖說明

圖1顯示為本發明提供的一種網絡頁面中CSS樣式的兼容顯示方法的流程圖。

附圖標號說明

S101～S102步驟

具體實施方式

以下通過特定的具體實例說明本發明的實施方式，本領域技術人員可由本說明書所揭露的內容輕易地了解本發明的其他優點與功效。本發明還可以通過另外不同的具體實施方式加以實施或應用，本說明書中的各項細節也可以基于不同觀點與應用，在沒有背離本發明的精神下進行各種修飾或改變。需說明的是，在不沖突的情況下，以下實施例及實施例中的特征可以相互組合。