It looks like just about each day there’s a incredible new instance of one thing wonderful you are able to do with CSS3. Whether or not it’s as advanced as full-blown animations or as (comparatively) easy as RGBa colours, drop shadows, or rounded corners, I marvel at how far we’ve come for the reason that lowly days of CSS1 or (shudder) the @font factor.
Article Continues Beneath
The present state of CSS3 jogs my memory of a typical cinematic machine: The scene opens with us, this happy-go-lucky household of builders out for a picnic by the lake on a phenomenal summer time afternoon. And as we snigger, play, and scamper about entertaining ourselves, the digicam pans round, bringing us over to the lake the place, beneath the floor, one thing stirs. One thing ominous and foreboding.
Okay, maybe that was a bit over-dramatic, however what I’m attempting to say is that we’re ignoring the beasts inside our code, hiding simply out of view: forks.
When you’ve been working on the internet for greater than a decade (I’m most likely relationship myself), chances are you’ll do not forget that bleak time in net design historical past when JavaScript was a darkish artwork. It earned that status as a result of as a way to do something with even the teensiest little bit of cross-browser consistency, you needed to fork your code.
It was normal observe to have one set of JavaScript features for Netscape and one other set for Web Explorer. Or, in case you had been an actual masochist, you stored the code mixed and created a fork contained in the operate:
operate doSomething(){
if (doc.getElementById)
{
// net requirements FTW!
}
else if (doc.all)
{
// do one thing in IE
}
else if (doc.layers)
{
// do one thing in Netscape 4.x
}
}In lots of circumstances, particularly the place animation or occasion handlers had been involved, the code obtained actually gnarly, simply topping even essentially the most atrocious spaghetti code in HTML. The factor about forking your code is that, whenever you least anticipate it, it’ll discover a method to fork you proper again.
Now, because of Internet Requirements Undertaking browser-standards advocacy and diligent JavaScript library authors, the world of JavaScript is a a lot nicer place to work and play. Our code is now comparatively fork-free, with fewer nooks and crannies during which bugs can conceal. Sadly, in our rush to make use of a number of the options obtainable in CSS3, we’ve fallen off the wagon.
I believe @border-radius was the proverbial “sweet” that the forks used to steer us again into their clutches. All of us wished them; hell, we’d give you myriad methods to giả rounded corners to understand our design desires. So when Firefox and Safari dangled them in entrance of our drooling faces, asking solely that we add two small forks to our code for the privilege, we jumped on the alternative.
.this-is-awesome {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}They had been solely two small forks, in spite of everything, how dangerous may they be?
Nicely, as soon as we had symmetrical rounded corners, we wished asymmetrical rounded corners. In spite of everything, we’d like to have the ability to categorical ourselves and there comes a time when each man, girl, and baby should get up and set the radius of every nook independently! Sadly, Webkit doesn’t just like the @border-radius shorthand, however that simply means we must be somewhat extra verbose:
.this-is-slightly-less-awesome {
border-radius: 10px 5px;
-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
}Oh, and we most likely wish to be sure that Opera and Konquerer can get the rounded corners too (assuming Opera’s supporting them this week).
.this-is-absurd {
border-radius: 10px 5px;
-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
-o-border-radius: 10px 5px;
-khtml-border-top-left-radius: 10px;
-khtml-border-top-right-radius: 5px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 5px;
}Now, are you seeing an issue right here? Does it remind you of something we used to do in our CSS?
.can-you-hear-me-now {
padding: 10px;
width: 200px;
width: 180px;
top: 200px;
top: 180px;
}Or maybe you had been extra keen on one thing in a pleasant Tan.
.hooray-for-repetition {
padding: 10px;
width: 200px;
top: 200px;
}
* html .hooray-for-repetition {
width: 180px;
top: 180px;
}Name it forking, name it hacking, name it what you’ll; we shouldn’t be doing it.
As you possibly can most likely inform, forks get me somewhat riled up. Reasonably than simply getting offended about it, nonetheless, I made a decision to construct a JavaScript library that helps clear residing (or at the least clear CSS): eCSStender. (Really, the unique impetus behind the library was somewhat completely different, however we’ll get to that in a bit.)
Boiled all the way down to its essence, eCSStender (pronounced “extender”) is a JavaScript library (akin to jQuery or Prototype) particularly constructed for working with CSS. By itself, eCSStender doesn’t do something however analyze your stylesheets. When powering “extensions,” nonetheless, eCSStender lets you use properties equivalent to @border-radius and selectors like @.seven:nth-child(even) with out having to resort to forks or hacks.
When you’re developmentally inclined, you’ll have an interest to know that eCSStender not solely offers you introspection into the fashion guidelines contained in your CSS file(s) and offers a framework for testing a browser’s assist (or lack thereof) for issues like selectors or properties, it additionally offers a mechanism so that you can patch browser assist for CSS.
If, nonetheless, you’re extra inclined towards the design facet of issues, you’ll be pleased to know that utilizing eCSStender and a handful of extensions lets you write superior CSS merely. It Simply Worksâ„¢.
.this-is-so-much-better {
border-radius: 5px;
}Utilizing eCSStender is fairly simple. You merely embrace the eCSStender library and whichever extensions you wish to run in opposition to your CSS.
<script kind="textual content/javascript" src="https://alistapart.com/article/stop-forking-with-css3/eCSStender.js"></script>
<script kind="textual content/javascript" src="eCSStender.CSS3-backgrounds-and
-borders.js"></script>
<script kind="textual content/javascript" src="eCSStender.CSS3-selectors.js">
</script>
<script kind="textual content/javascript" src="eCSStender.CSS3-color.js"></script>Or, you possibly can decide and select the items you need from the presently obtainable extension bundles and create your personal customized extension library.
<script kind="textual content/javascript" src="https://alistapart.com/article/stop-forking-with-css3/eCSStender.js"></script>
<script kind="textual content/javascript" src="my-extensions.js"></script>So the place do you get these extensions? Nicely, I’ve developed quite a few extensions that supply CSS3 performance and have bundled them such that they correspond to the varied modules of CSS3, equivalent to borders and backgrounds, selectors, and shade. I’m additionally conscious of a number of different JavaScript wizards who’re engaged on different items of the CSS3 puzzle, together with a multi-column format and extra. An entire checklist of identified extensions is being maintained on the eCSStender web site and, in case you’re , the web site additionally has in depth documentation on methods to roll your personal.
After getting included the JavaScript recordsdata, you merely go about utilizing the properties because the spec defines them, and the extensions work their magic to translate what you wrote into one thing browsers perceive. The fantastic thing about this setup is that your stylesheets stay clear and fork-free; the extensions do all of the soiled give you the results you want.
Extensions are constructed to be sensible, too. Utilizing the eCSStender API, they’ll check to see whether or not or not the property or selector you need is supported within the present browser. If the property is supported, the extension doesn’t run, but when it isn’t supported, the extension is activated. So within the case of border-radius, Safari 5 implements the usual property and the border-radius extension will not be run, however in Safari 4, which solely understands -webkit-border-radius, the extension must run and makes the required translations. As soon as the vast majority of browsers accessing your website are savvy sufficient to understand requirements with out the hand-holding, you merely delete the extension simply as you’ll a conditionally-commented stylesheet for a model of IE you not have to assist. Straightforward-peasy.
You’d most likely like an instance, proper? Nicely, the eCSStender website is actually one, however I’ve thrown collectively one other one on the off probability you’d wish to see a mixture of CSS3 goodies in motion. It makes use of:
@border-radius,@box-shadow,- RGBa backgrounds,
@rework: rotate(), and@transition(assuming your browser helps it in some type).
Be sure you hover the field.
Yeah, however “lengthen”-er?#section5
As I discussed earlier, eCSStender was not initially designed to behave as browser spackle; actually, the unique intent for the library, once I started writing it almost three years in the past, was to make it simple for every of us to get entangled in crafting future variations of CSS. By eCSStender, we will play with new concepts and see our ideas realized in an precise browser. It offers a simple manner for us to experiment with syntax and see what works and what doesn’t with out having to attend for native browser assist.
When you’ll indulge me for a second, I’ll offer you an instance. Say, for example, I believed it may be attention-grabbing to imbue parts with bodily traits and I wished to make use of CSS to do it. I’d create a brand new property (with a vendor-specific extension of “simple,” to point my firm) known as @-easy-physics-fill that may take one in all a number of substances, equivalent to “lead,” or “helium,” as its worth. With eCSStender I can simply construct an extension to search for that new property and apply the requisite bodily properties. It’s a contrived instance, however I believe you get the purpose.
Used on this manner, eCSStender empowers us to point out the W3C what we wish to see subsequent in CSS. And it might probably assist the CSS Working Group consider syntax and experiment with new concepts with out having to attend for a browser vendor to implement them. This might streamline the method, as concepts that don’t work properly in sensible software could be jettisoned earlier than the underlying codebase of any browser has been modified. And who is aware of, perhaps the W3C would even take into account an extension to be a legitimate implementation used as a part of the standards-development course of.
As a library, eCSStender has a couple of modest targets. Before everything, it goals to supply strong instruments for designers and builders to make working with CSS higher.
On one hand, it seeks to equalize assist for CSS throughout all browsers by providing a easy set of developer instruments that makes crafting extensions simple and implementing them a breeze. On the opposite, it offers those self same instruments to designers and builders who’re interested by conceiving after which constructing actual implementations of the properties, selectors, and mechanisms they wish to see in future variations of CSS.
Maybe my dream of a world with equalized CSS assist throughout browsers is pie-in-the-sky considering, however I like pie. Even when it is greatest eaten with a fork.