CSS/Wertetypen/Funktionen

Aus SELFHTML-Wiki
< CSS‎ | Wertetypen(Weitergeleitet von Calc)
Wechseln zu: Navigation, Suche

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).

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, werden in den Themengebieten erläutert:

Einbinden von Ressourcen - Die url-Funktion[Bearbeiten]

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0

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.

Beispiel
background-image: url(hintergrund.png);
list-style-image: url('listenpunkt dreieck.png');

Berechnungen - Die calc-Funktion[Bearbeiten]

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • CSS 3.0

Details: caniuse.com

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 (/) 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 ist 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.

Beachten Sie: Plus- und Minuszeichen müssen von Leerzeichen umschlossen werden.
Beispiel
min-height: calc(100px + 5em);
width: calc(100% - 2 * 3px);
width: calc(100% / 3);
min-width: calc((80% + 4px) / 2 ) );

Attributwerte - Die attr-Funktion[Bearbeiten]

  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari
  • CSS 2.0

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. Existiert das Attribut nicht, wird eine leere Zeichenkette („“) zurückgegeben.

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Die attr-Funktion in generiertem Inhalt</title> <style> a::after { content: ' (' attr(href) ')'; } </style> </head> <body> <h1>Die attr-Funktion in generiertem Inhalt</h1> <p>Beachten Sie bitte das <a href="beispiel.html">Beispiel</a>.</p> </body> </html>
Die Eigenschaft content wird auf das Ankerelement angewendet. Aus diesem wird der Wert des Attributs href ausgelesen und erscheint als generierter Inhalt.
Beachten Sie, dass der Internetexplorer in der Version 8 für alle Pseudoelemente nur die Schreibweise mit einfachem Doppelpunkt versteht.

Siehe auch:

Attributwerte in beliebigen Eigenschaften verwenden[Bearbeiten]

  • CSS 3.0

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.

Übersicht der möglichen Wertetypen
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 angegebenen Einheit interpretiert. In diesem Fall darf der Attributwert nur aus einer Zahl bestehen. 0
Beispiel
<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) */
Beachten Sie: Die Überarbeitung der 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.
Beachten Sie: Nicht alle Dokumenttypen erlauben beliebige Attributnamen.