Question

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

If the property is expandable:
    1. Get a hidden DIV.
    2. Apply the property to the DIV.
    3. Iterate through each of the properties component parts, 
        gathering a list of new properties.
    4. Replace the property with the new properties.

因此，

border：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的客户端版本。 - Use node rework css in browser）有一组css控件绑定到模型上的不同属性。例如，我可能想要编辑DIV.menu中的font-size属性。但是，DIV.menu可能只有属性

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

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

可靠的CSS声明扩展

0 个答案: