CSS/Wertetypen/Funktionen
Aus SELFHTML-Wiki
Eine Funktion besteht aus einem Funktionsnamen, gefolgt von einer sich öffnenden runden Klammer. Innerhalb der Klammern stehen ein oder mehrere, durch Kommata getrennte Parameter, die die Funktion verarbeitet. Die Funktion endet mit einer sich schließenden runden Klammer. Innerhalb der Klammern sind Leerzeichen möglich. Kurz gefasst also: funktion(parameter) bzw. funktion(parameter1, parameter2).
Im Abschnitt zu den Farbangaben finden Sie Erläuterungen zu den Funktionen rgb, rgba, hsl und hsla. Dieser Artikel behandelt die universell einsetzbaren Funktionen url, calc und attr. Weitere Funktionen, die lediglich in einem sehr beschränkten Umfeld verwendet werden können, z.B. counter, werden in den Themengebieten erläutert, in denen diese Funktionen ihre Wirkung zeigen.
Inhaltsverzeichnis |
[Bearbeiten] Einbinden von Ressourcen - Die url-Funktion
Die Funktion url() wird verwendet, wenn eine Ressource (etwa ein Hintergrundbild) eingebunden werden soll. Als einzigen Parameter erwartet die Funktion die Adresse der Ressource.
Die Adresse kann optional von einfachen oder doppelten Anführungszeichen umschlossen werden. Anführungszeichen sind dann erforderlich, wenn die Adresse aus runden Klammern, Leerzeichen, Kommata oder besagten Anführungszeichen selbst besteht. Es ist aber auch möglich diese Zeichen mit einem Backslash zu maskieren.
background-image: url(hintergrund.png); list-style-image: url('listenpunkt dreieck.png');
[Bearbeiten] Berechnungen - Die calc-Funktion
Die Funktion calc() kann überall dort verwendet werden, wo eine Eigenschaft ein Maß erwartet. Einziger Parameter ist eine mathematische Berechnung. Erlaubt sind die Operatoren Plus (+), Minus (-), Mal (*), Geteilt (/) und Modulo (mod) sowie runde Klammern.
Die Berechnungen, die diese Funktion durchführen kann, unterliegen drei Beschränkungen:
- Addition und Subtraktion sind nur zwischen zwei Maßen möglich,
- die Multiplikation ist nur zwischen einem Maß und einer Zahl möglich,
- Division und Modulo sind nur möglich, wenn ein Maß durch eine Zahl geteilt wird.
Erfolgt eine Division durch Null oder ergibt die Berechnung ein Maß, das die Eigenschaft nicht erlaubt (beispielsweise negative Maße für width), so wird die Eigenschaft ignoriert.
min-height: calc(100px + 5em); width: calc(100% - 2 * 3px); width: calc(100% / 3); min-width: calc((80% + 4px) / 2 ) );
-moz-calc().[Bearbeiten] Attributwerte - Die attr-Funktion
Die attr-Funktion erlaubt es, Werte aus Attributen der verwendeten Auszeichnungssprache auszulesen. Dieser Wert kann dann für generierten Inhalt verwendet werden. Als Parameter erwartet diese Funktion den Namen des Attributs, dessen Wert ausgelesen werden soll..
Das Attribut wird von dem Element ausgelesen, auf das die Eigenschaft angewendet wird. Exisitiert das Attribut nicht, wird eine leere Zeichenkette („“) zurückgegeben.
[Bearbeiten] Attributwerte in beliebigen Eigenschaften verwenden
In CSS3 ist eine Überarbeitung der attr-Funktion geplant, sodass diese in vielen weiteren Eigenschaften verwendet werden kann. Die Funktion erhält zwei optionale Parameter. Die allgemeine Schreibweise lautet nun attr(Attribut,Typ,Standardwert).
Der Parameter Attribut behält seine Bedeutung.
Der Parameter Typ ist optional, muss aber gesetzt werden, wenn der dritte Parameter gesetzt wird. Bei Typ handelt es sich um ein Schlüsselwort, das aussagt, als welcher Wertetyp der ausgelesene Wert interpretiert werden soll. Ist der Parameter nicht angegeben, gilt automatisch der Wert string.
Ist das Attribut nicht gesetzt oder besitzt es einen Wert, der nicht dem angegebenen Wertetyp entspricht, wird ein dem Typ entsprechender Standardwert zurückgegeben.
Mit dem dritten Parameter Standardwert kann der Wert festgelegt werden, der verwendet werden soll, wenn das Attribut selbst keinen verarbeitbaren Wert zurückgibt. Standardwert muss dabei nicht dem angegeben Wertetyp entsprechen.
Sofern der dritte Parameter angegeben wird, ist der zweite Parameter zwingend erforderlich.
| Wertetyp | Beschreibung | Standardwert |
|---|---|---|
| string | Der Attributwert wird als Zeichenkette interpretiert. | „“ (leere Zeichenkette). |
| color | Der Attributwert wird als Farbangabe interpretiert. | Der Standardwert der color-Eigenschaft.
|
| url | Der Attributwert wird interpretiert, als wäre er Parameter der url-Funktion. attr(Attribut,url) entspricht also url(Attributwert).
| Eine Adresse, die zu einer browserinternen Fehlerseite führt. |
| integer | Der Attributwert wird als Ganzzahl interpretiert. Der Standardwert wird auch dann verwendet, wenn der Attributwert außerhalb des für die Eigenschaft gültigen Wertebereichs liegt. | 0 |
| number | Der Attributwert wird als Fließkommazahl interpretiert. Der Standardwert wird auch dann verwendet, wenn der Attributwert außerhalb des für die Eigenschaft gültigen Wertebereichs liegt. | 0.0 |
| length, angle oder time | Der Attributwert wird als Längen-, Kreis- oder Zeitmaß interpretiert. Dazu muss der Attributwert eine gültige Maßeinheit enthalten. | 0 |
| em, ex, ch, rem, vw, vh, vm, px, in, pc, pt, cm, mm, deg, grad, rad, turn, s, ms oder % | Der Attributwert wird als Maß in der angegeben Einheit interpretiert. In diesem Fall darf der Attributwert nur aus einer Zahl bestehen. | 0 |
<element typ="beispiel" schwierigkeit="2.1">Beispielelement</element>
attr(typ); /* Ergibt: „beispiel“ */ attr(typ,string); /* Ergibt: „beispiel“ */ attr(schwierigkeit); /* Ergibt: „2.1“ (als Zeichenkette) */ attr(schwierigkeit,number); /* Ergibt: „2.1“ (Als Fließkommazahl) */ attr(schwierigkeit,integer); /* Ergibt: „0“ (2.1 ist keine Ganzzahl) */ attr(unbekannt,string,'Fehler'); /* Ergibt: „Fehler“ (das Attribut „unbekannt“ existiert nicht) */
attr-Funktion steckt noch in den Kinderschuhen. Zwar sind schon experimentelle Implementierungen aufgetaucht, mit einer schnellen Umsetzung in Browsern für Endbenutzer ist jedoch nicht zu rechnen.
contentwird auf das Ankerelement angewendet. Aus diesem wird der Wert des Attributshrefausgelesen und erscheint als generierter Inhalt.