The London Perl and Raku Workshop takes place on 26th Oct 2024. If your company depends on Perl, please consider sponsoring and/or attending.
 / 
HTML-Object-v0.5.0
River stage one • 1 direct dependent • 2 total dependents
1 ++
/ HTML::Object::DOM::Element::Source

NAME

HTML::Object::DOM::Element::Source - HTML Object DOM Source Class

SYNOPSIS

    use HTML::Object::DOM::Element::Source;
    my $source = HTML::Object::DOM::Element::Source->new || 
        die( HTML::Object::DOM::Element::Source->error, "\n" );

VERSION

    v0.2.0

DESCRIPTION

This interface provides special properties (beyond the regular HTML::Object::DOM::Element object interface it also has available to it by inheritance) for manipulating <source> elements.

INHERITANCE

    +-----------------------+     +---------------------------+     +-------------------------+     +----------------------------+     +------------------------------------+
    | HTML::Object::Element | --> | HTML::Object::EventTarget | --> | HTML::Object::DOM::Node | --> | HTML::Object::DOM::Element | --> | HTML::Object::DOM::Element::Source |
    +-----------------------+     +---------------------------+     +-------------------------+     +----------------------------+     +------------------------------------+

PROPERTIES

Inherits properties from its parent HTML::Object::DOM::Element

media

Is a string reflecting the media HTML attribute, containing the intended type of the media resource.

See also Mozilla documentation

sizes

The sizes HTML attribute on an source element specifies different image widths.

These widths are tied to browser conditions which helps create responsive images.

Example:

    <picture>
        <source srcset="/some/where/image-sm.jpg 120w,
                        /some/where/image.jpg 193w,
                        /some/where/image-lg.jpg 278w"
                sizes="(max-width: 710px) 120px,
                       (max-width: 991px) 193px,
                       278px" />
        <img src="/some/where/image-lg.jpg" alt="Some image" />
    </picture>

This means that:

  • A small image is used with a screen between 0 - 710px. The layout width is 120px.

  • A medium image is used with a screen between 711px - 991px. The layout width is 193px.

  • A large image is used with a screen 992px and larger. The layout width is 278px.

See also Mozilla documentation

src

Is a string reflecting the src HTML attribute, containing the URL for the media resource. The src property has a meaning only when the associated source element is nested in a media element that is a video or an audio element. It has no meaning and is ignored when it is nested in a picture element.

Note: If the src property is updated (along with any siblings), the parent HTML::Object::DOM::Element::Media's load method should be called when done, since source elements are not re-scanned automatically.

See also Mozilla documentation

srcset

Is a string reflecting the srcset HTML attribute, containing a list of candidate images, separated by a comma (',', U+002C COMMA). A candidate image is a URL followed by a 'w' with the width of the images, or an 'x' followed by the pixel density.

See also Mozilla documentation

type

Is a string reflecting the type HTML attribute, containing the type of the media resource.

See also Mozilla documentation

METHODS

Inherits methods from its parent HTML::Object::DOM::Element

AUTHOR

Jacques Deguest <jack@deguest.jp>

SEE ALSO

Mozilla documentation, Mozilla documentation on source element

COPYRIGHT & LICENSE

Copyright(c) 2021 DEGUEST Pte. Ltd.

All rights reserved

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