{"id":1612,"date":"2010-09-12T23:25:23","date_gmt":"2010-09-13T03:25:23","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=1612"},"modified":"2011-05-14T00:37:08","modified_gmt":"2011-05-14T04:37:08","slug":"using-css3-style-transforms-in-ie-without-javascript","status":"publish","type":"post","link":"https:\/\/www.useragentman.com\/blog\/2010\/09\/12\/using-css3-style-transforms-in-ie-without-javascript\/","title":{"rendered":"Using CSS3-Style Transforms in IE Without<\/em> JavaScript"},"content":{"rendered":"

\"Screenshot<\/a>

Screenshot of the IE Transforms Translator in IE6. Click the image to see the translator in action.<\/p><\/div>When I posted my article on using cssSandpaper to do CSS Transforms in IE<\/a>, one of the comments I got via email was “I was excited when I heard about your post, but then I realized it uses JavaScript”. A few valid points were made:<\/p>\n

    \n
  1. cssSandpaper hides what IE is actually doing<\/li>\n
  2. cssSandpaper styled objects can sometimes have a little FOUC<\/a> (Flash of Unstyled Content)<\/li>\n
  3. The effects won’t work with JavaScript turned off.<\/li>\n
  4. “Why should I have my app load a script when I just want to do a few simple transformations?”<\/li>\n<\/ol>\n

    The IE Transforms Translator<\/a> was created to address these issues. Simply type any valid CSS3 transform code into it, along with the width and height, and it will give you the equivalent IE Visual Filter CSS code. Now anyone will be able to use CSS3-style Transformations in their web pages without using any JavaScript code (the tool does, however, use CSS Sandpaper<\/a> to generate the numbers that the Transform Translator uses in the IE specific CSS).<\/p>\n

    Are There Any Gotchas?<\/h2>\n

    Before inserting any of the IE Visual Filter code into your work, you should look at the IE Transform Translator documentation<\/a> which will explain the differences between CSS3 Transforms and the Matrix<\/code> filter and how to overcome them. <\/p>\n

    What Does This Mean for cssSandpaper<\/h2>\n

    Absolutely nothing — as a matter of fact, this tool was built using it. I just think it is a great idea to give developers different options. <\/p>\n

    Kudos<\/h2>\n

    This tool would not have been possible without the collaboration of Zoe Mickley Gillenwater<\/a>, who gave invaluable feedback on how the tool should work, came up with the tool’s front-end design and convinced me that the web development community would actually use such a tool (her new book, Stunning CSS3: A Project-based Guide to the Latest in CSS<\/a>, will soon be at a bookstore near you). The Translator also uses code from Weston Ruter<\/a>‘s webforms2 for browsers that don’t support HTML5 form validation, Dean Edwards’<\/a> IE7.js<\/a> to fix some IE layout issues as well as Andrew Johnson’s Smooth Scroll Script<\/a>. <\/p>\n

    Feedback Requested<\/h2>\n

    Please give any feedback on the tool below. I hope this is useful to other web developers, and would love to know if any there are any features you feel it is lacking.<\/p>\n

    Take a look at the IE Transforms Translator<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    The IE Transforms Translator<\/a> will allow you do Cross Browser CSS3-style Transformations without<\/em> using a JavaScript library like cssSandpaper<\/a>.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,38,41],"tags":[],"class_list":["post-1612","post","type-post","status-publish","format-standard","hentry","category-css","category-css3","category-transform"],"_links":{"self":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/1612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=1612"}],"version-history":[{"count":39,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/1612\/revisions"}],"predecessor-version":[{"id":3273,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/1612\/revisions\/3273"}],"wp:attachment":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=1612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=1612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=1612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}