cssSandpaper – a CSS3 JavaScript Library

Remix of images by Parée Erica and Hans Christophersen

The cssSandpaper JavaScript library looks at the stylesheets in an HTML document and, where possible, smooths out the browser differences between CSS3 properties like transform, opacity, box-shadow and others.  This script is not only useful for developers who want to support CSS3 in IE (which doesn’t support it in IE natively) but in other browsers which implement their own vendor-specific variants of these properties.

For a good introduction to cssSandpaper and how it works under the covers, you may want to first read these blog-posts:

How to Use

  1. Download the JavaScript archive linked to at the end of this manual
  2. Put the following code in the head of your document
    <script type="text/javascript" src="/path/to/shared/js/EventHelpers.js">
    </script>
    <script type="text/javascript" src="/path/to/shared/js/cssQuery-p.js">
    </script>
    <script type="text/javascript" src="/path/to/shared/js/jcoglan.com/sylvester.js">
    </script>
    <script type="text/javascript" src="/path/to/shared/js/cssSandpaper.js">
    </script>
    

    (Thanks to Zoe Gillenwater for pointing out an error in the script declarations above).

  3. Edit your CSS to use the properties in the CSS Properties Section, or use JavaScript to create scripted effects using the information from the DOM Manipulation Section.  Note that you can speed up the loading of your pages by inserting the class="cssSandpaper-noIndex" attribute into link and style tags that do not have any cssSandpaper supported markup.

Note that all supported properties except for opacity and text-shadow use the vendor-specific prefix -sand-. This is prevent interference with native implementations of these properties.

-sand-transform

Description

Transforms allow developers to rotate, scale, and skew blocks of HTML via CSS.

Syntax

#container {
   -sand-transform:  <function-list>;
}

where <function-list> can be a space separated list of the following functions:

Function Purpose
rotate(angle) Rotates HTML elements. angle can be in degrees (e.g. rotate(30deg)) or radians rotate(1.3rad)
scale(sx[, sy]) Scales HTML elements. sx and sy are numbers, where 1 represents the original size, 2 represents twice the size, etc. Note that if sy isn’t specified, it is assumed to be equal to sx. Similar functions are scaleX(sx) and scaleY(sy).
translate(tx, ty) Translates (moves horizontally and vertically) HTML elements from the object’s perspective (as opposed to the CSS top and left which moves an object from the browser’s perspective. tx and ty are the horizontal and vertical translation offsets. Internet Explorer support for this function was introduced in version 1.1 beta 1. For more information, visit my blog post on the subject.
skewX(ax), and skewY(ay) These functions skew the object around the x and y axes by the specified angles in degrees or radians.Note: the skew(ax, ay) function, which used to work in browsers that support CSS3 Transforms natively is no longer part of the W3C CSS3 spec and is no longer supported by Firefox.
matrix(a, c, b, d, tx, ty) Applies a 2D transformation matrix comprised of the specified six values. If you aren’t familiar with linear algebra and matrix arithmetic, this function will be hard to understand. For further information, you may want to read Wikipedia’s Transformation Matrix article, although if you are mathematically challenged, you may run away from your computer screaming.

If you are familiar with matrix multiplication, note that c and b are reversed. This follows the way Firefox has implemented this method (i believe WebKit based browsers reverse these numbers).

Examples

text-shadow

Description

This property, which is an official CSS3 property, allows developers to add text-shadows to the text that matches the selector(s) used. Using it in conjunction with cssSandpaper allows IE 7-9 to implement the text-shadow.

Syntax

#container {
   text-shadow:  <x-offset> <y-offset> <blur-radius> <color>;
}

The x-offset and y-offset values state how many pixels horizontally and vertically the shadow is positioned with respect to the original text, while the blur-radius value is used to express how much the shadow is blurred (the higher the value, the more blurry it is). All of these values can be expressed using any CSS unit of measure (e.g. px, em, etc). The color can be any CSS color value, representing the color of the text.

A full description of how to use text-shadows with cssSandpaper can be seen in my article Full CSS3 Text-Shadows — Even In IE.

Examples

-sand-box-shadow

Description

box-shadow allows us to take a block level element and put a shadow underneath. There can optionally set a blur factor to give a warmer effect to the shadow.

Syntax

#container {
   -sand-box-shadow: <horizontal-offset> <vertical-offset> <blur-radius>;
}

Note that in IE, the blur-radius is not currently not supported, due to a lack of support in IE’s DropShadow filter.

Examples

-sand-gradient

