CN103365640A - 层叠样式表样式转换方法及装置 - Google Patents

Abstract

本发明公开了一种CSS样式转换方法及装置。该方法包括：将用户选取的CSS代码文本划分为一个或多个CSS字符串，分别获取一个或多个CSS字符串的属性名；将各个CSS字符串的属性名分别与CSS样式库进行对比，在CSS样式库存在相应的属性名的情况下，根据CSS样式库中相应的CSS规则将相应的CSS字符串转换为符合CSS样式转换标准和代码规范并支持多浏览器兼容的CSS样式，并将转换后的CSS字符串返回给用户。借助于本发明的技术方案，不仅能够让开发者方便的进行CSS部分的开发，还能够简化或者纠正CSS代码结构或者代码缺陷。

Description

层叠样式表样式转换方法及装置

技术领域

本发明涉及计算机技术领域，特别是涉及一种层叠样式表(Cascading StyleSheets，简称为CSS)样式转换方法及装置。

背景技术

随着互联网时代的到来，网络技术日新月异，不同类型的浏览器都在努力实现对第5版超文本标记语言(Hypertext Markup Language 5，简称为HTML5)的支持，CSS 3样式已经在丰富着网络世界，CSS 4也已在规划设计之中。

在上述背景下，为前端开发者的网页开发造成了一定的困难：既需要支持兼容各种浏览器，也需要了解新旧CSS版本的差异化、以及CSS样式的摒弃或者改变。但是，开发者很难记清楚各版本中每种CSS样式的写法和属性，反复查阅则浪费时间，影响效率。因此，目前急需一种简单的CSS样式转换方法来帮助开发者，使开发者在开发过程中，在设置某一个CSS样式时，可以智能的产生支持不同浏览器的CSS样式。

发明内容

本发明提供一种CSS样式转换方法及装置，以使开发者在开发过程中，在设置某一个CSS样式时，能够智能的产生支持不同浏览器的CSS样式。

本发明提供一种CSS样式转换方法，包括：

将用户选取的CSS代码文本划分为一个或多个CSS字符串，分别获取一个或多个CSS字符串的属性名；

将各个CSS字符串的属性名分别与CSS样式库进行对比，在CSS样式库存在相应的属性名的情况下，根据CSS样式库中相应的CSS规则将相应的CSS字符串转换为符合CSS样式转换标准和代码规范并支持多浏览器兼容的CSS样式，并将转换后的CSS字符串返回给用户。

本发明还提供了一种CSS样式转换装置，包括：

文本获取模块，用于获取用户选取的CSS代码文本；

文本分析模块，用于将文本获取模块获取的CSS代码文本划分为一个或多个CSS字符串，分别获取一个或多个CSS字符串的属性名，将各个CSS字符串的属性名分别与CSS样式库进行对比，在CSS样式库存在相应的属性名的情况下，根据CSS样式库中相应的CSS规则将相应的CSS字符串转换为符合CSS样式转换标准和代码规范并支持多浏览器兼容的CSS样式，并将转换后的CSS字符串返回给用户。

本发明有益效果如下：

通过获取用户选取的CSS代码文本，并与CSS库进行对比，按照CSS规范和标准，对代码文本进行分析和替换，使代码文本具有浏览器兼容性，更符合代码规范等优点，能够在开发网页时便捷的产生兼容浏览器的不同样式，为用户节省了时间；本发明实施例的技术方案不仅能够让开发者方便的进行CSS部分的开发，还能够简化或者纠正CSS代码结构或者代码缺陷。

附图说明

图1是本发明实施例的CSS样式转换方法的流程图；

图2是本发明实施例的CSS样式转换方法的详细操作流程图；

图3是本发明实施例的优化CSS代码文本的流程图；

图4是本发明实施例的CSS样式转换装置的结构示意图；

图5是本发明实施例的CSS样式转换装置的详细结构示意图。

具体实施方式

为了使开发者在开发过程中设置某一个CSS样式时，能够智能的产生支持不同浏览器的CSS样式，本发明提供了一种CSS样式转换方法及装置，以下结合附图以及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不限定本发明。

方法实施例

