-webkit-transition and webkit-transform vs. transition & transform at run time

Discussion in 'CSS Forum' started by hot_wired13, Apr 10, 2013.

  1. hot_wired13

    hot_wired13 New Member

    I'm going to give this full question so that there's a code context, but what I'm looking for is probably very simple.Here's the simple thing: Given a JQuery enabled webpage, running a script that will call something like: \[code\]foo.css("-webkit-transition-duration", (duration/1000).toFixed(1) + "s"); \[/code\]Is there a good way today to see if "-webkit-transition-duration" is the right version to use? Per CanIUse.com there is support for non-prefixed versions of this property and I'd like to create a cross-browser solution.In case more context is required:I'm working on a one-page design and using the following html pattern to create full-screen panels.\[code\]<nav role="navigation" class="nav"> <ul> <li class="selected" data-ref="1"> <a>1</a> </li> <li data-ref="2"> <a>2</a> </li> <li data-ref="3"> <a>3</a> </li> </ul> </nav> <div id="scene_1" class="scene"> <div data-picture="" data-alt="Green Moss on Branches of a Sambucus nigra"> <img alt="Green Moss on Branches of a Sambucus nigra" src="http://stackoverflow.com/images/mossy-branch/large.jpg"> <div data-src="http://stackoverflow.com/images/mossy-branch/small.jpg"></div> <div data-src="http://stackoverflow.com/images/mossy-branch/medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="http://stackoverflow.com/images/mossy-branch/medium_large.jpg" data-media="(min-width: 800px)"></div> <div data-src="http://stackoverflow.com/images/mossy-branch/large.jpg" data-media="(min-width: 1000px)"></div> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript> <img src="http://stackoverflow.com/images/mossy-branch/small.jpg" alt="Green Moss on Branches of a Sambucus nigra"> </noscript> </div> </div><div id="scene_2" class="scene"> <div data-picture="" data-alt="mossy trunks in a forest"> <img alt="mossy trunks in a forest" src="http://stackoverflow.com/images/trees/large.jpg"> <div data-src="http://stackoverflow.com/images/trees/small.jpg"></div> <div data-src="http://stackoverflow.com/images/trees/medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="http://stackoverflow.com/images/trees/medium_large.jpg" data-media="(min-width: 800px)"></div> <div data-src="http://stackoverflow.com/images/trees/large.jpg" data-media="(min-width: 1000px)"></div> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript> <img src="http://stackoverflow.com/images/trees/small.jpg" alt="mossy trunks in a forest"> </noscript> </div> </div>\[/code\]with the CSS as follows: (Note, this part is a work in progress, I'm still resolving a few pieces)\[code\]/*Get the Montserrat and Oxygen fonts from [email protected] url(http://fonts.googleapis.com/css?family=Montserrat:700|Oxygen:300);/* apply a natural box layout model to all elements *//* http://paulirish.com/2012/box-sizing-border-box-ftw/ */* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }.chromeframe { position: absolute; top: 0; }body, select, input, textarea { color: #443333; }a { color: #440044; }a:hover { color: #880088; }a:active { color: #fdd; }/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */::-moz-selection { background: #fcd700; color: #fff; text-shadow: none; }::selection { background: #FFF; color: #fff; text-shadow: none; }/* j.mp/webkit-tap-highlight-color */a:link { -webkit-tap-highlight-color: #fcd700; }ins { background-color: #fcd700; color: #000; text-decoration: none; }mark { background-color: #fcd700; color: #000; font-style: italic; font-weight: bold; }/* Mozilla dosen't style place holders by default */input:-moz-placeholder { color: #a9a9a9; }textarea:-moz-placeholder { color: #a9a9a9; }html { height: 100%; background-color: black; }body { width: 100%; height: 100%; margin: 0 auto; }/* Scenes are the individual pages, they are a div with two children; the first being the fitimage friendly picture for the backgroundthe other being the content branch, a div with appropriate children. */.scene { height: 100%; position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; } /*Chris Coyier's Full Screen backgrounds article */.scene img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 100%; min-height: 100%; z-index: 1; }.nav { position: fixed; text-align: center; z-index: 50; top: 0; bottom: 0; left: 0; margin: auto auto 1em auto; right: 0; height: 1.5em; }.nav li:before { content: attr(data-ref); position: absolute; width: 1rem; height: 2rem; padding: 0 .5em; top: -.25rem; left: -.3rem; background-color: white; border: thin solid black; opacity: .5; border-radius: 30%; box-shadow: inset 5px 4px 12px -3px #686; }.nav li { position: relative; display: inline; color: #242; padding: 0 .45em; margin: 0 .25em; font-size: 1.5em; line-height: 1.5; background: none; } .nav li:first-child { margin-right: .1em; }.nav li.selected:before { opacity: .7; } /* For the record, this is probably the most uncomfortable thing I've done in CSS in a long time, but I couldn't see a better solution */\[/code\]This is built on top of jquery.js and touchswipe, you can find an article for touchswipe at: http://www.awwwards.com/demo/touchSwipe-gallery-demo.htmland the contents for the functions.js file are as follows:\[code\]// remap jQuery to $(function($){/* trigger when page is ready */$(document).ready(function (){var scenes = $(".scene");scenes.swipe ( { triggerOnTouchEnd : true, swipeStatus : swipeStatus, allowPageScroll:"vertical"});function swipeStatus(event, phase, direction, distance, fingers){ } function scrollImages(distance, duration) { var support = $.support scenes.css("-webkit-transition-duration", (duration/1000).toFixed(1) + "s"); //inverse the number we set in the css var value = http://stackoverflow.com/questions/15915265/(distance<0 ?"" : "-") + Math.abs(distance).toString(); scenes.css("-webkit-transform", "translate3d("+value +"px,0px,0px)"); }});/*optional triggers$(window).load(function() {});$(window).resize(function() {});*/})(window.jQuery);\[/code\]As I said, really this comes down to one line of code: is scenes.css("-webkit-transition-duration", (duration/1000).toFixed(1) + "s"); carved in stone or is there a better way to do that to support non-prefixed solutions.I'm using prefixfree and modernizr for almost all of the browser compatibility issues, but I'm a little nervous about this issue of hard-coding a -webkit prefix into a code base that wants to support swipes and click on tablets phones and desktops.

Share This Page