Facebook Twitter Gplus LinkedIn RSS
 
 
Home » Blog » Prefix Free CSS is Possible Today

Prefix Free CSS is Possible Today

Published on May 5th, 2012

As a Mobile developer, I am completely onboard with the Mobile first philosophy. This allows us to start with a small window and layer on additional layout until you have layouts from 320px wide all the way up. One of the tools that we can use to our advantage is media queries, allowing us to say “if screen is wider than X, then apply this layout”. This works great on newer browsers that support CSS3.

As an old school web designer that still remembers the Netscape vs. IE standards battles, today’s situation seems even worse. Instead of two browsers fighting for dominance, we have 5 going head to head. Anyone who has done mobile App development has used some of these webkit attributes to make things look nice on Safari and Chrome, the two mobile browsers for iOS and Android respectively. However, if you use webkit statements in normal web design, the other browsers won’t be able to understand them. To make things worse, Mozilla, Opera, and Microsoft have all created their own vendor prefixes and webkit-like attributes forcing developers to have to add up to 5 times the code to even begin to attempt to support all of the major browsers.

Just look at this single statement to scale an image when you hover over it.

1
2
3
4
5
6
7
.button:hover {
    -webkit-transform: scale(1.025);
    -moz-transform: scale(1.025);
    -o-transform: scale(1.025);
    -ms-transform: scale(1.025);
    transform: scale(1.025);
}
.button:hover {
    -webkit-transform: scale(1.025);
    -moz-transform: scale(1.025);
    -o-transform: scale(1.025);
    -ms-transform: scale(1.025);
    transform: scale(1.025);
}

There you have it, five lines of code for a single function. Do this for dozens of elements, and your CSS file quickly becomes unmanageable. The hope is that these stupid vendors will drop these silly prefixes and support only the CSS3 standard. Heck, some of the vendors are talking about adding webkit queries so they can still compete with Safari and Chrome, the two mobile leaders as of today. That would make things even worse, not better. We need to all agree on one thing, not pick and choose.

For now, we do have an option though. Some person named Lea Verou created a 2KB javascript file called “Prefix Free” that can be included at the top of your page. This script will automatically determine what browser you are using, traverse your CSS, and supplement the specific prefix required for that browser. By doing this, we developers are taking a stand by refusing to specifically code for individual browsers, but also, it doesn’t leave us high and dry in today’s very divided market.

Now all we need to do is write the following until everyone gets their collective heads out of their asses.

1
2
3
.button:hover {
    transform: scale(1.025);
}
.button:hover {
    transform: scale(1.025);
}

Setup of Prefix Free is rather simple. Just download it and include it in your header.

1
<script type="text/javascript" src="js/prefixfree.min.js"></script>
<script type="text/javascript" src="js/prefixfree.min.js"></script>

If your visitor is using an older browser, everything will degrade gracefully. These browsers don’t support webkit attributes anyhow, so this script will just ignore these users. Likewise, if you happen to be using a browser without javascript support, odds are you can’t support CSS3 or webkit anyhow. Everything degrades gracefully.

We are still recovering from the browser wars and IE6’s victory over Netscape. Let’s not make the same mistake again!

I am currently using this baby with a lot of success on my domain’s landing page at http://zsprawl.com. Let me know how it works for you.

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl's work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.

 

Leave a Reply

© 2012 zSprawl's zApps

Fork me on GitHub