CSS – Attributselektoren

Attributselektoren sind toll und praktisch. Und jetzt mal hier zusammengefasst für mich zum merken:

div[class] Element div mit Attribut class
div[class=”blubb”] Element div mit Attribut class und Wert blubb
div[class~=”bar”] Element div mit Attribut class, dessen durch Leerzeichen getrennte Liste von Werten blubb enthält (p[class~=”blubb”] entspricht p.blubb)
div[class|=”blubb”] Element div mit Attribut class, dessen durch Trennstriche (-) getrennte Liste von Werten mit blubb beginnt
div[class^=”blubb”] Element div mit Attribut class, dessen Wert mit blubb beginnt
div[class$=”blubb”] Element div mit Attribut class, dessen Wert mit blubb endet
div[class*=”blubb”] Element div mit Attribut class, das die Zeichenkette blubb enthält

WordPress Theme

Eigentlich wollte ich mal was über mein schönes Theme hier schreiben. Aber seit ner Weile schreibt der Author meines Themes in seinem Blog nur noch darüber wie man möglichst gut Geld verdient mit seinem Blog. Und jetzt kostet mein Theme in der neuen Version etwas. Und zwar nicht 5$, sondern gleich 65$. Ja toll. Ich hoffe es kauft keiner. Hallo? Das ist kein CMS das ist ein WordPress Theme. Pixelmator kostet weniger und das ist in vollwertiges Bildbearbeitungsprogramm, damit kann man bald soviel machen wie mit Photoshop!

Naja, zum Glück kann ich selbst mit HTML, CSS und PHP umgehen und kann mir so mein eigenes WordPress Theme schrauben. Ich werde mir jetzt für den Anfang mal die WordPress Theme Vorlage die ich hier gefunden habe ansehen. Mal sehen wie schnell ich damit klar komm.

Wenn ichs dann mal kann bau ich mein jetziges Theme nach und verkauf es für 55$, ha! 🙂

CSS Optimierer

Nicht nur weil ich mir die URL und die Bezeichnung nich merken kann, sondern weil das eben auch ein wirklich geniales Tool ist: CSS Formatierer und Optimierer

Wenn amn zum Beispiel alten CSS Code bekommt an dem über Jahre verschiedene Leute rumgeschraubt haben. So ein Code muss einfach vermurkst sein. Wenn man den jetzt in das Tool wirft bekommt man durchaus mal einen um 41% kleineren Text zurück. So hat man doch gleich deutlich mehr Übersicht. Ein positiver Nebeneffekt ist, dass die Datei auch kleiner wird.

Das Tool hilft einem auch wenn man zwei große CSS-Dateien zusammenführen soll. Es schmeißt alles raus was doppelt vorhanden ist und optimiert wo es nötig ist.

nobr-Tag-Ersatz in XHTML und HTML 5

Manchmal möchte man ja in einem Text gewährleisten dass eine zeichenkette auf keinen Fall umgebrochen wird. Zum beispiel ein Produktname der Leerzeichen enthält. Bei “MacBook Pro” z.B. sieht es eifach unschön aus wenn das “Pro” in einer neuen Zeile steht. Früher gab es um einen Umbruch zu verändern folgenden Tag:

MacBook Pro

Keine Ahnung wann das mal erlaubt war. Aber seit HTML 4.01 ist dieser Tag eigentlich nimmer erlaubt. Trotzdem wird er von allen Browsern unterstützt. Er war immer mal wieder im Gespräch hat es dann aber nie in eine endgültige Version eines Standards geschafft.

Darum sollte man sich als korrekter Webdesigner mit CSS behelfen:

span.nobr {
	white-space: nowrap;
}

Das Markup dazu sieht dann so aus:

MacBook Pro

Eine bessere Möglichkeit hab ich noch nicht gefunden. Funktioniert auch und zwar mit allen Standards!

jQuery Plugin: Validation

Ich arbeite ja leider momentan (noch) nicht so viel mit AJAX. Aber wenn, dann mit jQuery. Besonders angetan hat es mir das Formularvalidierungs-Plugin Validation.

Das Web 2.0 lebt durch Formulare. Da muss man als Webdesigner/-entwickler auch oft überprüfen ob denn eine korrekte E-Mail-Adresse, eine korrekte Postleitzahl, ein korrektes deutsches Datum usw. eingegeben wurde. Man kann das ganz umständlich mit PHP machen. Man wertet aus was eingegeben wurde und bastelt für jeden Fehler eine Fehlermeldung mit Hinweis. Das kostet ungefähr pro Formular einen Tag mehr Zeit und macht soviel Spaß wie Walnüsse zählen.

Mit Validation schreibt man sein Formular fast wie gewohnt und wie von Geisterhand bekommt man direkt unter dem jeweiligen Formularfeld eine wunderschöne Fehlermeldung angezeigt wenn etwas falsch eingegeben wurde. Der einzige Unterschied ist dass man in das class-Attribut der jeweiligen Formularfelder Anweisungen wie “required” oder “date” schreibt. Man muss nur jQuery einbinden, Validation einbinden und Validation dann noch sagen was es validieren soll. 

Gesammelte Beispiele finden sich hier. Eine ausführliche Doku ist bei jQuery selbst zu finden.

Das Plugin ist sehr flexibel. Falls man mit den Angaben im class-Attribut nichtmehr weiter kommt kann man auch mit JavaScript Angaben die Validierung beeinflussen. Näheres dazu steht ausführlich in der Doku.

Ein geniales jQuery-Plugin welches man an allen Ecken und Enden im Webdesign brauchen kann! Ich benutze es inzwischen für alle meine Formulare.