Kein Abstand vor den Klammern bei Funktionen in CSS

Geschrieben am: 23.3.2014

Es gibt sehr viele Funktionen in CSS, die durch runde Klammern gekennzeichnet sind. Ein Beispiel ist url() zur Einbindung eines Hintergrundbildes:

background-image: url(pfad/zum/bild.png);

Wichtig ist hierbei: Es darf kein Leerzeichen zwischen Funktionsname und runden Klammern stehen. Das Folgende klappt deswegen nicht:

background-image: url (pfad/zum/bild.png) /* falsch! */`

Die url()-Funktion gibt es schon länger, mit CSS3 sind eine große Anzahl weiterer Funktionen dazugekommen:

linear-gradient() für lineare Farbverläufe
scale(), translate() und rotate() für Transformationen wie etwa bei transform: scale(2), das ein Element auf die doppelte Größe setzt.
rgba() für eine Farbe mit Transparenz
calc() für berechnete Breiten- und andere Längenangaben

Und immer gilt: steht ein Leerzeichen zwischen Funktionsnamen und Funktion klappts nicht mehr.

Florence Maurice