Skip to content

Commit c84ef24

Browse files
jonathantnealjonathantneal
committed
1.0.0
0 parents  commit c84ef24

File tree

2 files changed

+232
-0
lines changed

2 files changed

+232
-0
lines changed

‎index.html

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!doctype html>
2+
<meta charset="utf-8">
3+
<meta name="viewport" content="width=device-width,initial-scale=1">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<title>CSS Database</title>
6+
<link href="style.css" rel="stylesheet">
7+
8+
<header class="cssdb-header">
9+
<img class="cssdb-header-branding" src="https://rawgit.com/jonathantneal/media-expressions-spec/gh-pages/css-logo.svg" alt="CSS Logo" width="90" height="90">
10+
<div class="cssdb-header-heading">
11+
<h1 class="cssdb-header-title">What’s next for CSS?</h1>
12+
<p class="cssdb-header-desc">CSS Database is a comprehensive collection of CSS features and their positions in the process of becoming implemented web standards. These positions reflect the TC39 process.</p>
13+
</div>
14+
<a class="cssdb-header-link" href="">What are the stages?</a>
15+
</header>
16+
<table class="cssdb-features">
17+
<thead>
18+
<tr>
19+
<th>Feature</th>
20+
<th>Stage</th>
21+
<th>Description</th>
22+
<th>Specification</th>
23+
<th>Polyfills</th>
24+
</tr>
25+
</thead>
26+
<tbody><tr class="cssdb-feature">
27+
<td class="cssdb-feature-title">@apply rules</td>
28+
<td class="cssdb-feature-stage stage--null">NR</td>
29+
<td class="cssdb-feature-desc">A syntax for storing properties in a named variable, referenceable in other style rules</td>
30+
<td class="cssdb-feature-spec"><a href="http://tabatkins.github.io/specs/css-apply-rule/">http://tabatkins.github.io/specs/css-apply-rule/</a></td>
31+
<td class="cssdb-feature-fill"><ul><a href="https://github.com/pascalduez/postcss-apply">postcss-apply</a></ul></td>
32+
</tr><tr class="cssdb-feature">
33+
<td class="cssdb-feature-title">color expressions</td>
34+
<td class="cssdb-feature-stage stage--null">NR</td>
35+
<td class="cssdb-feature-desc">A function used to modify a color</td>
36+
<td class="cssdb-feature-spec"><a href="https://drafts.csswg.org/css-color/#modifying-colors">https://drafts.csswg.org/css-color/#modifying-colors</a></td>
37+
<td class="cssdb-feature-fill"><ul><a href="https://github.com/postcss/postcss-color-function">postcss-color-function</a></ul></td>
38+
</tr><tr class="cssdb-feature">
39+
<td class="cssdb-feature-title">custom media queries</td>
40+
<td class="cssdb-feature-stage stage--null">NR</td>
41+
<td class="cssdb-feature-desc">An at-rule used to define aliases representing media queries</td>
42+
<td class="cssdb-feature-spec"><a href="https://www.w3.org/TR/2016/WD-mediaqueries-4-20160126/#custom-mq">https://www.w3.org/TR/2016/WD-mediaqueries-4-20160126/#custom-mq</a></td>
43+
<td class="cssdb-feature-fill"><ul><a href="https://github.com/postcss/postcss-custom-media">postcss-custom-media</a></ul></td>
44+
</tr><tr class="cssdb-feature">
45+
<td class="cssdb-feature-title">custom selectors</td>
46+
<td class="cssdb-feature-stage stage--null">NR</td>
47+
<td class="cssdb-feature-desc">An at-rule used to define aliases representing selectors</td>
48+
<td class="cssdb-feature-spec"><a href="https://drafts.csswg.org/css-extensions/#custom-selectors">https://drafts.csswg.org/css-extensions/#custom-selectors</a></td>
49+
<td class="cssdb-feature-fill"><ul><a href="https://github.com/postcss/postcss-custom-selectors">postcss-color-function</a></ul></td>
50+
</tr><tr class="cssdb-feature">
51+
<td class="cssdb-feature-title">gray expressions</td>
52+
<td class="cssdb-feature-stage stage--null">NR</td>
53+
<td class="cssdb-feature-desc">An expression used to specify fully desaturated colors</td>
54+
<td class="cssdb-feature-spec"><a href="https://drafts.csswg.org/css-color/#grays">https://drafts.csswg.org/css-color/#grays</a></td>
55+
<td class="cssdb-feature-fill"><ul><a href="https://github.com/postcss/postcss-color-gray">postcss-color-gray</a></ul></td>
56+
</tr><tr class="cssdb-feature">
57+
<td class="cssdb-feature-title">grid layout</td>
58+
<td class="cssdb-feature-stage stage--null">NR</td>
59+
<td class="cssdb-feature-desc">A syntax for using a grid concept to lay out content</td>
60+
<td class="cssdb-feature-spec"><a href="https://www.w3.org/TR/css-grid-1/">https://www.w3.org/TR/css-grid-1/</a></td>
61+
<td class="cssdb-feature-fill"></td>
62+
</tr><tr class="cssdb-feature">
63+
<td class="cssdb-feature-title">hex #rgba colors</td>
64+
<td class="cssdb-feature-stage stage--null">NR</td>
65+
<td class="cssdb-feature-desc">A 4 & 8 character hex notation for color to include the opacity level</td>
66+
<td class="cssdb-feature-spec"><a href="https://drafts.csswg.org/css-color/#hex-notation">https://drafts.csswg.org/css-color/#hex-notation</a></td>
67+
<td class="cssdb-feature-fill"><ul><a href="https://github.com/postcss/postcss-color-hex-alpha">postcss-color-hex-alpha</a></ul></td>
68+
</tr><tr class="cssdb-feature">
69+
<td class="cssdb-feature-title">hwb() expressions</td>
70+
<td class="cssdb-feature-stage stage--null">NR</td>
71+
<td class="cssdb-feature-desc">An expression used to specify colors, similar to HSL, but often even easier for humans to work with</td>
72+
<td class="cssdb-feature-spec"><a href="https://drafts.csswg.org/css-color/#the-hwb-notation">https://drafts.csswg.org/css-color/#the-hwb-notation</a></td>
73+
<td class="cssdb-feature-fill"><ul><a href="https://github.com/postcss/postcss-color-hwb">postcss-color-hwb</a></ul></td>
74+
</tr><tr class="cssdb-feature">
75+
<td class="cssdb-feature-title">:matches pseudo-class</td>
76+
<td class="cssdb-feature-stage stage--null">NR</td>
77+
<td class="cssdb-feature-desc">A pseudo-class used to match a selector list</td>
78+
<td class="cssdb-feature-spec"><a href="https://drafts.csswg.org/selectors-4/#matches">https://drafts.csswg.org/selectors-4/#matches</a></td>
79+
<td class="cssdb-feature-fill"><ul><a href="https://github.com/postcss/postcss-selector-matches">postcss-selector-matches</a></ul></td>
80+
</tr><tr class="cssdb-feature">
81+
<td class="cssdb-feature-title">media() expressions</td>
82+
<td class="cssdb-feature-stage stage--null">NR</td>
83+
<td class="cssdb-feature-desc">An expression used to define media queries within values</td>
84+
<td class="cssdb-feature-spec"><a href="https://jonathantneal.github.io/media-expressions-spec/">https://jonathantneal.github.io/media-expressions-spec/</a></td>
85+
<td class="cssdb-feature-fill"><ul><a href="https://github.com/jonathantneal/postcss-media-fn">postcss-media-fn</a></ul></td>
86+
</tr><tr class="cssdb-feature">
87+
<td class="cssdb-feature-title">nesting rules</td>
88+
<td class="cssdb-feature-stage stage--null">NR</td>
89+
<td class="cssdb-feature-desc">A syntax for nesting relative rules inside another</td>
90+
<td class="cssdb-feature-spec"><a href="http://tabatkins.github.io/specs/css-nesting/">http://tabatkins.github.io/specs/css-nesting/</a></td>
91+
<td class="cssdb-feature-fill"><ul><a href="https://github.com/jonathantneal/postcss-nesting">postcss-nesting</a></ul></td>
92+
</tr><tr class="cssdb-feature">
93+
<td class="cssdb-feature-title">:not list pseudo-class</td>
94+
<td class="cssdb-feature-stage stage--null">NR</td>
95+
<td class="cssdb-feature-desc">A pseudo-class used to ignore a selector list</td>
96+
<td class="cssdb-feature-spec"><a href="https://drafts.csswg.org/selectors-4/#negation">https://drafts.csswg.org/selectors-4/#negation</a></td>
97+
<td class="cssdb-feature-fill"><ul><a href="https://github.com/postcss/postcss-selector-not">postcss-selector-not</a></ul></td>
98+
</tr><tr class="cssdb-feature">
99+
<td class="cssdb-feature-title">range media queries</td>
100+
<td class="cssdb-feature-stage stage--null">NR</td>
101+
<td class="cssdb-feature-desc">A syntax for defining media query ranges using ordinary mathematical comparison operators</td>
102+
<td class="cssdb-feature-spec"><a href="https://drafts.csswg.org/mediaqueries/#mq-ranges">https://drafts.csswg.org/mediaqueries/#mq-ranges</a></td>
103+
<td class="cssdb-feature-fill"><ul><a href="https://github.com/postcss/postcss-media-minmax">postcss-media-minmax</a></ul></td>
104+
</tr><tr class="cssdb-feature">
105+
<td class="cssdb-feature-title">variables</td>
106+
<td class="cssdb-feature-stage stage--null">NR</td>
107+
<td class="cssdb-feature-desc">A syntax for defining custom values accepted by all CSS properties</td>
108+
<td class="cssdb-feature-spec"><a href="https://www.w3.org/TR/css-variables/">https://www.w3.org/TR/css-variables/</a></td>
109+
<td class="cssdb-feature-fill"><ul><a href="https://github.com/postcss/postcss-custom-properties">postcss-custom-properties</a></ul></td>
110+
</tr></tbody>
111+
</table>

