Spiffing CSS: the preprocessor made for Brits | Hacker News Reader

Spiffing CSS: the preprocessor made for Brits

spiffingcss.com

60 pointsdhuramas41 comments

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.

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

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

Here's that regex again, except actually readable:

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

  'photograph'   => 'image',

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

If your $LANG is en-us does your sense of humour go amiss?

It was a legitimate question. The following are funny, legitimate differences between en-uk/en-us and to my knowledge did not represent any change in semantic value:

  'colour'       => 'color',
  'centre'       => 'center',
  'capitalise'   => 'capitalize'
  'grey'         => 'gray',   # less definitive than others

Why does being curious about en-uk/en-us language differences lead you to believe that I do not have a sense of humor?

Sorry, I thought you were being coy. To answer your question, we don't refer to all images as photographs. I think this was a joke-within-a-joke on the part of the author.

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.

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

Seems like the creator needs an English lesson of their own.

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.

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

oh god i just tried to nose-fork a Jelly Belly... ouch!

Loved it, especially the royal try/catch:

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

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

Music doubled funniness for me.

I actually thought the music was perfect.

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.

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.

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

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.

color refers to the foreground color, not just the font color, so it makes sense to me. For example, if no border-color is supplied, a border's color will default to the value of color.

When the music started playing I lost it.

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

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.

I hate websites with sound playing without my consent.

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

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

Warning: page plays audio.

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

I for one found it hilarious!

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

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..

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

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

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

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.

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

Top hole!

fab!

This is short for "fabulous"! (informal amazingly good; wonderful; see Oxford Dictionary, c.f. "The fab four", aka "The Beatles")

Reply on news.ycombinator.com