Spiffing CSS: the preprocessor made for Brits

[benesch]

The full list of transformations:

  'colour'       => 'color',
  'grey'         => 'gray',
  '!please'      => '!important',
  'transparency' => 'opacity',
  'centre'       => 'center',
  'plump'        => 'bold',
  'photograph'   => 'image',
  'capitalise'   => 'capitalize'

In case someone actually tries to use this in production (lol), I'm wouldn't trust the transformation to this search/replace regex:

   '/(?:(?:\s|\t)*|\;)([\w-]*):/i'

You know, considering CSS is context-free 'n all.

[bluepnume]

Here's that regex again, except actually readable:

    (\s*|;)[\w-]*:

[bsamuels]

> '/(?:(?:\s|\t)|\;)([\w-]):/i'

my head just exploded. I imagine you could sneak a backdoor into one of these if it was long enough :)

[dfc]

  'photograph'   => 'image',

If your $LANG is en-uk do you really refer to all graphics as photographs?

[martin-adams]

Splendid. Makes one feel right at home.

However, transparency: 0.5 -> opacity: 0.5 is a very poor example. One would assume that transparency: 1 = opacity: 0.

It's like putting an example date of 01-01-2014.

[usea]

The bad example hides an even worse situation than you imagined. Here's another example from their github [1]:

  body {
    background: darkgrey;
    transparency: .7;
    font: 72px "Comic Sans", cursive !please;
  }
  
  /*
  This will compile to:
  body {
    background: darkgray;
    opacity: .7;
    font: 72px "Comic Sans", cursive !important;
  }
  */

Apparently, transparency: 1 = opacity: 1, even though the words mean opposite things.

[1] https://github.com/visualidiot/Spiffing/blob/master/test.css

[vezzy-fnord]

Don't forget to pair it with British PHP: http://www.addedbytes.com/blog/if-php-were-british/

Now you have a royal web development stack.

[MrBuddyCasino]

Loved it, especially the royal try/catch:

    would_you_mind {
        // Code here
    } actually_i_do_mind (Exception £e) {
        // Politely move on
        cheerio('Message');
    }

[smsm42]

You need a fork of Apache too. Maybe call it Gurkha?

[languagehacker]

I usually don't mind stupid jokes, but stupid jokes that auto-play music? Big thumbs down.

[elwell]

Music doubled funniness for me.

[runewell]

I actually thought the music was perfect.

[stevenheidel]

As a Canadian even, I can't count the number of times I wrote "colour" with a 'u' in my CSS and was surprised when it didn't work.

[smoe]

Years ago, I lost quite some time debugging a site where some borders just wouldn't render in IE. Turned out Firefox recognized both, grey and gray, IE did not.

[d0m]

Something I find inconsistent is the "color", shouldn't it be "font-color"? (I definitely could be wrong, I'm terrible in css)

[Recoil42]

You are wrong in the sense that CSS uses 'color', and not 'font-color' to describe the color of text within an element.

You aren't wrong in the sense that CSS's choice of using 'color', and not 'font-color' is completely ridiculous, and breaks convention with CSS itself. I'm a front-end developer using CSS on a daily basis, and this has always bothered me.

[tonybaroneee]

When the music started playing I lost it.

[elwell]

I went ahead and drew up a petition to include these changes in CSS4. Please add your sig!!! http://bit.ly/1kzxheU

[shortdiv]

As someone who learned british english all the way until high school, I appreciate this. It would've been nice if there was an audio off button though.

[randunel]

I hate websites with sound playing without my consent.

[dvidsilva]

there are tools that let you create your own preprocessor that are far better than regexp in php.

http://createyourproglang.com/

Or you can go through sass or less source code and change things :P

cool joke tho

[Axsuul]

I'd imagine this would introduce a lot of unintended side effects.

[JoshTriplett]

Warning: page plays audio.

[BlakePetersen]

Yea, soon as I heard it, I noped outta there. Not worth muting... Just, nope.

[insertnickname]

Use NoScript. I didn't hear anything. :-)

[Ryel]

5/8 people in my office audibly laughed at this.

Give me a sec I'll fire up the 'ol D3 and give you a statistical analysis of age, gender, race, hair-colour, (noticed I used colour, not color), etc..

[batuhanicoz]

This is bloody stupid; it should be able to save compiled CSS file and not compile it at every request. AND WHERE IS THE GRUNT PLUGIN FOR THIS?!1

[collyw]

Another London centric view of "Britain". Roll on Scottish independence.

[Pitarou]

Suits me. I've always wanted a second passport to play with.

Of course, I don't actually live there. I just happened to be born there. jus solis 'n' all that.

[untog]

I'm sorry, do Scots spell colour as 'color'? If so it's the first I've heard of it. Or, lighten up.

[_dztf]

Really? Of all things, this is what we need?

[jjgreen]

Top hole!