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

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 0.2 – Nested CSS update

So I thought I’d update the JSS script I wrote previously with a few changes I’ve been thinking about for a while.

The primary reason for the update is to add a new ‘non-CSS’ property of ‘include’. This property allows you to include styles that have already been defined in the current class. Continue reading

Parallax 0.1 – Simple parallax effect for jQuery

I’ve seen some very cool parallax effect around lately, especially liking the Silverback site. But none of them are particularly interactive, so I thought I’d make a small implementation of the Parallax effect that interacts with the mouse.

Very early stages (and I haven’t tested it on IE yet… but you could just you conditional comments to exclude ‘those’ people anyway…) but it seems to be working ok. The options aren’t really simple, but they should be fairly self-explanatory…

Check out the demo (it is a very poor demo, please don’t look at the images, imagine it with a lovely hand drawn vector!) and get it here (minified).

Update: Created a quick demo of the silverback homepage with interactive parallax.

Update 2: Tested on IE8, seems to work fine!

Update 3: I have modified the script slightly, you can view the post here.

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.

jQuery – Automatic Image Captions

Lots of RTEs allow you to add images and float them, but not many allow for simple captions to be wrapped around the images…

This script in conjunction with jQuery allows just that… Very simple and fairly unobtrusive.

If you wanted to add captions to all images (from their longdesc, title or alt attributes) within <div class=”content”/> you could do:

$('div.content').addCaptions();

Which produces something like this:

jQuery Add Captions - Screenshot (Like this!)

jQuery Add Captions - Screenshot (Like this!)

No styling is carried out by the script itself, so you’ll have to add in some extra classes, but in the zip file should be everything you need to get started (including jQuery 1.3.2 minified).

Download

Edit: Added to the work blog too.

Update: I have updated the script, see this post.