根据本发明的实施例，提供了一种CSS样式转换方法，图1是本发明实施例的CSS样式转换方法的流程图，如图1所示，根据本发明实施例的CSS样式转换方法包括如下处理：

步骤101，将用户选取的CSS代码文本划分为一个或多个CSS字符串，分别获取一个或多个CSS字符串的属性名；

在步骤101中，具体包括如下处理：获取用户选取范围内的CSS代码文本，根据属性名将CSS代码文本划分为一个或多个CSS字符串，其中，一个CSS字符串为CSS代码文本中的一个属性。

也就是说，首先需要获取用户选取范围内的CSS代码文本内容，随后，根据关键标示符(即属性名)，将选中的代码文本分割成可供分析的字符串。

在步骤101中，分别获取一个或多个CSS字符串的属性名之后，优选地，可以将具有相同属性名的CSS字符串合并为一个CSS字符串。

步骤102，将各个CSS字符串的属性名分别与CSS样式库进行对比，在CSS样式库存在相应的属性名的情况下，根据CSS样式库中相应的CSS规则将相应的CSS字符串转换为符合CSS样式转换标准和代码规范并支持多浏览器兼容的CSS样式，并将转换后的CSS字符串返回给用户。例如，优化前为：border-radius:lpx，通过兼容性优化，优化后为：border-radius:lpx；-moz-border-radius:lpx；-webkit-border-radius:lpx。从新旧代码文本的对比，可以看到本发明实施例使代码能适应跨浏览器的标准。

也就是说，在步骤102中，需要分析分割后的字符串，将相应的属性名与CSS样式库进行比对，并根据样式库的规范，将CSS代码字符串进行替换。

具体地，在步骤102中，在将各个CSS字符串的属性名分别与CSS样式库进行对比之后，优选地，在CSS样式库不存在相应的属性名的情况下，在相应的CSS字符串的首尾分别标识错误标示符，并将标识后的CSS字符串返回给用户。例如，优化前为：border-widt:lpx；border-color:#1122ff；经过错误冗余优化，优化后为：/*border-widt:lpx；*/border-color:#1122ff；从新旧代码文本的对比，可以看到本发明实施例能够进行代码的自动纠错。

在实际应用中，如果发现属性名不存在于CSS样式库中，则此CSS字符串为错误代码，在CSS字符串首增加“/*”标示符，在字符串尾增加“*/”标示符；如果属性名存在，则根据相应的规则对属性名的相应属性进行处理，将处理过后的CSS字符串代替原字符串返回。

在步骤102中，根据CSS样式库中相应的CSS规则将相应的CSS字符串转换为多种浏览器兼容的样式之后，在判断该样式是否已经被摒弃、或者存在不推荐使用或者存在缩写的情况下，还可以对转换后的CSS字符串进行优化。例如，优化前为：border-width:lpx；border-color:#fff；经过缩写优化，优化后为：border:lpx#fff；从新旧代码文本的对比，可以看到本发明实施例使代码更加简洁。

在步骤102中，将转换后的CSS字符串返回给用户具体包括如下处理：根据用户的预先配置，确定是否保留原CSS字符串，如果用户预先配置为保留原CSS字符串，则在原CSS字符串后***转换后的CSS字符串；如果用户预先配置为删除原CSS字符串，则用转换后的CSS字符串替换原CSS字符串。

优选地，在本发明实施例中，还可以将每一段转换后的CSS字符串进行拼接，获取完整的转换后的CSS代码文本，并将转换后的CSS代码文本返回给用户。也就是说，当每一段单独分析的CSS字符串分析完毕后，再将处理过后的CSS字符串进行拼接，则用完整符合CSS规范的代码文本重新设置到用户选取的文本区，替换原文本。

通过上述处理，本发明实施例的技术方案可以较方便的将CSS代码文本按照规范进行分析替换，不需要用户进行复杂操作，能够使代码变得简洁明，可读性强，符合规范。从上述处理可以看出，用户操作简单，可以增加代码可读性，减少了***的资源浪费。由于可以对不同浏览器的样式进行自动支持，对页面进行优化，从而为用户节省了查找兼容性和整理代码的时间。

