NAME
Quiq::Css - Generiere CSS Code
BASE CLASS
ATTRIBUTES
METHODS
Konstruktor
new() - Instantiiere CSS-Generator
Synopsis
$css = $class->new;
$css = $class->new($format);Arguments
- $format (Default: 'normal')
-
Format des generierten CSS-Code. Zulässige Werte:
Der CSS-Code wird mehrzeilig generiert:
.comment { color: #408080; font-style: italic; }Der CSS-Code wird einzeilig generiert:
.comment { color: #408080; font-style: italic; }
Returns
Referenz auf CSS-Generator-Objekt.
Description
Instantiiere ein CSS-Generator-Objekt und liefere eine Referenz auf dieses Objekt zurück.
Objektmethoden
properties() - Zeichenkette aus CSS Properties
Synopsis
$properties = $this->properties(@properties);
$properties = $this->properties(\@properties);Description
Generiere aus den Property/Wert-Paaren @properties eine Zeichenkette aus CSS Properties. Ist die Liste der Property/Wert-Paare leer oder haben alle Schlüssel keinen Wert (undef oder Leerstring) liefere undef (keinen Leerstring, damit von der Methode tag() kein style-Attribut mit Leerstring erzeugt wird!).
Diese Methode ist nützlich, wenn der Wert eines HTML style-Attributs erzeugt werden soll. Wenn als Wert des Attributs style eines Quiq::Html::Tag eine Array-Referenz angegeben wird, wird diese Methode gerufen.
Example
Erzeuge Properties für HTML style-Attribut:
$properties = Quiq::Css->properties(
fontStyle => 'italic',
marginLeft => '0.5cm',
marginRight => '0.5cm',
);liefert
font-style: italic; margin-left: 0.5cm; margin-right: 0.5cm;rule() - Generiere CSS Style Rule
Synopsis
$rule = $this->rule($selector,\@properties);
$rule = $this->rule($selector,@properties);Description
Generiere eine CSS Style Rule, bestehend aus Selector $selector und den Property/Value-Paaren @properties und liefere diese als Zeichenkette zurück. Ist die Liste der Properties leer oder haben alle Schlüssel keinen Wert (undef oder Leerstring) liefere einen Leerstring ('').
Example
Erzeuge eine einfache Style Rule:
$rule = Quiq::Css->rule('p.abstract',
fontStyle => 'italic',
marginLeft => '0.5cm',
marginRight => '0.5cm',
);liefert
p.abstract {
font-style: italic;
margin-left: 0.5cm;
margin-right: 0.5cm;
}rules() - Generiere mehrere CSS Style Rules
Synopsis
$rules = $css->rules($selector=>\@properties,...);Arguments
- $selector
-
CSS-Selector. Z.B. 'p.abstract'.
- \@properties
-
Liste von Property/Wert-Paaren. Z.B. [color=>'red',fontStyle=>'italic'].
Returns
CSS-Regeln (String)
Description
Wie $css->rule(), nur für mehrere CSS-Regeln auf einmal.
restrictedRules() - Generiere lokale CSS Style Rules
Synopsis
$rules = $css->restrictedRules($localSelector,
$selector => \@properties,
...
);Arguments
- $localSelector
-
Selector, der allen folgenden Selektoren vorangestellt wird. Z.B. '#table01'.
- $selector
-
Sub-Selector, der dem $localSelector mit einem Leerzeichen getrennt, nachgestellt wird. Wenn Leerstring (''), wird der Sub-Selector fortgelassen, die @properties also direkt dem $localSelector zugeordnet. Beginnt $selector mit einem Kaufmanns-Und (&), werden $localSelector und $selector ohne trennendes Leerzeichen konkateniert (gleiche Logik wie bei Sass).
- \@properties
-
Liste von Property/Wert-Paaren. Z.B. [color=>'red',fontStyle=>'italic'].
Returns
CSS-Regeln (String)
Description
Wie $css->rules(), nur mit zusätzlicher Einschränkung auf einen lokalen Selektor.
rulesFromObject() - Generiere CSS Style Rules aus Objekt-Attributen
Synopsis
$rules = $css->rulesFromObject($obj,
$key => [$selector,@properties],
...
);Arguments
- $obj
-
Das Objekt, aus dessen Objektattributen $key, ... die CSS-Regeln generiert werden.
- $key => [$selector,@properties], ...
-
Liste der Objekt-Attribute $key, ..., ihre entsprechenden Selektoren und Default-Properties.
Returns
CSS-Regeln (String)
Description
Die Methode erzeugt CSS-Regeln auf Basis von Objekt-Attributen. Jedes Attribut entspricht einem CSS-Selektor und definiert dessen Properties. Es können Default-Properties hinterlegt werden, die der Aufrufer ergänzen ('+' als erstes Element der Property-Liste) oder ersetzen oder löschen kann (siehe Example).
Example
Beispiel aus Quiq::Html::Verbatim
Im Konstruktor werden die Objekt-Attribute vereinbart. Diese können bei der Instantiierung des Objektes gesetzt werden.
my $self = $class->SUPER::new(
cssTableProperties => undef,
cssLnProperties => undef,
cssMarginProperties => undef,
cssTextProperties => undef,
...
);In der Methode, die die CSS-Regeln erzeugt, werden die zugehörigen Selektoren und Default-Properties vereinbart.
$rules .= $css->rulesFromObject($self,
cssTableProperties => [".xxx-table"],
cssLnProperties => [".xxx-ln",color=>'#808080'],
cssMarginProperties => [".xxx-margin",width=>'0.6em'],
cssTextProperties => [".xxx-text"],
);Beim Konstruktor-Aufruf können die Default-Properties ergänzt ('+' als erstes Element in der Property-Liste) oder ersetzt (keine Angabe) oder gelöscht werden (leere Liste).
my $obj = Quiq::Hash->new(
cssTableProperties => [backgroundColor=>'#f0f0f0'], # ersetzen
cssLnProperties => ['>',color=>'black'], # ersetzen
cssMarginProperties => ['+',backgroundColor=>'red'], # ergänzen
cssTextProperties => [], # löschen
);Resultierende CSS-Regeln:
.xxx-table { background-color: #f0f0f0; }
.xxx-ln { color: black; }
.xxx-margin { width: 0.6em; background-color: red; }Klassenmethoden
makeFlat() - Mache CSS-Regeln einzeilig
Synopsis
$rules = $this->makeFlat($rules);Arguments
oneLine() - Mache CSS-Code insgesamt einzeilig
Synopsis
$cssCode = $this->oneLine($cssCode);Arguments
style() - Generiere StyleSheet-Tags
Synopsis
$styleTags = Quiq::Css->style($h,@specs);Arguments
Description
Übersetze die Style-Spezifikationen @specs in eine Folge von <link>- und/oder <style>-Tags.
Mögliche Style-Spezifikationen:
- "inline:$file":
-
Datei $file wird geladen und ihr Inhalt wird hinzugefügt.
- $string (Zeichenkette mit enthaltenen '{')
-
Zeichenkette $string wird hinzugefügt.
- $url (Zeichenkette ohne '{'):
-
Zeichenkette wird als URL interpretiert und ein <link>-Tag
<link rel="stylesheet" type="text/css" href="$url" />hinzugefügt.
- \@specs (Arrayreferenz):
-
Wird zu @specs expandiert.
Example
Code zum Laden eines externen Stylesheet:
$style = Quiq::Css->style('/css/stylesheet.css');
=>
<link rel="stylesheet" type="text/css" href="/css/stylesheet.css" />Stylesheet aus Datei einfügen:
$style = Quiq::Css->style('inline:/css/stylesheet.css');
=>
<Inhalt der Datei /css/stylesheet.css>Mehrere Stylesheet-Spezifikationen:
$style = Quiq::Css->style(
'/css/stylesheet1.css'
'/css/stylesheet2.css'
);
=>
<link rel="stylesheet" type="text/css" href="/css/stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="/css/stylesheet2.css" />Mehrere Stylesheet-Spezifikationen via Arrayreferenz:
$style = Quiq::Css->style(
['/css/stylesheet1.css','/css/stylesheet2.css']
);Dies ist nützlich, wenn die Spezifikation von einem Parameter einer umgebenden Methode kommt.
VERSION
1.222
AUTHOR
Frank Seitz, http://fseitz.de/
COPYRIGHT
Copyright (C) 2024 Frank Seitz
LICENSE
This code is free software; you can redistribute it and/or modify it under the same terms as Perl itself.