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.
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.
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.
Kacheln nur mit ganzen Bildern, das geht mit CSS3: Zwei neue Werte sind in CSS3 für background-repeat vorgesehen: space und round. Damit kann man verhindern, dass gekachelte Hintergrundbilder abgeschnitten werden. Und das funktioniert bereits im Chrome und im Internet Explorer ab Version 9. Aber von Anfang an.
Bilder im Web sind im Prinzip eckig … das ändert sich glücklicherweise mit dem CSS-Masking-Module.
Die Anforderungen an Icons heute sind hoch: Sie sollen zuerst einmal auch auf hochauflösenden Displays gut aussehen und außerdem natürlich auch sonst möglichst flexibel sein: Schön wäre doch, man könnte – ohne ein Bildbearbeitungsprogramm bemühen zu müssen – die Farbe oder Größe ändern oder auch Schatten definieren. All das geht, wenn man IconFonts einsetzt. IconFonts funktionieren wie die beliebten WebFonts, aber enthalten keine Schriftzeichen, sondern nur Icons. Wie man den FontAwesome nutzt, zeige ich in einem Video.
Bei manchen CSS3-Eigenschaften kann man sich fragen, ob sie sinnvoll sind oder nicht. Das Skalieren von Hintergrundbildern über background-size ist aber eindeutig ungeheuer praktisch. Wie es geht und welche Optionen zur Verfügung stehen, zeige ich in einem kleinen Video.
Weiterlesen
CSS3 bietet mehr Möglichkeiten für Hintergrundbilder: Man kann einem Element mehrere Hintergrundbilder zuweisen oder Hintergrundbilder skalieren. Außerdem lassen sich über Funktionen wie linear-gradient() oder radial-gradient() selbst Bilder – nämlich Farbverläufe – erzeugen. Wie das geht und wie man diese Optionen genau nutzt, zeige ich in meinem neuen Videotraining bei LinkedIn Learning CSS3-Profitricks.
Mit dabei außerdem eine Vorstellung des Grundprinzips des Parallax-Scrolling und drei verschiedene Möglichkeiten, Icons in CSS zu verwenden: die klassischen CSS-Sprites, Icon-Fonts und der Einsatz von SVG-Icons.
Soll man für CSS3-Farbverläufe die Eigenschaft background-image oder background verwenden? Es funktioniert prinzipiell beides:
.beispiel {
background-image: linear-gradient(red, yellow);
}
aber auch
.beispiel {
background: linear-gradient(red, yellow);
}
Im Textverarbeitungsprogramm Word erreicht man durch Tabs, dass einzelne Textteile untereinander stehen. Gerade hatte ich ein ähnliches Problem bei einer Webseite: Auf einer Webseite gab es die Texte „E-Mail: emailadresse@example.com“ und darunter „Telefon: 012-3456789“; wobei die Telefonnummer und die E-Mail-Adresse exakt untereinander stehen sollten. In Word ist das ein klassischer Fall für Tabs, in HTML gibts es allerdings so etwas wie Tabs nicht. Wie lässt sich trotzdem die gewünschte Darstellung erreichen? Wenn man mehrere solcher Zuordnungen hat, dann ist das ein klarer Fall für eine Tabelle – aber nur für zwei Zeilen schien mir das zu aufwändig. Weiterlesen