‎style.css

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
/* Scaffolding
2+
/* ========================================================================== */
3+
4+
*, ::before, ::after {
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font: 100%/1 sans-serif;
10+
margin: 32px 64px;
11+
}
12+
13+
a {
14+
color: #08a6d1;
15+
text-decoration: none;
16+
}
17+
18+
/* Header
19+
/* ========================================================================== */
20+
21+
.cssdb-header {
22+
align-items: center;
23+
display: flex;
24+
}
25+
26+
.cssdb-header-branding {
27+
height: 114px;
28+
margin-right: 36px;
29+
width: 114px;
30+
}
31+
32+
.cssdb-header-heading {
33+
flex-grow: 1;
34+
}
35+
36+
.cssdb-header-title {
37+
font-size: 30px;
38+
line-height: 1;
39+
margin: 0 0 12px;
40+
}
41+
42+
.cssdb-header-desc {
43+
color: #616161;
44+
font-size: 14px;
45+
line-height: calc(18 / 14);
46+
margin: 0;
47+
max-width: 44em;
48+
}
49+
50+
.cssdb-header-link {
51+
text-align: right;
52+
margin-left: 60px;
53+
white-space: nowrap;
54+
}
55+
56+
/* Features List
57+
/* ========================================================================== */
58+
59+
.cssdb-features {
60+
box-shadow: 0 0 1px 0 #e1e1e1;
61+
border-collapse: collapse;
62+
margin-top: 42px;
63+
width: 100%;
64+
}
65+
66+
.cssdb-features td,
67+
.cssdb-features th {
68+
font-size: 14px;
69+
padding: 22px 26px;
70+
}
71+
72+
.cssdb-features th {
73+
font-weight: 700;
74+
line-height: 1;
75+
}
76+
77+
.cssdb-features th:not(:first-child) {
78+
box-shadow: inset 1px 0 0 0 #f5f5f5;
79+
}
80+
81+
.cssdb-features td {
82+
box-shadow: inset 0 .5px 0 0 #fff, inset 0 -.5px 0 0 #fff;
83+
line-height: calc(22 / 18);
84+
}
85+
86+
.cssdb-features td:not(.cssdb-feature-stage):not(:first-child) {
87+
box-shadow: inset 1px 0 0 0 #ededed;
88+
}
89+
90+
.cssdb-feature:nth-child(odd) {
91+
background-color: #f7f7f7;
92+
}
93+
94+
.cssdb-feature-stage {
95+
color: #fff;
96+
text-align: center;
97+
}
98+
99+
.stage--null {
100+
background-color: #414141;
101+
}
102+
103+
.stage--0 {
104+
background-color: #d02c2c;
105+
}
106+
107+
.stage--1 {
108+
background-color: #ed782a;
109+
}
110+
111+
.stage--2 {
112+
background-color: #e7c924;
113+
}
114+
115+
.stage--3 {
116+
background-color: #899c1f;
117+
}
118+
119+
.stage--4 {
120+
background-color: #3e7817;
121+
}

0 commit comments

Comments
 (0)