6 praktische Tipps zur Webtechnik

1

Attribut-Selektoren: Diese kennzeichnen gemeinsame und spezielle Merkmale für externe Verknüpfungen.

Tipp 1: Attribut-Selektoren
Der Tipp zeigt Ihnen, wie Sie Style Sheets über einen CSS3-Attribut-Selektor definieren.

CSS3 bietet zusätzliche Attribut-Selektoren, mit denen Sie Stile für beliebige HTML-Elemente mit bestimmten Attributwerten generieren. Bezüglich des Attributwertes sind drei verschiedene Schreibweisen möglich: Mit [Attributname^=Wert] zielen Sie auf HTML-Elemente, deren Attributwert mit der angegebenen Zeichenfolge beginnt, mit [Attributname$=Wert] auf solche, deren Attributwert mit der angegebenen Zeichenfolge endet.

Wenn Sie das Zeichen * verwenden ([Attributname*=Wert]), bedeutet dies, dass der Wert des betreffenden Attributs die Zeichenfolge - an beliebiger Stelle - enthalten soll. Wenn Sie z.B. allen Verknüpfungen auf der Webseite gemeinsame Stilattribute zuweisen wollen, notieren Sie für das Anchor-Tag folgendes Style Sheet: a[href^="https://"] { ... }.

Allgemein formuliert bedeutet der Ausdruck a[href^="https://"], dass die folgenden Einstellungen für alle <a>-Tags gelten, deren href-Attribut mit der Zeichenfolge "https://" beginnt. Hier das entsprechende Style Sheet des Beispiels.

a[href^="https://"] {
font-style:italic;
font-weight:bold;
font-size:1.9em;
padding-left: 70px;
text-decoration:none;
color: darkblue;
}

Möchten Sie einzelne Werte für bestimmte Verknüpfungen überschreiben, so definieren Sie für das betreffende Attribut, sprich: für die URL, einfach ein weiteres Style Sheet: a[href^="https://www.connect-living.de"] {color: red; font-size:3.8em;}. Das Ergebnis sehen Sie in der Abbildung. Die Attribut-Selektoren von CSS3 werden bereits von allen modernen Browsern, einschließlich IE, umgesetzt.

2

CSS3-Attribut text-shadow: Ohne großen Aufwand überzeugen diese Schatteneffekte.

Tipp 2: Eigenschaft text-shadow
So können Sie für die Anzeige in Mozilla Firefox Textschatten erzeugen.

Das Attribut text-shadow hat seine eigene Geschichte. Mit CSS2 eingeführt, wurde es in CSS 2.1 aus dem Standard herausgenommen - der Grund war mangelnde Browser-Unterstützung - und in CSS3 ist es wieder dabei. Immerhin wird dieses Attribut mittlerweile von den Browsern Safari, Opera, Google Chrome und Mozilla Firefox ab Version 3.5 korrekt unterstützt. Sie erzeugen damit auf einfache Weise Textschattierungen in verschiedenen Variationen.

Der erste Wert definiert die horizontale und der zweite die vertikale Position des Schattens, jeweils im Verhältnis zum Originaltext. Mit dem dritten Wert legen Sie den Unschärferadius fest. Zuletzt geben Sie die Schattenfarbe an, entweder als RGB-Wert oder als Farbkonstante. Die beiden letzten Parameter sind optional. Einen Wert ungleich Null für den Unschärferadius sollten Sie aber in den meisten Fällen angeben, da dieser den eigentlichen Schatteneffekt ausmacht, z.B. text-shadow: 3px 3px 7px gray;.

Besonders beeindruckende Effekte erzielen Sie, indem Sie gleich mehrere Textschatten miteinander kombinieren. Dazu notieren Sie für das text-shadow-Attribut einen zweiten Satz an Werten, den Sie - durch ein Komma getrennt - an den ersten anhängen. Das folgende Beispiel definiert, passend zur Schriftfarbe, zwei Schatten in abgestuften Blautönen: text-shadow: 2px 2px 3px #00DEFF, 4px 4px 3px #0080FF;.

3

Mozilla Firefox setzt die meisten CSS3-Attribute perfekt um: Tiefenwirkung mit text-shadow bei ausgeschaltetem Überblendeffekt.

Tipp 3: Spezielle Effekte
Der Tipp zeigt Ihnen, wie Sie mit geeigneten Werten für text-shadow Tiefeneffekte erzeugen.

Etwas anders als im Tipp text-shadwow beschrieben gehen Sie vor, wenn es Ihnen weniger auf den Schatteneffekt, sondern mehr darauf ankommt, einen Schriftzug dezent, aber eindrucksvoll hervorzuheben. In diesem Fall geben Sie für den Unschärferadius 0 an oder lassen den Parameter ganz weg. Eine beliebte Methode ist es, einen oberen dunklen Schatten nach innen mit einem hellen nach unten hin zu kombinieren.

