Skip to content
This repository
Browse code

changed tabs to spaces; other updates

Fixed gradient syntax, word-wrap stuff, removed flexbox code example,
and a few other things I can't remember.
  • Loading branch information...
commit 9005ac8bf927c20ee9dc63c73fc003834bc187c0 1 parent 63c8d58
Louis Lazaris authored

Showing 64 changed files with 329 additions and 335 deletions. Show diff stats Hide diff stats

  1. +2 9 css/styles.css
  2. +26 0 includes/bsa.php
  3. +1 1  includes/common.php
  4. +29 29 includes/features/3d-transform/code.php
  5. +7 7 includes/features/background-clip/code.php
  6. +8 8 includes/features/background-origin/code.php
  7. +3 3 includes/features/background-size/code.php
  8. +4 4 includes/features/border-image/code.php
  9. +6 6 includes/features/border-radius/code.php
  10. +3 3 includes/features/box-shadow/code.php
  11. +5 5 includes/features/box-sizing/code.php
  12. +1 1  includes/features/box-sizing/description.php
  13. +3 2 includes/features/calc/code.php
  14. +2 2 includes/features/calc/support.php
  15. +2 2 includes/features/canvas-backgrounds/code.php
  16. +4 4 includes/features/currentcolor/code.php
  17. +2 2 includes/features/cursors/code.php
  18. +12 12 includes/features/exclusions/code.php
  19. +4 4 includes/features/filters/code.php
  20. +1 25 includes/features/flexbox/code.php
  21. +1 6 includes/features/flexbox/result.php
  22. +4 4 includes/features/flexbox/support.php
  23. +1 1  includes/features/font-face/code.php
  24. +3 3 includes/features/grid-layout/code.php
  25. +2 2 includes/features/hsla/code.php
  26. +4 4 includes/features/hyphenation/code.php
  27. +44 41 includes/features/keyframe-animations/code.php
  28. +7 8 includes/features/linear-gradient/code.php
  29. +1 1  includes/features/linear-gradient/support.php
  30. +5 5 includes/features/marquee/code.php
  31. +2 2 includes/features/masks/code.php
  32. +8 8 includes/features/media-queries/code.php
  33. +2 2 includes/features/multiple-backgrounds/code.php
  34. +16 16 includes/features/multiple-columns/code.php
  35. +1 1  includes/features/namespace/code.php
  36. +7 7 includes/features/object-fit-position/code.php
  37. +3 3 includes/features/opacity/code.php
  38. +1 1  includes/features/overflow-wrap/code.php
  39. +4 4 includes/features/paged-media/code.php
  40. +1 1  includes/features/pointer-events/code.php
  41. +4 5 includes/features/radial-gradient/code.php
  42. +1 1  includes/features/reflections/code.php
  43. +9 7 includes/features/regions/code.php
  44. +4 4 includes/features/rem-units/code.php
  45. +3 3 includes/features/resize/code.php
  46. +1 1  includes/features/rgba/code.php
  47. +5 5 includes/features/rotate-transform/code.php
  48. +5 5 includes/features/scale-transform/code.php
  49. +4 4 includes/features/selection-color/code.php
  50. +4 4 includes/features/shaders/code.php
  51. +5 5 includes/features/skew-transform/code.php
  52. +3 3 includes/features/space-round/code.php
  53. +3 3 includes/features/tab-size/code.php
  54. +2 2 includes/features/template-layout/code.php
  55. +5 5 includes/features/text-overflow/code.php
  56. +1 1  includes/features/text-shadow/code.php
  57. +6 6 includes/features/text-stroke/code.php
  58. +5 5 includes/features/transform-origin/code.php
  59. +7 7 includes/features/transitions/code.php
  60. +5 5 includes/features/translate-transform/code.php
  61. +1 1  includes/features/word-wrap/code.php
  62. +1 1  includes/features/word-wrap/description.php
  63. +1 1  includes/features/word-wrap/technical.php
  64. +2 2 index.php
