Arbeitshilfen

Formatierungen für Formulare

  1. CSS3 - Selektoren
  2. Formatierungen für Formulare
  3. Browserunterstützung

Das ist ein schönes Beispiel für die neu in CSS3 eingeführte Pseudoklasse :target, mit der Sie das Ziel von Verweisen kenntlich machen können. Eine helle Hintergrundfarbe (wie bei Wikipedia) ist sicher eine gute Wahl als Hervorhebung.

Formatierungen für Formulare

Gehen wir noch näher auf CSS3-Pseudoklassen ein. Drei neue Pseudoklassen sind für die verschiedenen Zustände von Formularelementen vorgesehen:Über :enabled wählen Sie aktivierbare Elemente aus, über :disabled Elemente, die nichtaktivierbar sind. Schließlich können Sie über die Pseudoklasse :checked angeklickte Checkboxen oder Radiobuttons auswählen. Nehmen wir das folgende deaktivierte Textfeld:

<input type="text" disabled=
"disabled" name="ergebnis" />

Dieses deaktivierte Element können Sie beispielsweise über folgende Angabe halb transparent machen:

input[type="text"]:disabled {
opacity: 0.5;
}

Total pseudo

image.jpg

© Internet Magazin

Klickt man in der Wikipedia auf eine der Fußnoten im Fließtext ...

:nth-child(), :target oder :disabled sind allesamt neue Pseudoklassen. Daneben gibt es in CSS auch die Pseudoelemente wie :first-line, um die erste Zeile anzusprechen, oder :first-letter, um den ersten Buchstaben gesondert zu formatieren. Auch :after oder :before, die im Zusammenhang mit der CSS-Eigenschaft content zur Einfügung von erzeugten Inhalten dienen, gehören zu den Pseudoelementen.

image.jpg

© Internet Magazin

... springt man zur Fußnote unten, die über :target farblich hervorgehoben ist.

CSS3 führt keine neuen Pseudoelemente ein. Damit Pseudoelemente jedoch formal besser von Pseudoklassen unterschieden werden, sieht das W3C vor, dass Pseudoelemente mit doppelten Doppelpunkten geschrieben werden, also etwa ::first-line oder ::after. Da dies jedoch browserübergreifend noch nicht so gut unterstützt wird, bleiben Sie vorerst besser bei der klassischen Schreibweise mit nur einem Doppelpunkt.

Mehr Attributselektoren

Attributselektoren wurden in CSS2 eingeführt. Damit können Sie Elemente auswählen, wenn diese bestimmte Attribute oder ihre Attribute bestimmte Eigenschaften haben. In CSS2 sind bereits mehrere Attributselektoren definiert, etwa

  • element[attribut] wählt element aus, sofern es ein Attribut mit Namen attribut besitzt.
  • element[attribut="wert"] wählt element aus, sofern es ein Attribut mit Namen attribut und mit Wert wert hat. Das ist sehr praktisch bei der Arbeit mit Formularen: Über input[type="text"] können Sie Formatierungen auf die Textfelder beschränken. Hingegen würde der Selektor input alleine ja auch Checkboxes oder Radiobuttons auswählen.
  • element[attribut~="wert"] wählt die Elemente aus, die ein Attribut besitzen, das eine durch Leerzeichen getrennte Liste von Werten enthält, von denen einer genau mit wert übereinstimmt.
  • element[attribut|="wert"] wählt die Elemente aus, die ein Attribut besitzen, das einen Wert enthält, der mit dem angegebenen Wert, gefolgt von einem Bindestrich, beginnt. Von den hier vorgestellten Selektoren sind die letzten beiden etwas kryptisch und ihre Notwendigkeit ist auf den ersten Blick auch nicht ganz einleuchtend. Eindeutig praktisch sind hingegen die in CSS3 eingeführten Attributselektoren. Damit können Sie Teilübereinstimmungen bei Attributen feststellen.
  • element[attribut^="wert"] wählt die Elemente aus, die ein Attribut besitzen, das mit dem bei wert angegebenen Text beginnt. Damit kann man beispielsweise ohne großen Aufwand alle Links auf externe Adressen auswählen.
a[href^="http://"], a[href^=
"https://"]{
/* Formatierung für externe Links */
}

Über die CSS-Eigenschaft content können Sie dann zusätzliche Inhalte vor den Links ergänzen. Im Beispiel soll davor ein kleiner Pfeil nach rechts und ein Leerzeichen ergänzt werden:

a[href^="http://"]:before,
a[href^="https://"]:before {
content: "\2192\00A0";
}

Wenn Sie Zeichen wie im Beispiel ergänzen, so benötigen Sie deren Hexadezimalcode. Der Pfeil nach rechts hat den Unicodewert in hexadezimaler Form #x2192. Bei der Verwendung als erzeugten Inhalt löschen Sie #x und schreiben stattdessen davor einen Backslash.Unser Tipp: Falls Sie lediglich den Dezimalcode Ihres Zeichens vorliegen haben, können Sie diesen mit dem Standard-Windowsrechner in Hexadezimalcode umrechnen, wenn Sie auf die wissenschaftliche Ansicht umschalten.Über den CSS3-Attributselektor element[attribut$="wert"] wählen Sie dagegen Elemente aus, die ein Attribut besitzen, das mit dem bei wert angegebenen Text endet. Das ist praktisch, wenn Sie Verweise auf HTML- und andere Dateien unterschiedlich markieren wollen:Durch den folgenden Code werden Verweise auf pdf-Dokumente mit einem kleinen Icon versehen.

a[href$=".pdf"] {
background: url(pdficon.png) norepeat;
padding-left: 10px;
}

Der dritte neue Attributselektor element[attribut*="wert"] findet Übereinstimmungen, wenn wert irgendwie im Attributwert vorkommt.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…