• Stars
    star
    174
  • Rank 211,645 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 11 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A bookmarklet for prettifying your CSS

cssprettifier-bookmarklet

A convenient bookmarklet for unminifying and prettifying CSS in the browser.

Also available as a UserScript by Sindre Sorhus or an existing DevTools extension by Gildas Lormeau.

Tested in Chrome stable, canary channels.

Uses

Usage

View Source -> run the bookmarklet or alternatively use it as a DevTools snippet.

Installation

Get it now. Copy/paste:

javascript:(function(){(function(){function a(a,b){function s(a){return" "===a||"\n"===a||"   "===a||"\r"===a||"\f"===a}function t(a){return"'"===a||'"'===a}function u(a){return h>="a"&&"z">=h||h>="A"&&"Z">=h||h>="0"&&"9">=h||"-_*.:#".indexOf(a)>=0}function v(){var a;for(a=m;a>0;a-=1)g+=c.indent}function w(){g=r(g),p?g+=" {":(g+="\n",v(),g+="{"),"\n"!==i&&(g+="\n"),m+=1}function x(){var a;m-=1,g=r(g),q&&(a=g.charAt(g.length-1),";"!==a&&"{"!==a&&(g+=";")),g+="\n",v(),g+="}",f.push(g),g=""}var c,f,h,i,j,k,l,m,n,o,r,d=0,e=a.length,g="",p=!0,q=!1;for(c=arguments.length>1?b:{},c.indent===void 0&&(c.indent="    "),"string"==typeof c.openbrace&&(p="end-of-line"===c.openbrace),"boolean"==typeof c.autosemicolon&&(q=c.autosemicolon),r=String.prototype.trimRight?function(a){return a.trimRight()}:function(a){return a.replace(/\s+$/,"")},l={Start:0,AtRule:1,Block:2,Selector:3,Ruleset:4,Property:5,Separator:6,Expression:7,URL:8},m=0,k=l.Start,o=!1,f=[],a=a.replace(/\r\n/g,"\n");e>d;)if(h=a.charAt(d),i=a.charAt(d+1),d+=1,t(n))g+=h,h===n&&(n=null),"\\"===h&&i===n&&(g+=i,d+=1);else if(t(h))g+=h,n=h;else if(o)g+=h,"*"===h&&"/"===i&&(o=!1,g+=i,d+=1);else if("/"!==h||"*"!==i){if(k===l.Start){if(0===f.length&&s(h)&&0===g.length)continue;if(" ">=h||h.charCodeAt(0)>=128){k=l.Start,g+=h;continue}if(u(h)||"["===h||"@"===h){if(j=r(g),0===j.length)f.length>0&&(g="\n\n");else if("}"===j.charAt(j.length-1)||";"===j.charAt(j.length-1))g=j+"\n\n";else for(;;){if(i=g.charAt(g.length-1)," "!==i&&9!==i.charCodeAt(0))break;g=g.substr(0,g.length-1)}g+=h,k="@"===h?l.AtRule:l.Selector;continue}}if(k!==l.AtRule)if(k!==l.Block)if(k!==l.Selector)if(k!==l.Ruleset)if(k!==l.Property)if(k!==l.Separator)if(k!==l.Expression)k===l.URL&&")"===h&&g.charAt("\\"!==g.length-1)?(g+=h,k=l.Expression):g+=h;else{if("}"===h){x(),k=l.Start,m>0&&(k=l.Block);continue}if(";"===h){g=r(g),g+=";\n",k=l.Ruleset;continue}if(g+=h,"("===h&&"l"===g.charAt(g.length-2)&&"r"===g.charAt(g.length-3)&&"u"===g.charAt(g.length-4)){k=l.URL;continue}}else{if(!s(h)){g+=h,k=l.Expression;continue}t(i)&&(k=l.Expression)}else{if(":"===h){g=r(g),g+=": ",k=l.Expression,s(i)&&(k=l.Separator);continue}if("}"===h){x(),k=l.Start,m>0&&(k=l.Block);continue}g+=h}else{if("}"===h){x(),k=l.Start,m>0&&(k=l.Block);continue}if("\n"===h){g=r(g),g+="\n";continue}if(!s(h)){g=r(g),g+="\n",v(),g+=h,k=l.Property;continue}g+=h}else{if("{"===h){w(),k=l.Ruleset;continue}if("}"===h){x(),k=l.Start;continue}g+=h}else{if(u(h)){if(j=r(g),0===j.length)f.length>0&&(g="\n\n");else if("}"===j.charAt(j.length-1))g=j+"\n\n";else for(;;){if(i=g.charAt(g.length-1)," "!==i&&9!==i.charCodeAt(0))break;g=g.substr(0,g.length-1)}v(),g+=h,k=l.Selector;continue}if("}"===h){x(),k=l.Start;continue}g+=h}else{if(";"===h){g+=h,k=l.Start;continue}if("{"===h){j=r(g),w(),k="@font-face"===j?l.Ruleset:l.Block;continue}g+=h}}else o=!0,g+=h,g+=i,d+=1;return g=f.join("")+g}"undefined"!=typeof exports?module.exports=exports=a:"object"==typeof window&&(window.cssbeautify=a)})();(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case "Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case "Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\u00a0/g," ");var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data));l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r){return n.stringify(t.tokenize(e,r))},tokenize:function(e,n){var r=t.Token,i=[e],s=n.rest;if(s){for(var o in s)n[o]=s[o];delete n.rest}e:for(var o in n){if(!n.hasOwnProperty(o)||!n[o])continue;var u=n[o],a=u.inside,f=!!u.lookbehind||0;u=u.pattern||u;for(var l=0;l<i.length;l++){var c=i[l];if(i.length>e.length)break e;if(c instanceof r)continue;u.lastIndex=0;var h=u.exec(c);if(h){f&&(f=h[1].length);var p=h.index-1+f,h=h[0].slice(f),d=h.length,v=p+d,m=c.slice(0,p+1),g=c.slice(v+1),y=[l,1];m&&y.push(m);var b=new r(o,a?t.tokenize(h,a):h);y.push(b);g&&y.push(g);Array.prototype.splice.apply(i,y)}}}return i},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(n.stringify).join("");var r={type:e.type,content:n.stringify(e.content),tag:"span",classes:["token",e.type],attributes:{}};r.type=="comment"&&(r.attributes.spellcheck="true");t.hooks.run("wrap",r);var i="";for(var s in r.attributes)i+=s+'="'+(r.attributes[s]||"")+'"';return"<"+r.tag+' class="'+r.classes.join(" ")+'" '+i+">"+r.content+"</"+r.tag+">"};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:/@[\w-]+?(\s+[^;{]+)?(?=\s*{|\s*;)/gi,url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,property:/(\b|\B)[a-z-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(&lt;|<)style[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/style(>|&gt;)/ig,inside:{tag:{pattern:/(&lt;|<)style[\w\W]*?(>|&gt;)|(&lt;|<)\/style(>|&gt;)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});var prismStyle=document.createElement("style");var beautified=cssbeautify(document.body.textContent,{autosemicolon:true});var highlighted=Prism.highlight(beautified,Prism.languages.css);prismStyle.textContent='code[class*="language-"],pre[class*="language-"]{color:black;text-shadow:0 1px white;font-family:Consolas,Monaco,\'Andale Mono\',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}@media print{code[class*="language-"],pre[class*="language-"]{text-shadow:none;}}pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto;}:not(pre) > code[class*="language-"],pre[class*="language-"]{background:#f5f2f0;}:not(pre) > code[class*="language-"]{padding:.1em;border-radius:.3em;}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray;}.token.punctuation{color:#999;}.namespace{opacity:.7;}.token.property,.token.tag,.token.boolean,.token.number{color:#905;}.token.selector,.token.attr-name,.token.string{color:#690;}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#a67f59;background:hsla(0,0%,100%,.5);}.token.atrule,.token.attr-value,.token.keyword{color:#07a;}.token.regex,.token.important{color:#e90;}.token.important{font-weight:bold;}.token.entity{cursor:help;}';document.head.innerHTML="";document.head.appendChild(prismStyle);document.body.innerHTML="<code><pre>"+highlighted+"</pre></code>"})();

or use this.

Before

.callout{margin:15px 0;padding:10px;font-size:13px;color:#8d8d6d;background:#fffef1;border:1px solid #e5e2c8;border-radius:4px;}.callout strong{font-weight:bold;color:#000;}.callout h2{margin:0;font-size:16px;font-weight:300;}.callout p:last-child{margin-bottom:0;}

After

.callout {
    margin: 15px 0;
    padding: 10px;
    font-size: 13px;
    color: #8d8d6d;
    background: #fffef1;
    border: 1px solid #e5e2c8;
    border-radius: 4px;
}

.callout strong {
    font-weight: bold;
    color: #000;
}

.callout h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
}

.callout p:last-child {
    margin-bottom: 0;
}

License

MIT License (c) Addy Osmani and Sindre Sorhus

More Repositories

1

critical

Extract & Inline Critical-path CSS in HTML pages
JavaScript
9,919
star
2

backbone-fundamentals

πŸ“– A creative-commons book on Backbone.js for beginners and advanced users alike
JavaScript
9,294
star
3

essential-js-design-patterns

Repo for my 'Learning JavaScript Design Patterns' book
HTML
4,254
star
4

es6-tools

An aggregation of tooling for using ES6 today
3,954
star
5

basket.js

A script and resource loader for caching & loading files with localStorage
JavaScript
3,362
star
6

es6-equivalents-in-es5

WIP - ES6 Equivalents In ES5
2,533
star
7

puppeteer-webperf

Automating Web Performance testing with Puppeteer πŸŽͺ
JavaScript
1,775
star
8

a11y

Accessibility audit tooling for the web (beta)
JavaScript
1,705
star
9

tmi

TMI (Too Many Images) - discover your image weight on the web
JavaScript
1,639
star
10

timing.js

Navigation Timing API measurement helpers
JavaScript
1,500
star
11

critical-path-css-tools

Tools to prioritize above-the-fold (critical-path) CSS
1,141
star
12

getUserMedia.js

Shim for getUserMedia(). Uses native implementation for modern browsers and a Flash fallback for everyone else.
JavaScript
908
star
13

critical-path-css-demo

Above-the-fold CSS generation + inlining using Critical & Gulp
ApacheConf
532
star
14

backbone-boilerplates

Backbone.js stack boilerplates demonstrating integration with Express, Ruby, PHP, Grails and more.
JavaScript
488
star
15

webpack-lighthouse-plugin

A Webpack plugin for Lighthouse
JavaScript
290
star
16

sublime-fixmyjs

SublimeText package for FixMyJS
Python
250
star
17

learning-jsdp

Learning JavaScript Design Patterns: 2nd Edition - The Examples
HTML
240
star
18

predictive-fetching

Improve performance by predictively fetching pages a user is likely to need
238
star
19

storage-on-the-web

πŸ—ƒ Comparing storage options for the open web in 2016
225
star
20

visibly.js

A cross-browser Page Visibility API shim
JavaScript
221
star
21

sublime-build-systems

Sublime Text build systems
202
star
22

yeoman-examples

A repo of up to date examples using Yeoman
JavaScript
202
star
23

oust

Extract URLs to stylesheets, scripts, links, images or HTML imports from HTML
JavaScript
176
star
24

polymer-boilerplate

A Polymer.js template for building fast, robust web apps using Web Components
JavaScript
166
star
25

pubsubz

Another Pub/Sub implementation
JavaScript
164
star
26

backbone-mobile-search

A Backbone.js + jQuery Mobile sample app using AMD for separation of modules, Require.js for dependency management + template externalisation and Underscore for templating
JavaScript
154
star
27

prism-js

A Polymer element for syntax highlighting with Prism.js
HTML
149
star
28

starter

A simple, git-clone friendly starting point for personal projects.
JavaScript
145
star
29

memoize.js

A faster JavaScript memoizer
JavaScript
143
star
30

largescale-demo

Scalable JS architecture demo for #jqcon
JavaScript
138
star
31

psi-gulp-sample

Sample Gulp project using PSI
JavaScript
126
star
32

preact-hn

πŸ—ž Preact Hacker News
JavaScript
121
star
33

network-emulation-conditions

Network emulation / throttling conditions (2G, 3G, 4G, Wifi etc) ☎️
JavaScript
108
star
34

bubblesort

Bubble Sort implementation with O(n^2) complexity.
JavaScript
106
star
35

polymer-filters

Polymer filters for formatting values of expressions.
JavaScript
105
star
36

angular1-dribbble-pwa

Angular 1 Dribbble Progressive Web App demo
JavaScript
102
star
37

ember-progressive-webapp

Ember.js Zuperkulblog PWA (built with FastBoot and ember-cli)
JavaScript
97
star
38

memory-mysteries

V8 memory mysteries (sample app)
CSS
84
star
39

smaller-pictures-app

Smaller Pics Progressive Web App
JavaScript
82
star
40

x-instagram

[Deprecated] A Polymer element for querying the Instagram API (Note: not yet updated to Polymer 0.5.x)
JavaScript
76
star
41

x-imager

Responsive images using Imager.js and Polymer
74
star
42

backbonejs-gallery

A Backbone, Underscore and jQuery Templates based image gallery (early early beta)
JavaScript
72
star
43

todomvc-angular-4

Angular 4.x TodoMVC implementation
TypeScript
66
star
44

socketchat

SocketChat - a beginners chat app using SocketStream
CSS
63
star
45

github-watchers-button

An Embeddable GitHub 'Watchers' Button For External Pages
JavaScript
63
star
46

gulp-uncss-task

[Deprecated] Use gulp-uncss instead please.
JavaScript
63
star
47

yt-jukebox

A YouTube Jukebox element built with Polymer & Yeoman
JavaScript
61
star
48

critical-path-angular-demo

Above-the-fold CSS generation + inlining using Critical, Gulp & Angular
JavaScript
60
star
49

native-media-resizing

Draft proposal for browser-level media resizing
59
star
50

catclock

Polymer + Material Timer/Countdown/Countdown app (alpha)
JavaScript
56
star
51

recursive-binarysearch

Recursive Binary Search with O(log N) complexity
JavaScript
56
star
52

selectionsort

Selection sort with O(n^2) time complexity
JavaScript
56
star
53

polymer-grunt-example

Polymer + Grunt
JavaScript
56
star
54

microtemplatez

Another compact micro-templating solution
JavaScript
55
star
55

page-er

A Polymer element for paginating model data
CSS
53
star
56

google-slides

⚑ An offline-enabled Polymer slide-deck
HTML
53
star
57

flickly-wireframe

The jQuery mobile wireframe for Flickly
52
star
58

grunt-uncss-sass-example

An example of using grunt-uncss on a Sass project
JavaScript
52
star
59

sparkle-trail

<sparkle-trail> Polymer element - useful as a pre-loader
CSS
51
star
60

cssdiet

(WIP) - A DevTools extension for multi-page unused CSS auditing
JavaScript
46
star
61

backbone-koans-qunit

Backbone Koans for QUnit
JavaScript
44
star
62

github-client

Angular GitHub client for Firefox OS
JavaScript
44
star
63

a11y-webapp

A11y WebApp built with Polymer (WIP)
JavaScript
44
star
64

video-js

A Polymer element for Video.js
CSS
42
star
65

generator-webapp-uncss

Yeoman generator with grunt-uncss
JavaScript
42
star
66

lottie-animation-demo

Network-aware adaptive loading with Lottie Web
JavaScript
41
star
67

spine.bitly

(Demo app) A Spine.js Bit.ly client for shortening URLs and archiving references to these links offline.
JavaScript
39
star
68

backbone-aura

Backbone Aura
38
star
69

es2015-todomvc-chrome

ES2015 TodoMVC app that works without a transpiler
JavaScript
38
star
70

critical-css-weather-app

Critical-path CSS optimized weather app
JavaScript
37
star
71

polymer-blog

A tutorial app for generator-polymer
JavaScript
33
star
72

generator-boilerplate

A simple Yeoman generator using Git submodules to clone over a boilerplate hosted elsewhere on GitHub
JavaScript
31
star
73

npm-and-polymer-demo

Demo of Polymer + Paper elements working off npm3
HTML
31
star
74

jquery-roundrr

A jQuery plugin for plotting interactive content galleries in a circle form
JavaScript
30
star
75

polymer-localforage

A Polymer element for Mozilla's localForage (async storage via IndexedDB or WebSQL)
HTML
30
star
76

devtools-timeline-model-browser

Browser-friendly helper for parsing DevTools Timeline traces into structured profiling data models
JavaScript
29
star
77

mustache-for-chromeapps

A special build of mustache that works in Chrome Apps under CSP
JavaScript
28
star
78

addyosmani

GitHub README
27
star
79

tmdb-viewer-load-more

Accessibility-friendly version of TMDB Viewer (load-more)
JavaScript
25
star
80

active-route

Active view routing for Polymer extending <template>
CSS
25
star
81

webapp-scaffold

Polymer webapp scaffold element
CSS
25
star
82

typeahead-country

A Polymer element for autocompleting country names
24
star
83

react-interop

React + Polymer + X-Tag interop
JavaScript
24
star
84

vue-cli-todomvc

TodoMVC built using the Vue.js 2.0 CLI 🍰
JavaScript
22
star
85

polymer-browserify-vulcanize

Polymer + Browserify + Vulcanize
JavaScript
22
star
86

es6-starter

A minimal starting point for using ES6 today.
JavaScript
21
star
87

faster-video

A Polymer element for <video> with playback speed controls
JavaScript
21
star
88

js-shapelib

A minimalist JavaScript library for drawing objects around a Circle or Ellipse
JavaScript
19
star
89

element-query

Element queries with Polymer (experimental fork)
CSS
19
star
90

clientside-sample-buildfile

A Client-side ANT Build File Example
19
star
91

parsely

A small utility for parsing URLs of all types.
JavaScript
18
star
92

video-player

A themeable Polymer video element
JavaScript
16
star
93

page-router

Declarative URL routing for Polymer elements.
CSS
16
star
94

polymer-eventemitter

A Polymer event emitter element with support for wildcards, many and once.
JavaScript
15
star
95

lighthouse-reports

Quick module for getting Lighthouse reports in JSON form
JavaScript
15
star
96

generator-es6

An ES6.now project generator for Yeoman.
JavaScript
14
star
97

aura

A scalable, event-driven JavaScript architecture for developing widget-based applications. Works with Backbone.js and other frameworks.
14
star
98

jquery-googleviewer-plugin

A compact Google Viewer plugin
14
star
99

medium-backups

HTML
13
star
100

css3-transition-fallbacks

CSS3 Transition Fallback demos
13
star