Properties

Synopsis

use CSS::Units :pt;
use CSS::Properties;
my CSS::Properties() $css = "color:red !important; padding: 1pt";
say $css.important("color"); # True
$css.border-color = 'red';
$css.margin = [5pt, 2pt, 5pt, 2pt];
$css.margin = 5pt;  # set margin on all 4 sides
# set text alignment
$css.text-align = 'right';
say ~$css; # border-color:red; color:red!important; margin:5pt; padding:1pt; text-align:right;

Description

This class manages a list of properties. These are typically parsed from the body of a CSS rule-set or from an inline `style` tag.

CSS Property Accessors

CSS Properties provides `rw` accessors for all standard CSS3 properties.

• color values are converted to Color objects

• other values are converted to strings or numeric, as appropriate

• the .type method returns additional type information

• box properties are arrays that contain four sides. For example, 'margin' contains 'margin-top', 'margin-right', 'margin-bottom' and 'margin-left';

• there are also some container properties that may be accessed directly or via a hash; for example, The 'font' accessor returns a hash containing 'font-size', 'font-family', and other font properties.

use CSS::Properties;
my CSS::Properties $css .= new: :style("color: orange; text-align: CENTER; margin: 2pt; font: 12pt Helvetica");
say $css.color.hex;       # (FF A5 00)
say $css.color.type;      # 'rgb'
say $css.text-align;      # 'center'
say $css.text-align.type; # 'keyw' (keyword)
# access margin-top, directly and through margin container
say $css.margin-top;      # '2'
say $css.margin-top.type; # 'pt'
say $css.margin;          # [2 2 2 2]
say $css.margin[0];       # '2'
say $css.margin[0].type;  # 'pt'
# access font-family directly and through font container
say $css.font-family;       # 'Helvetica'
say $css.font-family.type;  # 'ident'
say $css.font<font-family>; # 'Helvetica;

• The simplest ways of setting a property is to assign a string value which is parsed as CSS.

• Unit values are also recognized. E.g. `16pt`.

• Colors can be assigned to color objects

• Also the type and value can be assigned as a pair.

use CSS::Properties;
use CSS::Units :pt;
use Color;
my CSS::Properties $css .= new;
# assign to container
$css.font = "14pt Helvetica";
# assign to component properties
$css.font-weight = 'bold'; # string
$css.line-height = 16pt;   # unit value
$css.border-color = Color.new(0, 255, 0);
$css.font-style = :keyw<italic>; # type/value pair
say ~$css; # font:italic bold 14pt/16pt Helvetica;

Other Methods

new

method new(
    Str :$style,
    CSS::Properties() :$inherit,
    CSS::Properties() :$copy,
    Str :$units = 'pt',
    Numeric :$em = $inherit.em // 12,
    Numeric :$viewport-width,
    Numeric :$viewport-height,
    Numeric :$reference-width,
    *%props,
) returns CSS::Properties

Options:

• `Str :$style` CSS property list to parse

• `CSS::Properties() :$inherit` Properties to be formally inherited

• `CSS::Properties() :$copy` Additional properties to be copied in

• `Str :$units` # measurement units, such as 'pt', 'px', 'in', etc

• `Numeric :$em = 12` initial font size

• `Numeric :$viewport-width` for use as `vw` length units

• `Numeric :$viewport-height` for use as `vh` length units

• `Numeric :$reference-width` for use in box values

• `*%props` - CSS property settings

measure

# Converts a value to a numeric quantity;
my Numeric $font-size = $css.measure: :font-size; # get current font size
$font-size = $css.measure: :font-size<smaller>;   # compute a smaller font
$font-size = $css.measure: :font-size(120%);      # compute a larger font
my $weight = $css.measure: :font-weight;          # get current font weight 100..900
$weight = $css.measure: :font-weight<bold>;       # compute bold font weight

This function is implemented for `font-size`, `font-weight`, `letter-spacing`, `line-height`, and `word-spacing`.

It also works for box related properties: `width`, `height`, `{min|max}-{width|height}`, `border-{top|right|bottom|left}-width`, and `{padding|margin}-{top|right|bottom|left}`. The `reference-width` attribute represents the width of a containing element; which needs to set for correct calculation of percentage box related quantities:

$css.reference-width = 80pt;
say $css.measure: :width(75%); # 60

• handling of 'initial' and 'inherit' in the child declarations

• !important override properties in parent

• not all properties are inherited. e.g. color is, margin isn't