/ 
POE-XUL-0.0601
River stage one • 1 direct dependent • 1 total dependent
/ POE::XUL::Style

NAME

POE::XUL::Style - XUL style object

SYNOPSIS

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 ''

DESCRIPTION

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?

EQUIVALENTS

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.

LIMITATIONS

  • 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.

SEE ALSO

POE::XUL::Node

http://developer.mozilla.org/en/docs/CSS has a good CSS reference.

http://www.w3.org/TR/CSS/ the CSS specification.

AUTHOR

Philip Gwyn <gwyn-at-cpan.org>

COPYRIGHT AND LICENSE

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.