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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>clean-css: fast and efficient CSS optimizer</title>
<link rel="stylesheet" type="text/css" href="css/vendor/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/home.css"/>
<script src="js/optimizer.js"></script>
<script src="js/drag-drop.js"></script>
<script src="js/settings.js"></script>
</head>
<body>
<noscript>
Since clean-css is a JavaScript tool it requires JavaScript in your browser to be turned on.
</noscript>
<h1 class="logo">
<a class="logo__link" href="//github.com/jakubpawlowicz/clean-css" title="Go to clean-css project page">Go to clean-css project page</a>
</h1>
<article class="content">
<section class="drag-target">
<ol class="dropped-files" title="Drop your files here to optimize them"></ol>
<form class="settings settings--collapsed js-settings">
<fieldset class="settings__group">
<select class="settings__option settings__option--version" name="version">
<option value="v4.2.2" selected>4.2.2 (latest)</option>
</select>
</fieldset>
<fieldset class="settings__group settings__group--advanced">
<div class="settings__group__wrapper">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_0" name="level[0]" checked disabled />
<label class="settings__label" for="level_0">level 0 optimizations</label>
</div>
<div class="settings__group__wrapper">
<input class="settings__option settings__option--checkbox js-settings-level-1 js-settings-option" type="checkbox" id="level_1" name="level[1]" checked />
<label class="settings__label" for="level_1">level 1 optimizations</label>
</div>
<ul class="fine-grained-options js-settings-level-1-options" data-visibility-class="fine-grained-options--hidden">
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_1_cleanup_charsets" name="level[1][cleanupCharsets]" checked />
<label class="settings__label" for="level_1_cleanup_charsets">cleanup @charset at-rules</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_1_normalize_urls" name="level[1][normalizeUrls]" checked />
<label class="settings__label" for="level_1_normalize_urls">normalize URLs</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_1_optimize_background" name="level[1][optimizeBackground]" checked />
<label class="settings__label" for="level_1_optimize_background">optimize <em>background</em> properties</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_1_optimize_border_radius" name="level[1][optimizeBorderRadius]" checked />
<label class="settings__label" for="level_1_optimize_border_radius">optimize <em>border-radius</em> properties</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_1_optimize_filter" name="level[1][optimizeFilter]" checked />
<label class="settings__label" for="level_1_optimize_filter">optimize <em>filter</em> / <em>-ms-filter</em> properties</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_1_optimize_font_weight" name="level[1][optimizeFontWeight]" checked />
<label class="settings__label" for="level_1_optimize_font_weight">optimize <em>font-weight</em> properties</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_1_optimize_outline" name="level[1][optimizeOutline]" checked />
<label class="settings__label" for="level_1_optimize_outline">optimize <em>outline</em> properties</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_1_remove_empty" name="level[1][removeEmpty]" checked />
<label class="settings__label" for="level_1_remove_empty">remove empty rules and nested blocks (after level 1 optimizations)</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_1_remove_negative_paddings" name="level[1][removeNegativePaddings]" checked />
<label class="settings__label" for="level_1_remove_negative_paddings">remove negative <em>padding</em>s</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_1_remove_quotes" name="level[1][removeQuotes]" checked />
<label class="settings__label" for="level_1_remove_quotes">remove quotes</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_1_remove_whitespace" name="level[1][removeWhitespace]" checked />
<label class="settings__label" for="level_1_remove_whitespace">remove whitespace</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_1_replace_multiple_zeros" name="level[1][replaceMultipleZeros]" checked />
<label class="settings__label" for="level_1_replace_multiple_zeros">replace multiple zeros</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_1_replace_time_units" name="level[1][replaceTimeUnits]" checked />
<label class="settings__label" for="level_1_replace_time_units">replace time units</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_1_replace_zero_units" name="level[1][replaceZeroUnits]" checked />
<label class="settings__label" for="level_1_replace_zero_units">replace <em>0</em> units</label>
</li>
<li class="fine-grained-options__option">
<label class="settings__label" for="level_1_rounding_precision">unit rounding precision</label>
<input class="settings__option js-settings-option" type="text" id="level_1_rounding_precision" name="level[1][roundingPrecision]" value="" placeholder="e.g 5 or *=off,px=4" />
</li>
<li class="fine-grained-options__option">
<select class="settings__option settings__option--select js-settings-option" id="level_1_selectors_sorting_method" name="level[1][selectorsSortingMethod]">
<option value="natural">Selectors sorting method: natural</option>
<option value="none">Selectors sorting method: none</option>
<option value="standard" selected>Selectors sorting method: standard</option>
</select>
</li>
<li class="fine-grained-options__option">
<select class="settings__option settings__option--select js-settings-option" id="level_1_special_comments" name="level[1][specialComments]">
<option value="all" selected>Special comments: keep all</option>
<option value="1">Special comments: remove all but the first one</option>
<option value="0">Special comments: remove all</option>
</select>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_1_tidy_at_rules" name="level[1][tidyAtRules]" checked />
<label class="settings__label" for="level_1_tidy_at_rules">tidy at-rules</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_1_tidy_block_scopes" name="level[1][tidyBlockScopes]" checked />
<label class="settings__label" for="level_1_tidy_block_scopes">tidy block scopes</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_1_tidy_selectors" name="level[1][tidySelectors]" checked />
<label class="settings__label" for="level_1_tidy_selectors">tidy selectors</label>
</li>
</ul>
<div class="settings__group__wrapper">
<input class="settings__option settings__option--checkbox js-settings-option js-settings-level-2" type="checkbox" id="level_2" name="level[2]" />
<label class="settings__label" for="level_2">level 2 optimizations</label>
</div>
<ul class="fine-grained-options fine-grained-options--hidden js-settings-level-2-options" data-visibility-class="fine-grained-options--hidden">
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_2_merge_adjacent_rules" name="level[2][mergeAdjacentRules]" checked />
<label class="settings__label" for="level_2_merge_adjacent_rules">merge adjacent rules</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_2_merge_into_shorthands" name="level[2][mergeIntoShorthands]" checked />
<label class="settings__label" for="level_2_merge_into_shorthands">merge components into shorthand properties</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_2_merge_media" name="level[2][mergeMedia]" checked />
<label class="settings__label" for="level_2_merge_media">merge <em>@media</em> nested blocks</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_2_merge_non_adjacent_rules" name="level[2][mergeNonAdjacentRules]" checked />
<label class="settings__label" for="level_2_merge_non_adjacent_rules">merge non-adjacent rules</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_2_merge_semantically" name="level[2][mergeSemantically]" />
<label class="settings__label" for="level_2_merge_semantically">merge semantically</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_2_override_properties" name="level[2][overrideProperties]" checked />
<label class="settings__label" for="level_2_override_properties">override properties based on understandability</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_2_reduce_non_adjacent_rules" name="level[2][reduceNonAdjacentRules]" checked />
<label class="settings__label" for="level_2_reduce_non_adjacent_rules">reduce non-adjacent rules</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_2_remove_duplicate_font_rules" name="level[2][removeDuplicateFontRules]" checked />
<label class="settings__label" for="level_2_remove_duplicate_font_rules">remove duplicate <em>@font-face</em> rules</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_2_remove_duplicate_media_blocks" name="level[2][removeDuplicateMediaBlocks]" checked />
<label class="settings__label" for="level_2_remove_duplicate_media_blocks">remove duplicate <em>@media</em> nested blocks</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_2_remove_duplicate_rules" name="level[2][removeDuplicateRules]" checked />
<label class="settings__label" for="level_2_remove_duplicate_rules">remove duplicate rules</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_2_remove_empty" name="level[2][removeEmpty]" checked />
<label class="settings__label" for="level_2_remove_empty">remove empty rules and nested blocks (after level 2 optimizations)</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_2_remove_unused_at_rules" name="level[2][removeUnusedAtRules]" />
<label class="settings__label" for="level_2_remove_unused_at_rules">remove unused <em>@counter-style</em>, <em>@font-face</em>, <em>@keyframes</em>, and <em>@namespace</em> at rules</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="level_2_restructure_rules" name="level[2][restructureRules]" />
<label class="settings__label" for="level_2_restructure_rules">restructure rules</label>
</li>
<li class="fine-grained-options__option">
<label class="settings__label" for="level_2_skip_properties">skip optimizing properties</label>
<input class="settings__option js-settings-option" type="text" id="level_2_skip_properties" name="level[2][skipProperties]" value="" placeholder="e.g background,font,margin" />
</li>
</ul>
</fieldset>
<fieldset class="settings__group">
<div class="settings__group__wrapper">
<select class="settings__option settings__option--select js-settings-compatibility js-settings-option" id="compatibility" name="compatibility">
<option value="" selected>Modern browsers compatibility (Internet Explorer 10+)</option>
<option value="ie9">Modern browsers & Internet Explorer 9+ compatibility</option>
<option value="ie8">Modern browsers & Internet Explorer 8+ compatibility</option>
<option value="ie7">Modern browsers & Internet Explorer 7+ compatibility</option>
</select>
</div>
<div class="settings__group__wrapper">
<input class="settings__option settings__option--checkbox js-settings-format js-settings-option" type="checkbox" id="format" name="format" />
<label class="settings__label" for="format">output formatting</label>
</div>
<ul class="fine-grained-options fine-grained-options--hidden js-settings-format-options" data-visibility-class="fine-grained-options--hidden">
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="format_breaks_after_at_rule" name="format_breaks[afterAtRule]" checked />
<label class="settings__label" for="format_breaks_after_at_rule">insert line break after at-rules</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="format_breaks_after_block_begins" name="format_breaks[afterBlockBegins]" checked />
<label class="settings__label" for="format_breaks_after_block_begins">insert line break after block begins</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="format_breaks_after_block_ends" name="format_breaks[afterBlockEnds]" checked />
<label class="settings__label" for="format_breaks_after_block_ends">insert line break after block ends</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="format_breaks_after_comment" name="format_breaks[afterComment]" checked />
<label class="settings__label" for="format_breaks_after_comment">insert line break after comments</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="format_breaks_after_property" name="format_breaks[afterProperty]" checked />
<label class="settings__label" for="format_breaks_after_property">insert line break after properties</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="format_breaks_after_rule_begins" name="format_breaks[afterRuleBegins]" checked />
<label class="settings__label" for="format_breaks_after_rule_begins">insert line break after rule begins</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="format_breaks_after_rule_ends" name="format_breaks[afterRuleEnds]" checked />
<label class="settings__label" for="format_breaks_after_rule_ends">insert line break after rule ends</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="format_breaks_before_block_ends" name="format_breaks[beforeBlockEnds]" checked />
<label class="settings__label" for="format_breaks_before_block_ends">insert line break before block ends</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="format_breaks_between_selectors" name="format_breaks[betweenSelectors]" checked />
<label class="settings__label" for="format_breaks_between_selectors">insert line break between selectors</label>
</li>
<li class="fine-grained-options__option">
<label class="settings__label" for="format_indent_by">indent with</label>
<input class="settings__option settings__option--number js-settings-option" type="number" min="0" max="16" id="format_indent_by" name="format[indentBy]" value="2" />
<select class="settings__option settings__option--inline-select js-settings-option" id="format_indent_with" name="format[indentWith]">
<option value="space" selected>space(s)</option>
<option value="tab">tab(s)</option>
</select>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="format_spaces_around_selector_relation" name="format_spaces[aroundSelectorRelation]" checked />
<label class="settings__label" for="format_spaces_around_selector_relation">insert space between selector relation</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="format_spaces_before_block_begins" name="format_spaces[beforeBlockBegins]" checked />
<label class="settings__label" for="format_spaces_before_block_begins">insert space before block begins</label>
</li>
<li class="fine-grained-options__option">
<input class="settings__option settings__option--checkbox js-settings-option" type="checkbox" id="format_spaces_before_value" name="format_spaces[beforeValue]" checked />
<label class="settings__label" for="format_spaces_before_value">insert space before property value</label>
</li>
<li class="fine-grained-options__option">
<label class="settings__label" for="format_wrap_at">wrap lines when longer than</label>
<input class="settings__option settings__option--number js-settings-option" type="number" min="0" id="format_wrap_at" name="format[wrapAt]" value="" />
<label class="settings__label" for="format_wrap_at">characters</label>
</li>
</ul>
</fieldset>
<fieldset class="settings__group">
<input class="settings__option settings__option--reset js-settings-reset" type="reset" value="Reset settings to defaults" />
</fieldset>
</form>
</section>
<p class="legend">
CSS optimizing happens directly in your browser using a browser-compatible build of clean-css. If you miss any functionality, you are more than welcome to <a href="//github.com/jakubpawlowicz/clean-css/tree/master/docs">add it</a>!
</p>
</article>
<footer class="footer">
Hosted with <span class="footer__heart">❤️</span> on <a href="//pages.github.com/">GitHub Pages.</a>
</footer>
<textarea class="clipboard-copy"></textarea>
<template class="dropped-file-template">
<li class="dropped-files__file">
<span class="dropped-files__file__name"></span>
<span class="dropped-files__file__summary"></span>
<a class="dropped-files__file__action dropped-files__file__action--save" href="#" download="test.css">save</a>
<a class="dropped-files__file__action dropped-files__file__action--copy" href="#" data-success-label="done!" data-error-label="oops! see console for details" data-original-label="copy to clipboard">copy to clipboard</a>
</li>
</template>
<script>
if (location.host == 'jakubpawlowicz.github.io') {
(function() {
window.clicky_site_ids = [126539]
var s = document.createElement('script')
s.async = true
s.src = '//static.getclicky.com/js'
document.head.appendChild(s)
})()
}
</script>
<noscript><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/126539ns.gif" /></noscript>
</body>
</html>
|