Dazu geben Sie für den Versatz des ersteren in der x- und in der y-Richtung jeweils negative Werte an, z.B. text-shadow: -1.2px -1.2px 0px #4D4D4D, 1.2px 1.2px 0px white;. Den zweiten versetzen Sie wie im vorigen Beispiel etwas nach unten oder nach rechts. Ein Ergebnis sehen Sie in der Abbildung.

4

6 praktische Tipps zur Webtechnik

Tipp 4: Geschwister-Selektoren
So referenzieren Sie per CSS HTML-Elemente aufgrund ihrer Beziehung zueinander.

Häufig platziert man auf der Webseite nach einer Überschrift einen speziellen einleitenden Absatz. Mit CSS3 brauchen Sie diesen nicht etwa über eine separate Klassenreferenz anzusprechen. Vielmehr bedienen Sie sich des Geschwister-Selektors (+):

h1 + p {
// Stildefinitionen
}

Ein so definiertes Style Sheet wirkt jeweils für den ersten Absatz nach einer <h1>-Überschrift. Der Geschwister-Selektor (~) spricht dagegen alle Elemente an, die ein gemeinsames Elternelement besitzen, z.B.

div ~ ul {
// Stildefinitionen
}

Hier wirkt das Style Sheet auf jede Liste, die Geschwister eines <div>-Elements ist. Beide Selektoren werden von modernen Browsern unterstützt.

5

CSS3-Klasse :nth-child: Alternierende Tabellenzeilen umgesetzt mit zwei kleinen Stildefinitionen.

Tipp 5: Neue Pseudoklassen
So erzeugen Sie ohne explizite Style-Sheet-Zuweisungen alternierende Tabellenzeilen.

Jede Tabellenzeile per class-Attribut oder ID mit einer CSS-Klasse zu verbinden, wäre doch etwas mühsam. Automatisch ließ sich dies bis dato allein mit mehr oder weniger aufwändigem JavaScript-Code umsetzen. Mit den neuen CSS3-Pseudoklassen geht es dagegen ganz einfach. Insgesamt gibt es vier davon: :nth-child(N), :nth-last-child(N), :nth-of-type(N) und :nth-last-of-type(N). Was die Aufgabe mit den Tabellenzeilen angeht, kommen Sie mit :nth-child(N) einfach zurecht.

Die Pseudoklasse selektiert Geschwisterelemente, die über ein gemeinsames Elternelement (hier: <table>) verfügen, nach der Reihenfolge ihres Auftretens. Den Elementtyp (hier tr für Tabellenzeilen) geben Sie bei der Stildefinition, mit einem nachfolgenden Doppelpunkt, als erstes an: tr:nth-child(N). Bei dem Parameter N kann es sich um ein Schlüsselwort (odd oder even), eine Zahl oder einen Zahlenausdruck nach dem Muster an + b handeln, z.B. 3n + 1. Dabei würde 1 auf das erste Element verweisen und 3n auf jedes dritte Element danach. Mit dem Schlüsselwort even selektieren Sie jedes gerade und mit odd jedes ungerade Element.

Für die Aufgabenstellung definieren Sie also zwei Style Sheets mit unterschiedlichen Farbattributen, eines für die ungeraden Tabellenzeilen (die erste, dritte, fünfte usw.) das andere für die geraden Tabellenzeilen.

tr:nth-child(odd) {background-color: #00BBFF;}
tr:nth-child(even) {background-color: #80FFFF;}

Die CSS3-Pseudoklassen werden wiederum von Safari, Opera, Google Chrome und Firefox (ab Version 3.5) voll unterstützt. IE bleibt fürs Erste leider wieder außen vor.

6

Wie nicht anders zu erwarten: Mozilla Firefox besteht alle CSS-Tests mit Bravour.

Tipp 6: CSS3 Selectors Test
So prüfen Sie, welche CSS3-Selektoren Ihr Browser unterstützt.

Mit Hilfe der Internetseite www.css3.info/selectors-test überzeugen Sie sich ganz schnell von der Qualität Ihres Browsers. Laden Sie die Seite im Browser und klicken Sie auf Start the CSS Selectors Test. Sie müssen eventuell etwas nach unten scrollen, um die Schaltfläche zu sehen. Alternativ rufen Sie gleich die Seite https://tools.css3.info/selectors-test/test.html auf.

Die verschiedenen Tests starten dann automatisch und das Ergebnis wird Ihnen auf der Seite nach kurzer Zeit angezeigt (das Programm testet allerdings alle CSS-Selektoren, nicht nur die von CSS3). Um allgemeine Informationen zu einem bestimmten Selektor zu erhalten, klicken Sie einfach auf die betreffende Ergebniszeile.