Skip to content

Commit 6560109

Browse files
rachelandrewrachelandrew
committed
feature queries files
1 parent 6912100 commit 6560109

File tree

8 files changed

+600
-0
lines changed

8 files changed

+600
-0
lines changed

‎feature-queries/and.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Feature Queries: and</title>
7+
<link rel="stylesheet" href="../learn/styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
.box {
14+
border: 4px solid blue;
15+
color: blue;
16+
}
17+
@supports (display: grid) and (shape-outside: circle()) {
18+
.box {
19+
border: 4px solid red;
20+
color: red;
21+
}
22+
}
23+
</style>
24+
</head>
25+
26+
<body>
27+
<section class="preview">
28+
<div class="box">
29+
If your browser supports display: grid and shape-outside: circle(), the text and border will be red.
30+
</div>
31+
</section>
32+
33+
<textarea class="playable playable-css" style="height: 200px;">
34+
.box {
35+
border: 4px solid blue;
36+
color: blue;
37+
}
38+
@supports (display: grid) and (shape-outside: circle()) {
39+
.box {
40+
border: 4px solid red;
41+
color: red;
42+
}
43+
}
44+
</textarea>
45+
46+
<textarea class="playable playable-html" style="height: 120px;">
47+
<div class="box">
48+
If your browser supports display: grid and shape-outside: circle(), the text and border will be red.
49+
</div>
50+
</textarea>
51+
52+
<div class="playable-buttons">
53+
<input id="reset" type="button" value="Reset">
54+
</div>
55+
</body>
56+
<script src="../learn/playable.js"></script>
57+
58+
</html>

‎feature-queries/not.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Feature Queries: not</title>
7+
<link rel="stylesheet" href="../learn/styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
.box {
14+
border: 4px solid blue;
15+
color: blue;
16+
}
17+
@supports not (row-gap: 10px) {
18+
.box {
19+
border: 4px solid red;
20+
color: red;
21+
}
22+
}
23+
</style>
24+
</head>
25+
26+
<body>
27+
<section class="preview">
28+
<div class="box">
29+
If your browser does not support row-gap, the text and border will be red.
30+
</div>
31+
</section>
32+
33+
<textarea class="playable playable-css" style="height: 200px;">
34+
.box {
35+
border: 4px solid blue;
36+
color: blue;
37+
}
38+
@supports not (row-gap: 10px) {
39+
.box {
40+
border: 4px solid red;
41+
color: red;
42+
}
43+
}
44+
</textarea>
45+
46+
<textarea class="playable playable-html" style="height: 120px;">
47+
<div class="box">
48+
If your browser does not support row-gap, the text and border will be red.
49+
</div>
50+
</textarea>
51+
52+
<div class="playable-buttons">
53+
<input id="reset" type="button" value="Reset">
54+
</div>
55+
</body>
56+
<script src="../learn/playable.js"></script>
57+
58+
</html>

‎feature-queries/or.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Feature Queries: or</title>
7+
<link rel="stylesheet" href="../learn/styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
.box {
14+
border: 4px solid blue;
15+
color: blue;
16+
}
17+
@supports (display: grid) or (display: -ms-grid) {
18+
.box {
19+
border: 4px solid red;
20+
color: red;
21+
}
22+
}
23+
</style>
24+
</head>
25+
26+
<body>
27+
<section class="preview">
28+
<div class="box">
29+
If your browser supports display: grid or display: -ms-grid, the text and border will be red.
30+
</div>
31+
</section>
32+
33+
<textarea class="playable playable-css" style="height: 200px;">
34+
.box {
35+
border: 4px solid blue;
36+
color: blue;
37+
}
38+
@supports (display: grid) or (display: -ms-grid) {
39+
.box {
40+
border: 4px solid red;
41+
color: red;
42+
}
43+
}
44+
</textarea>
45+
46+
<textarea class="playable playable-html" style="height: 120px;">
47+
<div class="box">
48+
If your browser supports display: grid or display: -ms-grid, the text and border will be red.
49+
</div>
50+
</textarea>
51+
52+
<div class="playable-buttons">
53+
<input id="reset" type="button" value="Reset">
54+
</div>
55+
</body>
56+
<script src="../learn/playable.js"></script>
57+
58+
</html>

‎feature-queries/simple.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Feature Queries</title>
7+
<link rel="stylesheet" href="../learn/styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
.box {
14+
border: 4px solid blue;
15+
color: blue;
16+
}
17+
@supports (row-gap: 10px) {
18+
.box {
19+
border: 4px solid red;
20+
color: red;
21+
}
22+
}
23+
</style>
24+
</head>
25+
26+
<body>
27+
<section class="preview">
28+
<div class="box">
29+
If your browser supports row-gap, the text and border will be red.
30+
</div>
31+
</section>
32+
33+
<textarea class="playable playable-css" style="height: 200px;">
34+
.box {
35+
border: 4px solid blue;
36+
color: blue;
37+
}
38+
@supports (row-gap: 10px) {
39+
.box {
40+
border: 4px solid red;
41+
color: red;
42+
}
43+
}
44+
</textarea>
45+
46+
<textarea class="playable playable-html" style="height: 120px;">
47+
<div class="box">
48+
If your browser supports row-gap, the text and border will be red.
49+
</div>
50+
</textarea>
51+
52+
<div class="playable-buttons">
53+
<input id="reset" type="button" value="Reset">
54+
</div>
55+
</body>
56+
<script src="../learn/playable.js"></script>
57+
58+
</html>

‎feature-queries/step1.html

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Feature Queries: step 1</title>
7+
<link rel="stylesheet" href="../learn/styles.css">
8+
<style>
9+
* {
10+
box-sizing: border-box;
11+
}
12+
.wrapper {
13+
overflow: auto;
14+
}
15+
</style>
16+
17+
<style class="editable">
18+
.box {
19+
float: left;
20+
width: 33%;
21+
border: 2px solid rgb(95, 97, 110);
22+
border-radius: .5em;
23+
padding: 20px;
24+
}
25+
</style>
26+
</head>
27+
28+
<body>
29+
<section class="preview">
30+
<div class="wrapper">
31+
<div class="box">
32+
Box 1
33+
<br>Has more content
34+
<br>than the other boxes.
35+
</div>
36+
<div class="box">
37+
Box 2
38+
</div>
39+
<div class="box">
40+
Box 3
41+
</div>
42+
</div>
43+
</section>
44+
45+
<textarea class="playable playable-css" style="height: 200px;">
46+
.box {
47+
float: left;
48+
width: 33%;
49+
border: 2px solid rgb(95, 97, 110);
50+
border-radius: .5em;
51+
padding: 20px;
52+
}
53+
</textarea>
54+
55+
<textarea class="playable playable-html" style="height: 240px;">
56+
<div class="wrapper">
57+
<div class="box">
58+
Box 1
59+
<br>Has more content
60+
<br>than the other boxes.
61+
</div>
62+
<div class="box">
63+
Box 2
64+
</div>
65+
<div class="box">
66+
Box 3
67+
</div>
68+
</div>
69+
</textarea>
70+
71+
<div class="playable-buttons">
72+
<input id="reset" type="button" value="Reset">
73+
</div>
74+
</body>
75+
<script src="../learn/playable.js"></script>
76+
77+
</html>

0 commit comments

Comments
 (0)