Quiq::Css - Generiere CSS Code
Quiq::Hash
Format des generierten CSS-Code.
$css = $class->new($format);
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:
Referenz auf CSS-Generator-Objekt.
Instantiiere ein CSS-Generator-Objekt und liefere eine Referenz auf dieses Objekt zurück.
$properties = $this->properties(@properties); $properties = $this->properties(\@properties);
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!).
undef
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.
style
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 = $this->rule($selector,\@properties); $rule = $this->rule($selector,@properties);
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 ('').
Erzeuge eine einfache Style Rule:
$rule = Quiq::Css->rule('p.abstract', fontStyle => 'italic', marginLeft => '0.5cm', marginRight => '0.5cm', );
p.abstract { font-style: italic; margin-left: 0.5cm; margin-right: 0.5cm; }
$rules = $css->rules($selector=>\@properties,...);
CSS-Selector. Z.B. 'p.abstract'.
Liste von Property/Wert-Paaren. Z.B. [color=>'red',fontStyle=>'italic'].
CSS-Regeln (String)
Wie $css->rule(), nur für mehrere CSS-Regeln auf einmal.
$rules = $css->restrictedRules($localSelector, $selector => \@properties, ... );
Selector, der allen folgenden Selektoren vorangestellt wird. Z.B. '#table01'.
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).
Wie $css->rules(), nur mit zusätzlicher Einschränkung auf einen lokalen Selektor.
$rules = $css->rulesFromObject($obj, $key => [$selector,@properties], ... );
Das Objekt, aus dessen Objektattributen $key, ... die CSS-Regeln generiert werden.
Liste der Objekt-Attribute $key, ..., ihre entsprechenden Selektoren und Default-Properties.
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).
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; }
$rules = $this->makeFlat($rules);
$styleTags = Quiq::Css->style($h,@specs);
Liste von Style-Spezifikationen.
Übersetze die Style-Spezifikationen @specs in eine Folge von <link>- und/oder <style>-Tags.
Mögliche Style-Spezifikationen:
Datei $file wird geladen und ihr Inhalt wird hinzugefügt.
Zeichenkette $string wird hinzugefügt.
Zeichenkette wird als URL interpretiert und ein <link>-Tag
<link rel="stylesheet" type="text/css" href="$url" />
hinzugefügt.
Wird zu @specs expandiert.
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.
1.166
Frank Seitz, http://fseitz.de/
Copyright (C) 2019 Frank Seitz
This code is free software; you can redistribute it and/or modify it under the same terms as Perl itself.
To install Quiq, copy and paste the appropriate command in to your terminal.
cpanm
cpanm Quiq
CPAN shell
perl -MCPAN -e shell install Quiq
For more information on module installation, please visit the detailed CPAN module installation guide.