CODEWITHSUNDEEP
c#css.netanglesharp
gpinkas
gpinkas

Reputation: 2591

How to combine multiple CSS declarations to shorthand

I'm using AngleSharp to parse some CSS files, compare their structure and build an output file out of them. The tool makes all declarations explicit, i.e. if the source rule is:

.recent-work-wrap .overlay {
    padding: 15px;
}

I get following output from AngleSharp:

.recent-work-wrap .overlay {
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
}

That is good for comparing rules and detect changes, but the question is, how can this rule be combined to a shorthand like above?

So for another example, how to get from this:

    .sample-rule {
        margin-right: auto;
        margin-left: auto;
        margin-top: 30px;
        margin-bottom: 30px;
    }

to this

    .sample-rule {
        margin: 30px auto;
    }

The situation gets worse with CSS3 declarations, because they can really have a lot of parameters... I checked some CSS minifier/uglifier tools, but they mostly use RegEx to remove whitespace and smaller optimizations. Is there a known way/tool/library to write optimal shorthands out of multiple declarations?

Upvotes: 0

Views: 314

Answers (1)

Florian Rappl
Florian Rappl

Reputation: 3189

How do you get this output? Have you tried looking at the shorthand declarations (e.g., Margin) of the Style property?

Internally, AngleSharp only uses longhand declarations, thus the output is as verbose as it could be. However, AngleSharp knows most shorthands and should be able to recombine these longhands into their shorthand form.

I don't know if that helps you already. If not then please post some code (a MWE) and I'll try refine this answer.

Upvotes: 1

Related Questions