POE::XUL::Style - XUL style object


    use POE::XUL::Node;

    my $node = Description( style   => "color: red; font-weight: bold", 
                            content => "YES!" 
    print $node->style->color;          # prints 'red'
    print $node->style->fontWeight;     # prints 'bold'

    $node->style->fontSize( '150%' );

    $node->style( "overflow: hidden;" );    # DOM spec tells us this is bad
    print $node->style->color;          # now it prints ''


POE::XUL::Style is a DOM-like object that encapsulates the CSS style of a XUL element. It uses POE::XUL::ChangeManager to make sure all style are mirrored in the browser's DOM. However, style changes in the browser's DOM are not mirrored in the POE::XUL app.

CSS parsing is round-trip safe; All formating and comments are preserved.

The POE::XUL::Style object will stringize as a full CSS declaration. This means the old-school code that follows should still work.

    my $css = $node->style;
    $css .= "overflow-y: auto;"
                unless $css =~ s/(overflow-y: ).+?;/${1}auto/;
    $node->style( $css );

But please update your code to the following:

    $node->style->overflowY( 'auto' );

Isn't that much, much nicer?


If missing, the margin-top, margin-left, margin-right, margin-bottom properties will be filled in from margin property. The padding and border properties also support this.

    my $style = $node->style;
    $style->margin( '1px' );
    my $top = $style->marginTop();       # will be 1px

    $style->padding( '1px 3px 2px' );
    my $left = $style->marginLeft();     # will be 3px

    $style->border( 'thin solid red' );
    my $right = $style->borderRight();   # will be 'thin solid red'

What's more, the various sub-fields of the border property (-width, -style, -color) will be automaticaly found.

    $style->border( 'thin dotted black' );
    $style->borderBottom( '3px inset threedface' );
    my $topW = $style->borderTopWidth;        # will be 'thin'
    my $bottomS = $style->borderBottomStyle;  # will be 'inset'

The sub-fields of outline and list-style also support this:

    $style->outline( 'this dotted orange' );
    my $X = $style->outlineColor;       # will be 'orange'
    $style->listStyle( 'circle inside' );
    my $X = $style->outlinePosition;    # will be 'inside'

The overflow-x and overflow-y properties default to overflow.

The -moz-border-radius-topleft, -moz-border-radius-topright, -moz-border-radius-bottomright and -moz-border-radius-bottomleft properties default to sub-fields of -moz-border-radius.

There are currently no equivalents for the font property.


  • Setting a sub-fields of the border property will not modify the corresponding border property.

        $style->borderBottom( '3px inset puce' );
        $style->borderBottomStyle( 'groove' );
        my $bottom = $style->borderBottom;  
        # $bottom will still be '3px inset puce', not '3px groove puce'

    Likewise with padding and margin.

        $style->margin( '1px 5px 1px 0' );
        $style->marginRight( 0 );
        my $margin = $style->margin;      # still '1px 5px 1px 0'
  • If you set a sub-property, and then set the parent property, the sub-property is not changed to reflect the new parent.

        $style->marginRight( 0 );
        $style->margin( '1px 5px 1px 0' );
        my $R = $style->marginRight;      # still 0, not 5px
  • No attempt is made to ensure that values are valid. The CSS spec limits various values to a set of keywords, like inset, groove, solid, etc for border-style. Any value outside of the specification will be merrily passed on to the browser.


POE::XUL::Node has a good CSS reference. the CSS specification.


Philip Gwyn <>


Copyright 2008-2010 by Philip Gwyn. All rights reserved;

This library is free software; you can redistribute it and/or modify it under the same terms as Perl itself.