Description

Gradients are gradual blends of color, and can be linear or radial:

Syntax

#container {
   background-image: -sand-gradient(<type>, <start-point>, <end-point>, <color-stop1>, <color-stop2>, ..., <color-stopN>)
}

The type can be linear and gradient, although Internet Explorer doesn’t support radial gradients at this time, due to limitations in IE’s gradient filter. Internet Explorer also only supports simple linear gradients (i.e. only horizontal and vertical and only two colours).

A more detailed explanation can be found in the section regarding gradients of the W3C’s working draft of CSS Image Values Module Level 3

RGBA gradients are also supported. For details on what this is and how to implement RGBA gradients, please visit my blog post on the subject.

Caveats

Firefox version 3.6+ natively uses a very different syntax for gradients.  If -sand-gradient() is used in this browser, the native implementation will not be used but the a JavaScript implementation using Canvas.   cssSandpaper will be updated to use the Firefox native version in a future release.

Examples

opacity

Description

Sets the opacity level of a block of HTML

Syntax

#container {
   opacity:  <opacity-level;;
}

where <opacity-level> is a number between 0 and 1.

Examples

Opacity Test

RGBA, HSL and HSLA colorspaces

Description

RGBA allows alpha channel support to the RGB colorspace. HSL is an alternative, easy to use, human friendly
color-space. HSLA allows alpha channel support to the HSL colorspace.

Syntax

#container1 {
   background: rgba(32, 45, 230, 0.5);
}

#container2 {
   background: hsl(120, 50%, 50%);
}

#container3 {
   background: hsla(270, 100%, 50%, 0.4);
}

More information about these colorspaces can be found in the User Agent Man articles cssSandpaper Now Supports transform: translate() and rgba() Gradients and

Examples

Developers can use cssSandpaper to manipulate transform, opacity, box-shadow, and background gradients, using cssSandpaper.setOpacity(), cssSandpaper.setBoxShadow() and cssSandpaper.setGradient() respectively. All these functions take two parameters, a DOM node, and the second is the CSS property value that is of the syntax described on my previous blog post. For example:

    cssSandpaper.setTransform(node, "rotate(25deg) scale(2, 2) skew(20deg, 20deg)");
    cssSandpaper.setOpacity(node, 0.3);
    cssSandpaper.setBoxShadow(node, "10px 10px 5px #ffcccc");
    cssSandpaper.setGradient(node, "-sand-gradient(linear, center top, center bottom, from(#0000ff), to(#ff0000));")

Known Issues

  • Please note that cssSandpaper cannot load embedded stylesheets when the page is not on a web server in all browsers. This is because IE (and Chrome it seems) cannot use XMLHttpRequest object with the file: protocol. Thanks to Seth Scoville for pointing this out.
  • Note also that all stylesheet link tags must point to URLs on the same hostname that store cssSandpaper (i.e. both cssSandpaper and all your stylesheets must be served off the same domain). If there are stylesheets that are on a different domain that don’t contain any cssSandpaper styles, you can keep them where they are by setting the link tag’s class attribute to cssSandpaper-noIndex.
  • Currently, when a user changes the font-size in IE, the layout gets a little messed up. This will be fixed in a future release.
  • In IE, having a transparent background or a background with an alpha channel seems to result in an ugly pixely block. This seems like it may be a limitation of IE’s CSS filters and there may not be a workaround available. If one does come up, I’ll definitely update (and if anyone smarter than me finds one, I would be very grateful if you would give me a few pointers ;-). It is now possible to override this behavior by using the -sand-chroma-override CSS property. More details on how to use this can be seen by looking at my article on Full CSS3 Text-Shadows – Even In IE. Thanks to Robert Momary for pointing this out.
  • Some copies of Opera 10.5 have problems running the script. It is unknown why, but it seems that Opera 11 and greater don’t have this issue.

Future Work

cssSandpaper is a living, active project.  I intend to support more CSS3 properties as time goes on, as well as fix bugs that I or others come across.

Any feedback is welcome, either as a comment on this page or emailing the address in the top left corner.

Acknowledgments

I would like to thank Weston Ruter for his CSS Gradients in Canvas script, since I stole many of his ideas with his permission (I will be implementing more of the advanced features of his script in a future release of cssSandpaper). I would also like to thank James Coglan for building Sylvester so I didn’t have to.

Downloads

Get the latest version of cssSandpaper from GitHub.

