一种CSS资源前端显示装置的制作方法

本发明涉及WEB软件前端技术领域，特别是涉及WEB前端CSS资源请求处理方法和CSS资源前端显示装置。

背景技术：

随着网络技术的发展，用户在各种智能电子设备上进行网页浏览来获取所需的内容。网页提供者为了提升用户体验，会对页面的内容进行丰富化和个性化，以迎合用户来达到提升用于体验的效果。

提升用户体验最直接的方法就是丰富web前端资源的内容；Web前端由Html、CSS、Javascript等元素组成，这些技术的应用，使得网站在视觉、操作效果等方面得到很大的提升，但是另一方面，这些效果并不能在所有用户所使用的智能电子设备上进行兼容显示，因为，用户所使用的浏览器、显示设备以及显示屏幕的分辨率等存在差异，上述web前端资源未必能做到全面的兼容。

目前，为了解决web前端资源兼容性的问题的方法主要有以下两种：一种，为解决浏览器兼容性问题在引入的CSS(英文全称Cascading Style Sheets，中文简称：层叠样式表)文件中设置只有某种特定浏览器能够识别的“伪类”，这样特定浏览器就只能读取这个“伪类”的样式；另一种，为解决多显示设备、多分辨率问题在页面加载完成后，通过执行一个脚本来判断设备类型、分辨率大小来动态引入对应的CSS；为满足用户个性化需求，提供了若干皮肤允许用户自行切换。

上述现有做法虽然可以在一定程度上解决前端资源兼容性的问题，但并不全面，例如，采用“伪类”的方式虽然可以一定程度上解决浏览器兼容问题，但目前市面上浏览器种类繁多，主流的IE6-IE11、Chrome、Firefox、Safari、360等加起来就有15种以上，“伪类”的数量大增，导致CSS过于臃肿，在互联网发展的今天，这会导致网站的下行流量大增，增加服务器负担影响用户体验；再例如，动态执行脚本的方式可以解决跨设备的问题，但是由于是二段加载，部分客户端会有较为明显的卡顿，影响用户体验。

综上所述，如何使web前端资源能够在用户端实现全面兼容，并且不影响用户体验，这是目前本领域技术人员所要解决的问题。

技术实现要素：

鉴于以上所述现有技术的缺点，本发明的目的在于提供一种CSS资源前端显示装置，用于解决如何使web前端资源能够在用户端实现全面兼容且不影响用户体验的问题。

为实现上述目的及其他相关目的，本发明提供以下技术方案：

一种CSS资源前端显示装置，包括：请求发送模块，向一WEB服务器发送包含一用户配置信息的页面资源请求，用于指示所述WEB服务器根据所述页面资源请求确定对应的页面资源文件，以及根据所述用户配置信息从预设的第一CSS文件和第二CSS文件中筛选出需要输出到前端的CSS资源文件，并对所述CSS资源文件设定在用户端的引入顺序；响应接收模块，接收所述页面资源文件和CSS资源文件；显示模块，用于根据所述引入顺序在客户端上加载所述CSS资源文件来进行显示。

优选地，所述用户配置信息包括当前的登录用户信息、设备信息、分辨率信息以及当前页面的浏览器版本信息。

优选地，所述CSS资源文件设定在页面引入的顺序为：按照系统级、用户级、浏览器级、屏幕级、风格级、页面级顺序进行显示输出。

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

附图说明

图1为一种WEB前端CSS资源请求处理方法的流程图。

图2为一种CSS资源前端显示方法的流程图。

图3为一种CSS资源前端显示装置的原理图。

具体实施方式

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

见图1，本实施例提供一种WEB前端CSS资源请求处理方法，其包括以下步骤：

步骤一，接收用户端发送的页面资源请求，页面资源请求包含一用户配置信息；

步骤二，根据所述页面资源请求确定对应的页面资源文件，以及根据所述用户配置信息从预设的第一CSS文件和第二CSS文件中筛选出需要输出到前端的CSS资源文件，并对所述CSS资源文件设定在页面引入的顺序；

步骤三，将所述页面资源文件和CSS资源文件返回所述用户端。

具体的，所述用户配置信息包括当前的登录用户信息、设备信息、分辨率信息以及当前页面的浏览器版本信息。

