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.

yes and no, the parsers provided there do not do this kind of expansion, and really, that's the only part I need — brendan
– brendan, Commented Sep 17, 2010 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
– Stefanvds, Commented Sep 27, 2010 at 8: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
– brendan, Commented Sep 27, 2010 at 13:01

brendan · Accepted Answer · 2010-09-23 14:22:10Z

1

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/

answered Sep 23, 2010 at 14:22

brendan

30.1k20 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karthik Mahalingam · Accepted Answer · 2010-09-26 20:35:07Z

1

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\

answered Sep 26, 2010 at 20:35

Karthik Mahalingam

1,0718 silver badges10 bronze badges

3 Comments

Rob Over a year ago

+1 - this was my first thought, although I'm not sure how much I trust the IE renderer to interpret CSS reliably.

Karthik Mahalingam Over a year ago

@Rob I believe, this is probably the very less expensive and more reliable solution, when compared to manually parsing html files.

Rob Over a year ago

I completely agree. But as a web developer, I was taking the opportunity to make a jab at IE's [history of] standards compliance.

jimplode · Accepted Answer · 2010-09-23 11:29:13Z

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, 2010 at 11:29

jimplode

3,5104 gold badges28 silver badges44 bronze badges

5 Comments

jimplode Over a year ago

You may want to check this out:codeproject.com/KB/recipes/CSSParser.aspx

brendan Over a year ago

Added a little info to answer "why" I need this for the project I'm working on. Thanks!

brendan Over a year ago

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.

jimplode Over a year ago

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.

brendan Over a year ago

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!

Collectives™ on Stack Overflow

How can I expand CSS shorthand properties programmatically?

3 Answers 3

Comments

3 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related