Beiträge im Jahr 2014

Modernizr durch eigene Tests erweitern

Modernizr - Auswahl von EigenschaftenModernizr ist das Tool der Wahl, um zu überprüfen, ob ein Browser ein bestimmtes Features versteht oder nicht. Je nach Ergebnis ergänzt Modernizr dann passende Klassen beim HTML-Start-Tag. Darauf basierend lassen sich besondere Formatierungen für beide Fälle definieren: Für den Fall, dass das Feature unterstützt wird, oder eben, wenn es nicht unterstützt wird.
Beispielsweise erhält durch folgende Angabe das Element mit Klasse .eins, sofern box-shadow nicht unterstützt wird, einen Rahmen:

.no-boxshadow .eins {
border: 2px solid blue;
}

Wenn hingegen box-shadow unterstützt wird, wird der Rahmen ausgeblendet und stattdessen ein Schatten angezeigt:

.boxshadow .eins {
border: none;
box-shadow: 0px 0px 5px blue;
}

Auf welche Eigenschaften überprüft werden soll, kann man auf der Download-Seite von Modernizr selbst bestimmen. Falls einmal die gewünschte CSS3-Eigenschaft nicht dabei ist, lässt sich Modernizr einfach durch eigene Tests erweitern. Weiterlesen

Menü-Icon („Hamburger“) für viele Nutzer nicht verständlich

menu-icon

In einem Posting hatte ich vorgestellt, wie man das „Standard-Menü-Icon“ – drei horizontale Striche – über box-shadow realisiert. In einem Kommentar bei Google Plus hat mich Bernd Lindemann darauf hingewiesen, dass das Standard-Menü-Icon (im englischen Sprachraum auch „Hamburger“ genannt) keineswegs von allen Benutzern verstanden wird. Das zeigen die Untersuchungen von Luke Wroblewski und anderen (hier und hier).

Weiterlesen

Mailversand mit XAMPP

Ordner mit ausgehenden Mails bei XAMPPBei vielen PHP-Anwendungen muss man Mails versenden. Früher war das mühsam, wenn man lokal mit XAMPP entwickelt hat: Denn dort ging der Mailversand nicht so ohne Weiteres.

Unter Windows kann man aber sehr einfach die Funktionalität MailtoDisk aktivieren. Dafür muss man die Datei php.ini bearbeiten. Diese erreicht man beispielsweise über das XAMPP-Kontrollzentrum und hinter „Apache“ auf den Konfig-Button klicken und „PHP (php.ini)“ wählen.
Hier [mail function] suchen. Die folgende Option muss dann aktiv sein (kein ; davor):

sendmail_path = C:\xampp\mailtodisk\mailtodisk.exe

Die Pfadangabe kann je nach XAMPP-Installation auch anders aussehen.
Damit die Änderungen wirksam werden, muss der Server heruntergefahren und wieder neu gestartet werden. Das geht wieder gut über das Kontrollzentrum.

Die danach per PHP versendete Mails landen dann automatisch in dem Unterordner xampp/mailoutput. Dort sind sie einzeln aufgeführt, im Dateinamen befindet sich das Datum, in der Datei kann man sich ansehen, wie die Mail aussehen würde … äußerst praktisch!

Menü-Icon mit box-shadow

Menü-Icon - drei Striche

Inzwischen haben sich drei horizontale Striche als normales Icon für Menüs etabliert. Es gibt unterschiedliche Möglichkeiten, dieses Icon zu generieren, ohne auf ein Bild zurückzugreifen. Beim schönen Framework Foundation von Zurb werden die drei horizontalen Striche über die Eigenschaft box-shadow erzeugt, was ich ganz raffiniert fand, als ich es entdeckte. Weiterlesen

padding bei table-header-group und table-footer-group

Mit display: table und Konsorten kann man bei bis zu vier Elementen die Reihenfolge der Darstellung auf dem Bildschirm beeinflussen.
Nehmen wir einmal folgende Situation: Wir haben vier Elemente, die bei großen Bildschirmen nebeneinander dargestellt werden sollen und bei kleinen Bildschirmen untereinander.

Anordnung große Screens
Anordnung kleiner Screen

Das Besondere dabei: Die Reihenfolge auf kleinen Screens soll anders sein als die Reihenfolge auf dem großen Screen (Eins, Zwei, Drei, Vier auf großen Screens, Vier, Drei, Zwei, Eins auf kleinen Screens).

Weiterlesen

Einstieg in LESS & Sass

LESS & Sass - VideotrainingZum modernen Workflow gehören die CSS-Präprozessoren dazu: Sie erlauben es, Stylesheets effektiver und schneller zu schreiben. Auch Änderungen lassen sich bei Bedarf leichter durchführen. Einen Einstieg in die Funktionsweise der beiden großen CSS-Präprozessoren LESS & Sass bietet mein Videotraining „LESS & Sass – Crashkurs“ bei Video2brain.

Kein Abstand vor den Klammern bei Funktionen in CSS

Inzwischen gibt es viele Funktionen in CSS, die durch runde Klammern gekennzeichnet sind. Ein Beispiel ist url() zur Einbindung eines Hintergrundbildes:

background-image: url(pfad/zum/bild.png);

Wichtig ist hierbei: Es darf kein Leerzeichen zwischen Funktionsname und runden Klammern stehen. Weiterlesen

Wie viele Präfixe braucht man heute noch?

Bei der Arbeit an meinem CSS3-Buch musste ich mich auch entscheiden, wie viele Präfixe ich bei den Beispielen einsetzen sollte, d.h. ob und wann bei einer der CSS3-Eigenschaften -moz-, -webkit- oder auch -ms- und -o- notwendig sind.

Das Ergebnis vorweg: Man braucht wesentlich weniger als oft angenommen wird. Weiterlesen