CN106599306A - 网络页面中css样式的兼容显示方法 - Google Patents

Abstract

本发明提供一种网络页面中CSS样式的兼容显示方法，用于解决网页中CSS样式兼容性显示的问题，该方法包括：发送网络页面显示请求，该网络页面显示请求包括该网络页面的地址信息和用户配置信息；接收响应信息，该响应信息包括响应所述地址信息得到的资源文件和第一CSS资源文件，资源文件用于显示所述网络页面，以及响应用户配置信息得到的第二CSS资源文件；依次解析所述第一CSS资源文件和第二CSS资源文件，当第二CSS资源文件和所述第一CSS资源文件中存在相同属性的CSS资源，根据所述第二CSS资源文件中的CSS资源设置所述网络页面的显示属性以显示所述网络页面，本发明可以使用户在访问网页时CSS样式能够支持多显示设备，又支持多分辨率、多浏览器显示。

Description

网络页面中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步骤

具体实施方式

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

技术解释：CSS，(英文全称：Cascading Style Sheets)，简称：层叠样式表，是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。其中，CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

见图1，本实施例提供了一种网络页面中CSS样式的兼容显示方法，如图所示，其可以包括以下实施步骤：

S101，发送网络页面显示请求，所述网络页面显示请求包括所述网络页面的地址信息和用户配置信息。

具体地，所述网络页面的地址信息为所要访问网页的地址信息。其中，下文也将网络页面简称为网页。

具体地，所述用户配置信息可以为用户为访问该网络页面所使用的电子设备的类型信息以及该电子设备上显示器的分辨率信息，例如，电子设备的类型信息可以为PC机、手机、平板电脑等其中的一种；再例如，显示器的分辨率信息可以为360P、720P、1080P等类型的分辨率。

更具体地，所述用户配置信息还可以为用户为访问该网络页面所使用的浏览器类型，例如，浏览器类型可以为IE6-IE11、Chrome、Firefox、Safari、360等任一浏览器。

在具体实施中，用户配置信息会在用户首次登录网络页面时被采集然后存储在会话中，后面再进行网络页面访问时，可以将该用户配置信息和该网络页面显示请求一起发送至服务器，要求服务器进行响应。

S102，接收响应信息，所述响应信息包括响应所述地址信息得到的资源文件和第一CSS资源文件，所述资源文件用于显示所述网络页面，以及响应所述用户配置信息得到的第二CSS资源文件；依次解析所述第一CSS资源文件和第二CSS资源文件，当第二CSS资源文件和所述第一CSS资源文件中存在相同属性的CSS资源，根据所述第二CSS资源文件中的CSS资源设置所述网络页面的显示属性以显示所述网络页面。

具体地，第一CSS资源文件和第二CSS资源文件是预先设置在服务器中的，一般地，第一CSS资源文件中包含有各种网络页面显示的通用CSS样式资源；而第二CSS资源文件中包含有针对各种用户特点的CSS样式资源。例如，第一CSS资源文件中对于显示器分辨率的默认CSS样式就是720p，而如果某一用户所使用的显示器分辨率为1080p的，那么就会将该分辨率为1080p的CSS样式资源预先保存在第二CSS资源文件中。那么在用户进行网络页面显示访问时，会分别从第一CSS资源文件和第二CSS资源文件中获取到显示器分辨率为720p的CSS样式资源和显示器分辨率为1080p的CSS样式资源。

接着，接收响应信息的客户端会依次解析第一CSS资源文件和第二CSS资源文件，依据CSS样式资源加载规则，后加载的CSS样式资源优先级高于先加载的CSS样式资源，所以，会根据第二CSS资源文件中的1080p的CSS样式资源来对网络页面进行设置和显示，从而满足用户的兼容性要求。

基于上述方案，网络页面的显示请求过程与一般请求一致，只不过所加载的内容多了一个针对用户配置信息的CSS样式资源，通过该CSS样式资源来替代常规显示不够兼容的地方，由此可以看出，本发明很好地克服了通过伪类和动态脚本加载致使用户体验下降的问题，同时可以支持多显示设备、多分辨率、多浏览器的兼容性显示要求。

为了更好地理解和应用上述方案，下面将通过一实际中的具体应用来对本发明进行详细的说明。

在一具体实施例中，可以这样来实现上述解决方案：