具体的，所述CSS资源文件设定在页面引入的顺序为：按照系统级、用户级、浏览器级、屏幕级、风格级、页面级顺序进行显示输出。

基于上述方案，一般由WEB服务器来响应用户在客户端上页面资源请求，WEB服务器预先设置有第一CSS文件和第二CSS文件，其中，第一CSS文件中预先储存有适用于在各种显示设备、浏览器以及显示屏幕分辨率条件下的通用CSS样式，而第二CSS资源文件中则储存有各种与用户信息相关的CSS资源文件，那么根据页面资源请求中的用户配置信息会分别从其中选择对应的CSS资源文件，然后与页面资源一起返回至客户端进行显示，这样既能满足用户的体验需求，同时可以做到全面的兼容性显示，而且不会造成服务器负担。

例如，用户在访问一个门户网站时，如果用户没有注册为会员，那么页面上所显示的各种CSS资源文件是被保存在WEB服务器的第一CSS文件中，如果用户注册成为了该门户网站的会员，并且拥有了自己的主页，然后进行了一些个性化的设置，那么这些个性化设置所对应的CSS资源文件则保存在第二CSS文件中。

根据本发明的另一方面，即从客户端侧来对本发明进行描述和保护，见图2，提供了一种CSS资源前端显示方法，包括以下步骤：

步骤S21，向一WEB服务器发送包含一用户配置信息的页面资源请求，用于指示所述WEB服务器根据所述页面资源请求确定对应的页面资源文件，以及根据所述用户配置信息从预设的第一CSS文件和第二CSS文件中筛选出需要输出到前端的CSS资源文件，并对所述CSS资源文件设定在用户端的引入顺序；

步骤S22，接收所述页面资源文件和CSS资源文件，并根据所述引入顺序在客户端上加载所述CSS资源文件来进行显示。

根据上述方法，可以满足用户在客户端浏览页面的各种需求，此外，由于各种CSS资源文件为预先设置在服务器中的，故可以做到全面的兼容性。

根据本发明的又一方面，即从客户端侧来对本发明进行描述和保护，见图3，提供了一种CSS资源前端显示装置，包括：请求发送模块31，向一WEB服务器发4送包含一用户配置信息的页面资源请求，用于指示所述WEB服务器根据所述页面资源请求确定对应的页面资源文件，以及根据所述用户配置信息从预设的第一CSS文件和第二CSS文件中筛选出需要输出到前端的CSS资源文件，并对所述CSS资源文件设定在用户端的引入顺序；响应接收模块32，接收所述页面资源文件和CSS资源文件；显示模块33，用于根据所述引入顺序在客户端上加载所述CSS资源文件来进行显示。

根据本实施例提供的装置可以对CSS资源进行全面兼容性的显示，并且不会影响用户的体验性。

为了更好的阐述本发明提供的技术方案，下面将结合本发明在实际中的一具体应用来予以进一步说明。

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

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

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

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

步骤S105,根据S102、S103、S104得到的数据，按照引入顺序在页面上输出资源。

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

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

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

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

步骤S106，根据CSS的优先级规则，后引入的资源优先级高于先引入的资源，从而可以达到既支持多显示设备，又支持多分辨率、多浏览器，还能够满足用户的个性化需求。

上述应用的原理可以概括为：首先将CSS样式文件以及与其相关的图片、字体等资源文件按照一种目录结构进行存储。在系统中记录系统级引入资源，在用户登录系统时将登录的设备、当前浏览器的尺寸信息存储到会话中，当访问某个页面时，根据当前系统的系统级引入资源、当前的登录用户信息、设备信息、分辨率信息以及当前页面的浏览器版本信息，整理需要输出到前端的CSS样式文件以及相关资源，并按照系统级，用户级，浏览器级，屏幕级，风格级，页面级顺序，筛选后进行输出。

需要说明的是，上述具体应用中，省样式的根目录clientfiles对应上述实施例中的第一CSS文件,样式根目录COA对应为上述实施例中的第二CSS文件。

具体的，所述用户配置信息包括当前的登录用户信息、设备信息、分辨率信息以及当前页面的浏览器版本信息。

具体的，所述CSS资源文件设定在页面引入的顺序为：按照系统级、用户级、浏览器级、屏幕级、风格级、页面级顺序进行显示输出。

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

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