WordPress 3.5: Ungenutzte Grafiken entfernt, mehr CSS3 Farbverläufe

Zusammen mit Helen, Scott und Andrew haben wir die letzten Tage an einen Punkt für WordPress 3.5 gearbeitet: Ungenutzte Grafiken, die seit Versionen mit geschleppt werden, entfernen und die vermehrte Verwendung von CSS3 Farbverläufen (Gradients). Dieser Punkt ist nun abgehakt.

Warum dieser Schritt? Der Punkt der ungenutzten Grafiken sollte klar sein. Warum mehr einpacken, als man braucht? Das WordPress Paket ist damit um ein paar Bytes geschrumpft.

Die Liste der entfernen Grafiken ist lang. Plugin Autoren sollten deswegen auch mal kurz draufschauen, ob sie nicht eine der Grafiken derzeit nutzen.
Wenn doch sollte gegebenenfalls eine Kopie das Plugin eingebunden werden. Die Liste:

  • wp-admin/images/archive-link.png
  • wp-admin/images/blue-grad.png
  • wp-admin/images/button-grad-active.png
  • wp-admin/images/button-grad.png
  • wp-admin/images/ed-bg-vs.gif
  • wp-admin/images/ed-bg.gif
  • wp-admin/images/fade-butt.png
  • wp-admin/images/fav-arrow-rtl.gif
  • wp-admin/images/fav-arrow.gif
  • wp-admin/images/fav-vs.png
  • wp-admin/images/fav.png
  • wp-admin/images/gray-grad.png
  • wp-admin/images/loading-publish.gif
  • wp-admin/images/logo-ghost.png
  • wp-admin/images/logo.gif
  • wp-admin/images/menu-arrow-frame-rtl.png
  • wp-admin/images/menu-arrow-frame.png
  • wp-admin/images/menu-arrows.gif
  • wp-admin/images/menu-bits-rtl-vs.gif
  • wp-admin/images/menu-bits-rtl.gif
  • wp-admin/images/menu-bits-vs.gif
  • wp-admin/images/menu-bits.gif
  • wp-admin/images/menu-dark-rtl-vs.gif
  • wp-admin/images/menu-dark-rtl.gif
  • wp-admin/images/menu-dark-vs.gif
  • wp-admin/images/menu-dark.gif
  • wp-admin/images/required.gif
  • wp-admin/images/screen-options-toggle-vs.gif
  • wp-admin/images/screen-options-toggle.gif
  • wp-admin/images/toggle-arrow-rtl.gif
  • wp-admin/images/toggle-arrow.gif
  • wp-admin/images/upload-classic.png
  • wp-admin/images/upload-fresh.png
  • wp-admin/images/white-grad-active.png
  • wp-admin/images/white-grad.png
  • wp-admin/images/widgets-arrow-vs.gif
  • wp-admin/images/widgets-arrow.gif
  • wp-includes/images/upload.png

CSS3 Gradients

Die CSS3 Farbverläufe sind meiner Meinung nach eine positive Neuerung in CSS3.
Es erspart die lästige Erstellung von zusätzlichen Grafiken, schont die Bandbreite und reduziert die Anzahl der HTTP-Anfragen.

Und genau diese Performance-Steigerung ist der Grund dafür, dass WordPress 3.5 nun vermehrt CSS3 Farbverläufe nutzt.

Um die Umsetzung einheitlich zu gestalten, haben wir uns dafür noch eine kleine Syntax überlegt. Vielleicht kann der Eine oder Andere diese für sein nächstes Projekt gut gebrauchen.

.grad-to-top {	
	background: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
	background-image: -webkit-linear-gradient(top, #fff, #000);
	background-image:    -moz-linear-gradient(top, #fff, #000);
	background-image:      -o-linear-gradient(top, #fff, #000);
	background-image: linear-gradient(to bottom, #fff, #000);
}

.grad-to-bottom {	
	background: #fff;
	background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#000));
	background-image: -webkit-linear-gradient(bottom, #fff, #000);
	background-image:    -moz-linear-gradient(bottom, #fff, #000);
	background-image:      -o-linear-gradient(bottom, #fff, #000);
	background-image: linear-gradient(to top, #fff, #000);
}

.grad-to-bottom-with-color-stops {	
	background: #fff;
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(1, #000));
	background-image: -webkit-linear-gradient(bottom, #fff 0%, #000 100%);
	background-image:    -moz-linear-gradient(bottom, #fff 0%, #000 100%);
	background-image:      -o-linear-gradient(bottom, #fff 0%, #000 100%);
	background-image: linear-gradient(to top, #fff 0%, #000 100%);
}

Unterstützt werden mit der Methode die Browser Firefox, Opera, Safari, Chrome und Internet Explorer 10.
(Link zur jsFiddle Demo.)

Zum Thema