[发明专利]网络页面中CSS样式的兼容显示方法

说明书

技术领域

本发明涉及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步骤

具体实施方式

以下通过特定的具体实例说明本发明的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本发明的其他优点与功效。本发明还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本发明的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。