forked from tomhodgins/qss
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
191 lines (149 loc) · 6.44 KB
/
index.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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>QSS - A Simple Query Syntax</title>
<style>
* {
box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-kerning: auto;
}
html {
font-size: 12pt;
line-height: 1.4;
font-weight: 400;
font-family: sans-serif;
}
body {
padding: 1em;
margin: 0 auto;
max-width: 800px;
}
img {
display: block;
width: auto;
max-width: 100%;
}
img[src*=svg] {
display: block;
max-width: 300px;
margin: 4em auto 2em;
}
code,
pre,
blockquote {
padding: .1em .3em;
background: rgba(0,0,0,.1);
}
code,
pre {
font-family: monospace;
}
pre {
margin: 2em 0;
padding: 1em;
white-space: pre-wrap;
}
h1, h2, h3, h4, h5, h6 {
margin: 1em 0 .5em 0;
line-height: 1.2;
letter-spacing: -.02em;
}
footer {
opacity: .4;
padding: 2em 0;
text-align: center;
transition: opacity .2s ease-in-out;
}
footer:hover {
opacity: 1;
}
p,
li {
font-size: 14pt;
}
li {
margin: 1em 0;
}
@media (min-width: 600px) {
h1 { font-size: 300%; }
h2 { font-size: 200%; }
h3 { font-size: 160%; }
h4 { font-size: 140%; }
h5 { font-size: 120%; }
h6 { font-size: 110%; }
}
</style>
<h1>QSS</h1>
<p><strong>A Simple Query Syntax for CSS Element Queries</strong></p>
<img src=https://i.imgur.com/rntpa7l.png>
<p>The goal of QSS is to define a simple syntax for specifying element queries by adding a new ending part between a CSS selector list and the block of rules that help define the breakpoints when those rules are to apply.</p>
<p>Normally in CSS you have something like this:</p>
<pre>selectorList { block }</pre>
<p>We are going to add a new part for our query between the selector list and the block where we will store instructions for when the rule should apply.</p>
<pre>selectorList <query> { block }</pre>
<p>Because this exists as a new part between the selector list and the block of rules, if you have a list of selectors like <code>h1, h2, h3, h4, h5, h6 {}</code> you only need to add the query once after the selector list is complete, like <code>h1, h2, h3, h4, h5, h6 <query> {}</code> rather than <code>h1 <query>, h2 <query>, h3 <query>, …</code>.</p>
<p>This document describes two different formats for expressing element queries for individual CSS rules, one using an <code>if</code>-based structure, and another that uses the <code>@</code> symbol to declare when it should apply.</p>
<h2>Phrase Formats</h2>
<h3>1) if <condition> <comparator> <breakpoint></h3>
<ul>
<li>operator: <code>if</code>
<li>condition: <code>width</code> | <code>height</code> | <code>characters</code> | <code>children</code> | <code>xscroll</code> | <code>yscroll</code>
<li>comparator: <code><</code> | <code>below</code> | <code>under</code> | <code><=</code> | <code>max</code> | <code>==</code> | <code>equals</code> | <code>>=</code> | <code>min</code> | <code>></code> | <code>above</code> | <code>over</code>
<li>breakpoint: <number>
</ul>
<h4>Examples</h4>
<pre>div if width above 500 {}</pre>
<pre>input if characters under 1 {}</pre>
<h3>2) @ <comparator> <breakpoint> <condition></h3>
<ul>
<li>operator: <code>@</code>
<li>comparator: <code><</code> | <code>below</code> | <code>under</code> | <code><=</code> | <code>max</code> | <code>==</code> | <code>equals</code> | <code>>=</code> | <code>min</code> | <code>></code> | <code>above</code> | <code>over</code>
<li>breakpoint: <number>
<li>condition: <code>width</code> | <code>height</code> | <code>characters</code> | <code>children</code> | <code>xscroll</code> | <code>yscroll</code>
</ul>
<h4>Examples</h4>
<pre>div @ above 500 width {}</pre>
<pre>input @ under 1 characters {}</pre>
<p>In both phrase formats the whitespace between tokens is optional, this means that if you prefer to think about these as <code>@above</code> or <code>@min</code> you can express them that way. The following should all equivalent:</p>
<pre>div if width >= 500 {}
div if width >=500 {}
div if width min 500 {}
div @min 500 width {}
div@min500width{}
div @ >=500 width {}</pre>
<img src=https://i.imgur.com/CO2I9Rw.gif>
<h2>How it works</h2>
<p>The queries parsed by QSS would be split into the following pieces:</p>
<ul>
<li>selector list
<li>rule block (or stylesheet?)
<li>comparator
<li>condition
<li>breakpoint
</ul>
<p>And these could also be used to construct Element Queries for other syntaxes like:</p>
<ul>
<li><a href=https://github.com/eqcss/eqcss>EQCSS</a>
<li><a href=https://github.com/tomhodgins/cssplus#selectory-a-selector-resolver>Selectory</a>
<li>and using functions like the <a href=https://gist.github.com/tomhodgins/fc42b334beaafc75a271b1ef7c8e33ee>container query mixin</a>
</ul>
<p>Essentially QSS acts as a syntax to abstract away writing these: <a href=https://codepen.io/tomhodgins/post/useful-tests-for-js-powered-styling>Useful Tests for JS-powered Styling</a></p>
<h2>Plugin Usage</h2>
<p>This repository contains a working proof of concept of a plugin to parse and read QSS syntax. In order to use this plugin you just need to include QSS on the page where you want it to display:</p>
<pre><script src=qss.js></script></pre>
<p>Then you're able to add queries written in QSS syntax to your site using one of the following methods: a <code><style></code> tag, a <code><link></code> tag with <code>type=text/qss</code> set, or a <code><script></code> tag with a <code>type</code> of <code>text/qss</code> either inline or linked externally using a <code>src=""</code> attribute:</p>
<pre><style type="text/qss"></style></pre>
<pre><link type="text/qss" href=stylesheet.qss rel=stylesheet></pre>
<pre><script type="text/qss"></script></pre>
<pre><script type="text/qss" src=stylesheet.qss></script></pre>
<h3>Links</h3>
<ul>
<li><strong>Website:</strong> <a href=https://github.com/tomhodgins/qss>github.com/tomhodgins/qss</a>
<li><strong>Element Query Demo:</strong> <a href=http://tomhodgins.github.io/qss/tests/element-queries.html>/tests/element-queries.html</a>
<li><strong>Test:</strong> <a href=tests/index.html>tests/</a>
<li><a href=https://codepen.io/tomhodgins/pen/zPzpVR>QSS Playground</a>
</ul>
<footer>Made with ♥ by <a href=http://twitter.com/innovati>@innovati</a></footer>