Difference between revisions of "Custom CSS Keyword"

Latest revision as of 22:07, 12 March 2017

Defining a new CSS keyword can be wonderfully useful if you want to make something more readable. You can use them anywhere except for existing specification defined composite properties like font as they reject CSS values they don't recognise.

hello-world: hello-all;

A basic keyword

The most basic CSS keyword (A C# file) looks like this:

using Css;

// hello-all
public class HelloAll : CssKeyword{
    
    public override string Name{
        get{
             return "hello-all";
        }
    }
    
}

This keyword would act the same as a '0' when used, except for if you did e.g. aCssValue is HelloAll.

At the very least, you must:

• Inherit from CssKeyword.
• Give it a Name property.
• Give it a class name, which is typically just the name of the keyword.
• Optionally put it in the Css.Keywords namespace.

Place it somewhere outside the PowerUI folders. This is just incase you update PowerUI, as you won't want to loose your changes. It can go anywhere you find appropriate.

Providing values

A keyword can act like any kind of CSS value - they can be context sensitive (i.e. act like a different value depending on what element or property they are for). Most of the time a keyword responds with a numeric value so they can be easily identified.

// GetDecimal is the most commonly overriden function by keywords
// as it returns a numeric representation of the keyword which can
// then be used in e.g. a switch.
public override float GetDecimal(RenderableData context, CssProperty property){
    
    return MySpecialEnum.HelloAll;
    
}

Using partial classes you can extend, for example, CssProperty or Css.Value to add entirely custom CSS value types without needing to modify PowerUI's source.

Finding built-in keywords

CSS keywords tend to be more spread out in PowerUI, but you can find many of them here:

• Path/To/PowerUI/Spark/Keywords