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

Präsentationen vom WordCamp San Francisco 2011

Das WordCamp San Francisco 2011 ist vorbei. Neben dem State of the Word vom Matt Mullenweg gab es auch noch viele andere interessante Präsentationen rund um WordPress.

Ich habe sie mal für euch rausgesucht und hier aufgelistet.

WordPress Kern

Coding, Scaling and Deploys

coding-scaling-and-deploys

Transients, Caching, and the Complexities of Multisite

transients-caching-multisite

Fehler erkennen und beseitigen

How testing changed my life

testing

Debugging in WordPress

debugging-wordpress

JavaScript Unit Testing

dont-repeat-your-mistakes

WordPress Themes

WordPress Post Formats

wordpress-post-formats

Was mit WordPress erstellt werden kann

Building Custom CMS Applications On WordPress

custom-cms-applications

Options for a Multilingual Site

options-multilingual-site

Ecommerce and WordPress

ecommerce-and-wordpress
case-study-emusic

CSS

Making it snow

css3-animations

CSS Pseudos

css-pseudo

Responsive Web Design

responsive-web-design

Sonstiges

Desisions not Options

desisions-not-options

Version Control for Designers

version-control