Skip to content

Commit 9ccb861

Browse files
rachelandrewrachelandrew
committed
browser compat page examples
1 parent 127ee2c commit 9ccb861

File tree

5 files changed

+570
-0
lines changed

5 files changed

+570
-0
lines changed

‎flexbox/browsers/float.html‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Fallbacks: floated items</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 170px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 80px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
}
53+
54+
section input {
55+
display: block;
56+
margin: 5px;
57+
}
58+
59+
.box {
60+
width: 500px;
61+
border: 2px dotted rgb(96, 139, 168);
62+
}
63+
64+
.box::after {
65+
content: "";
66+
display: block;
67+
clear: both;
68+
}
69+
70+
.box>* {
71+
border: 2px solid rgb(96, 139, 168);
72+
border-radius: 5px;
73+
background-color: rgba(96, 139, 168, .2);
74+
}
75+
</style>
76+
<style class="editable">
77+
.box {
78+
display: flex;
79+
}
80+
81+
.item {
82+
float: left;
83+
width: 150px;
84+
flex: 1;
85+
}
86+
</style>
87+
</head>
88+
89+
<body>
90+
<section>
91+
<div class="box">
92+
<div class="item">Item 1</div>
93+
<div class="item">Item 2 has more text in it and therefore will be taller than item one. In the flex version both should stretch to the same height.</div>
94+
</div>
95+
96+
</section>
97+
<textarea class="playable-css">
98+
.box {
99+
display: flex;
100+
}
101+
102+
.item {
103+
float: left;
104+
width: 150px;
105+
flex: 1;
106+
}
107+
</textarea>
108+
<textarea id="code" class="playable-html">
109+
<div class="box">
110+
<div class="item">Item 1</div>
111+
<div class="item">Item 2 has more text in it and therefore will be taller than item one. In the flex version both should stretch to the same height.</div>
112+
</div>
113+
</textarea>
114+
<div class="playable-buttons">
115+
<input id="reset" type="button" value="Reset">
116+
</div>
117+
</body>
118+
<script>
119+
var section = document.querySelector('section');
120+
var editable = document.querySelector('.editable');
121+
var textareaHTML = document.querySelector('.playable-html');
122+
var textareaCSS = document.querySelector('.playable-css');
123+
var reset = document.getElementById('reset');
124+
var htmlCode = textareaHTML.value;
125+
var cssCode = textareaCSS.value;
126+
127+
function fillCode() {
128+
editable.innerHTML = textareaCSS.value;
129+
section.innerHTML = textareaHTML.value;
130+
}
131+
132+
reset.addEventListener('click', function () {
133+
textareaHTML.value = htmlCode;
134+
textareaCSS.value = cssCode;
135+
fillCode();
136+
});
137+
138+
textareaHTML.addEventListener('input', fillCode);
139+
textareaCSS.addEventListener('input', fillCode);
140+
window.addEventListener('load', fillCode);
141+
</script>
142+
143+
</html>

‎flexbox/browsers/inline-block.html‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Fallbacks: inline-block items</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 170px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 80px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
}
53+
54+
section input {
55+
display: block;
56+
margin: 5px;
57+
}
58+
59+
.box {
60+
width: 500px;
61+
border: 2px dotted rgb(96, 139, 168);
62+
}
63+
64+
65+
66+
.box>* {
67+
border: 2px solid rgb(96, 139, 168);
68+
border-radius: 5px;
69+
background-color: rgba(96, 139, 168, .2);
70+
}
71+
</style>
72+
<style class="editable">
73+
.box {
74+
display: flex;
75+
}
76+
77+
.item {
78+
display: inline-block;
79+
width: 150px;
80+
flex: 1;
81+
}
82+
</style>
83+
</head>
84+
85+
<body>
86+
<section>
87+
<div class="box">
88+
<div class="item">Item 1</div>
89+
<div class="item">Item 2 has more text in it and therefore will be taller than item one. In the flex version both should stretch to the same height.</div>
90+
</div>
91+
92+
</section>
93+
<textarea class="playable-css">
94+
.box {
95+
display: flex;
96+
}
97+
98+
.item {
99+
display: inline-block;
100+
width: 150px;
101+
flex: 1;
102+
}
103+
</textarea>
104+
<textarea id="code" class="playable-html">
105+
<div class="box">
106+
<div class="item">Item 1</div>
107+
<div class="item">Item 2 has more text in it and therefore will be taller than item one. In the flex version both should stretch to the same height.</div>
108+
</div>
109+
</textarea>
110+
<div class="playable-buttons">
111+
<input id="reset" type="button" value="Reset">
112+
</div>
113+
</body>
114+
<script>
115+
var section = document.querySelector('section');
116+
var editable = document.querySelector('.editable');
117+
var textareaHTML = document.querySelector('.playable-html');
118+
var textareaCSS = document.querySelector('.playable-css');
119+
var reset = document.getElementById('reset');
120+
var htmlCode = textareaHTML.value;
121+
var cssCode = textareaCSS.value;
122+
123+
function fillCode() {
124+
editable.innerHTML = textareaCSS.value;
125+
section.innerHTML = textareaHTML.value;
126+
}
127+
128+
reset.addEventListener('click', function () {
129+
textareaHTML.value = htmlCode;
130+
textareaCSS.value = cssCode;
131+
fillCode();
132+
});
133+
134+
textareaHTML.addEventListener('input', fillCode);
135+
textareaCSS.addEventListener('input', fillCode);
136+
window.addEventListener('load', fillCode);
137+
</script>
138+
139+
</html>

0 commit comments

Comments
 (0)