11 css/styles.css
@@ -574,7 +574,6 @@ header {
574 574 transition: opacity .5s ease;
575 575 background: #bb4c1a;
576 576 background: -moz-linear-gradient(#bb4c1a 0%, #bb4c1a 45%, #ac3600 55%, #ac3600 100%); /* FF 3.6+ */
577   - background: -ms-linear-gradient(#bb4c1a 0%, #bb4c1a 45%, #ac3600 55%, #ac3600 100%); /* IE10 */
578 577 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bb4c1a), color-stop(45%, #bb4c1a), color-stop(55%, #ac3600), color-stop(100%, #ac3600)); /* Safari 4+, Chrome 2+ */
579 578 background: -webkit-linear-gradient(#bb4c1a 0%, #bb4c1a 45%, #ac3600 55%, #ac3600 100%); /* Safari 5.1+, Chrome 10+ */
580 579 background: -o-linear-gradient(#bb4c1a 0%, #bb4c1a 45%, #ac3600 55%, #ac3600 100%); /* Opera 11.10 */
@@ -767,6 +766,7 @@ header {
767 766 width: 270px;
768 767 overflow: hidden;
769 768 border: none;
  769 + padding-bottom: 3px;
770 770 }
771 771
772 772 .ap-link:link, .ap-link:visited {
@@ -775,14 +775,6 @@ header {
775 775 right: 10px;
776 776 }
777 777
778   - .one .bsa_it_p a {
779   - display: none;
780   - }
781   -
782   - .bsa_it_ad a {
783   - display: block;
784   - }
785   -
786 778 .code {
787 779 width: 1066px;
788 780 height: 110px;
@@ -1350,6 +1342,7 @@ pre.code {
1350 1342
1351 1343 .result-calc {
1352 1344 width: 70%;
  1345 + width: -webkit-calc(70% - 50px);
1353 1346 width: -moz-calc(70% - 50px);
1354 1347 width: calc(70% - 50px);
1355 1348 margin: 20px auto;
26 includes/bsa.php
@@ -8,6 +8,24 @@
8 8 margin: 0;
9 9 padding: 0;
10 10 }
  11 +
  12 + .bsa_it_ad a {
  13 + display: block;
  14 + }
  15 +
  16 + .bsa_it_p a {
  17 + display: none;
  18 + }
  19 +
  20 + .extbsa {
  21 + font-size: 10px;
  22 + color: #666;
  23 + text-decoration: none;
  24 + position: absolute;
  25 + bottom: 6px;
  26 + right: 14px;
  27 + z-index: 10;
  28 + }
11 29 </style>
12 30 </head>
13 31 <body>
@@ -19,6 +37,13 @@
19 37 bsa.async = true;
20 38 bsa.src = 'http://s3.buysellads.com/ac/bsa.js';
21 39 (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
  40 +
  41 + var extBSA = document.createElement('a');
  42 + extBSA.href = 'http://buysellads.com/buy/detail/144086/zone/1277044?utm_source=site_144086&utm_medium=website&utm_campaign=imagetext&utm_content=zone_1277044';
  43 + extBSA.target = '_blank';
  44 + extBSA.className = 'extbsa';
  45 + extBSA.innerHTML = "ads by BSA";
  46 + document.getElementsByTagName('body')[0].appendChild(extBSA);
22 47 })();
23 48 </script>
24 49 <!-- End BuySellAds Ad Code -->
@@ -26,5 +51,6 @@
26 51 <!-- BuySellAds Zone Code -->
27 52 <div id="bsap_1277044" class="bsarocks bsap_c39a163a3eecd8aadac62be710ab632f"></div>
28 53 <!-- End BuySellAds Zone Code -->
  54 +
29 55 </body>
30 56 </html>
2  includes/common.php
... ... @@ -1,7 +1,7 @@
1 1 <li><a href="?prop=box-sizing">box sizing</a></li>
2 2 <li><a href="?prop=hsla">hsla colors</a></li>
3 3 <li><a href="?prop=text-shadow">text shadow</a></li>
4   -<li><a href="?prop=word-wrap">word wrap *</a></li>
  4 +<li><a href="?prop=word-wrap">word wrap</a></li>
5 5 <li><a href="?prop=rgba">rgba colors</a></li>
6 6 <li><a href="?prop=translate-transform">translate</a></li>
7 7
58 includes/features/3d-transform/code.php
... ... @@ -1,33 +1,33 @@
1 1 .object {
2   - -webkit-perspective: 300;
3   - -webkit-transform-style: preserve-3d;
4   - -moz-perspective: 300;
5   - -moz-transform-style: preserve-3d;
6   - -ms-perspective: 300;
7   - -ms-transform-style: preserve-3d;
8   - perspective: 300;
9   - transform-style: preserve-3d;
  2 + -webkit-perspective: 300;
  3 + -webkit-transform-style: preserve-3d;
  4 + -moz-perspective: 300;
  5 + -moz-transform-style: preserve-3d;
  6 + -ms-perspective: 300;
  7 + -ms-transform-style: preserve-3d;
  8 + perspective: 300;
  9 + transform-style: preserve-3d;
10 10 }
11 11
12   - .card {
13   - -webkit-transition: -webkit-transform 1s linear;
14   - -moz-transition: -moz-transform 1s linear;
15   - -ms-transition: -ms-transform 1s linear;
16   - -o-transition: -o-transform 1s linear;
17   - transition: transform 1s linear;
18   - }
  12 + .card {
  13 + -webkit-transition: -webkit-transform 1s linear;
  14 + -moz-transition: -moz-transform 1s linear;
  15 + -ms-transition: -ms-transform 1s linear;
  16 + -o-transition: -o-transform 1s linear;
  17 + transition: transform 1s linear;
  18 + }
19 19
20   - .cfront {
21   - -webkit-backface-visibility: hidden;
22   - -moz-backface-visibility: hidden;
23   - -ms-backface-visibility: hidden;
24   - backface-visibility: hidden;
25   - }
26   -
27   - .flipped {
28   - -webkit-transform: rotateY(180deg);
29   - -moz-transform: rotateY(180deg);
30   - -ms-transform: rotateY(180deg);
31   - -o-transform: rotateY(180deg);
32   - transform: rotateY(180deg);
33   - }
  20 + .cfront {
  21 + -webkit-backface-visibility: hidden;
  22 + -moz-backface-visibility: hidden;
  23 + -ms-backface-visibility: hidden;
  24 + backface-visibility: hidden;
  25 + }
  26 +
  27 + .flipped {
  28 + -webkit-transform: rotateY(180deg);
  29 + -moz-transform: rotateY(180deg);
  30 + -ms-transform: rotateY(180deg);
  31 + -o-transform: rotateY(180deg);
  32 + transform: rotateY(180deg);
  33 + }
14 includes/features/background-clip/code.php
... ... @@ -1,9 +1,9 @@
1 1 .element {
2   - background: #d78965;
3   - padding: 30px;
4   - -webkit-background-clip: content-box;
5   - -moz-background-clip: content-box;
6   - -o-background-clip: content-box;
7   - -ms-background-clip: content-box;
8   - background-clip: content-box; /* border-box, padding-box */
  2 + background: #d78965;
  3 + padding: 30px;
  4 + -webkit-background-clip: content-box;
  5 + -moz-background-clip: content-box;
  6 + -o-background-clip: content-box;
  7 + -ms-background-clip: content-box;
  8 + background-clip: content-box; /* border-box, padding-box */
9 9 }
16 includes/features/background-origin/code.php
... ... @@ -1,10 +1,10 @@
1 1 .element {
2   - background: #d78965;
3   - border: solid 1px white;
4   - -webkit-background-origin: content-box;
5   - -moz-background-origin: content-box;
6   - -o-background-origin: content-box;
7   - -ms-background-origin: content-box;
8   - background-clip: content-box; /* padding box, border-box */
9   - padding: 30px;
  2 + background: #d78965;
  3 + border: solid 1px white;
  4 + -webkit-background-origin: content-box;
  5 + -moz-background-origin: content-box;
  6 + -o-background-origin: content-box;
  7 + -ms-background-origin: content-box;
  8 + background-clip: content-box; /* padding box, border-box */
  9 + padding: 30px;
10 10 }
6 includes/features/background-size/code.php
... ... @@ -1,5 +1,5 @@
1 1 .element {
2   - background: url(images/example.png) center center no-repeat;
3   - -moz-background-size: 100% 100%;
4   - background-size: 100% 100%;
  2 + background: url(images/example.png) center center no-repeat;
  3 + -moz-background-size: 100% 100%;
  4 + background-size: 100% 100%;
5 5 }
8 includes/features/border-image/code.php
... ... @@ -1,6 +1,6 @@
1 1 .element {
2   - border-width: 20px;
3   - -webkit-border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
4   - -moz-border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
5   - border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
  2 + border-width: 20px;
  3 + -webkit-border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
  4 + -moz-border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
  5 + border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
6 6 }
12 includes/features/border-radius/code.php
... ... @@ -1,11 +1,11 @@
1 1 .element {
2   - -webkit-border-radius: 10px 11px 12px 13px;
3   - -moz-border-radius: 10px 11px 12px 13px;
4   - border-radius: 10px 11px 12px 13px;
  2 + -webkit-border-radius: 10px 11px 12px 13px;
  3 + -moz-border-radius: 10px 11px 12px 13px;
  4 + border-radius: 10px 11px 12px 13px;
5 5 }
6 6
7 7 .element2 {
8   - -webkit-border-radius: 10px;
9   - -moz-border-radius: 10px;
10   - border-radius: 10px;
  8 + -webkit-border-radius: 10px;
  9 + -moz-border-radius: 10px;
  10 + border-radius: 10px;
11 11 }
6 includes/features/box-shadow/code.php
... ... @@ -1,5 +1,5 @@
1 1 .element {
2   - -webkit-box-shadow: #000 5px 5px 10px 3px inset;
3   - -moz-box-shadow: #000 10px 10px 10px 3px inset; /* color, h-offset, v-offset, blur, spread */
4   - box-shadow: #000 10px 10px 10px 3px inset; /* inset is optional */
  2 + -webkit-box-shadow: #000 5px 5px 10px 3px inset;
  3 + -moz-box-shadow: #000 10px 10px 10px 3px inset; /* color, h-offset, v-offset, blur, spread */
  4 + box-shadow: #000 10px 10px 10px 3px inset; /* inset is optional */
5 5 }
10 includes/features/box-sizing/code.php
... ... @@ -1,7 +1,7 @@
1 1 .element {
2   - width: 200px;
3   - padding: 0 30px;
4   - -webkit-box-sizing: border-box; /* content-box */
5   - -moz-box-sizing: border-box;
6   - box-sizing: border-box;
  2 + width: 200px;
  3 + padding: 0 30px;
  4 + -webkit-box-sizing: border-box; /* content-box */
  5 + -moz-box-sizing: border-box;
  6 + box-sizing: border-box;
7 7 }
2  includes/features/box-sizing/description.php
... ... @@ -1 +1 @@
1   -Allows you to change the way the browser calculates the width of an element, that is, whether or not to include padding, borders, and margins, in the width or height calculation.
  1 +Allows you to change how the browser calculates the width of an element, that is, whether or not to include padding, borders, and margins, in the width or height calculation.
5 includes/features/calc/code.php
... ... @@ -1,4 +1,5 @@
1 1 .element {
2   - width: -moz-calc(100% + 20px);
3   - width: calc(100% + 20px);
  2 + width: -webkit-calc(100% + 20px);
  3 + width: -moz-calc(100% + 20px);
  4 + width: calc(100% + 20px);
4 5 }
4 includes/features/calc/support.php
... ... @@ -1,5 +1,5 @@
1 1 <p><strong>Standard Syntax:</strong><br>
2   -IE9+</p>
  2 +IE9+, Firefox 16+</p>
3 3
4 4 <p><strong>Vendor Prefix:</strong><br>
5   -Firefox 4+</p>
  5 +Firefox 4+, Chrome 19+, Safari 6+</p>
4 includes/features/canvas-backgrounds/code.php
... ... @@ -1,4 +1,4 @@
1 1 .element {
2   - background: -webkit-canvas(mycanvas);
3   - background: -moz-element(mycanvas);
  2 + background: -webkit-canvas(mycanvas);
  3 + background: -moz-element(mycanvas);
4 4 }
8 includes/features/currentcolor/code.php
... ... @@ -1,7 +1,7 @@
1 1 .parent {
2   - color: lightgreen;
  2 + color: lightgreen;
3 3 }
4 4
5   - .child {
6   - background-color: currentColor;
7   - }
  5 + .child {
  6 + background-color: currentColor;
  7 + }
4 includes/features/cursors/code.php
... ... @@ -1,7 +1,7 @@
1 1 .element:hover {
2   - cursor: none;
  2 + cursor: none;
3 3 }
4 4
5 5 .element2:hover {
6   - cursor: context-menu;
  6 + cursor: context-menu;
7 7 }
24 includes/features/exclusions/code.php
... ... @@ -1,20 +1,20 @@
1 1 .element {
2   - display: -ms-grid;
  2 + display: -ms-grid;
3 3 }
4 4
5 5 .exclusion {
6   - -ms-grid-row: 2;
7   - -ms-grid-column: 2;
8   - background-color: lime;
9   - -ms-wrap-side: both;
10   - float: -ms-positioned;
11   - padding: 10px;
12   - -ms-wrap-margin: 15px;
  6 + -ms-grid-row: 2;
  7 + -ms-grid-column: 2;
  8 + background-color: lime;
  9 + -ms-wrap-side: both;
  10 + float: -ms-positioned;
  11 + padding: 10px;
  12 + -ms-wrap-margin: 15px;
13 13 }
14 14
15 15 .inline-text {
16   - -ms-grid-row: 1;
17   - -ms-grid-column: 1;
18   - -ms-grid-column-span: 3;
19   - -ms-grid-row-span: 3;
  16 + -ms-grid-row: 1;
  17 + -ms-grid-column: 1;
  18 + -ms-grid-column-span: 3;
  19 + -ms-grid-row-span: 3;
20 20 }
8 includes/features/filters/code.php
... ... @@ -1,15 +1,15 @@
1 1 .element {
2   - -webkit-filter: hue-rotate(80deg);
  2 + -webkit-filter: hue-rotate(80deg);
3 3 }
4 4
5 5 .element2 {
6   - -webkit-filter: blur(3px);
  6 + -webkit-filter: blur(3px);
7 7 }
8 8
9 9 .element3 {
10   - -webkit-filter: sepia(80%);
  10 + -webkit-filter: sepia(80%);
11 11 }
12 12
13 13 .element4 {
14   - -webkit-filter: grayscale(100%);
  14 + -webkit-filter: grayscale(100%);
15 15 }
26 includes/features/flexbox/code.php
... ... @@ -1,25 +1 @@
1   -.element {
2   - /*lines below are the old syntax */
3   - display: -webkit-box;
4   - -webkit-box-pack: justify;
5   - -webkit-box-align: center;
6   - display: -moz-box;
7   - -moz-box-pack: justify;
8   - -moz-box-align: center;
9   - display: -ms-box;
10   - -ms-box-pack: justify;
11   - -ms-box-align: center;
12   -
13   - /* lines below are the new syntax */
14   - display: flexbox;
15   - flex-pack: justify;
16   - flex-align: center;
17   -}
18   -
19   - .child-boxes {
20   - -webkit-box-flex: 1;
21   - -moz-box-flex: 1;
22   - -ms-box-flex: 1;
23   - width: -webkit-flex(1);
24   - width: flex(1);
25   - }
  1 +/ * the spec has changed; code will be updated */
7 includes/features/flexbox/result.php
... ... @@ -1,6 +1 @@
1   -<p class="result-text">The boxes below are distributed evenly across their parent.</p>
2   -<div class="result-flexbox">
3   - <div class="box"></div>
4   - <div class="box"></div>
5   - <div class="box"></div>
6   -</div>
  1 +<p class="result-text">N/A</p>
8 includes/features/flexbox/support.php
... ... @@ -1,8 +1,8 @@
1 1 <p><strong>New Standard Syntax:</strong><br>
2 2 No support</p>
3 3
4   -<p><strong>Old Vendor Syntax:</strong><br>
5   -IE10+, Firefox 2+, Chrome 4+, Safari 3.1+</p>
6   -
7 4 <p><strong>New Vendor Syntax:</strong><br>
8   -Firefox 7+, Chrome 17+, Safari 5.1</p>
  5 +Firefox 7+, Chrome 17+, Safari 5.1</p>
  6 +
  7 +<p><strong>Old Vendor Syntax:</strong><br>
  8 +IE10+, Firefox 2+, Chrome 4+, Safari 3.1+</p>
2  includes/features/font-face/code.php
@@ -10,5 +10,5 @@
10 10 }
11 11
12 12 h1 {
13   - font-family: 'Font Name', 'fallback font', serif;
  13 + font-family: 'Font Name', 'fallback font', serif;
14 14 }
6 includes/features/grid-layout/code.php
... ... @@ -1,5 +1,5 @@
1 1 .element {
2   - display: -ms-grid;
3   - -ms-grid-columns: auto 100px 1fr 2fr;
4   - -ms-grid-rows: 50px 5em auto;
  2 + display: -ms-grid;
  3 + -ms-grid-columns: auto 100px 1fr 2fr;
  4 + -ms-grid-rows: 50px 5em auto;
5 5 }
4 includes/features/hsla/code.php
... ... @@ -1,7 +1,7 @@
1 1 .element {
2   - background: hsl(207, 38%, 47%);
  2 + background: hsl(207, 38%, 47%);
3 3 }
4 4
5 5 .element2 {
6   - background: hsla(207, 38%, 47%, .8);
  6 + background: hsla(207, 38%, 47%, .8);
7 7 }
8 includes/features/hyphenation/code.php
... ... @@ -1,6 +1,6 @@
1 1 .element {
2   - -webkit-hyphens: auto;
3   - -moz-hyphens: auto;
4   - -ms-hyphens: auto;
5   - hyphens: auto; /* or "manual" */
  2 + -webkit-hyphens: auto;
  3 + -moz-hyphens: auto;
  4 + -ms-hyphens: auto;
  5 + hyphens: auto; /* or "manual" */
6 6 }
85 includes/features/keyframe-animations/code.php
... ... @@ -1,58 +1,61 @@
1 1 .result-animations {
2   - -webkit-animation-name: bounceball;
3   - -webkit-animation-duration: 1s;
4   - -webkit-animation-iteration-count: infinite;
5   - -webkit-animation-direction: alternate;
6   - -webkit-animation-delay: 0;
7   - -webkit-animation-play-state: running;
8   - -webkit-animation-fill-mode: none;
9   -
10   - -moz-animation-name: bounceball;
11   - -moz-animation-duration: 1s;
12   - -moz-animation-iteration-count: infinite;
13   - -moz-animation-direction: alternate;
14   - -moz-animation-delay: 0;
15   - -moz-animation-play-state: running;
16   - -moz-animation-fill-mode: none;
17   -
18   - animation-name: bounceball;
19   - animation-duration: 1s;
20   - animation-iteration-count: infinite;
21   - animation-direction: alternate;
22   - animation-delay: 0;
23   - animation-play-state: running;
24   - animation-fill-mode: none;
  2 + -webkit-animation-name: bounceball;
  3 + -webkit-animation-duration: 1s;
  4 + -webkit-animation-iteration-count: infinite;
  5 + -webkit-animation-direction: alternate;
  6 + -webkit-animation-delay: 0;
  7 + -webkit-animation-play-state: running;
  8 + -webkit-animation-fill-mode: none;
  9 +
  10 + -moz-animation-name: bounceball;
  11 + -moz-animation-duration: 1s;
  12 + -moz-animation-iteration-count: infinite;
  13 + -moz-animation-direction: alternate;
  14 + -moz-animation-delay: 0;
  15 + -moz-animation-play-state: running;
  16 + -moz-animation-fill-mode: none;
  17 +
  18 + animation-name: bounceball;
  19 + animation-duration: 1s;
  20 + animation-iteration-count: infinite;
  21 + animation-direction: alternate;
  22 + animation-delay: 0;
  23 + animation-play-state: running;
  24 + animation-fill-mode: none;
25 25 }
26 26
27 27 @-webkit-keyframes bounceball {
28   - from {
29   - bottom: 0;
30   - }
31 28
32   - to {
33   - bottom: 60px;
34   - }
  29 + from {
  30 + bottom: 0;
  31 + }
  32 +
  33 + to {
  34 + bottom: 60px;
  35 + }
35 36
36 37 }
37 38
38 39 @-moz-keyframes bounceball {
39   - from {
40   - bottom: 0;
41   - }
42 40
43   - to {
44   - bottom: 60px;
45   - }
  41 + from {
  42 + bottom: 0;
  43 + }
  44 +
  45 + to {
  46 + bottom: 60px;
  47 + }
46 48
47 49 }
48 50
49 51 @keyframes bounceball {
50   - from {
51   - bottom: 0;
52   - }
53 52
54   - to {
55   - bottom: 60px;
56   - }
  53 + from {
  54 + bottom: 0;
  55 + }
  56 +
  57 + to {
  58 + bottom: 60px;
  59 + }
57 60
58 61 }
15 includes/features/linear-gradient/code.php
... ... @@ -1,10 +1,9 @@
1 1 .element {
2   - background-image: -moz-linear-gradient(top, #000000, #ffffff); /* FF3.6 */
3   - background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(1, #ffffff)); /* Safari 4+, Chrome 2+ */
4   - background-image: -webkit-linear-gradient(top, #000000, #ffffff); /* Safari 5.1+, Chrome 10+ */
5   - background-image: -o-linear-gradient(top, #000000, #ffffff); /* Opera 11.1+ */
6   - background-image: -ms-linear-gradient(top, #000000, #ffffff); /* IE10+ */
7   - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6,IE7 */
8   - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
9   - background-image: linear-gradient(top, #000000, #ffffff);
  2 + background-image: -moz-linear-gradient(top, #000000, #ffffff); /* FF3.6 */
  3 + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(1, #ffffff)); /* Safari 4+, Chrome 2+ */
  4 + background-image: -webkit-linear-gradient(top, #000000, #ffffff); /* Safari 5.1+, Chrome 10+ */
  5 + background-image: -o-linear-gradient(top, #000000, #ffffff); /* Opera 11.1+ */
  6 + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6,IE7 */
  7 + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
  8 + background-image: linear-gradient(to bottom, #000000, #ffffff);
10 9 }
2  includes/features/linear-gradient/support.php
@@ -8,4 +8,4 @@
8 8 IE10+, Firefox 3.6+, Chrome 10+, Safari 5.1+, Opera 11.6+</p>
9 9
10 10 <p><strong>Ultra-Old Vendor Syntax:</strong><br>
11   -Chrome 4 - 9, Safari 4 - 5</p>
  11 +Chrome 4 - 9, Safari 4 - 5</p>
10 includes/features/marquee/code.php
... ... @@ -1,7 +1,7 @@
1 1 .element {
2   - overflow-style: marquee-line;
3   - marquee-style: slide;
4   - marquee-play-count: infinite;
5   - marquee-direction: forward;
6   - marquee-speed: slow;
  2 + overflow-style: marquee-line;
  3 + marquee-style: slide;
  4 + marquee-play-count: infinite;
  5 + marquee-direction: forward;
  6 + marquee-speed: slow;
7 7 }
4 includes/features/masks/code.php
... ... @@ -1,4 +1,4 @@
1 1 .element {
2   - background: url(../images/compass.png);
3   - -webkit-mask-image: -webkit-linear-gradient(black 0%, black 9%, transparent 10%, transparent 19%, black 20%, black 29%, transparent 30%, transparent 39%, black 40%, black 49%, transparent 50%, transparent 59%, black 60%, black 69%, transparent 70%, transparent 79%, black 80%, black 89%, transparent 90%, transparent 99%, black 100%);
  2 + background: url(../images/compass.png);
  3 + -webkit-mask-image: -webkit-linear-gradient(black 0%, black 9%, transparent 10%, transparent 19%, black 20%, black 29%, transparent 30%, transparent 39%, black 40%, black 49%, transparent 50%, transparent 59%, black 60%, black 69%, transparent 70%, transparent 79%, black 80%, black 89%, transparent 90%, transparent 99%, black 100%);
4 4 }
16 includes/features/media-queries/code.php
... ... @@ -1,15 +1,15 @@
1 1 @media (max-width: 900px) {
2   -
3   - .element {
4   - background: #bada55;
5   - }
  2 +
  3 + .element {
  4 + background: #bada55;
  5 + }
6 6
7 7 }
8 8
9 9 @media (max-width: 480px) {
10   -
11   - .element {
12   - background: #d78965;
13   - }
  10 +
  11 + .element {
  12 + background: #d78965;
  13 + }
14 14
15 15 }
4 includes/features/multiple-backgrounds/code.php
... ... @@ -1,4 +1,4 @@
1 1 .element {
2   - background: url(images/example.png) center center no-repeat,
3   - url(images/example-2.png) top left repeat;
  2 + background: url(images/example.png) center center no-repeat,
  3 + url(images/example-2.png) top left repeat;
4 4 }
32 includes/features/multiple-columns/code.php
... ... @@ -1,18 +1,18 @@
1 1 .element {
2   - -webkit-column-count: 3;
3   - -webkit-column-width: 75px;
4   - -webkit-column-gap: 20px;
5   - -webkit-column-rule: 1px solid #fff;
6   - -moz-column-count: 3;
7   - -moz-column-width: 75px;
8   - -moz-column-gap: 20px;
9   - -moz-column-rule: 1px solid #fff;
10   - -o-column-count: 3;
11   - -o-column-width: 75px;
12   - -o-column-gap: 20px;
13   - -o-column-rule: 1px solid #fff;
14   - column-count: 3;
15   - column-width: 75px;
16   - column-gap: 20px;
17   - column-rule: 1px solid #fff;
  2 + -webkit-column-count: 3;
  3 + -webkit-column-width: 75px;
  4 + -webkit-column-gap: 20px;
  5 + -webkit-column-rule: 1px solid #fff;
  6 + -moz-column-count: 3;
  7 + -moz-column-width: 75px;
  8 + -moz-column-gap: 20px;
  9 + -moz-column-rule: 1px solid #fff;
  10 + -o-column-count: 3;
  11 + -o-column-width: 75px;
  12 + -o-column-gap: 20px;
  13 + -o-column-rule: 1px solid #fff;
  14 + column-count: 3;
  15 + column-width: 75px;
  16 + column-gap: 20px;
  17 + column-rule: 1px solid #fff;
18 18 }
2  includes/features/namespace/code.php
@@ -2,5 +2,5 @@
2 2 @namespace svg "http://www.w3.org/2000/svg";
3 3
4 4 svg|p {
5   - color: hotpink;
  5 + color: hotpink;
6 6 }
14 includes/features/object-fit-position/code.php
... ... @@ -1,9 +1,9 @@
1 1 img {
2   - width: 140px;
3   - height: 100px;
4   - border: solid 1px white;
5   - -o-object-fit: cover;
6   - -o-object-position: top center;
7   - object-fit: cover;
8   - object-position: top center;
  2 + width: 140px;
  3 + height: 100px;
  4 + border: solid 1px white;
  5 + -o-object-fit: cover;
  6 + -o-object-position: top center;
  7 + object-fit: cover;
  8 + object-position: top center;
9 9 }
6 includes/features/opacity/code.php
... ... @@ -1,5 +1,5 @@
1 1 .element {
2   - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* for IE8 in IE7 mode */
3   - filter: alpha(opacity=40); /* for IE6-IE8 */
4   - opacity: .4;
  2 + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* for IE8 in IE7 mode */
  3 + filter: alpha(opacity=40); /* for IE6-IE8 */
  4 + opacity: .4;
5 5 }
2  includes/features/overflow-wrap/code.php
... ... @@ -1,3 +1,3 @@
1 1 .element2 {
2   - overflow-wrap: break-word; /* or "normal" */
  2 + overflow-wrap: break-word; /* or "normal" */
3 3 }
8 includes/features/paged-media/code.php
... ... @@ -1,8 +1,8 @@
1 1 @media -o-paged {
2 2
3   - html {
4   - height: 100%;
5   - overflow: -o-paged-x;
6   - }
  3 + html {
  4 + height: 100%;
  5 + overflow: -o-paged-x;
  6 + }
7 7
8 8 }
2  includes/features/pointer-events/code.php
... ... @@ -1,3 +1,3 @@
1 1 .element {
2   - pointer-events: visibleFill;
  2 + pointer-events: visibleFill;
3 3 }
9 includes/features/radial-gradient/code.php
... ... @@ -1,7 +1,6 @@
1 1 .element {
2   - background-image: -webkit-gradient(radial, center center, 10, center center, 70, from(#fff), to(#000)); /* for older webkit */
3   - background-image: -webkit-radial-gradient(center center, circle closest-corner, #fff 10%, #000 70%);
4   - background-image: -moz-radial-gradient(center center, circle closest-corner, #d85e0c 10%, #f39454 70%);
5   - background-image: -ms-radial-gradient(center center, circle closest-corner, #fff 10%, #000 70%);
6   - background-image: radial-gradient(center center, circle closest-corner, #fff 10%, #000 70%);
  2 + background-image: -webkit-gradient(radial, center center, 10, center center, 70, from(#fff), to(#000)); /* for older webkit */
  3 + background-image: -webkit-radial-gradient(center center, circle closest-corner, #fff 10%, #000 70%);
  4 + background-image: -moz-radial-gradient(center center, circle closest-corner, #d85e0c 10%, #f39454 70%);
  5 + background-image: radial-gradient(center center, circle closest-corner, #fff 10%, #000 70%);
7 6 }
2  includes/features/reflections/code.php
... ... @@ -1,3 +1,3 @@
1 1 .element {
2   - -webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3)));
  2 + -webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3)));
3 3 }
16 includes/features/regions/code.php
... ... @@ -1,15 +1,17 @@
1 1 .element {
2   - -ms-flow-into: flow1;
3   - -webkit-flow-into: flow1;
  2 + -ms-flow-into: flow1;
  3 + -webkit-flow-into: flow1;
4 4 }
5 5
6 6 .element2 {
7   - -ms-flow-from: flow1;
8   - -webkit-flow-from: flow1;
  7 + -ms-flow-from: flow1;
  8 + -webkit-flow-from: flow1;
9 9 }
10 10
11 11 @region .element2 {
12   - p {
13   - color: blue;
14   - }
  12 +
  13 + p {
  14 + color: blue;
  15 + }
  16 +
15 17 }
8 includes/features/rem-units/code.php
... ... @@ -1,7 +1,7 @@
1 1 html {
2   - font-size: 20px;
  2 + font-size: 20px;
3 3 }
4 4
5   - p {
6   - font-size: 1.5rem;
7   - }
  5 + p {
  6 + font-size: 1.5rem;
  7 + }
6 includes/features/resize/code.php
... ... @@ -1,5 +1,5 @@
1 1 .element {
2   - overflow: hidden; /* must be "hidden", "scroll", or "auto" */
3   - -moz-resize: both; /* for Firefox 4+ */
4   - resize: both; /* can also be "none", "horizontal", or "vertical" */
  2 + overflow: hidden; /* must be "hidden", "scroll", or "auto" */
  3 + -moz-resize: both; /* for Firefox 4+ */
  4 + resize: both; /* can also be "none", "horizontal", or "vertical" */
5 5 }
2  includes/features/rgba/code.php
... ... @@ -1,3 +1,3 @@
1 1 .element {
2   - background: rgba(98, 135, 167, .5);
  2 + background: rgba(98, 135, 167, .5);
3 3 }
10 includes/features/rotate-transform/code.php
... ... @@ -1,7 +1,7 @@
1 1 .element {
2   - -webkit-transform: rotate(-5deg);
3   - -moz-transform: rotate(-5deg);
4   - -o-transform: rotate(-5deg);
5   - -ms-transform: rotate(-5deg);
6   - transform: rotate(-5deg);
  2 + -webkit-transform: rotate(-5deg);
  3 + -moz-transform: rotate(-5deg);
  4 + -o-transform: rotate(-5deg);
  5 + -ms-transform: rotate(-5deg);
  6 + transform: rotate(-5deg);
7 7 }
10 includes/features/scale-transform/code.php
... ... @@ -1,7 +1,7 @@
1 1 .element {
2   - -webkit-transform: scale(.8);
3   - -moz-transform: scale(.8);
4   - -o-transform: scale(.8);
5   - -ms-transform: scale(.8);
6   - transform: scale(.8);
  2 + -webkit-transform: scale(.8);
  3 + -moz-transform: scale(.8);
  4 + -o-transform: scale(.8);
  5 + -ms-transform: scale(.8);
  6 + transform: scale(.8);
7 7 }
8 includes/features/selection-color/code.php
... ... @@ -1,9 +1,9 @@
1 1 ::selection {
2   - background: #50bc6b; /* WebKit, Opera, & IE9 */
3   - color: white;
  2 + background: #50bc6b; /* WebKit, Opera, & IE9 */
  3 + color: white;
4 4 }
5 5
6 6 ::-moz-selection {
7   - background: #50bc6b; /* Firefox */
8   - color: white;
  7 + background: #50bc6b; /* Firefox */
  8 + color: white;
9 9 }
8 includes/features/shaders/code.php
... ... @@ -1,9 +1,9 @@
1 1 .waving {
2   - filter: custom(url('wave.vs'), 20 20, phase 0, amplitude 50);
3   - transition-property: filter;
4   - transition-duration: 0.2s;
  2 + filter: custom(url('wave.vs'), 20 20, phase 0, amplitude 50);
  3 + transition-property: filter;
  4 + transition-duration: 0.2s;
5 5 }
6 6
7 7 .waving:hover {
8   - filter: custom(url('wave.vs'), 20 20, phase 90, amplitude 20);
  8 + filter: custom(url('wave.vs'), 20 20, phase 90, amplitude 20);
9 9 }
10 includes/features/skew-transform/code.php
... ... @@ -1,7 +1,7 @@
1 1 .element {
2   - -webkit-transform: skew(45deg, 30deg);
3   - -moz-transform: skew(45deg, 30deg);
4   - -o-transform: skew(45deg, 30deg);
5   - -ms-transform: skew(45deg, 30deg);
6   - transform: skew(45deg, 30deg);
  2 + -webkit-transform: skew(45deg, 30deg);
  3 + -moz-transform: skew(45deg, 30deg);
  4 + -o-transform: skew(45deg, 30deg);
  5 + -ms-transform: skew(45deg, 30deg);
  6 + transform: skew(45deg, 30deg);
7 7 }
6 includes/features/space-round/code.php
... ... @@ -1,8 +1,8 @@
1 1 .element {
2   - background: url(bg.png) space 0 0;
  2 + background: url(bg.png) space 0 0;
3 3 }
4 4
5 5 .element2 {
6   - background-image: url(bg.png);
7   - background-repeat: round;
  6 + background-image: url(bg.png);
  7 + background-repeat: round;
8 8 }
6 includes/features/tab-size/code.php
... ... @@ -1,5 +1,5 @@
1 1 .element {
2   - -moz-tab-size: 4;
3   - -o-tab-size: 4;
4   - tab-size: 4;
  2 + -moz-tab-size: 4;
  3 + -o-tab-size: 4;
  4 + tab-size: 4;
5 5 }
4 includes/features/template-layout/code.php
... ... @@ -1,6 +1,6 @@
1 1 .element {
2   - display: "ab"
3   - "cd";
  2 + display: "ab"
  3 + "cd";
4 4 }
5 5
6 6 .one { position: a }
10 includes/features/text-overflow/code.php
... ... @@ -1,7 +1,7 @@
1 1 .element {
2   - white-space: nowrap;
3   - overflow: hidden;
4   - -o-text-overflow: ellipsis;
5   - -ms-text-overflow: ellipsis;
6   - text-overflow: ellipsis; /* or "clip" */
  2 + white-space: nowrap;
  3 + overflow: hidden;
  4 + -o-text-overflow: ellipsis;
  5 + -ms-text-overflow: ellipsis;
  6 + text-overflow: ellipsis; /* or "clip" */
7 7 }
2  includes/features/text-shadow/code.php
... ... @@ -1,3 +1,3 @@
1 1 .element {
2   - text-shadow: #555 4px 4px 4px; /* color, h-offset, v-offset, blur */
  2 + text-shadow: #555 4px 4px 4px; /* color, h-offset, v-offset, blur */
3 3 }
12 includes/features/text-stroke/code.php
... ... @@ -1,8 +1,8 @@
1 1 .element {
2   - -webkit-text-fill-color: #fff;
3   - -webkit-text-stroke-color: #d78965;
4   - -webkit-text-stroke-width: 3px;
5   - text-fill-color: #fff;
6   - text-stroke-color: #d78965;
7   - text-stroke-width: 3px;
  2 + -webkit-text-fill-color: #fff;
  3 + -webkit-text-stroke-color: #d78965;
  4 + -webkit-text-stroke-width: 3px;
  5 + text-fill-color: #fff;
  6 + text-stroke-color: #d78965;
  7 + text-stroke-width: 3px;
8 8 }
10 includes/features/transform-origin/code.php
... ... @@ -1,7 +1,7 @@
1 1 .element {
2   - -webkit-transform-origin: 20px 20px; /* h-offset, v-offset */
3   - -moz-transform-origin: 20px 20px;
4   - -o-transform-origin: 20px 20px;
5   - -ms-transform-origin: 20px 20px;
6   - transform-origin: 20px 20px;
  2 + -webkit-transform-origin: 20px 20px; /* h-offset, v-offset */
  3 + -moz-transform-origin: 20px 20px;
  4 + -o-transform-origin: 20px 20px;
  5 + -ms-transform-origin: 20px 20px;
  6 + transform-origin: 20px 20px;
7 7 }
14 includes/features/transitions/code.php
... ... @@ -1,12 +1,12 @@
1 1 .element {
2   - background-color: red;
3   - -webkit-transition: background-color linear .8s;
4   - -moz-transition: background-color linear .8s;
5   - -o-transition: background-color linear .8s;
6   - -ms-transition: background-color linear .8s;
7   - transition: background-color linear .8s;
  2 + background-color: red;
  3 + -webkit-transition: background-color linear .8s;
  4 + -moz-transition: background-color linear .8s;
  5 + -o-transition: background-color linear .8s;
  6 + -ms-transition: background-color linear .8s;
  7 + transition: background-color linear .8s;
8 8 }
9 9
10 10 .element:hover {
11   - background-color: blue;
  11 + background-color: blue;
12 12 }
10 includes/features/translate-transform/code.php
... ... @@ -1,7 +1,7 @@
1 1 .element {
2   - -webkit-transform: translate(25px, 50px);
3   - -moz-transform: translate(25px, 50px);
4   - -o-transform: translate(25px, 50px);
5   - -ms-transform: translate(25px, 50px);
6   - transform: translate(25px, 50px);
  2 + -webkit-transform: translate(25px, 50px);
  3 + -moz-transform: translate(25px, 50px);
  4 + -o-transform: translate(25px, 50px);
  5 + -ms-transform: translate(25px, 50px);
  6 + transform: translate(25px, 50px);
7 7 }
2  includes/features/word-wrap/code.php
... ... @@ -1,3 +1,3 @@
1 1 .element {
2   - word-wrap: break-word; /* or "normal" */
  2 + word-wrap: break-word; /* or "normal" */
3 3 }
2  includes/features/word-wrap/description.php
... ... @@ -1 +1 @@
1   -Note: This property is now obsolete, replaced by <a href="?prop=overflow-wrap">overflow-wrap</a>. Allows you to define whether or not to wrap long strings of unbroken text.
  1 +Allows you to define whether or not to wrap long strings of unbroken text. Note: This is now considered an alternate name for the new <a href="?prop=overflow-wrap">overflow-wrap</a>. All browsers must support both syntaxes.
2  includes/features/word-wrap/technical.php
... ... @@ -1 +1 @@
1   -* Not in the spec
  1 +<a href="http://dev.w3.org/csswg/css3-text/#overflow-wrap">word-wrap/overflow-wrap on W3C</a>
4 index.php
@@ -29,7 +29,7 @@
29 29
30 30 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
31 31
32   - <link rel="stylesheet" href="css/styles.css?v=1.6.2">
  32 + <link rel="stylesheet" href="css/styles.css?v=1.6.4">
33 33
34 34 <script src="js/modernizr-2.5.3.min.js"></script>
35 35
@@ -136,7 +136,7 @@ function recordOutboundLink(link, category, action) {
136 136
137 137 </div><!-- .infoboxes -->
138 138
139   - <iframe class="ap" id="ap" src="includes/bsa.php"></iframe><!-- .ap -->
  139 + <iframe class="ap" id="ap" src="includes/bsa.php" scrolling="no"></iframe><!-- .ap -->
140 140
141 141 <footer>
142 142

0 comments on commit 9005ac8

Please sign in to comment.
Something went wrong with that request. Please try again.