Skip to content

Commit 83efac6

Browse files
authored
Merge pull request #87 from bsmth/19452-chore-contain-style
chore: add example for 'contain: style'
2 parents 8ac6c3c + b661ec0 commit 83efac6

File tree

2 files changed

+57
-0
lines changed

2 files changed

+57
-0
lines changed

contain/contain-style-counter.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Float interference</title>
6+
<style>
7+
body {
8+
counter-reset: headings;
9+
}
10+
11+
h1::before {
12+
counter-increment: headings;
13+
content: counter(headings) ": ";
14+
}
15+
16+
.contain {
17+
contain: style;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
<h1>Introduction</h1>
23+
<h1>Background</h1>
24+
<div class="contain">
25+
<h1>Contained counter</h1>
26+
</div>
27+
<h1>Conclusion</h1>
28+
</body>
29+
</html>

contain/contain-style-quotes.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Float interference</title>
6+
<style>
7+
body {
8+
quotes: "«" "»" "‹" "›";
9+
}
10+
.open-quote:before {
11+
content: open-quote;
12+
}
13+
14+
.close-quote:after {
15+
content: close-quote;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
<span class="open-quote">
21+
outer
22+
<span style="contain: style">
23+
<span class="open-quote"> inner </span>
24+
</span>
25+
</span>
26+
<span class="close-quote"> close </span>
27+
</body>
28+
</html>

0 commit comments

Comments
 (0)