Dokumente überblenden

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Sicher kann man auch beides kombinieren: Beim erstmaligen Aufruf schreibt der Server das Stylesheet ins HTML, ein clientseitiges Script nimmt sich den Inhalt dieses style-Elements und packt ihn in den localStorage.

Das sollte dann in etwa so aussehen (ohne die Versionskontrolle, die man sicherlich noch mit einbauen möchte):

<?php if (isset($_COOKIE['myStylesheet'])): ?>
  <script>
  if (localStorage && localStorage.getItem('myStylesheet'))
  {
    var styleElement = document.createElement('style');
    styleElement.innerText = localStorage.getItem('myStylesheet');
    document.head.appendChild(styleElement);
  }
  else
  {
    var linkElement = document.createElement('link');
    linkElement.rel = 'stylesheet';
    linkElement.href = 'http://example.net/mystylesheet.css';
    document.head.appendChild(linkElement);
  }
  </script>
<?php else: ?>
  <style id="myStylesheet">
    <?php readfile('mystylesheet.css'); ?>
  </style>
  <script>
  if (localStorage)
  {
    localStorage.setItem('myStylesheet', document.querySelector('#myStylesheet').innerText);
    document.cookie = 'myStylesheet=true';
  }
  </script>
<?php endif; ?>

Das ist noch nicht das Ende der Fahnenstange. Für Browser, die kein localStorage unterstützen, wird jedes Mal das Stylesheet ins HTML geschrieben. Um das zu verhindern, braucht man wohl zwei Cookies.

LLAP 🖖