以下结合附图，对本发明实施例的技术方案进行详细说明。

图2是本发明实施例的CSS样式转换方法的详细操作流程图，如图2所示，包括如下处理：

步骤201，获取用户选取的CSS代码文本；

步骤202，根据用户的操作对是否保留CSS原代码文本等参数进行设置，根据CSS样式库中存储的相应规范和规则对获取的CSS代码文本进行分析，并产生新CSS代码文本；

步骤203，将分析过后的新CSS代码文本回显给用户，并根据步骤202中设置的参数对原CSS代码文本进行保留(即，将新CSS代码文本***到原CSS代码文本中)，或者将原CSS代码文本替代为新CSS代码文本。

下面结合图3对优化CSS代码文本的方法进行详细说明，图3是本发明实施例的优化CSS代码文本的流程图，如图3所示，包括如下处理：

步骤301，获取需要优化的CSS代码文本，该CSS代码文本由用户选定或框在编辑框中；

步骤302，将CSS代码文本中的CSS字符串进行划分，其中，一个CSS字符串为一个属性；

步骤303，将每个CSS字符串的样式名称字段(属性名)与CSS样式库中的样式名称进行比对，判断是否具有相同的样式名称；

步骤304，如果未找到相同的样式名称，则确定该CSS字符串书写错误，则把原字符串头部增加“/*”，尾部增加“*/”，并增加错误说明替换原字符串，如果找到相同的样式名称则执行步骤305；

步骤305，对每个CSS字符串的值字段进行处理，并判定CSS字符串的值(value)是否符合当前值的类型，如果是，则转步骤307，如果否，则转步骤306；

步骤306，当判定CSS字符串的值不符合当前值的类型(例如：border-color的值应该是gba或者(0，0，0)的类型，如果写成border-color:1px则视为value类型错误)，则在源字符串头部增加”/*”，尾部增加”*/”，并增加错误说明替换原字符串；如果value类型无误则执行步骤307；

步骤307，当判定CSS字符串的值符合当前值的类型，将所有正确的CSS字符串进行交叉比对，如果发现有相同类型的子属性，则执行步骤308，如果没有相同类型的子属性，则执行步骤309；

步骤308，对该CSS字符串进行缩写优化；

步骤309，检查每个CSS字符串是否存在多浏览器样式，如果存在则进行浏览器兼容优化。随后，判断该样式是否存在已经被摒弃、不推荐使用或者存在缩写的情况，如果是，则进行对应优化，并替换原样式字符串；如果否，则执行步骤310；

步骤310，返回优化后的CSS字符串给用户。

综上所述，借助于本发明实施例的技术方案，通过获取用户选取的CSS代码文本，并与CSS库进行对比，按照CSS规范和标准，对代码文本进行分析和替换，使代码文本具有浏览器兼容性，更符合代码规范等优点，能够在开发网页时便捷的产生兼容浏览器的不同样式，为用户节省了时间；本发明实施例的技术方案不仅能够让开发者方便的进行CSS部分的开发，还能够简化或者纠正CSS代码结构或者代码缺陷。

装置实施例

根据本发明的实施例，提供了一种CSS样式转换装置，图4是本发明实施例的CSS样式转换装置的结构示意图，如图4所示，根据本发明实施例的CSS样式转换装置包括：文本获取模块40、以及文本分析模块42，以下对本发明实施例的各个模块进行详细的说明。

文本获取模块40，用于获取用户选取的CSS代码文本；

文本分析模块42，用于将文本获取模块获取的CSS代码文本划分为一个或多个CSS字符串，分别获取一个或多个CSS字符串的属性名，将各个CSS字符串的属性名分别与CSS样式库进行对比，在CSS样式库存在相应的属性名的情况下，根据CSS样式库中相应的CSS规则将相应的CSS字符串转换为符合CSS样式转换标准和代码规范并支持多浏览器兼容的CSS样式，并将转换后的CSS字符串返回给用户。

例如，优化前为：border-radius:lpx，通过兼容性优化，优化后为：border-radius:lpx；-moz-border-radius:lpx；-webkit-border-radius:lpx；从新旧代码文本的对比，可以看到本发明实施例使代码能适应跨浏览器的标准。

