Skip to content

Commit f48b464

Browse files
jessicarushjessicarush
committed
Initial commit
1 parent f0d7268 commit f48b464

File tree

2 files changed

+143
-0
lines changed

2 files changed

+143
-0
lines changed

‎css_isolation/base.css

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
@charset "UTF-8";
2+
3+
/* VARIABLES -------------------------------------------------------------- */
4+
5+
:root {
6+
--heading-font: 'Open Sans', sans-serif;
7+
--main-font: 'Open Sans', sans-serif;
8+
--minor-font: 'Open Sans', sans-serif;
9+
--heading-color: rgba(0,0,50,.9);
10+
--main-color: rgba(70,70,90,.9);
11+
--minor-color: rgb(190,190,200);
12+
--emphasis-color: rgb(27,211,165);
13+
}
14+
15+
/* DEFAULTS --------------------------------------------------------------- */
16+
17+
html {
18+
color: var(--main-color);
19+
font-family: var(--main-font);
20+
font-size: 16px;
21+
font-weight: 400;
22+
}
23+
24+
/* TYPOGRAPHY ------------------------------------------------------------- */
25+
26+
.primary-heading {
27+
color: var(--heading-color);
28+
font-family: var(--heading-font);
29+
font-size: 2rem;
30+
font-weight: 400;
31+
}
32+
33+
.highlight-text {
34+
color: var(--emphasis-color);
35+
}
36+
37+
/* LINKS & BUTTONS -------------------------------------------------------- */
38+
39+
/* LAYOUT ----------------------------------------------------------------- */
40+
41+
.content {
42+
border: solid 1px pink;
43+
margin: 25px 0 50px 0;
44+
}
45+
46+
.another {
47+
width: 100px;
48+
height: 100px;
49+
background: tomato;
50+
position: relative;
51+
left: 20px;
52+
top: 20px;
53+
z-index: 2;
54+
}
55+
/* COMPONENTS ------------------------------------------------------------- */
56+
57+
.thing {
58+
position: relative;
59+
}
60+
61+
.thing.isolated {
62+
isolation: isolate;
63+
}
64+
65+
.thing__one {
66+
width: 100px;
67+
height: 100px;
68+
background: orange;
69+
position: absolute;
70+
left: 0;
71+
top: 0;
72+
z-index: 1;
73+
}
74+
75+
.thing__two {
76+
width: 100px;
77+
height: 100px;
78+
background: blueviolet;
79+
position: absolute;
80+
left: 40px;
81+
top: 40px;
82+
z-index: 3;
83+
}
84+
/* COSMETIC --------------------------------------------------------------- */
85+
86+
/* UTILITY ---------------------------------------------------------------- */
87+
88+
/* STATE ------------------------------------------------------------------ */

‎css_isolation/index.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Site | Page</title>
7+
<link href="base.css" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
13+
<header>
14+
<h1 class="primary-heading">CSS isolation property</h1>
15+
<nav></nav>
16+
</header>
17+
18+
<main>
19+
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/isolation">isolation property</a> defines whether an element must create a new stacking content.</p>
20+
<p>The isolation property is most helpful when used with:</p>
21+
<ul>
22+
<li>background-blend-mode</li>
23+
<li>mix-blend-mode</li>
24+
<li>z-index</li>
25+
</ul>
26+
27+
<p>The problem: image we have the following component: a wrapper that doesn't set a z-index but has 2 elements inside that do have a z-index. This result of this situation may be confusing for some people (to me, it makes sense). If the component has a sibling with an in-between z-index, it'll get "interleaved" between the two elements inside the wrapper:
28+
</p>
29+
30+
<div class="content">
31+
<div class="thing">
32+
<div class="thing__one"></div>
33+
<div class="thing__two"></div>
34+
</div>
35+
<div class="another"></div>
36+
</div>
37+
38+
<p>Adding <code>isolation: isolate;</code> to the wrapper:</p>
39+
40+
<div class="content">
41+
<div class="thing isolated">
42+
<div class="thing__one"></div>
43+
<div class="thing__two"></div>
44+
</div>
45+
<div class="another"></div>
46+
</div>
47+
48+
49+
</main>
50+
51+
<footer>
52+
</footer>
53+
54+
</body>
55+
</html>

0 commit comments

Comments
 (0)