/ 
Quiq-1.222
River stage zero No dependents
/ Quiq::Css

NAME

Quiq::Css - Generiere CSS Code

BASE CLASS

Quiq::Hash

ATTRIBUTES

format => 'normal', 'flat' (Default: 'normal')

Format des generierten CSS-Code.

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:

'normal'

Der CSS-Code wird mehrzeilig generiert:

.comment {
    color: #408080;
    font-style: italic;
}
'flat'

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

$rules

CSS-Regeln (String)

oneLine() - Mache CSS-Code insgesamt einzeilig

Synopsis

$cssCode = $this->oneLine($cssCode);

Arguments

$cssCode

(String) CSS-Code als Text (Content des style-Tag).

style() - Generiere StyleSheet-Tags

Synopsis

$styleTags = Quiq::Css->style($h,@specs);

Arguments

@specs

Liste von Style-Spezifikationen.

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.