object.style.container = "value"; <'container'> = <'container-name'> [ / <'container-type'> ]? <'container-name'> = none | <custom-ident>+ none The query container has no query container name.
<custom-ident> Specifies any valid identifier that is not misinterpreted as a keyword.
<'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.
<!doctype html>
<html>
<head>
<style>
.myclass1
{
container: mycontainername / inline-size;
display: flex;
flex-wrap: wrap;
}
.myclass2
{
background-image: linear-gradient(135deg, white, lightgray);
flex-grow: 1;
min-height: 100px;
}
@container mycontainername (width < 500px)
{
.myclass2
{
flex-basis: 100%;
}
}
</style>
</head>
<body>
<div class="myclass1">
<div class="myclass2">custom-ident</div>
<div class="myclass2">custom-ident</div>
<div class="myclass2">custom-ident</div>
<div class="myclass2">custom-ident</div>
<div class="myclass2">custom-ident</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.myclass1
{
display: flex;
flex-wrap: wrap;
}
.myclass2
{
background-image: linear-gradient(135deg, white, lightgray);
flex-grow: 1;
min-height: 100px;
}
@container mycontainername (width < 500px)
{
.myclass2
{
flex-basis: 100%;
}
}
</style>
</head
<body>
<button>initial</button>
<button>none</button>
<button value="mycontainername">custom-ident</button>
<div class="myclass1">
<div class="myclass2">container-name</div>
<div class="myclass2">container-name</div>
<div class="myclass2">container-name</div>
<div class="myclass2">container-name</div>
<div class="myclass2">container-name</div>
</div>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
document.querySelector(".myclass1").style.container = myproperty + " / inline-size";
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.myclass1
{
container: none / normal;
display: flex;
flex-wrap: wrap;
}
.myclass2
{
background-image: linear-gradient(135deg, white, lightgray);
flex-grow: 1;
min-height: 100px;
}
@container(width < 500px)
{
.myclass2
{
flex-basis: 100%;
}
}
</style>
</head>
<body>
<div class="myclass1">
<div class="myclass2">normal</div>
<div class="myclass2">normal</div>
<div class="myclass2">normal</div>
<div class="myclass2">normal</div>
<div class="myclass2">normal</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.myclass1
{
container: none / size;
display: flex;
flex-wrap: wrap;
}
.myclass2
{
background-image: linear-gradient(135deg, white, lightgray);
flex-grow: 1;
min-height: 100px;
}
@container(width < 500px)
{
.myclass2
{
flex-basis: 100%;
}
}
</style>
</head>
<body>
<div class="myclass1">
<div class="myclass2">size</div>
<div class="myclass2">size</div>
<div class="myclass2">size</div>
<div class="myclass2">size</div>
<div class="myclass2">size</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.myclass1
{
container: none / inline-size;
display: flex;
flex-wrap: wrap;
}
.myclass2
{
background-image: linear-gradient(135deg, white, lightgray);
flex-grow: 1;
min-height: 100px;
}
@container(width < 500px)
{
.myclass2
{
flex-basis: 100%;
}
}
</style>
</head>
<body>
<div class="myclass1">
<div class="myclass2">inline-size</div>
<div class="myclass2">inline-size</div>
<div class="myclass2">inline-size</div>
<div class="myclass2">inline-size</div>
<div class="myclass2">inline-size</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.myclass1
{
display: flex;
flex-wrap: wrap;
}
.myclass2
{
background-image: linear-gradient(135deg, white, lightgray);
flex-grow: 1;
min-height: 100px;
}
@container(width < 500px)
{
.myclass2
{
flex-basis: 100%;
}
}
</style>
</head
<body>
<button>initial</button>
<button>normal</button>
<button>size</button>
<button>inline-size</button>
<div class="myclass1">
<div class="myclass2">container-type</div>
<div class="myclass2">container-type</div>
<div class="myclass2">container-type</div>
<div class="myclass2">container-type</div>
<div class="myclass2">container-type</div>
</div>
<script>
function myfunction(myparameter)
{
document.querySelector(".myclass1").style.container = "none / " + myparameter.target.innerHTML;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>