CSS mit Markern

Hinweis: Das war noch bevor ich Less und Sass entdeckt habe, aber vielleicht gab es das auch gar nicht, damals als ich das geschrieben hatte. Das ist jedenfalls die elegantere Variante, weshalb dieser Artikel im Archiv gelandet ist.

Um in CSS Marker verwenden zu können folgendes in das TS Template (hier für 2 Stylesheets + 4 Overlays):

#--------------------------------
# Stylesheets parsing
#--------------------------------

# ---------- Template ----------
cssTemplate1 = TEMPLATE
cssTemplate1.template = FILE
cssTemplate1.template.file = fileadmin/layout/css/rsys_layout.css

# ---------- Markers ----------
cssTemplate1.marks {
    BODY = TEXT
    BODY {
        data = levelmedia: -1 "slide"
        wrap = background-image: url(uploads/media/ |); background-repeat: no-repeat;
        listNum = 0
    }
    FULL_WIDTH = TEXT
    FULL_WIDTH.value = {$full_width}
    LINK_HOVER = TEXT
    LINK_HOVER.value = {$link_hover}
    LINK_NORMAL = TEXT
    LINK_NORMAL.value = {$link_normal}
}

# ---------- Page Object ----------
cssObject1 = PAGE
cssObject1 {
typeNum = 31
config {
    disableAllHeaderCode = 1
    additionalHeaders = Content-type: text/css
    admPanel = 0
}
# dynamische CSS-Vorlage aus Bibliothek laden
20 < cssTemplate1
}

# ---------- Duplicate and modify Template ----------
cssTemplate2 < .cssTemplate1
cssTemplate3 < .cssTemplate1
cssTemplate4 < .cssTemplate1
cssTemplate5 < .cssTemplate1
cssTemplate6 < .cssTemplate1

cssTemplate2.template.file = fileadmin/layout/css/rsys_style.css
cssTemplate3.template.file = fileadmin/layout/css/rsys_style-overlay-1.css
cssTemplate4.template.file = fileadmin/layout/css/rsys_style-overlay-2.css
cssTemplate5.template.file = fileadmin/layout/css/rsys_style-overlay-3.css
cssTemplate6.template.file = fileadmin/layout/css/rsys_style-overlay-4.css

# ---------- Duplicate and modify Page Object ----------
cssObject2 < .cssObject1
cssObject3 < .cssObject1
cssObject4 < .cssObject1
cssObject5 < .cssObject1
cssObject6 < .cssObject1

cssObject2.typeNum = 32
cssObject3.typeNum = 33
cssObject4.typeNum = 34
cssObject5.typeNum = 35
cssObject6.typeNum = 36

cssObject2.20 < cssTemplate2
cssObject3.20 < cssTemplate3
cssObject4.20 < cssTemplate4
cssObject5.20 < cssTemplate5
cssObject6.20 < cssTemplate6

# ---------- Include ----------
page.headerData {
    5 = TEXT
    5 {
        value (
    <link rel="stylesheet" type = "text/css" media="screen" title="Style"href="rsys_layout.css">

        )
        insertData =1
    }
}
page.headerData {
    6 = TEXT
    6 {
        value (
<link rel="stylesheet" type = "text/css" media="screen" title="Style" href="rsys_style.css">

        )
        insertData =1
    }
}
page.headerData {
    7 = TEXT
    7 {
        value (
<link rel="stylesheet" type = "text/css" media="screen" title="Style" href="rsys_style-overlay-1.css">

        )
        insertData =1
    }
}

In die Constants dann:

link_hover = green
link_normal = green
full_width = 900px

Erstellt: 07/2010| Geändert: 10/2015

Real URL

Um schönere Namen zu haben folgendes in die localconf.php bei RealURL:

// -------------------------
// Stylesheet parsing
// -------------------------
array(
    'GETvar' => 'type',
    'valueMap' => array(
        'rsys_layout.css' => '31',
        'rsys_style.css' => '32',
        'rsys_style-overlay-1.css' => '33',
        'rsys_style-overlay-2.css' => '34',
        'rsys_style-overlay-3.css' => '35',
        'rsys_style-overlay-4.css' => '36',
        'valueDefault' => '31',
    ),
    'noMatch' => 'bypass',
),

Erstellt: 07/2010| Geändert: 10/2015

CSS mit Markern und Strukturiert

Um folgende Sachen zu erreichen:

1.) Marker in Stylesheets verwenden zu können

2.) Stylesheets in einzeln Dateien in Untervereichnisse aufzuteillen

habe ich letzlich ein php-Skript geschrieben, welche die zentrale CSS Datei "ausgibt".

Punkt 2 ginge auch mit den @import Anweisungen von css - dies hat aber den Nachteil, dass die Browser diese dann nicht mehr parallel sondern sequentiell laden, was zu einer starken Performance Einbusse führt.

rsysstyle.php

Das Skript rsysstyle.php sieht folgendermassen aus:

<?php

$filename = $_SERVER['DOCUMENT_ROOT'] . $_SERVER['REQUEST_URI'];
$basename = preg_match('/(\/.*\/).*css/', $filename, $matches);
$basename = $matches[1];

header('Content-type: text/css');

$lines = file ( $filename);
foreach ($lines as $line_num => $line) {

    if( preg_match('/\@import url\((.*css)/', $line, $matches)) {

        $sublines = file ($basename . $matches[1]);
        foreach ($sublines as $subline_num => $subline) {
            echo parse($subline);
        }
    } else {
        echo $line;
    }
}

function parse($text) {

    $replacements = array(
        '#3B66BD' =>'grellrot',
    );
    $ret = str_replace('../../','../',$text);
    foreach ($replacements as $search => $replace) {
        $ret = str_replace($search, $replace, $ret);
    }
    return $ret;
}
?>

.htaccess

Das Skript rsysstyle.php wird mittels .htaccess Einstellungen aufgerufen wenn Stylesheets angefordert werden. Die .htaccess sieht folgendermassen aus:

Stylesheets

Die angeforderten Stylesheets sind bei mir z.B. fileadmin/layout/css/rsys_layout.css. Die Datei rsys_layout.css sieht dabei folgendermassen aus:

@import url(./layout/layout-boxes.css);
@import url(./layout/layout-common.css);
@import url(./layout/layout-content.css);
@import url(./layout/layout-footer.css);
@import url(./layout/layout-header.css);
@import url(./layout/layout-login.css);
@import url(./layout/layout-menues.css);
@import url(./layout/layout-search.css);

Das php Skript lädt die mit @import deklarierten Stylesheets und gibt sie allessamt als eine Datei Namens rsys_layout.css aus. Der Vorteil des gesamt Konzeptes ist dass es auch ohne das Skript funktioniert - dann wird einfach der css import Befehl interpretiert.

Erstellt: 07/2010| Geändert: 10/2015

CSS mit Markern

rsysstyle.php

.htaccess

Stylesheets

Suche