

Spiffing CSS: the preprocessor made for Brits - dhuramas
http://spiffingcss.com

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

~~~
dfc

      'photograph'   => 'image',
    

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

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

~~~
dfc
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?

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

------
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](https://github.com/visualidiot/Spiffing/blob/master/test.css)

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

------
vezzy-fnord
Don't forget to pair it with British PHP: [http://www.addedbytes.com/blog/if-
php-were-british/](http://www.addedbytes.com/blog/if-php-were-british/)

Now you have a royal web development stack.

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

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

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

~~~
elwell
Music doubled funniness for me.

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

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

------
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](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/](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.

~~~
tonybaroneee
I for one found it hilarious!

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

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

------
jjgreen
Top hole!

------
masswerk
fab!

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

