Javascript 可靠的CSS声明扩展

我已经将CSS样式表解析为一个对象。我正在创建一个用于编辑CSS属性的角度ui。我需要可靠地扩展速记属性。目前，我遵循以下算法：

如果属性是可扩展的： 1.得到一个隐藏的DIV。 2.将属性应用于DIV。 3.遍历每个属性组件， 正在收集新属性的列表。 4.用新属性替换该属性。 因此,

边框：0px纯黑

变成

border-top-style: solid;
border-top-width: 0px;
border-top-color: black;
border-right-style: solid;
border-right-width: 0px;
border-right-color: black;
border-bottom-style: solid;
border-bottom-width: 0px;
border-bottom-color: black;
border-left-style: solid;
border-left-width: 0px;
border-left-color: black;

问题出现在以下属性中：

background: -moz-linear-gradient(left, #f2f5fa 0%,#e7ebf3 100%,#7db9e8 100%);

在最新版本的Chrome上，它变成：

background-image: linear-gradient(to right, rgb(242, 245, 250) 0%, rgb(231, 235, 243) 100%, rgb(125, 185, 232) 100%);
background-position: ;
background-size: initial;
background-repeat: initial;
background-origin: initial;
background-clip: initial;
background-attachment: initial;
background-color: initial;

IE 10在背景图像方面几乎相同，但IE9确实：

background-image: none;
background-position: 0% 0%;
background-size: auto;
background-repeat: repeat;
background-origin: padding-box;
background-clip: border-box;
background-attachment: scroll;
background-color: rgb(242, 245, 250);

无论如何，这似乎是一种非常不可靠的扩展CSS属性的方法。有人知道另一个可以在浏览器中工作的吗？正如我前面所说，我已经解析了CSS

编辑目的说明： 我们提供了一种产品，它允许用户将高级表单文档编辑器嵌入到他们的站点中。可以通过更改服务器上的.CSS文件来修改编辑器的外观。我的项目允许人们解析现有的CSS文档，或者重新开始，并对其进行编辑，在编辑器预览时进行动态视觉更新。我将CSS解析为一个javascript对象客户端，最近转移到我浓缩的reworkscss客户端版本有一组css控件绑定到模型上的不同属性。例如，我可能想在DIV.menu中编辑字体大小属性。但是，DIV.menu可能只有该属性

font:italic bold 12px/30px Georgia, serif;

---

因此，我们展开所有速记属性，以便控件可以访问所有组件。如何可靠地做到这一点是一个棘手的部分。

为什么要获得速记CSS规则的扩展值？我正在创建一个用于编辑CSS属性的角度ui。是的，但是为什么呢？您可以使用F12开发者选项在浏览器中编辑CSS属性。它是我们产品的一部分-网站的外观编辑器。我将添加一个更详细的描述，说明我要完成的工作。