也就是说，文本分析模块42需要分析分割后的字符串，将相应的属性名与CSS样式库进行比对，并根据样式库的规范，将CSS代码字符串进行替换。

具体地，文本分析模块42具体包括：

分析单元，用于获取用户选取范围内的CSS代码文本，根据属性名将CSS代码文本划分为一个或多个CSS字符串，其中，一个CSS字符串为CSS代码文本中的一个属性；

也就是说，分析单元首先需要获取用户选取范围内的CSS代码文本内容，随后，根据关键标示符(即属性名)，将选中的代码文本分割成可供分析的字符串。

回显单元，用于根据用户的预先配置，确定是否保留原CSS字符串，如果用户预先配置为保留原CSS字符串，则在原CSS字符串后***转换后的CSS字符串；如果用户预先配置为删除原CSS字符串，则用转换后的CSS字符串替换原CSS字符串。

文本分析模块42还包括：

合并单元，用于将具有相同属性名的CSS字符串合并为一个CSS字符串；

错误标示单元，用于在CSS样式库不存在相应的属性名的情况下，在相应的CSS字符串的首尾分别标识错误标示符，并将标识后的CSS字符串返回给用户；例如，优化前为：border-widt:lpx；border-color:#1122ff；经过错误冗余优化，优化后为：/*border-widt:lpx；*/border-color:#1122ff；从新旧代码文本的对比，可以看到本发明实施例能够进行代码的自动纠错。

在实际应用中，错误标示单元如果发现属性名不存在于CSS样式库中，则此CSS字符串为错误代码，在CSS字符串首增加“/*”标示符，在字符串尾增加“*/”标示符；如果属性名存在，则根据相应的规则对属性名的相应属性进行处理，将处理过后的CSS字符串代替原字符串返回。

优化单元，用于在根据CSS样式库中相应的CSS规则将相应的CSS字符串转换为多种浏览器兼容的样式之后，在判断该样式是否已经被摒弃、或者存在不推荐使用或者存在缩写的情况下，还可以对转换后的CSS字符串进行优化。例如，优化前为：border-width:lpx；border-color:#fff；经过缩写优化，优化后为：border:lpx#fff；从新旧代码文本的对比，可以看到本发明实施例使代码更加简洁；

拼接单元，用于将每一段转换后的CSS字符串进行拼接，获取完整的转换后的CSS代码文本，并将转换后的CSS代码文本返回给用户。

也就是说，当每一段单独分析的CSS字符串分析完毕后，拼接单元再将处理过后的CSS字符串进行拼接，则用完整符合CSS规范的代码文本重新设置到用户选取的文本区，替换原文本。

通过上述处理，本发明实施例的技术方案可以较方便的将CSS代码文本按照规范进行分析替换，不需要用户进行复杂操作，能够使代码变得简洁明，可读性强，符合规范。从上述处理可以看出，用户操作简单，可以增加代码可读性，减少了***的资源浪费。由于可以对不同浏览器的样式进行自动支持，对页面进行优化，从而为用户节省了查找兼容性和整理代码的时间。

以下结合附图，对本发明实施例的上述技术方案进行详细说明。

优选地，在实际应用中，文本获取模块40可以包括获取单元和配置单元，其中，获取单元，用于进行获取用户选取的代码文本的操作。配置单元，主要根据用户设置的分析参数规格进行分析。例如，是否将分析后的字符串替换原字符串，原字符串是否保留等。

文本分析模块42分为分析单元和回显单元，其中，分析单元用于进行字符串具体拆分，与CSS样式库比对，进行具体的分析；回显单元用于分析配置单元的设置，将分析后所得的CSS字符串回显给用户。

在实际应用中，用户通过选取待分析的CSS代码文本，触发文本获取模块40进行代码文本获取。文本获取模块40将代码文本传递给文本分析模块42，由文本分析模块42根据用户设置，来按照CSS规范进行分析，产生分析后的CSS字符串，随后，再将分析后的CSS字符串代替(根据配置单元的设置)源代码，回显给用户分析过后的CSS字符串。

