Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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