步骤S201、建立一个缺省样式的根目录clientfiles，用来将所有系统自带的资源同统一管理。在根目录clientfiles下建立base、browsers、screens、theme目录。其中base目录中存放所有浏览器、屏幕、风格、用户均无关的标准通用样式、脚本以及图片；browsers目录中仅存放用于解决浏览器兼容性的样式、脚本以及图片；screens目录中仅存放用于不同显示设备、分辨率的图片、脚本以及图片；theme目录中包含了多种风格，每种风格包含各自的样式、脚本以及图片。base、browsers、screens、theme的各自子目录下的css、js文件名需保持一致。建立一个COA系统特有的样式根目录COA结构和clientfiles一致。建立完成后的目录，如下所示：

步骤S202，是本发明实施例提供的系统级引入参数配置，系统的引入资源目录用“，”隔开代表缺省情况下引入多套资源目录，配置为clientfiels，COA代表引入系统级缺省样式以及COA系统的特有样式，详述如下：

步骤S203，是本发明实施例提供的用户登陆时写入会话的信息清单，clientType在登陆时确定可以是pc、mobile、pad或其它设备；screenType代表了屏幕类型，如mi4，screen1080p等；skin为用户的风格，可以是已定义的任意风格；roleType为登陆时的角色类型，如果为管理员则值为user。详述如下：

步骤S104，是本发明实施例提供的页面打开时的信息清单，clientType在登陆时确定可以是pc、mobile、pad或其它设备；screenType代表了屏幕类型，如mi4，screen1080p等；skin为用户的风格，可以是已定义的任意风格；pageInclude为页面级特别的引入资源。详述如下：

步骤S205，根据S202、S203、S204得到的数据，按照引入顺序在页面上输出资源。

首先根据系统配置SystemInclude、以及登陆的角色roleType判断需要引入的系统级资源有clientfiles、coa。

然后根据页面打开时的浏览器类型browserType判断浏览器类型为IE8；

然后根据用户登录时的客户端类别clientType、分辨率screenType以及风格skin判断登陆的客户端为pc，分辨率为screen1080p，风格为deepMarine；

然后根据页面打开时的pageInclude判断页面的引入资源为Page.css。

步骤S206，根据css的优先级规则，后引入的资源优先级高于先引入的资源，从而可以达到既支持多显示设备，又支持多分辨率、多浏览器，，同时也解决了现有技术中通过伪类和动态加载导致的用户体验不好的问题。

综上所述，本发明通过系统级定义全局样式，用户级定义针对某类用户或者某个用户的个性化样式，浏览器级将各个浏览器的样式分割成不同文件分而治之解决浏览器兼容问题，屏幕级定义各种大小显示设备上的字体、间距、图片等内容，风格级定义允许用户切换的各种，页面级定义了某个页面特有的样式拥有最高优先级。根据css样式规则，后输出的资源在同名时具有高优先级，即后输出的样式覆盖先输出的样式。固能支持多显示设备，又支持多分辨率、多浏览器，。所以，本发明有效克服了现有技术中的种种缺点而具高度产业利用价值。

上述实施例仅例示性说明本发明的原理及其功效，而非用于限制本发明。任何熟悉此技术的人士皆可在不违背本发明的精神及范畴下，对上述实施例进行修饰或改变。因此，举凡所属技术领域中具有通常知识者在未脱离本发明所揭示的精神与技术思想下所完成的一切等效修饰或改变，仍应由本发明的权利要求所涵盖。

Claims (3)

1.一种网络页面中CSS样式的兼容显示方法，其特征在于，包括：

发送网络页面显示请求，所述网络页面显示请求包括所述网络页面的地址信息和用户配置信息；

接收响应信息，所述响应信息包括响应所述地址信息得到的资源文件和第一CSS资源文件，所述资源文件用于显示所述网络页面，以及响应所述用户配置信息得到的第二CSS资源文件；

依次解析所述第一CSS资源文件和第二CSS资源文件，当第二CSS资源文件和所述第一CSS资源文件中存在相同属性的CSS资源，根据所述第二CSS资源文件中的CSS资源设置所述网络页面的显示属性以显示所述网络页面。

2.根据权利要求1所述的网络页面中CSS样式的兼容显示方法，其特征在于，所述第二CSS资源文件中的CSS资源为预先设置，且每一CSS资源对应于所述用户配置信息中的一种配置信息。

3.根据权利要求1或2所述的网络页面中CSS样式的兼容显示方法，其特征在于，所述用户配置信息包括浏览器版本信息、以及运行所述浏览器版的电子设备的设备信息和分辨率信息中的至少一种。