Hallo!
Ich habe meine SCSS-Dateien in einem Ordner abgelegt: reset.scss, grundeinstellungen.scss, header.scss usw. Eine Datei alle.scss fasst alle diese SCSS-Dateien mit Import-Regeln zusammen (so kann ich projektbezogen einzelne SCSS-Dateien einbinden oder ausschließen).
Diese Datei alle.scss ist wiederum im Seitenlayout bei »Externe Stylesheets« eingebunden. Contao übersetzt mir das SCSS in CSS und minimiert alles.
Dieses Vorgehen ist zu http/2-Zeiten nicht mehr optimal.
Mein Ziel ist es, alle.scss zu ersetzen durch above-the-fold.scss und later.scss.
Wie die Namen sagen, soll in above-the-fold.scss durch die Import-Regeln nur SCSS geladen werden, das beim Aufruf der Seite Einfluss auf den sichtbaren Bereich hat.
Eine gute Möglichkeit, dem Browser die Unterscheidung in wichtiges und später zu ladendes CSS nahezulegen, scheint (nach Recherchen) folgende Konstruktion zu sein:
Der Browser lädt sich die Above-the-fold-Dateien und rendert die Seite, um sich die anderen Dateien dann nachzuladen.Code:<link rel="stylesheet" href="above-the-fold.css"> <link rel="stylesheet" href="later.css" media="print" onload="this.media='all'">
Nun kann man SCSS ja nicht in HTML einbinden.
Da ich die Funktion von Contao schätze, das SCSS in CSS umzuwandeln und zu komprimieren, habe ich mich gefragt, ob man das Backend im Bereich Seitenlayout ändern bzw. erweitern könnte.
Neben der existierenden Möglichkeit, externe Stylsheets einzubinden, könnte ein neues Feld geschaffen werden, das es erlaubt, weitere Stylesheets einzubinden, die dann im folgenden Code münden:
Also, zur Verdeutlichung: nach »Externe Stylesheets: Auswahl ändern« stelle ich mir eine Eingabe »Externe Stylesheets (lazy loading): Auswahl ändern« vor.Code:<link rel="stylesheet" href="/pfad/later.css" media="print" onload="this.media='all'">
Wo kann man das ergänzen?
Danke herzlich schon mal für einen sachdienlichen Hinweis.
Lesezeichen