CSS Reprocessor Feature Comparison
 Share
 
View only
 
 
ABCDEFGHIJKLMNOPQRSTUVWXYZAAABACADAEAFAGAHAIAJAK
1
PluginsSyntax TypeStyle Location
Internal Stylesheets
External Stylesheets
Style Scoping Level
element queries
container queries
restricted to self & children
forced containment
multiple queries per feature per element
widthheight# of chars
# of words
# of lines
# of children
scroll
aspect-ratio
orientation
global JS interpolation
scoped JS interpolation
ancestor selector
parent selector
previous selector
xpath selector
Browser Support
SLOCFilesizePlugins
2
EQCSSCSS (custom syntax)
CSS: <style>, <link type=text/eqcss href>, <script type=text/eqcss>, JS: EQCSS.register()
yy1,2,3yynnyyyynyyyyyyyyyynIE8+68217841EQCSS
3
CSSplus/AspectyCSS (variables)CSS: --aspect-ratio: ratio;yy3ynynynnnnnnnynnnnnnnEdge15932674CSSplus/Aspecty
4
CSSplus/CursoryCSS (variables)CSS: var(--cursorX)yy3ynnnyyynnnnnnnnnnnnnEdge15571559CSSplus/Cursory
5
CSSplus/Scrollery
CSS (variables), HTML (custom attributes)
CSS: var(--x-scrollTop), HTML: data-scrollery=""
yy3ynnnyyynnnnynnnnnnnnEdge15541492CSSplus/Scrollery
6
CSSplus/SelectoryCSS (attribute selector)CSS: [test="true"]yy2yyynyyyynnyyyyyyyyynEdge892605CSSplus/Selectory
7
CSSplus/Varsity
CSS (variables), HTML (custom attributes)
CSS: var(--x-offsetWidth), HTML: data-varsity=""
yy3ynnnyyyynnynnnnnnnnnEdge15521555CSSplus/Varsity
8
CSSplus/XpathyCSS (attribute selector)CSS: [xpath="//*"]yy2yynnynnynnynnnnnyyyyEdge982514CSSplus/Xpathy
9
reproCSSCSS (with JS inside ${})HTML: <style process="" selector="">yn1,2,3yynnyyyynnyyyyynyyynIE10811836reproCSS
10
VariusCSS (variables)CSS: var(--offsetWidth)yy3ynynyyyynnyynnnnnnnn21987Varius
11
SlinkyHTML (attribute values)
HTML: <link data-selector data-test data-event>
ny1yynnyyyynnyyyynnnnnnIE9+19687Slinky
12
PrinCSS / JS-in-CSSJIC stylesheet (inline in JS)JS: `template string`yn1,2,3yynnyyyynnyyyyynyyyn561165PrinCSS
13
SkopeinCSS (with $this for scoped element)
HTML: <link data-selector data-test data-event>
ny1,2yynnyyyynnyyyynnnnnn531364Skopein
14
interpolate ${} in CSSJIC stylesheet (inline or external)HTML: <style>, <link rel=stylesheet href>yy1,2,3yynnyyyynnyyyyynyyyn421012interpolate ${} in CSS
15
JICJIC stylesheet (inline or external)
HTML: <link type=text/jic> or <script type=text/jic>
yy3yynnyyyynnyyyyynnnnn1112388JIC
16
QueriousHTML (custom attributes)CSSyy2yyynnyyyynynnnnnnnnnIE10411076Querious
17
QSSCSS (custom syntax)
CSS: <style type=text/qss>, <link type=text/qss href>, <script type=text/qss>
yy2ynynyyyynnyynnnnnnnnQSS
18
RobServJSONJS: {selector: '', test: function, stylesheet: ''}yy1yynnnyynnnnnyynnnnnnRobServ
19
QompileJIC stylesheet (external file)JIC stylesheet (external file)ny1yynnyyyyynnnnnyyynQompile
20
21
http://moss.stanford.edu/results/639013173/
up to 88% similar
22
MixinsSyntax TypeStyle Location
Internal Stylesheets
External Stylesheets
Style Scoping Level
element queries
container queries
restricted to self & children
forced containment
multiple queries per feature per element
widthheight# of chars
# of words
# of lines
# of children
scroll
aspect-ratio
orientation
global JS interpolation
scoped JS interpolation
ancestor selector
parent selector
previous selector
xpath selector
Browser Support
Mixins
23
reproCSS/ancestor-selector
JS (function with arguments)JS: ancestor(selector, ancestor, rule)yy2nnnnynnnnnnnnnnnyynn18441
reproCSS/ancestor-selector
24
reproCSS/aspect-ratioJS (function with arguments)JS: aspect(selector, ratio)yy3ynynynnnnnnnynnnnnnnIE1015408reproCSS/aspect-ratio
25
reproCSS/auto-expandJS (function with arguments)JS: autoExpand(selector, direction)yy3ynynynnnnnnynnnnnnnnIE1014397reproCSS/auto-expand
26
reproCSS/closest-selectorJS (function with arguments)JS: closest(selector, ancestor, rule)yy2nnnnynnnnnnnnnnnyynnEdge15393reproCSS/closest-selector
27
reproCSS/container-queries
JS (function with arguments)
JS: container(selector, test, childSelector, rule)
yy2yyynyyyynnyyyyyynnnnIE1021551
reproCSS/container-queries
28
reproCSS/elder-selectorJS (function with arguments)JS: elder(selector, rule)yy2nnnnynnnnnnnnnnnnnyn23576reproCSS/elder-selector
29
reproCSS/parent-selectorJS (function with arguments)JS: parent(selector, rule)yy2nnnnynnnnnnnnnnnnynnEdge15348reproCSS/parent-selector
30
reproCSS/prev-selectorJS (function with arguments)JS: prev(selector, rule)yy2nnnnynnnnnnnnnnnnnynEdge15352reproCSS/prev-selector
31
reproCSS/scoped-evalJS (function with arguments)JS: scoped(selector, rule)yy3yyynyyyynnyyyyyyyyynEdge19480reproCSS/scoped-eval
32
reproCSS/xpath-selectorJS (function with arguments)JS: xpath(selector, rule)yy2yyynynnynnynnnnnyyyyEdge25497reproCSS/xpath-selector
33
respecJS (function with arguments)JS: respec(selector, specificity, rule)yy2nnynynnnnnnnnnnnnnnn18430respec
34
Container Queries MixinJS (function with arguments, plus $this)JS: container(selector, test, stylesheet)yy1,2yyynyyyynnyyyyyynnnn18436Container Queries Mixin
35
Cascading JS VariablesJS (function with arguments)JS: cascadingVariables(selector, rule)yy3nnynynnnnnnnnnyynnnn28853Cascading JS Variables
36
Element Based Units mixin
JS (function with arguments)JS: eunit(selector, stylesheet)yy3ynynyyynnnnnnnnynnnn18.76923077474
37
http://moss.stanford.edu/results/523570636/
up to 63% similar
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
Loading...
 
 
 
Sheet1
Sheet2
 
 
Main menu