Changeset 25865

Timestamp:

10/22/2013 04:59:59 PM (11 years ago)

Author:

lancewillett

Message:

Twenty Fourteen: use SVG images instead of CSS3 gradients for featured image background pattern. Props iamtakashi.

• Fixes laggy loading in Firefox, see #25600.
• Significantly reduces CPU usage.
• Scalable and crisp on HiDPI/retina screens.
• SVG is support in IE9 which doesn't support CSS gradients.

Location:

trunk/src/wp-content/themes/twentyfourteen

Files:

• images (added)
• images/pattern-dark.svg (added)
• images/pattern-light.svg (added)
• style.css (modified) (3 diffs)

trunk/src/wp-content/themes/twentyfourteen/style.css

@@ -1005 +1005 @@
 
  .featured-thumbnail {
-    background: #767676;
-    background-attachment: fixed;
-    background-image: -webkit-linear-gradient(135deg, #767676 12.5%, #fff 12.5%, #fff 50%, #767676 50%, #767676 62.5%, #fff 62.5%);
-    background-size: 4px 4px;
+    background: url(images/pattern-light.svg) #767676 repeat fixed;
     display: none;
     float: none;
@@ -1019 +1016 @@
 }
 
-.featured-thumbnail:hover {
-    background: #919191;
-    background-attachment: fixed;
-    background-image: -webkit-linear-gradient(135deg, #919191 12.5%, #fff 12.5%, #fff 50%, #919191 50%, #919191 62.5%, #fff 62.5%);
-    background-size: 4px 4px;
+a.featured-thumbnail:hover {
+    background: url(images/pattern-light.svg) #919191 repeat fixed;
 }
 
@@ -2468 +2462 @@
 
 .featured-content {
-    background: #000;
-    background-attachment: fixed;
-    background-image: -webkit-linear-gradient(135deg, #4d4d4d 12.5%, #000 12.5%, #000 50%, #4d4d4d 50%, #4d4d4d 62.5%, #000 62.5%);
-    background-image:         linear-gradient(135deg, #4d4d4d 12.5%, #000 12.5%, #000 50%, #4d4d4d 50%, #4d4d4d 62.5%, #000 62.5%);
-    background-size: 4px 4px;
+    background: url(images/pattern-dark.svg) #4d4d4d repeat fixed;
     -webkit-box-sizing: border-box;
     -moz-box-sizing:    border-box;