M.: CSS nur bei Bedarf laden

Mahlzeit,

aktuell bauen ich per SASS einzelne CSS-Dateien, die ich dann per @include und Media-Queries in einer zentralen Datei einbinde.

Gibt es dabei eine Möglichkeit, nur die aktuell nötigen Dateien zu laden?
JS ist klar, Serverseitig ist auch klar (solange man einigermassen das Endgerät und dessen Viewport bestimmen kann, was aber nur bedingt effektiv und sinnvoll ist).

Mir schwebt was in HTML5 und/oder CSS direkt vor. Auch wenn ich davon ausgehe, dass es dazu keine Lösung gibt, fragen kostet nichts ;)

Grundsätzlich will ich einfach die Datenmenge reduzieren, da der normale mobile Internetzugang immer noch Traffic-begrenzt ist.

--
42
  1. @@M.:

    nuqneH

    aktuell bauen ich per SASS einzelne CSS-Dateien, die ich dann per @include und Media-Queries in einer zentralen Datei einbinde.

    ?? Du solltest mit Sass genau eine CSS-Datei generieren.

    Oder meintest du „einzelne SCSS-Dateien“?

    It's Sass not SASS.

    Mir schwebt was in HTML5 und/oder CSS direkt vor. Auch wenn ich davon ausgehe, dass es dazu keine Lösung gibt, fragen kostet nichts ;)

    JS ist klar. Oder eben RESS. Ansonsten dürfte dein Ausgangspunkt wohl richtig sein.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Mahlzeit,

      ?? Du solltest mit Sass genau eine CSS-Datei generieren.
      Oder meintest du „einzelne SCSS-Dateien“?

      Es sind einzelne scss-Dateien.
      Ich will ja nicht eine Datei, weil dann ja viel geladen wird, was gar nicht nötig ist ;)

      It's Sass not SASS.

      Ahja, wie bei Perl vs. PERL ;)

      JS ist klar. Oder eben RESS. Ansonsten dürfte dein Ausgangspunkt wohl richtig sein.

      Ich schau mir RESS nochmal genauer an. Wichtig ist ja, dass die Erkennung der Endgeräte zuverlässig ist. Keine AHnung, obs wirklich möglich ist, das umzusetzen.

      --
      42
  2. Meine Herren,

    Mir schwebt was in HTML5 und/oder CSS direkt vor. Auch wenn ich davon ausgehe, dass es dazu keine Lösung gibt, fragen kostet nichts ;)

    Mir ist keine Möglichkeit bekannt. Mit IEs Conditional-Comments kannst evtl. notwendige IE-Fixes nur für bestimmte Versionen des IEs laden, aber das ist auch schon das Hoch der Gefühle.

    1. @@1UnitedPower:

      nuqneH

      Mit IEs Conditional-Comments kannst evtl. notwendige IE-Fixes nur für bestimmte Versionen des IEs laden

      Fixes zusätzlich zu dem Standard-Stylesheet wären nicht der zu gehende Weg, sondern spezielle IE-Stylesheets, die aus denselben SCSS-Quellen generiert werden. Damit auch IEs nur eine Stylesheet-Ressource laden müssen.

      Siehe Wurst mit Senf.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  3. Hallo,

    Gibt es dabei eine Möglichkeit, nur die aktuell nötigen Dateien zu laden?

    Die Logik, die entscheidet, welche Styleregeln nötig sind, ist wahrscheinlich keine triviale. Daher wird eine Programmiersprache nötig sein, die bei Bedarf das HTML manipulieren kann und Stylesheets referenzieren kann. HTML und CSS sind keine Programmiersprachen und die deklarative Logik z.B. von Media-Queries ist noch sehr begrenzt und kann die seitenspezifische Frage "Welche Stylesheets sind nötig" nicht beantworten. Da wärst du also bei den Techniken, die du schon genannt hast: Clientseitiges JavaScript oder eine beliebige serverseitige Programmiersprache.

    Generell kann man sich verschiedene Logiken überlegen, wie man das Laden von Stylesheets automatisiert. Beim Generieren einer Seite (des HTML-Dokuments) können z.B. alle vorkommenden Module aggregiert werden und die entsprechenden Stylesheets per Konvention referenziert werden. Sinnvollerweise werden diese Module serverseitig zu Paketen gebündelt, sodass nur ein Request gemacht wird.

    Modularisierungslösungen wie RequireJS oder Web Components gehen in diese Richtung. Sie erlauben das Deklarieren, Bündeln und Laden von Modulen, welche aus HTML, CSS und JavaScript bestehen. Serverseitig ist dann ein Dienst nötig, der alles zusammenschnürt und ausliefert. Google hat so etwas mal für JavaScript gebaut.

    Grüße
    Mathias