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

9 thoughts on “WordPress 3.5: Ungenutzte Grafiken entfernt, mehr CSS3 Farbverläufe”

  1. Die -o Prefixe können eigentlich raus, da Opera kürzlich hat verlauten lassen, auf -webkit zu setzen, oder? Oder sind die einfach noch drin zur Abwärtskompatibilität mit älteren Operas?

    1. Das stimmt, kürzlich. Heißt, bis die finale Version dann da ist, dauert es noch ein Weilchen.
      Firefox hat ja auch verkündet, dass mit Version 16 kein Präfix mehr nötig ist. Von daher sind sie jetzt noch nötig und existieren dann erstmal noch zur Abwärtskompatibilität.

  2. Finde ich auch sehr gut, ich hoffe, den Entwicklern fallen noch einige andere wichtige Änderungen und Erneuerungen ein, die schon länger nötig sind.

  3. Das ist wie Frühjahrputz, macht eigentlich keinen Spaß aber anschließend wundert man sich doch immer im positiven über mehr Platz, Zeitgewinn, etc. Ich denke mit Artikeln wie dem von Dominik hier, erreichen wir das auch noch bei WP.

    cu Michael Kleina

  4. Bei FF und Opera argumentierst Du mit “noch (bis zur nächsten Version) notwendig und stören dann erstmal nicht”. Mit dem Argument “in der nächsten Version nicht mehr Notwendig” wird aber der -ms-Prefix abgelehnt. Ich bin alles andere als ein IE-Fan, aber ich weiss, wie lange sich IE-Versionen halten (können).

    Und das mit dem zweierlei Maß finde ich dann hier trotzdem ziemlich übertrieben. Die Filter, okay. Keine Träne. Aber die Prefix-Version wäre echt nicht schlimm…

    1. Der -ms-Präfix war nur in der Developer Preview von IE 10 nötig. In der IE 10 Release Preview und in der endgültigen finalen Version nicht mehr.

      Daher macht es keinen Sinn diesen Präfix zu unterstützen, da er nie wirklich existiert hat.

    2. Verd… Ich möchte mich entschuldigen. Ich habe nicht daran gedacht, dass die -ms-Prefixe durchaus total unterschiedliche Unterstützungen je nach Property haben… Mein Kommentar basierte also auf gefährlichem Halbwissen.

Leave a Reply