/
css-reworked.html
154 lines (142 loc) · 6.14 KB
/
css-reworked.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang='en'>
<head>
<title>HTML Reworked</title>
<link rel="preload" href="stylesheets/style.css" as="style">
<link rel='stylesheet' type="text/css" href='stylesheets/style.css'>
</head>
<h1>CSS Reworked</h1>
The language of cascading style sheets has a number of well-known
deficiencies and inconsistencies. Fortunatelly, there is a way to
fix lots of them with minimal changes to syntax.<br/>
<br/>
It's really misleading that hyphens in properties' names are used both
as substitutes for whitespace (as in <code>vertical-align</code>) and
as subproperty delimiters (as in <code>padding-left</code>), we favour
dots as subproperty delimiters (<code>border.top-left-radius</code>).<br/>
<br/>
CSS files consist of at-rules (like <code>@import</code>, <code>@media</code>
and <code>@font-face</code>), and unprefixed rules. We'd gain more
consistency and natural syntax for scoped rules by requiring them
to start with <code>@rule</code>, just like this:
<pre>
<b>@rule</b> div.sidenote {
font: smaller;
color: rgba(0%, 0%, 0%, 0.9);
<b>@rule</b> strong {
font.weight: 300;
}
}
</pre>
It would be also nice to fix once and for all syntax for interpolation
of expressions (in scripting language, JavaScript by default), preferably
square brakets. Assuming the scripting language is CSS-units-aware, we
can dispense with <code>calc(·)</code>, <code>var(·)</code> and <code>attr(·)</code> in
favour of stuff like <code>[1em + 5px + additional-width]</code>.<br/>
<br/>
You probably know about how <code><li>'s</code> are styled in classical CSS2+:
<pre>
li:before {
content: "•";
padding-right: 8px;
}
</pre>
But you cannot really put HTML content there, and interpolation works
ugly. We propose the following syntax:
<pre>
<b>@rule</b> li:before {
<code><span>•<sub>[counter]</sub></span></code>
padding.right: 8px;
}
</pre>
So, just put HTML template in the beginning of the body of the rule.
To improve consistency yet more let's deprecate the <code>display</code>
property in favour of such templates involving layout tags
(<code><none/></code>, <code><tabstop/></code>,
<code><run-in/></code>, <code><inline/></code>,
<code><block/></code>, <code><inline-block/></code>,
<code><flex/></code>, <code><inline-flex/></code>,
<code><float/></code>, <code><overlay/></code>,
and all the grid stuff):
<pre>
<b>@rule</b> div.remark {
<code><run-in>[content]</run-in></code>
font.size: smaller;
}
</pre>
<br/>
We also require fixing display mode for proper HTML elements (i.e.
the ones with specified semantic meaning, not fixed presentation)
before non-inheritable properties (the ones like <code>width</code>)
can be set on them. We want to forbid setting <code>width</code>
of a <code><div></code> in by a rule which is not aware that
this particular <code><div></code> has display mode allowing
this property.<br/>
<br/>
<h2>Custom Element Definitions</h2>
(This section is heavily influenced by ideas from <a href='http://riotjs.com/'>Riot.js</a>.)<br/>
<br/>
The last and most interesting thing we want to add to CSS is the
element definition rule. Take a look at the following example, which is port of an example from <a href='http://riotjs.com/'>Riot.js</a>:
<pre><b>@element</b> Timer(start : Nat) <b>@extends</b> VisualElement(alt: [content]) {
<code><block class=timer-box>
<p>Seconds Elapsed: [time]</p>
</block></code>
<b>@rule</b> block.timer-box {
max-width: 300px;
height: 100px;
line-height: 100px;
margin: 0 auto;
border: 1px solid rgba(64, 139, 194, .5);
border.radius: 6px;
text-align: center;
color: rgba(64, 139, 194, 1);
background: white;
}
<b>@rule</b> p {
margin: 0;
}
this.time = attr.start
tick() {
++this.time;
}
var timer = setInterval(this.tick, 1000ms)
this.on('unmount', function() {
clearInterval(timer)
})
}
</pre>
The example defines a new visual element <code><Timer/></code>. The definition
makes use of a combination of HTML (including presentational tags for we're on a visual
media), CSS and JavaScript and shows they compose well.
The difference from original Riot.js definition (which we consider
to be one of the tidiest frameworks on the market) is that we
do not use <style> tag for enclosing styles, since
<code>@rule</code> prefix facilitates intermixability with
JavaScript (and most other applicable programming languages),
and usage of inheritance. Besides that, in contrast to Riot.js (as of version 3.4.2) it is possible to use expressions
in styles and to make the element stylable by external stylesheets (by declaring parameters annotated by <code><b>@option</b></code> and using them accordingly).<br/>
<br/>
By inheriting from <code>LayoutTag</code> or <code>FormattingObject</code> we would
declare our tag is not intended to be used in top level HTML
document, but only on visual medias. By inheriting from
<code>VisualElement</code> we declare that our element has genuine semantical
meaning, yet only on visual medias (like images, banners, etc.), on all the
other medias alt. text can be used instead, our definition
forwards the (optional) content of the element as alt. text,
i.e. if the user considers alternative text desirable, they
can use <nobr><code><Timer></code>alt. text<code></Timer></code></nobr>
instead of <code><Timer/></code>.
<h2>Stylesheets as <!DOCTYPE> Extensions</h2>
Since our reworked stylesheets define new elements (and also defines their attributes,
specifies their type and optionally their default value or that they are required), it
should be considered a part of the DTD, so we propose the following type declaration
for <a href='./'>HTML(reworked)</a> documents utilizing reworked stylesheets:
<pre><code><!<b>DOCTYPE</b> html @<b>with</b> /path/to/stylesheet></code></pre>
or, for embedded css:
<pre><code><!<b>DOCTYPE</b> html @<b>with</b> [
@import <a href='css-reworked'>./common.css</a> screen, projection;
@import <a href='css-reworked'>./landscape.css</a> screen and (orientation:landscape);
... // embedded stylesheet
]></code></pre>
</html>