Welcome! » Log In » Create A New Profile

add new css property

Posted by medic_911 
add new css property
January 23, 2012 05:29AM

Hi! How i can add new CSS allowed property like "border-radius"? If add this to CSS.AllowedProperties, i have error "Style attribute "border-radius" is not supported (for information on implementing this, see the support forums). Thanks.

Re: add new css property
January 23, 2012 08:48AM

Adding new CSS properties is a bit less documented than adding HTML properties, but there are two components:

1. You need to find an appropriate AttrDef for "border-radius" (I imagine this would be some length like property? Check the spec.) 2. You need to add it to CSSDefinition. You can do this by running getDefinition('CSS') from your copy HTMLPurifier_Config, and adding the entry border-radius to your AttrDef in the info parameter. See CSSDefinition.php for more details.

Oliver Schonrock
Re: add new css property
April 25, 2012 07:49AM

Thanks for this post. It helped my do exactly what the OP asked for. Here is a concrete code example which could save others time:

      $config = HTMLPurifier_Config::createDefault();

      // add some custom CSS3 properties                                                                                                                                              
      $css_definition = $config->getDefinition('CSS');

      $border_radius =
        $info['border-top-left-radius'] =
        $info['border-top-right-radius'] =
        $info['border-bottom-left-radius'] =
        $info['border-bottom-right-radius'] =
        new HTMLPurifier_AttrDef_CSS_Composite(array(
                                                 new HTMLPurifier_AttrDef_CSS_Length('0'),
                                                 new HTMLPurifier_AttrDef_CSS_Percentage(true)

      $info['border-radius'] = new HTMLPurifier_AttrDef_CSS_Multiple($border_radius);

      // wrap all new attr-defs with decorator that handles !important                                                                                                                
      $allow_important = $config->get('CSS.AllowImportant');
      foreach ($info as $k => $v) {
        $css_definition->info[$k] = new HTMLPurifier_AttrDef_CSS_ImportantDecorator($v, $allow_important);

      $html_purifier = new HTMLPurifier($config);
Re: add new css property
March 23, 2016 08:32AM

Hello. I want allow linear-gradient for background-image and background. Is this with your code possible?

Source: https://developer.mozilla.org/de/docs/Web/CSS/linear-gradient

Edited 1 time(s). Last edit at 03/23/2016 08:32AM by KillerBee.

Re: add new css property
March 24, 2016 03:37AM

In principle it's possible but it is a bit more nontrivial than most, because linear-gradient has a custom format so you'll have to write an AttrDef which knows how to parse it.

Sorry, you do not have permission to post/reply in this forum.