(Thanks for Lemaire Adrien for pointing out a script tag error in some of the examples within the earlier 1.1 beta 1 release).

 <a href="http://reference.sitepoint.com/css/vendorspecific">vendor-specific prefix</a> <code>-sand-</code>

83 Comments

83 responses so far ↓
  • 3 Kev Adamson // Apr 28, 2010 at 6:54 pm

    But gradient is currently different between FF and Webkit??

    Also, putting -sand- in my css – would it not be better to somehow target then actual correct syntax, so you would put border-radius and it would auto write the testing prefixes? That way, when everything is fully supported you only have to remove the JS file.

  • 6 Jon // May 2, 2010 at 5:00 pm

    Awesome – if it would also handle rounded corners I’d be SOLD!!!

  • 7 zoltan // May 2, 2010 at 9:04 pm

    I would definitely like to do that. There are many solutions for border-radius in IE, but one of the things I want for a cssSandpaper solution is that any transforms done on an object would not affect their border-radius. I think it’s doable, but a lot of work. I will let you know if I get this done … or if anyone out there wants to help out and get a huge amount of JavaScript street cred.

  • 8 zoltan // May 7, 2010 at 10:47 am

    @Kev: yes, unfortunately there is a huge difference between the syntax between Firefox’s and WebKit’s syntax for gradients. Right now, cssSandpaper uses WebKit style syntax, and uses Weston Ruter’s algorithm to implement this gradient in Firefox. It would be nice to be able to translate WebKit’s gradient systems to Firefox’s so I can use Firefox’s native gradient, but this looks complicated.

    I am not exactly which syntax is going to win in the end, and is one of the reasons why I have decided to use the -sand prefix on my CSS properties and functions. I would rather I didn’t have to, and in some cases I don’t – the opacity property is one example. For stuff like transforms and box-shadow, there doesn’t look like there is a huge difference between the syntax between the non-IE browsers, so I might just decide to allow both transform and -sand-transform.

    Another question that has been asked before is whether it should respect -webkit and -moz versions of the CSS properties, the argument being it would prevent the FOUC (Flash of Unstyled CSS) that happens on object affected by -sand CSS properties before the page loads. I am not exactly sure what the answer to that question is, but it is something to look into.

    This is not the first time this has come up …

  • 11 Rob Crowther // May 13, 2010 at 6:47 am

    @zoltan Firefox gradient syntax is following the current spec, so it’s likely that this syntax will win in the end. This is because Firefox didn’t have a release which implemented gradients until after the syntax was changed in the spec. WebKit can’t reasonably update their own syntax now until after the spec as whole moves forward a stage in the standards process, then they can implement it in the standard format without the vendor prefix.

  • 12 Skrigs // May 14, 2010 at 6:29 am

    Great library.

    Received the following error in Chrome (5.0.375.38 beta) and Firefox (3.5.9)
    under Ubuntu, while integrating its use within a GWT app through a native call.
    runLists[name].add not a function for line 317.

    From what I have read in the last couple of minutes in your script it probably
    got confused on something within in one of the stylesheets being used by GWT.
    I removed any app stylesheets I defined and the error still occurred. If I get
    time I will try to find the stylesheet causing the issue.

  • 13 [rb] // May 14, 2010 at 6:35 am

    Really great idea but this concerns me:

    “Right now, cssSandpaper uses WebKit style syntax, and uses Weston Ruter?s algorithm to implement this gradient in Firefox.”

    I take that to mean that in firefox the sandpaper script still runs applying the -sand properties? If so why? I see you mention “It would be nice to be able to translate WebKit?s gradient systems to Firefox?s so I can use Firefox?s native gradient, but this looks complicated.”
    Surely you should leave Firefox alone and the developer should handle the property correctly for that browser with css. Or do you mean -sand only enhances if its a version of Firefox or other browser that is less that supporting version?

    When I first read the article I has assumed the methodology was something like this:

    .box {
    -moz-box-shadow: 1px 1px 1px #000; /* FF deals with it */
    -webkit-box-shadow: 1px 1px 1px #000; /* webkit deals with it */
    -sand-box-shadow: 1px 1px 1px #000; /* all browsers ignore but valid */
    box-shadow: 1px 1px 1px #000; /* future / browsers that understand now */
    }

    And have sandpaper only enhance browsers that are in need.

    Id love to use this script if it is an unobtrusive script that only adds support to browsers that dont understand the rules. But if it adds support for browsers that dont need the support I think that is a very bad idea as we would no longer be dealing with a true css3 effect.
    Not to mention the fact that youd be running js for no reason and with js disabled there would be no css3 at all if you only define -sand and not the other browser specific properties.

    Like I said love the idea but -sand should be treated as all the other browser specific rules where the intention is in the future there will be no need for -moz, -webkit, -o, -ms, -sand and developers will simply remove the -whatever properties.

  • 14 zoltan // May 14, 2010 at 10:33 am

    @Skrigs: you can tell cssSandpaper to ignore link or style tags by setting their class attribute to cssSandpaper-noIndex, which may help your problem. However, if you have time, I’d be indebted to you if you could find out which rule the parser is having a problem with – it would help me bullet-proof the parsing routines and make cssSandpaper more useful. :)

  • 15 zoltan // May 14, 2010 at 10:45 am

    @rb: I think your concerns are valid … I also think there are some developers who would like to use only one syntax for all browsers and not write multiple vendor specific properties (especially if, like gradient, the syntax is really different).

    To give both camps what we want (because I want cssSandpaper to be flexible) , would it be a good idea to make cssSandpaper configurable so that if it’s configured one way, we have the -sand properties executed only if the browser doesn’t support a vendor specific or the official CSS3 property? Maybe the developer could do this if a class is set in the html tag perhaps (like, say class="cssSandpaper-strict" or something along those lines)?

    This could possibly be a great way to minimize the “Flash of unstyled content” that happens sometimes with these CSS3 properties.

    What do you think?

  • 16 Zoe Gillenwater // May 25, 2010 at 2:52 pm

    I can’t get the script to work, and suspect it is because your “How to Use” instructions are incomplete or out of date. I’d love some help.

    You list three scripts to include: cssQuery-p.js, sylvester.js, and css3helpers.js. But, css3helpers.js is not included in the download. The download also includes two additional scripts that aren’t in your instructions: cssSandpaper.js and EventHelpers.js. So I decided to just make a wild guess about which scripts to include, and it’s the four included in the download:
    cssQuery-p.js
    sylvester.js
    cssSandpaper.js
    EventHelpers.js

    I then added the -sand-transform declaration in the CSS as specified.

    But, when I load the page, I get errors about EventHelpers being undefined, and the rotation transform doesn’t work.

    What do I need to change? Will you please update your instructions accordingly?

    Thanks in advance for your help.

  • 17 zoltan // May 26, 2010 at 4:53 pm

    My apologies … I have fixed the script declarations since they are based on the old working version of cssSandpaper called css3helpers.js. If you follow the instructions now, you should have no problems with the transforms.

  • 18 Trevor Burnham // Jul 3, 2010 at 2:22 pm

    I’m curious: If I’m already using jQuery on my site and I want to avoid the 6k addition of cssQuery, could I just substitute jQuery as the document.querySelectorAll? The two have a very similar selector syntax, but not identical. Do you know where it would break?

  • 20 zoltan // Jul 3, 2010 at 7:52 pm

    @Trevor: adding support for jQuery and other libraries with CSS selector engines would be ideal. It is something I will be looking into in the near future.

  • 26 MMO-STR // Oct 13, 2010 at 9:14 am

    thanks for your great works on this lib i’ll try and certanely use it on my online game site, big new potential with your crossbrowser lib ;o)

  • 27 zoltan // Oct 13, 2010 at 1:21 pm

    I have received a lot of comments about bug tracking, revision control, and other related matters. All the libraries on this blog will be put in a proper code repository in the next few weeks. I will blog about it when this is done. In the meantime, do you have a page I could look at? It may help nail down the problem a lot more quickly.

  • 31 Adam Butler // Feb 12, 2011 at 12:42 pm

    This is wonderful; absolutely brilliant. Just when you think IE will yet again hamper creativity, you stumb on something like this.
    Thank you!

  • 32 Bharat sharma // Feb 14, 2011 at 7:48 am

    firstly, thank you very much ? well i use css3 now ? but IE is so boring n please don’t be confuse us[…] all js file give us as fast as possible ?

  • 33 ferenc // Feb 16, 2011 at 6:28 pm

    Maybe its an idea to add border-radius support to this http://fetchak.com/ie-css3/ ?

    Or we can always use both solutions :)

  • 34 zoltan // Feb 18, 2011 at 9:54 am

    @Bharat: Thank you … I think?!?!? :)

  • 35 WebbedOut // Feb 27, 2011 at 1:14 am

    I wish everyone would quit being so stubborn and let us all use one standard CSS and HTML. When the standards get updated, great for everyone. It would be much easier to use one opacity call or one transform call rather than having all the vendor prefixes. What I’d really like to see is css properties for sounds. like body {background-sound: url(”)} or a:hover-sound {url(”)}, a:visited:hover-sound {url(”)}, or something along those lines. I totally agree that use of a js file isnt pure css but it does in essence add support for css to browsers that need it.

  • 37 Budkin // Mar 22, 2011 at 7:12 pm

    This is exactly what I was looking for due to IE having a different rotation origin with its filter style. I’m having a problem getting it to work locally though. First I tried to rotate some spans on my site but it would not work. I decided to run your local example files to see what I was doing wrong and noticed that the transforms weren’t being applied there either. Obviously the examples on the website work, and I have checked and re-checked the local file paths on the downloaded example and they all seem good. Any ideas? Thanks!

  • 38 zoltan // Mar 23, 2011 at 10:23 am

    @Budkin: Thanks for mentioning this — it is something I forgot to mention in the documentation above and have just added it. Unfortunately, cssSandpaper cannot load embedded stylesheets when the page is not on a web server in all browsers. This is because IE (and Chrome it seems) cannot use XMLHttpRequest object with the file: protocol. If I find out a way to work around this, I will definitely be adding support for it.

  • 39 Marko // Apr 11, 2011 at 12:43 am

    Have you noticed that for some reason cssSandpaper kills GPU acceleration? It kinda defeats the purpose of the library when using it for devices like iPad or Android. At least when I checked with Safari (http://mir.aculo.us/2011/02/08/visualizing-webkits-hardware-acceleration/), none of the test pages triggered GPU acceleration.

  • 40 zoltan // Apr 15, 2011 at 9:53 am

    @Marko: if I understand your comment correctly, you are right in that GPU acceleration is not enabled in my animation examples because they do not use CSS3 transitions. I am currently doing some research into implementing a transition polyfill with cssSandpaper, but it won’t be implemented for a while if at all. It is not trivial, as you can imagine, to code this in pure JavaScript for older browsers that don’t implement transitions, and even then, cssSandpaper would have to detect if there is a native implementation and utilize that to do the acceleration. Older browser will still be doing it the old, energy inefficient way, and Al Gore will be waving his finger at you. :-)

    If GPU acceleration is important in older browsers, I would just go the “graceful degredation” route. Polyfills are not a “solve everything” solution — they are tools that should be weighed by pros and cons to see if it is appropriate for the task at hand. Robert Nyman’s excellent article HTML5 and Polyfills – One Script to Rule Them All really nails what this is all about, IMHO.

    Thanks for the excellent question. Issues like there are definitely something to consider before using cssSandpaper (or any polyfill for that matter).

  • 41 Marko // Apr 25, 2011 at 11:07 am

    Yeah, I figured you might not be using CSS3 transitions at all. Once I’ll get to the point I’ll need cssSandpaper to do transforms, I’ll probably fork cssSandpaper but I’m not promising anything :) I think cssSandpaper has all the potential to be standalone CSS3 polyfill solution and feature detection really shouldn’t be that big of a deal to implement – just borrow modernizr’s tests. Older browsers without CSS3 support are pretty much on their own and if their JS engine can’t produce smooth transition, well, there’s little anybody can do. However when it comes to mobile, then you really need CSS3 transitions because mobile devices like iPads & iPhones produce horribly choppy animations when you use JS to do it but with GPU acceleration it’s really smooth :)

    I hate to use multiple libraries but right now the easiest way is to use modernizr with yepnope and do your own feature detection and trigger correct transition function for the element. There was this pure CSS3 library just released which would probably fit really well but right now the name just escapes me :/

  • 42 k.ariciu // May 8, 2011 at 7:24 am

    There are fixes for rounded corners that work, and also for shadows in ie. I will try to put them together with your script , witch in amazing by the way, and hope it works. If i find something that works i’ll let you know.

  • 43 vorex // Jul 14, 2011 at 8:21 am

    I get this error on Chrome : Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101 cssSandpaper.js:1222 and this on Firefox : uncaught exception: [Exception… “Component returned failure code: 0x80004005 (NS_ERROR_FAILURE)” nsresult: “0x80004005 (NS_ERROR_FAILURE)” location: “JS frame :: http://cloud.bake180.com/justheavenly/wp-content/themes/Superb/sandPaper/js/cssSandpaper.js :: :: line 1222″ data: no]

    im using sandpaper transform method but didn’t work. What should I do?

  • 44 zoltan // Jul 15, 2011 at 4:30 pm

    @vorex: A couple of things to try:

    1. Ensure that the URL for the stylesheet with the transforms that it is located on the same webserver as your copy of cssSandpaper. If not, cssSandpaper is doing this because it violated the security model of the XMLHttpRequest object (which is what it uses to parse external stylesheets).

    2. Make sure your code is on a webserver, and that you aren’t running cssSandpaper using a file:/// URL. This gives unpredictable results.

    If these scenerios don’t fit your issue, please send me a link to an example page and I may be able to shed more light on why Chrome is throwing this exception.

  • 45 Jason // Jul 18, 2011 at 5:57 am

    Hey man, thanks for this awesome features! I finally can rotate my stuffs properly across the different browser! Thumbs up!! :)

  • 46 ax // Aug 3, 2011 at 4:45 am

    Hi Zoltan, i’m testing this tool and having same issues as vorex. The library-Js is added to my page at the documents footer. Is there a need that they have to be inlcuded in the header? Looking forward hearing from you! :)

  • 47 David // Aug 4, 2011 at 7:24 am

    Fantastic tool this by the looks of it.

    Is there anyway that I can reverse the way it works, basically I want it to ONLY read css that has the class “cssSandpaper-index”- reason being that I am working on an already developed site and do not want to have to test/modify the acres of existing css, and most of the style sheets are added programatically by components and I do not want to hack these to add the class attribute since updating any of these components will likely remove the hack- I just want the new css that will be used by the module I am making to use sandpaper…

  • 48 Mangesh G // Aug 12, 2011 at 1:48 am

    This is brilliant. And makes like a little easier for those of us in IE hell !

    One small typo in this:

    ———–
    #container3 {
    background: hsl(270, 100%, 50%, 0.4);
    }
    ———–

    Shouldn’t the above be “hsla” instead of “hsl”

    Mucho thanks again.

  • 49 zoltan // Aug 14, 2011 at 8:58 am

    @ax: yes, at the moment, the script must be added to the header. I may add support to adding scripts to the body in a future release.

  • 50 zoltan // Aug 14, 2011 at 9:01 am

    @David: there is a definite need for the functionality you describe (I know I have run into needing it recently), and I will be having a fix implemented in the next release (unless, of course, anyone else has done this already and wants to share with the rest of the class).

  • 51 zoltan // Aug 14, 2011 at 9:32 am

    @Mangesh: you are absolutely correct! Thanks for pointing out my typo. :-)

  • 52 Mangesh G // Aug 18, 2011 at 1:37 am

    Hi Zoltan,

    Once again thanks for the amazing work on this.

    Unfortunately I am running into a few more issues and am not sure if its me or a limitation of cssSandpaper.

    1) Does the -sand-tranform property work for psuedo-elements?
    for example:

    /* div:after or dif::after */
    div:after {
    content: ”;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 10px; top: 10px;
    background-color: white;
    border: 1px solid #efefef;
    border-radius: 3px;

    -sand-transform: skew(10deg, 10deg);

    }

    2) I could not get skew() to work unless I add the second parameter.
    eg:
    This did not work: transform: skew(10deg);
    But this works: transform: skew(10deg, 0deg);

    This is not a big deal once I knew the workaround – but took a while for me to figure out why i wasn’t working for me.

    3) Lastly, there is a JS exception if a rule is defined without any styles, like so:

    div {}

    I forget the line number, but the function that was parsing and tokenizing the css rules was failing because it did not find any value. The following seemed to work around this issue:

    div { } /* add a space */

    (During development I create CSS selectors with empty rules and use firebug/chrome dev tool to fine-tune my CSS rules)

    Thanks
    Mangesh

  • 53 Marco // Aug 27, 2011 at 7:47 am

    LOVE YOU!

  • 54 Baddy // Sep 1, 2011 at 4:14 am

    Hi Zoltan,
    i’m trying out the rotate function and somehow I always get the same error as Vorex.

    This is the error I got on Firefox:
    uncaught exception: [Exception… “Component returned failure code: 0x80004005 (NS_ERROR_FAILURE)” nsresult: “0x80004005 (NS_ERROR_FAILURE)” location: “JS frame :: http://kunde6.1xinternet.de/sites/kunde6.1xinternet.de/themes/thoss/js/cssSandpaper.1.2/shared/js/cssSandpaper.js?k :: :: line 1773″ data: no]

    Everything is located on the same webserver. Do you have any idea why this is happening?

    I would love to use your sandpaper solution, as is seems to be the best solution for IE out there :)

    Best regards from Germany,
    Baddy

  • 55 Marco // Sep 1, 2011 at 11:16 am

    I just added your css sand paper to my site, but, everytime any page loads it loads, it firsts appear not transformed, then after one second or so, your transformations are displayed. I was just wandering is this is a normal issue or if I cand do something to avoid it.
    Anyway, thanks for the fantastic script!

  • 56 zoltan // Sep 2, 2011 at 8:01 am

    This problem is always due cssSandpaper trying to access something on a different server — whether or not it should be is the question. Check all your link tags, even the non-stylesheet ones, and see if they are not on the same server (it may be a bug with non-stylesheet links).

    It would really help if you had an example for me to look at with this issue. Please reply here, or, if you don’t want the URL public, send me an email and I will take a look. :-)

  • 57 theUtilitariat // Sep 9, 2011 at 3:01 pm

    This looks great and like a lot of work. Thank you.
    How hard would it be to have the rotation happen around the origin as opposed to the center? It looks like I’d want to play with setMatrixFilter is that right?
    Thanks again for all your work and help.

  • 58 harsh // Sep 12, 2011 at 5:01 pm

    hi zoltan..
    first of all i’d like to thank you for making our work easy.
    second of all when i embedded this code in my web page there were two catastrophical( not really;D ) errors i got.

    1. i used online google font api on my page to make a better typography. And after i embedded your code there were no effects seen on the elements then after i removes link tag of google font api rotation function worked as it should.(now i don’t have beautiful typography).

    2.after removing the link tag of google font api which looks like

    everything went fine in chrome and opera but when i run the same page on ie6 my absolute and relative positioning of those divs to which i had applied ‘sand box transform’ got messed up.

    have any clue..? what might be wrong?
    and thanks again..
    ;D

  • 59 d-ashes // Sep 22, 2011 at 2:01 pm

    Great idea and I’m hoping it fits our need, but I feel like I’m missing something pretty basic when it comes to DOM manipulation. I’m attempting to apply rotation with ccsSandPaper.setTransform on a mouse click but any call to cssSandpaper.setTransform says that no such function exists in the object. Writing out the object shows it only has the .init() method applied to it, there are no other public methods listed. All of the resource files load correctly and the init function runs. Am I missing something?

  • 60 d-ashes // Sep 22, 2011 at 2:51 pm

    Nevermind, I’d somehow ended up with a download of the v1 beta. All better now!

  • 61 zoltan // Sep 24, 2011 at 2:24 pm

    @harsh: The google font API creates stylesheets that are on Google’s servers, which cssSandpaper will have an issue with. I am working on making cssSandpaper work with third party stylesheets and will publish the results soon.

  • 62 zoltan // Sep 24, 2011 at 2:27 pm

    @theUtilitariat: Until I implement the transform-origin CSS3 property, you may have to use translations to simulate this.

  • 63 Ian // Oct 5, 2011 at 5:14 pm

    I’m having success with the script, although some of my other head elements are interfering so I have to figure out what’s going on there.

    But more importantly: I’m trying to rotate a 24-bit png in IE and the result pretty ugly. All the transparency is lost and it’s rendered as a black blob.

    I thought that your -sand-chroma-override fix might work, but it’s not doing anything. I’m either misinterpreting what it’s supposed to be doing, or not doing it right…

    Is there any fix to IE’s poor handling of 8-bit transparency and filters?

  • 64 Sridhar // Oct 9, 2011 at 2:22 am

    Hi Zoltan, kudos on the great work. I am pretty new to front-end development. Can you please let me know whether we can develop a cross-browser 3D card flip [http://24ways.org/2010/intro-to-css-3d-transforms] using csssandpaper?

  • 65 zoltan // Oct 12, 2011 at 7:37 pm

    @Ian: There is a way of fixing this using the AlphaImageLoader filter. It does get a bit involved though. Do you have an example you can share that I can look at?

  • 66 Vincent // Oct 17, 2011 at 6:07 am

    Hello,

    This is an amazing library.
    But unfortunately I have a problem in IE.
    When I rotate a div, the child elements (that are positioned absolute) do not rotate with the parent div.

    Do you know how I can fix this?

    Thanks

  • 67 zoltan // Oct 17, 2011 at 8:13 am

    @Vincent: Unfortunately, this is a known issue with the current version of cssSandpaper. The happens because the Matrix Visual Filter, which is what cssSandpaper uses in IE to simulate CSS3 transforms, doesn’t rotate child containers that are positioned absolutely when the parent isn’t. A workaround for this issue is to make some IE specific CSS rules (using, for example, Paul Irish’s Conditional CSS Pattern) to translate the child nodes separately in IE.

  • 69 Thomas // Mar 8, 2012 at 10:12 pm

    This would be an alternative to web browser’s standard syntax’s if it had the “key-frame” option available.

  • 70 Raj Aggarwal // Apr 17, 2012 at 12:51 am

    hey i’m very impressed to show css3 examples

  • 71 Joern // Apr 23, 2012 at 4:04 am

    Hi,

    I found out, it is like Mangesh already wrote. Script will not work if you have empty “div {}” in your css. I removed them and now cssSandpaper.js works fine for me. Thank you so much for this

    kind regards
    Joern

  • 72 Arion // Apr 24, 2012 at 3:06 pm

    I love the concept. Have you considered putting the project on github? It would be a lot easier for people to contribute nitpicky browser bugs, which seems ideal for a project like this.

  • 73 Brenn // May 8, 2012 at 10:28 am

    It would be really helpful if you could put the CSS transform translation script into it’s own script. I need to sometimes convert on the fly (not just from static JS) between the two. E.g. for a user rotated object with jquery, to take the resulting matrix transform and convert it to an IE filter so that they can send it to their friends. That way I could just convert the matrix to a sandpaper matrix and then use the converter to apply those changes across browsers.

  • 74 zoltan // May 8, 2012 at 10:35 pm

    @Brenn: I am not sure, but do you mean something like my IE Transform Translator?

  • 75 zoltan // May 8, 2012 at 10:50 pm

    @Arion: cssSandpaper has been on GitHub for a while now. Please feel free to contribute and be as nitpicky as you want! The more eyes the better. :-)

  • 78 Dannesart // Sep 10, 2012 at 4:16 am

    Hi, csssandpaper is realy awesome!
    But I’ve encountered a problem with some kind of “Access is denied” problem.
    In cssSandpaper.js “req.open(httpMethod, url, isAsync);”
    Any idea?

  • 79 zoltan // Sep 10, 2012 at 10:16 pm

    @Dannesart: the CSS file has to be on the same domain as the HTML file. This is because cssSandpaper uses AJAX to grab the stylesheet in order to parse it.

  • 80 Rory Heaney // Dec 20, 2013 at 3:10 pm

    does the rotate option include rotateX or rotateY for example?

  • 81 zoltan // Jan 4, 2014 at 7:58 pm

    @Rory: No … cssSandpaper only supports 2D transforms, since IE’s Matrix Filter only supports it.

  • 82 Damien B // May 1, 2015 at 9:39 am

    Great Job! Thank you

    I can’t make it work in this case:
    a css style directly applied on a html element with with style=” … ” like this:


    <div style="-sand-transform: rotate(45deg) skewX(15deg);"> … </div>

    I don’t use an internal stylesheet in the html, but is it working in this case?

    And last point: rotateX and rotateY are not supported. However “rotateX(180deg)” and “rotateY(180deg)” are almost 2D functions. I see that it can be made with filter: “fliph”;-ms-filter:”fliph”; or filter: “flipv”;-ms-filter:”flipv”; It could be great if cssSandpaper could be included this 2 particular cases.

  • 83 zoltan // May 9, 2015 at 2:41 pm

    @DamienL Thanks for your kind words! Here are the answers to your questions:

    1. Unfortunately, cssSandpaper does not support inline styles. It may be considered for a future release, but since I have personally not had to support IE8 and lower for almost a year in my projects, it is not a huge priority for me, since I have other projects on the go and I have to allocate my time accordingly.
    2. rotateX() and rotateY() are not supported since they are technically 3D functions, and there is no way to support them using IE’s legacy visual filters in the general case. You could use scaleY(-1) instead of rotateX(180deg) and scaleX(-1) instead of rotateY(180deg). These are currently supported by CSS Sandpaper.

    Also, may I also point you to my other tool, the IE Transform Translator. It does a great job of doing transforms in IE8 and below without JavaScript (IE9 and above does 2D transforms natively).

    Hope this helps!

Give Feedback

Don't be shy! Give feedback and join the discussion.

Please Note: If you are asking for help using the information on this page or if you are reporting a bug with the code featured here, please include a URL that shows the problem you are experiencing along with the browser/version number/operating system combination where the issue manifests itself. Without this information, I may not be able to respond.

An orange star denotes a required field.