Permalink
Browse files

Removed -ms- prefix; help text improved

  • Loading branch information...
1 parent 70f9061 commit f934eaaca9c076c462b1e9d656397fec719cdd16 @impressivewebs committed Aug 26, 2012
Showing with 27 additions and 33 deletions.
  1. +8 −8 index.html
  2. +11 −25 js/general.js
  3. +8 −0 screen.css
View
@@ -38,11 +38,13 @@ <h2>Because You Should Only Have to Type it Once</h2>
<div class="top-box" id="helpContent">
- <p>The <a href="http://www.w3.org/TR/css3-animations/">CSS3 Animations Module</a> is still in the <a href="http://en.wikipedia.org/wiki/W3C_recommendation#Working_Draft_.28WD.29">working draft</a> stage. This means that in order to get the code to work, vendor prefixes are required.</p>
+ <p>The <a href="http://www.w3.org/TR/css3-animations/">CSS3 Animations Module</a> is still in the <a href="http://en.wikipedia.org/wiki/W3C_recommendation#Working_Draft_.28WD.29">working draft</a> stage. This means that in order to get the code to work in all browsers, vendor prefixes are required.</p>
- <p>After you write your code using <a href="http://www.webkit.org/blog/324/css-animation-2/">WebKit</a>, <a href="https://developer.mozilla.org/en/CSS/CSS_animations">Mozilla</a>, <a href="http://msdn.microsoft.com/en-us/ie/hh272902.aspx#_CSSAnimations">IE10</a>, or <a href="http://my.opera.com/ODIN/blog/hello-opera-12">Opera</a> syntax, use this tool to generate the necessary duplicate code with the appropriate vendor prefixes. The tool also adds the standard (prefix-less) syntax, declared last. If you don't want the standard syntax (which currently doesn't work in any browser), then just delete it.</p>
+ <p>After you write your code using <a href="http://www.webkit.org/blog/324/css-animation-2/">WebKit</a>, <a href="https://developer.mozilla.org/en/CSS/CSS_animations">Mozilla</a>, or <a href="http://my.opera.com/ODIN/blog/hello-opera-12">Opera</a> syntax, Animation Fill Code will generate the necessary duplicate code with the appropriate vendor prefixes. The tool also adds the standard (prefix-less) syntax, declared last.</p>
+
+ <p>The <code>-ms-</code> prefix is now removed from this tool. IE10 will support CSS3 animations <a href="http://blogs.msdn.com/b/ie/archive/2012/06/06/moving-the-stable-web-forward-in-ie10-release-preview.aspx">without prefixes</a> so the vendor prefix for IE is not needed for any code, even for backwards compatibility, since IE9 never supported it.</p>
- <p>Your starting code should be valid, working code that uses a single vendor prefix. The tool doesn't support starting with prefix-less syntax. <a href="http://caniuse.com/#search=animations">Browsers that support</a> keyframe animations currently include Chrome, Safari 4+, Firefox 5+, IE10+, Opera 12+, iOS Safari 3.2+, and Android Browser 2.1+.</p>
+ <p>Your starting code should be valid, working code that uses a single vendor prefix. The tool doesn't support starting with prefix-less syntax, but this will change when stable browsers start to support the prefix-less syntax. <a href="http://caniuse.com/#search=animations">Browsers that support</a> keyframe animations currently include Chrome, Safari 4+, Firefox 5+, IE10+, Opera 12+, iOS Safari 3.2+, and Android Browser 2.1+.</p>
<p>This tool was inspired by <a href="http://prefixr.com">Prefixr</a>, which you can use to add appropriate vendor prefixes for all sorts of CSS3 properties, including keyframe animations.</p>
@@ -60,9 +62,8 @@ <h2>Because You Should Only Have to Type it Once</h2>
<label>My Code Starts With:</label>
<input type="radio" name="startWith" value="webkit" id="radioWK"> <label for="radioWK"><code>-webkit-</code></label>
<input type="radio" name="startWith" value="moz" id="radioMOZ"> <label for="radioMOZ"><code>-moz-</code></label>
- <input type="radio" name="startWith" value="ms" id="radioMS"> <label for="radioMS"><code>-ms-</code></label>
<input type="radio" name="startWith" value="o" id="radioO"> <label for="radioO"><code>-o-</code></label>
- <textarea id="code" spellcheck="false">// try this code!
+ <textarea id="code" spellcheck="false">/* try this code! */
.element {
-webkit-animation: myanimation 10s 5;
@@ -78,8 +79,7 @@ <h2>Because You Should Only Have to Type it Once</h2>
bottom: 60px;
}
-}
-</textarea>
+}</textarea>
<!-- webkit bug: http://stackoverflow.com/questions/4461414/html5-placeholder-attribute-chrome-doesnt-line-wrap-in-textareas
@@ -102,7 +102,7 @@ <h2>Because You Should Only Have to Type it Once</h2>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-1.6.2.min.js"%3E%3C/script%3E'))</script>
-<script src="js/general.js?ver=2.4"></script>
+<script src="js/general.js?ver=2.6"></script>
<script>
var _gaq = [['_setAccount', 'UA-1965499-9'], ['_trackPageview']];
View
@@ -108,40 +108,31 @@ $(function () {
switch (s.startWith) {
case "webkit":
s.atValue1 = 'moz';
- s.atValue2 = 'ms';
- s.atValue3 = 'o';
+ s.atValue2 = 'o';
break;
case "moz":
s.atValue1 = 'webkit';
- s.atValue2 = 'ms';
- s.atValue3 = 'o';
- break;
-
- case "ms":
- s.atValue1 = 'webkit';
- s.atValue2 = 'moz';
- s.atValue3 = 'o';
+ s.atValue2 = 'o';
break;
case "o":
s.atValue1 = 'webkit';
s.atValue2 = 'moz';
- s.atValue3 = 'ms';
break;
+
default:
s.atValue1 = 'moz';
- s.atValue2 = 'ms';
- s.atValue3 = 'o';
+ s.atValue2 = 'o';
break;
}
- if ((s.currentValue.search("@-" + s.atValue1 + "-keyframes") === -1) && (s.currentValue.search("@-" + s.atValue2 + "-keyframes") === -1) && (s.currentValue.search("@-" + s.atValue3 + "-keyframes") === -1)) {
+ if ((s.currentValue.search("@-" + s.atValue1 + "-keyframes") === -1) && (s.currentValue.search("@-" + s.atValue2 + "-keyframes") === -1)) {
if (s.currentValue.search('keyframes') !== -1) {
if (s.currentValue.search('{') !== -1) {
- AnimationFillCode.doFill(s.field.val(), s.startWith, s.atValue1, s.atValue2, s.atValue3);
+ AnimationFillCode.doFill(s.field.val(), s.startWith, s.atValue1, s.atValue2);
} else {
AnimationFillCode.doErrorMsg(2);
s.field.addClass('bgerror');
@@ -158,7 +149,7 @@ $(function () {
}
},
- doFill: function (val, ven, ven1, ven2, ven3) {
+ doFill: function (val, ven, ven1, ven2) {
s = this.settings;
var i, j, k;
s.helpContent.slideUp(s.speed);
@@ -170,11 +161,9 @@ $(function () {
s.venStart = "-" + ven + "-";
s.ven1 = "-" + ven1 + "-";
s.ven2 = "-" + ven2 + "-";
- s.ven3 = "-" + ven3 + "-";
s.venStartRegEx = new RegExp("@" + s.venStart + "keyframes", "g");
s.ven1RegEx = "@" + s.ven1 + "keyframes";
s.ven2RegEx = "@" + s.ven2 + "keyframes";
- s.ven3RegEx = "@" + s.ven3 + "keyframes";
// complete code, broken up here
for (i = 0; i < s.myChunkCode.length; i += 1) {
@@ -184,7 +173,7 @@ $(function () {
s.myBrackets = s.myChunkCode[i].replace(/{/g, "||||{");
s.myBrackets = s.myBrackets.replace(/}/g, "||||}");
- s.myBrackets = s.myBrackets.split("||||");
+ s.myBrackets = s.myBrackets.split("||||");
for (j = 0; j < s.myBrackets.length; j += 1) {
@@ -199,17 +188,15 @@ $(function () {
if (s.myBrackets2[k].indexOf(s.venStart + "animation") !== -1) {
s.venProps1 += s.myBrackets2[k].replace(s.venStart + "animation", s.ven1 + "animation") + ";";
s.venProps2 += s.myBrackets2[k].replace(s.venStart + "animation", s.ven2 + "animation") + ";";
- s.venProps3 += s.myBrackets2[k].replace(s.venStart + "animation", s.ven3 + "animation") + ";";
s.venPropsS += s.myBrackets2[k].replace(s.venStart + "animation", "animation") + ";";
}
}
- s.myBrackets[j] = s.myBrackets[j] + s.venProps1.replace("{", "") + "\n" + s.venProps2.replace("{", "") + "\n" + s.venProps3.replace("{", "") + "\n" + s.venPropsS.replace("{", "") + "\n";
+ s.myBrackets[j] = s.myBrackets[j] + s.venProps1.replace("{", "") + "\n" + s.venProps2.replace("{", "") + "\n" + s.venPropsS.replace("{", "") + "\n";
s.venProps1 = "";
s.venProps2 = "";
- s.venProps3 = "";
s.venPropsS = "";
}
@@ -223,7 +210,6 @@ $(function () {
s.myAnimChunk = s.myChunkCode[i].replace(s.venStartRegEx, s.ven1RegEx);
s.myAnimChunk = s.myAnimChunk + "}\n\n}\n\n" + s.myChunkCode[i].replace(s.venStartRegEx, s.ven2RegEx);
- s.myAnimChunk = s.myAnimChunk + "}\n\n}\n\n" + s.myChunkCode[i].replace(s.venStartRegEx, s.ven3RegEx);
s.myAnimChunk = s.myAnimChunk + "}\n\n}\n\n" + s.myChunkCode[i].replace(s.venStartRegEx, "@keyframes");
s.myChunkCode[i] = s.myChunkCode[i] + "}\n\n}\n\n" + s.myAnimChunk;
@@ -232,8 +218,8 @@ $(function () {
}
s.complete = s.myChunkCode.join('');
-
- s.complete = s.complete.replace("// try this code!\n\n", "");
+
+ s.complete = s.complete.replace("/* try this code! */\n\n", "");
s.field.val(s.complete);
s.complete = "";
View
@@ -0,0 +1,8 @@
+/* line 1, C:/xampp/xampp/htdocs/animationfillcode.com/css/screen.scss */
+.element {
+ color: green;
+}
+/* line 4, C:/xampp/xampp/htdocs/animationfillcode.com/css/screen.scss */
+.element .element .new {
+ color: green;
+}

0 comments on commit f934eaa

Please sign in to comment.