Schnell hat man sich bei einer CSS-Eigenschaft vertippt. Um derartige Fehler aufzuspüren, hilft es schon einmal einen passenden Editor zu verwenden. Ansonsten lassen sich solche Fehler gut im Google Chrome entdecken. Wie das geht, aber auch wann scheinbare Fehler keine Fehler sind, zeige ich in einem Video. Das Video ist ein Ausschnitt aus meinem video2brain-Videotraining CSS debuggen.
Weiterlesen
Videotraining CSS debuggen
Das Grundprinzip von CSS ist ja eigentlich ganz einfach – aber trotzdem machen Stylesheets oft nicht das, was sie machen sollten. In meinem neuen Videotraining zeige ich, wie man Code untersucht und Fehler aufspürt.
CSS debuggen – video2brain Online-Videotraining
Laufzeit: 1 Std. 32 min
Einzeltraining: € 29,95
oder alle Trainings im Abonnement: ab € 19,95
Elemente mit scale() spiegeln
CSS3-Transformationen sind eine schöne Sachen. Hinter die Eigenschaft transform schreibt man die gewünschte Operation wie beispielsweise rotate(), um ein Element zu drehen, oder scale(), um ein Element zu vergrößern bzw. zu verkleinern.
Die folgende Zeile
transform: scale(2);
macht ein Element etwa doppelt so groß. Entsprechend wird durch
transform: scale(0.5);
ein Element halb so groß wie ursprünglich.
Worauf man vielleicht nicht sofort kommt: Ein negative Wert bei scale() spiegelt ein Element.
Schnelleinführung in CSS3-Shapes
Mit CSS3-Shapes kann man Elemente nicht eckig umfließen lassen. Und das geht so:
Zuerst einmal braucht man ein Element, das umflossen werden soll. Üblicherweise nimmt man dafür ein nichtrechtickes Element, beispielsweise ein freigestelltes Bild oder ein abgerundetes Foto. Dieses Element muss gefloatet werden.
CSS-Quicktipp: Tippfehler bei Selektoren finden
Wenn eine Formatierung nicht bei einem Element ankommt, so kann das die unterschiedlichsten Ursachen haben. Zuerst sollte man immer in die Entwicklertools kontrollieren, ob dort die CSS-Deklarationen irgendwie beim Element auftauchen. Dafür ruft man die Entwicklertools auf (Klick mit rechter Maustaste und „Element untersuchen“ oder Ähnlich). Dann wählt man das Element im HTML-Teil links aus und kontrolliert die CSS-Regeln im rechten Bereich. Wenn die Angaben überhaupt nicht vorkommen, bedeutet das, dass es entweder einen Tippfehler beim Selektor gibt oder – bei zusammengesetzte Selektoren – dass die Verschachtelung nicht stimmt.
Eine sehr rasche Möglichkeit, solche Probleme zu finden, besteht darin, sich die im Dokument nicht benutzten Selektoren anzeigen zu lassen.
Halb feststehende Bereiche mit position: sticky
Heute sieht man häufiger folgendes Scrollverhalten: Oben gibt es einen fetten Header und darunter die Navigation. Beim Scrollen verschwindet der Header irgendwann, die Navigation bewegt sich beim Scrollen nach oben – und bleibt dort stehen. Sie verhält sich in dem Moment, wo sie oben anbekommen ist, wie ein mit position: fixed positioniertes Element. Zu Beginn jedoch, solange sie auch normal sichtbar ist, bewegt sie sich beim Scrollen normal mit.
3 PHP-Bücher zu gewinnen
Heute, am 25.9.2014, gilt noch der Frühbucher-Rabatt für meinen PHP-Online-Workshop bei akademie.de. Und passend zum Anlass gibts eine Buchverlosung meines PHP-Buchs bei akademie.de. Drei „PHP 5.5 & MySQL 5.6“-Bücher kann man gewinnen.
Für die Teilnahme müsst ihr das Startdatum des PHP-Online-Workshops bis Montag (29.9.2014) 18 Uhr per E-Mail an workshops@akademie.de senden. Die Gewinner werden per E-Mail von akademie.de benachrichtigt. Viel Glück 🙂
6 Dinge, die mir bei den Firefox-Entwicklertools neu waren
Letztes habe mich intensiver mit den Firefox-Entwicklertools beschäftigt … und doch noch ein paar Dinge entdeckt, die mir vorher entgangen waren.
Ich gehe hier jetzt nicht auf die grundlegende Bedienung der Firefox-Entwicklertools ein. Aber so viel: Man ruft sie beispielsweise auf, indem man in ein beliebiges Element mit der rechten Maustaste klickt und „Element untersuchen“ wählen.
Achtung vor veralteter Syntax bei CSS3-Farbverläufen
Webseiten entwickeln besteht meist zu einem nicht unerheblichen Teil daraus, Code-Schnipsel von irgendwelchen Quellen zu kopieren. Bei Farbverläufen sollte man allerdings aufpassen: An vielen Stellen findet sich im Web noch die veraltete Standardsyntax. Unterschiede zeigen sich bei der Art, wie die Richtung des Farbverlaufs angegeben wird.
Das häufig bei Webseiten die veraltete Syntax verwendet wird, hat im August 2015 sogar dazu geführt, dass Firefox wieder die Unterstützung für die veraltete Syntax mit dem -moz-Präfix ergänzt hat.
Die Standardsyntax ist die Wertangabe ohne Präfix, die üblicherweise zuletzt steht, wie etwa die linear-gradient()-Angabe im folgenden Beispiel:
background: -webkit-linear-gradient(white, blue);
background: linear-gradient(white, blue);
Bei der Farbverlaufsyntax hat es noch einmal eine Änderung gegeben, wie die Richtung des Farbverlaufs angegeben wird.
CSS-Quicktipp: Hintergrundbilder genau zwei Mal wiederholen
CSS3 bietet ja schöne neue Möglichkeiten für Hintergrundbilder – bei der Wiederholung kann man beispielsweise dafür sorgen, dass Hintergrundbilder nie abgeschnitten werden. Wenn ich in meinen CSS-Kursen vorstelle, wie man mit Hintergrundbildern arbeitet, werde ich recht oft gefragt: „Und kann man auch angeben, dass ein Hintergrundbild nur zwei Mal oder drei Mal wiederholt wird? Also die exakte Anzahl festlegen?“ Nein, so etwas wie repeat-2x (2 x auf der x-Achse) oder repeat-3y (3 mal auf der y-Achse, d.h. untereinander), gibt es leider nicht. Nicht im Level 3 der W3C-Spezifikation und auch beim Entwurf der nächsten Version des backgrounds-and-borders-Moduls habe ich es nicht gefunden.
Aber natürlich lässt sich so etwas dank mehrfacher Hintergrundbilder leicht umsetzen.