How can I expand CSS shorthand properties programmatically?

Question

Is there a .Net CSS parser that will allow me to parse css shorthand properties into their longhand form?

For example I'd like to take the following:

        #somediv{
            margin: 10px;
            padding: 10px 20px;
            border:5px solid #FFF;
        }

And translate it to:

        #somediv{
            margin-top: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 10px;
            padding-left: 20px;
            border-width: 5px;
            border-style: solid;
            border-color: #FFF; 
        }

Here is a pretty good list of all the different properties I'd need to handle in this manner: http://www.dustindiaz.com/css-shorthand/

Ideally I'd like something in .Net but if there's something in another language that's open source I can probably adapt it.

Update

Without getting into too much detail as to exactly what I'm trying to do here is the basic premise:

I need to programmaticly take multiple CSS docs and merge them to create one definitive set of CSS.

So if doc 1 has :

p { padding: 10px;}

And then I add on doc 2:

p { padding-left:20px;}

The resulting CSS should be:

p { padding-top: 10px; padding-right:10px; padding-bottom:10px; padding-left:20px;}

Because the later added doc overwrites the single property. To do this accurately I would need to take every CSS and break down every property to it's lowest element first.

possible duplicate of [Is there a CSS parser for C#?](http://stackoverflow.com/questions/512720/is-there-a-css-parser-for-c) — KP., Sep 17 '10 at 20:10
yes and no, the parsers provided there do not do this kind of expansion, and really, that's the only part I need — brendan, Sep 17 '10 at 20:12
so if you have 2 doruments, this DOES happen automatic. i still dont get why you would want this parser. are you just trying to smack all your CSS files into 1 definitive file? for compression or something? — Stefanvds, Sep 27 '10 at 08:29
Well it does and it doesn't, I need to be able to return to the end user a single definitive CSS doc, that's part of the overall app — brendan, Sep 27 '10 at 13:01

score 1 · Accepted Answer · answered Sep 23 '10 at 14:22

For regular CSS parsing I've found this to be the easiest to use:

http://www.codeproject.com/KB/recipes/CSSParser.aspx

For breaking down the shorthand properties into their longhand form I've found two that can do it:

In .Net : http://www.modeltext.com/css/index.aspx

In JavaScript: http://www.glazman.org/JSCSSP/

score 1 · Answer 2 · answered Sep 26 '10 at 20:35

The most simplest approach would is to make use of .NET's WebBrowserControl along with MsHTML(IE Renderer) and this is most reliable approach too !

//Create the instance of new webbrowser control.
        WebBrowser browser = new WebBrowser();

        //Navigate to the specified URL.
        browser.Navigate(@"test.html");

        //Wait until the webpage gets loaded completely.
        while (browser.ReadyState != WebBrowserReadyState.Complete)
        {
            Application.DoEvents();
        }


        foreach (object divElement in
            (browser.Document.GetElementsByTagName("div")))
        {
            IHTMLCurrentStyle currentStyle = ((divElement as HtmlElement)
                .DomElement as IHTMLElement2).currentStyle;

            Console.WriteLine(currentStyle.marginLeft);
            Console.WriteLine(currentStyle.marginRight);

        }

Note:

In order to get this code working you need to add reference to Microsoft.MSHTML.dll which can be found on the following location.

c:{Program Files}\microsoft.net\Primary Interop Assemblies\

+1 - this was my first thought, although I'm not sure how much I trust the IE renderer to interpret CSS reliably. — Rob, Sep 27 '10 at 15:47
@Rob I believe, this is probably the very less expensive and more reliable solution, when compared to manually parsing html files. — Karthik Mahalingam, Sep 27 '10 at 19:43
I completely agree. But as a web developer, I was taking the opportunity to make a jab at IE's [history of] standards compliance. — Rob, Sep 27 '10 at 23:52

score 0 · Answer 3 · answered Sep 23 '10 at 11:29

0

Could you give a little more detail on why you want to do this?

And are you looking for it to do correct parsing with things like:

padding:10px 15px;

into

padding-top:10px; padding-right:15px; padding-bottom:10px; padding-left:15px;

answered Sep 23 '10 at 11:29

jimplode

3,474
3
24
42

You may want to check this out:http://www.codeproject.com/KB/recipes/CSSParser.aspx – jimplode Sep 23 '10 at 11:37
Added a little info to answer "why" I need this for the project I'm working on. Thanks! – brendan Sep 23 '10 at 14:12
Also, I am using parts of the Bone Soft CSS parser for other things but it does not do the property break down that I need. – brendan Sep 23 '10 at 14:13
I think you are going to have to write your own parser for this. As this is probably a very unique thing you are trying to do. Maybe have a look or investigation into firebug.... there is a javascript version that lists "cumputed style" showing it as a breakdown to the granularity you need, converting padding:10px into the 4 elements. – jimplode Sep 23 '10 at 14:16
I've written a custom parser for very much of it but was hoping to find something that could do that CSS property expansion bit for me as the logic can get pretty complicated. I've found a couple of things but no silver bullet Thanks for looking into it! – brendan Sep 23 '10 at 14:27

How can I expand CSS shorthand properties programmatically?

3 Answers3