Bookmarklet: Reload CSS files without reloading the page

Working on styling the contents of popup windows can be frustrating and laborious. But not if you can just reload the CSS…

This bookmarklet will reload all the associated stylesheets in the current document. It looks for all <link/> elements with rel="stylesheet", removes from the DOM and re-adds them appending a ?_=1234567890 (or &_ depending on the URL, where the numbers represent the JS timestamp) into the <head/>.

Hopefully this will help someone suffering similar pain to myself!

Reload CSS (Add the link to the left to your bookmarks to use!)

Please note: I haven’t tested this in IE, but surely it’ll work… Right?

Continue reading “Bookmarklet: Reload CSS files without reloading the page”

TextMate: Minify CSS Regular Expression

I love TextMate. It’s saved me so much time since I’ve started using, I think I’d find it impossible to use another editor. However, the format CSS compressed snippet, doesn’t quite do what I’d expect.

Luckily the Find and Replace regular expression engine is pretty cool!

I’ve got this small (!) regular expression that should minify your CSS, by putting:

;?\s*([:;,{}])\s*|\s*/\*()[\S\s]+?\*/\s*|(\s)\s+

in the Find box and:

$1

in the replace box, and by ensuring that Regular expression is ticked, you should be able to minify CSS with the Replace All button!

TextMate Find and Replace: Minify CSS

Note: I haven’t test this particularly extensively, or with the IE expression(). This may produce undesired results! It certainly seems to be fine on all the standard CSS I’ve tested it with.

Minify CSS – Shrink your CSS down to size

I know there are probably many services offering it already out there, and it’s not too hard to run right in TextMate, but I haven’t been able to find it in 30 seconds of Googling (well, I couldn’t at work, but I’ve since found this… Oh well!), so I set up a quick script to do it for me:

http://dom.hastin.gs/files/minifycss/

If it’s useful, I might set up a memorable URL, let me know in the comments 🙂

I did set up syntax highlighting, using codemirror, which looked pretty nice, but made the minification (on large-ish files) take far too long. I haven’t really tested on any huge files, so try this at your own risk, but it seems faster that TextMate was.

JSS – Nested CSS using Javascript

Update: I have worked on a newer version with more features and a PHP conversion, here.

Ever wanted nested stylesheets?

I have!

Now you can have them! If you code your stylesheets as JSON and parse them using JSS 0.1. You could have the following:

      JSS({
        'html': {
          'body': {
            background: '#fff',

            'div#header': {
              height: '100px',
              background: '#00f'
            },

            'div#footer': {
              height: '40px',

              'span#copyright': {
                color: '#0f0'
              },
              'span#testing': {
                color: 'black',
                background: '#eeccff'
              }
            }
          },
          width: '800px'
        }
      });

Turned into:

      html {
        width: 800px;
      }

      html body {
        background: #fff;
      }

      html body div#header {
        height: 100px;
        background: #00f;
      }

      html body div#footer {
        height: 40px;
      }

      html body div#footer span#copyright {
        color: #0f0;
      }

      html body div#footer span#testing {
        color: black;
        background: #eeccff;
      }

You can get it here or view the test page here.