图5是本发明实施例的CSS样式转换装置的详细结构示意图，如图5所示，包括：

文本获取模块50，负责用户选取文本后，接收选取的文本，并对分析文本进行设置。

文本分析模块52，具体对选取的代码文本进行分析和将分析过后的文本进行回显。

获取单元501，当用户选取文本后，可以通过右键点击选择分析，或者复制到编辑区来进行文本的获取。

配置单元502，当文本被获得后，用户可以进行文本的分析配置，可以选择是否保存、如何保存原文本等操作。

分析单元521，对获得的文本按照CSS规范和分析规则进行分析，然后产生新的文本。

回显单元522，将分析后的文本返回给客户的单元。

图2是本发明实施例的CSS样式转换方法的详细操作流程图，如图2所示，包括如下处理：

步骤201，文本获取模块50中的获取单元501获取用户选取的CSS代码文本；

步骤202，配置单元502根据用户的操作对是否保留CSS原代码文本等参数进行设置，文本分析模块52中的分析单元521根据CSS样式库中存储的相应规范和规则对获取的CSS代码文本进行分析，并产生新CSS代码文本；

步骤203，回显单元522将分析过后的新CSS代码文本回显给用户，并根据配置单元502设置的参数对原CSS代码文本进行保留(即，将新CSS代码文本***到原CSS代码文本中)或者将原CSS代码文本替代为新CSS代码文本。

下面结合图3对优化CSS代码文本的方法进行详细说明，图3是本发明实施例的优化CSS代码文本的流程图，如图3所示，包括如下处理：

步骤301，获取单元501获取需要优化的CSS代码文本；

步骤302，分析单元521将CSS代码文本中的CSS字符串进行划分，其中，一个CSS字符串为一个属性；

步骤303，分析单元521将每个CSS字符串的样式名称字段(属性名)与CSS样式库中的样式名称进行比对；

步骤304，如果未找到相同的样式名称，分析单元521则确定该CSS字符串书写错误，则把原字符串头部增加“/*”，尾部增加“*/”，并增加错误说明替换原字符串，如果找到相同的样式名称则执行步骤305；

步骤305，分析单元521对每个CSS字符串的值字段进行处理，并判定CSS字符串的值(value)是否符合当前值的类型，如果是，则转步骤307，如果否，则转步骤306；

步骤306，当判定CSS字符串的值不符合当前值的类型(例如：border-color的值应该是gba或者(0，0，0)的类型，如果写成border-color:1px则视为value类型错误)，分析单元521则在源字符串头部增加”/*”，尾部增加”*/”并增加错误说明替换原字符串；如果value类型无误则执行步骤307；

步骤307，当判定CSS字符串的值符合当前值的类型，分析单元521将所有正确的CSS字符串进行交叉比对，如果发现有相同类型的子属性，则执行步骤308，如果没有相同类型的子属性，则执行步骤309；

步骤308，分析单元521对该CSS字符串进行缩写优化；

步骤309，分析单元521检查每个CSS字符串是否存在多浏览器样式，如果存在则进行浏览器兼容优化。随后，判断该样式是否存在已经被摒弃、不推荐使用或者存在缩写的情况，如果是，则进行对应优化，并替换原样式字符串；如果否，则执行步骤310；

步骤310，回显单元522返回优化后的CSS字符串给用户。

综上所述，借助于本发明实施例的技术方案，通过获取用户选取的CSS代码文本，并与CSS库进行对比，按照CSS规范和标准，对代码文本进行分析和替换，使代码文本具有浏览器兼容性，更符合代码规范等优点，能够在开发网页时便捷的产生兼容浏览器的不同样式，为用户节省了时间；本发明实施例的技术方案不仅能够让开发者方便的进行CSS部分的开发，还能够简化或者纠正CSS代码结构或者代码缺陷。

尽管为示例目的，已经公开了本发明的优选实施例，本领域的技术人员将意识到各种改进、增加和取代也是可能的，因此，本发明的范围应当不限于上述实施例。

Claims (10)

1.一种层叠样式表CSS样式转换方法，其特征在于，包括：

