Break Free From CSS Prefix Hell

#1

Post by joeyj01 » Wed, Oct 12, 2011, 1:52 PM UTC

Break Free From CSS Prefix Hell
coding.smashingmagazine.com

Re: Break Free From CSS Prefix Hell

#2

Post by bretthopper » Wed, Oct 12, 2011, 2:18 PM UTC

What I like: it detects your browser and only sets the needed prefixes.

What I don't like: it depends on JS.

Using LESS or SASS avoids most of the problem this article talks about it, although the generated CSS will contain every vendor prefix. I'm not sure the difference in CSS filesize is worth using this solution.

Does anyone know of a server-side solution like this? Wouldn't be hard to vary the CSS output based on user-agent. Although you'd lose some caching benefits.

Re: Break Free From CSS Prefix Hell

#3

Post by eam » Wed, Oct 12, 2011, 2:38 PM UTC

bretthopper wrote: post #2

What I like: it detects your browser and only sets the needed prefixes. What I don't like: it depends on JS. Using LESS or SASS avoids most of the problem this article talks about it, although the generated CSS will contain every vendor prefix. I'm not sure the difference in CSS filesize is worth using this solution. Does anyone know of a server-side solution like this? Wouldn't be hard to vary the CSS output based o…

I use Compass(http://compass-style.org) but that pretty much runs on SASS.

Re: Break Free From CSS Prefix Hell

#4

Post by jacobr » Wed, Oct 12, 2011, 2:49 PM UTC

bretthopper wrote: post #2

What I like: it detects your browser and only sets the needed prefixes. What I don't like: it depends on JS. Using LESS or SASS avoids most of the problem this article talks about it, although the generated CSS will contain every vendor prefix. I'm not sure the difference in CSS filesize is worth using this solution. Does anyone know of a server-side solution like this? Wouldn't be hard to vary the CSS output based o…

Perhaps it could be done as a SASS extension. You could use different mixins depending on the user agent.

Re: Break Free From CSS Prefix Hell

#5

Post by yogsototh » Wed, Oct 12, 2011, 2:51 PM UTC

eam wrote: post #3

bretthopper wrote: post #2

What I like: it detects your browser and only sets the needed prefixes. What I don't like: it depends on JS. Using LESS or SASS avoids most of the problem this article talks about it, although the generated CSS will contain every vendor prefix. I'm not sure the difference in CSS filesize is worth using this solution. Does anyone know of a server-side solution like this? Wouldn't be hard to vary the CSS output based o…

I use Compass( http://compass-style.org ) but that pretty much runs on SASS.

I went here to make the same remark.

Using compass you just have to type:

  +linear-gradient(color-stops(#c7def4,#d7eef4))
  +box-shadow(rgba($ycolor9,.6) 0 0 4px inset)
  +border-radius()

And it works really fine.

Re: Break Free From CSS Prefix Hell

#6

Post by mathias » Wed, Oct 12, 2011, 3:07 PM UTC

When did we stop caring about FOUC and client-side performance?

Re: Break Free From CSS Prefix Hell

#7

Post by evlapix » Wed, Oct 12, 2011, 3:38 PM UTC

mathias wrote: post #6

When did we stop caring about FOUC and client-side performance?

I understand your concerns, but in this case I think extent of usage and progressive enhancement are the real considerations.

Re: Break Free From CSS Prefix Hell

#8

Post by ck2 » Wed, Oct 12, 2011, 3:42 PM UTC

mathias wrote: post #6

When did we stop caring about FOUC and client-side performance?

Exactly - this makes about as much sense as the javascript based "busy" indicator (instead of gif).

Stylesheets are cached and a one-time hit for new visitors - this method has to reiterate on every single page load.

Re: Break Free From CSS Prefix Hell

#9

Post by leaverou » Wed, Oct 12, 2011, 3:46 PM UTC

mathias wrote: post #6

When did we stop caring about FOUC and client-side performance?

FOUC? It's only some CSS3 that won't display until DOM load, not the whole styling. As for the performance, I'm pretty sure you're just guessing, and haven't done any testing.

Re: Break Free From CSS Prefix Hell

#10

Post by simonhamp » Wed, Oct 12, 2011, 4:17 PM UTC

Fundamentally the wrong wy to deal with this. If it had appeared a few years ago (i.e. before LESS and SASS) it might have been viable for about 5 minutes...

Use LESS and precompile your CSS... it will change your life.