container-type

Description
Syntax
Examples
Links

Description

The container-type property for CSS specifies the element as a query container for the purpose of container queries that require explicit containment (such as container size queries), allowing style rules styling its descendants to query various aspects of its sizing and layout, and respond accordingly.

Syntax

CSS

container-type: value;

JS

object.style.containerType = "value";

Values

<'container-type'> = normal || [ size | inline-size ]

normal

The element is not a query container for any container size queries, but remains a query container for container style queries.

size

Establishes a query container for container size queries on both the inline and block axis. Applies layout containment, style containment, and size containment to the principal box.

inline-size

Establishes a query container for container size queries on the container’s own inline axis. Applies layout containment, style containment, and inline-size containment to the principal box.

Initial

normal

Examples

1 · normal

2 · size

3 · inline-size

4 · JS

<!doctype html>
<html>
<head>
    <style>
        .myclass
        {
            display: flex;
            flex-wrap: wrap;

div
            {
                background-image: linear-gradient(135deg, white, lightgray);
                flex-grow: 1;
                min-height: 100px;
    
                @container(width < 500px)
                {
                    flex-basis: 100%;
                }
            }
        }
    </style>
</head
<body>
    <button>initial</button>
    <button>normal</button>
    <button>size</button>
    <button>inline-size</button>
    <div class="myclass">
        <div>container-type</div>
        <div>container-type</div>
        <div>container-type</div>
        <div>container-type</div>
        <div>container-type</div>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector(".myclass").style.containerType = myparameter.target.innerHTML;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>