CRSA

A tool allowing usage of container-relative units similar to those relative to the viewport

There are a few viewport-relative units presented in CSS, such as vh, vw, vmin, and vmax. This tool makes it possible to refer to some container's dimensions with the same semantics via using auxiliary names such as ch, cw, cmin or cmax.

Note: The dimension of a container's side being referred to must be independent of the container's content, e.g. be fixed or relative to an ancestor container

Units

• ch equals one-hundredth of the container's height
• cw equals one-hundredth of the container's width
• cmin equals one-hundredth of the container's lesser side
• cmax equals one-hundredth of the container's larger side
• cavg equals one-hundredth of a square root of the container's area

Usage

(new CRSA("#container"))
    .defineStyles({
        ".description": {
            "padding": "10cmin",
            "font-size": "10cmin",
            "font-style": "italic",
        },
        ".content": {
            "padding": "10cmin",
            "font-size": "5cmin",
        },
    });

Description

• constructor accepts either a CSS selector string or an instance of HTMLElement
• defineStyles() accept an object where the names of the object's items represent CSS selectors of HTML elements to apply styles to and the values of the items contain style rules to be applied. First, the element is being searched within the container and if not found, in the whole document and if not found again, the styles won't be applied. Auxiliary units ch, cw, cmin, cmax, or cavg will be converted to pixels.
• enableAutoRefresh() defines intervals related to representation refreshment. The values are specified in milliseconds. The first argument defines the interval of reassessing container's dimensions being applied when the browser window is being resized, the second argument defines the interval of reassessment applicable in any other cases, and in both cases, the actual refreshment happens only if the container's dimensions have changed. The third argument defines the interval of unconditional refreshment practical when the container's content is meant to be changing. If some argument is assigned a number equal to or lesser than zero, the interval is being bound to the frame rate of the browser window i.e. equal to the time span between frames. The default values of the first, second and third arguments are -1, 250 and 1e+12 respectively. Auto-refresh can be disabled by calling disableAutoRefresh(). It is also possible to manually refresh the representation by calling refresh().