将用户选取的CSS代码文本划分为一个或多个CSS字符串，分别获取所述一个或多个CSS字符串的属性名；

将各个CSS字符串的属性名分别与CSS样式库进行对比，在所述CSS样式库存在相应的属性名的情况下，根据所述CSS样式库中相应的CSS规则将相应的CSS字符串转换为符合CSS样式转换标准和代码规范并支持多浏览器兼容的CSS样式，并将转换后的CSS字符串返回给用户。

2.如权利要求1所述的方法，其特征在于，所述将用户选取的CSS代码文本划分为一个或多个CSS字符串具体包括：

获取用户选取范围内的CSS代码文本，根据属性名将所述CSS代码文本划分为一个或多个CSS字符串，其中，一个CSS字符串为所述CSS代码文本中的一个属性。

3.如权利要求1所述的方法，其特征在于，分别获取所述一个或多个CSS字符串的属性名之后，所述方法还包括：

将具有相同属性名的CSS字符串合并为一个CSS字符串。

4.如权利要求1所述的方法，其特征在于，将各个CSS字符串的属性名分别与CSS样式库进行对比之后，所述方法还包括：

在所述CSS样式库不存在相应的属性名的情况下，在相应的CSS字符串的首尾分别标识错误标示符，并将标识后的CSS字符串返回给用户。

5.如权利要求1所述的方法，其特征在于，根据所述CSS样式库中相应的CSS规则将相应的CSS字符串转换为多种浏览器兼容的样式之后，所述方法还包括：

对所述转换后的CSS字符串进行优化。

6.如权利要求1所述的方法，其特征在于，将转换后的CSS字符串返回给用户具体包括：

根据用户的预先配置，确定是否保留原CSS字符串，如果用户预先配置为保留所述原CSS字符串，则在所述原CSS字符串后***转换后的CSS字符串；如果用户预先配置为删除所述原CSS字符串，则用转换后的CSS字符串替换所述原CSS字符串。

7.如权利要求1所述的方法，其特征在于，所述方法还包括：

将每一段转换后的CSS字符串进行拼接，获取完整的转换后的CSS代码文本，并将所述转换后的CSS代码文本返回给用户。

8.一种层叠样式表CSS样式转换装置，其特征在于，包括：

文本获取模块，用于获取用户选取的CSS代码文本；

文本分析模块，用于将文本获取模块获取的CSS代码文本划分为一个或多个CSS字符串，分别获取所述一个或多个CSS字符串的属性名，将各个CSS字符串的属性名分别与CSS样式库进行对比，在所述CSS样式库存在相应的属性名的情况下，根据所述CSS样式库中相应的CSS规则将相应的CSS字符串转换为符合CSS样式转换标准和代码规范并支持多浏览器兼容的CSS样式，并将转换后的CSS字符串返回给用户。

9.如权利要求8所述的装置，其特征在于，所述文本分析模块具体包括：

分析单元，用于获取用户选取范围内的CSS代码文本，根据属性名将所述CSS代码文本划分为一个或多个CSS字符串，其中，一个CSS字符串为所述CSS代码文本中的一个属性；

回显单元，用于根据用户的预先配置，确定是否保留原CSS字符串，如果用户预先配置为保留所述原CSS字符串，则在所述原CSS字符串后***转换后的CSS字符串；如果用户预先配置为删除所述原CSS字符串，则用转换后的CSS字符串替换所述原CSS字符串。

10.如权利要求8所述的装置，其特征在于，所述文本分析模块还包括：

合并单元，用于将具有相同属性名的CSS字符串合并为一个CSS字符串；

错误标示单元，用于在所述CSS样式库不存在相应的属性名的情况下，在相应的CSS字符串的首尾分别标识错误标示符，并将标识后的CSS字符串返回给用户；

优化单元，用于在根据所述CSS样式库中相应的CSS规则将相应的CSS字符串转换为多种浏览器兼容的样式之后，对所述转换后的CSS字符串进行优化；

拼接单元，用于将每一段转换后的CSS字符串进行拼接，获取完整的转换后的CSS代码文本，并将所述转换后的CSS代码文本返回给用户。

Images