CSS Dateien einbinden

Author:
Kategorie:
TYPO3
Beitrag vom:
TYPO3 includeCSS
TYPO3 includeCSS

TypoScript Funktionen zur Einbindung von CSS Dateien auf verschiedene Weise nutzen

TYPO3 bietet von Hause aus die nötigen TypoScript Funktionen, die die Einbindung von CSS Dateien ermöglichen. Hier wird erläutert, wie sich mittels TypoScript CSS Dateien in den Quelltext integrieren lassen. Das kann auf zwei verschiedene Arten oder als Kombination erfolgen.

Externe CSS Dateien einbinden

Die TypoScript Funktionen includeCSS und includeCSSLibs sind zur Einbindung externer CSS Dateien gedacht und bieten verschiedene Möglichkeiten zur Konfiguration. Die komplette Liste der Paramter zur Konfiguration findet sich hier.

page.includeCSS {

    // Pfad zur CSS Datei
    file_01 = fileadmin/css/global.css
    file_01 {

        // Die wichtigsten Parameter zur CSS Einbindung

        // Der media Paramter: screen, print, all
        // Weiter Infos hier: https://wiki.selfhtml.org/wiki/CSS/Media_Queries
        media = screen

        // Diese CSS Datei an erster Stelle laden 0 / 1
        forceOnTop = 1

        // Diese CSS Datei von der Kompression ausschließen
        // TypoScript: config.compressCss
        disableCompression = 1

        // Diese CSS Datei von der Zusammenfügen mit anderen Dateien ausschließen
        // TypoScript: config.concatenateCss
        excludeFromConcatenation = 1

    }

    // Eine weitere CSS Datei
    file_02 = fileadmin/css/style.css
    file_02.media = screen

    // CSS Datei zur Druckausgabe
    file_03 = fileadmin/css/print.css
    file_03.media = print

    // Externe CSS Datei von anderem Server einbinden
    file_04 = http : // www.seite.tdl / css / share.css
    // Der external Parameter ermöglicht die Einbindung der CSS Datei
    // ohne Prüfung, ob diese existiert
    file_04.external = 1
    file_04.media = screen

}

CSS Styles inline abrufen

Die TypoScript Funktion cssInline schreibt, wie der Name bereits verrät, den CSS Code als Styleangabe direkt, also inline, in den Quelltext.

page.cssInline {
 10 = TEXT
 10.value = h1 {font-size:30px;}

 20 = TEXT
 20.value = h2 {text-decoration:underline;}
}

// Die Konfiguration inlineStyle2TempFile auf Null sezten,
// damit TYPO3 den CSS Code nicht in eine externe Datei auslagert
config.inlineStyle2TempFile = 0

Seite teilen

Der Beitrag: CSS Dateien einbinden, aus der Rubrik TYPO3 hat dir gefallen?