✔ Entscheidungshilfe

[Alice]

Das ist schon klar.

Welche wäre dein Favorit? Warum?

Vermutlich normale CSS-Sprites oder?

 

[SpiceLab]

Das ist schon klar.

Dann verstehe ich Dein zaudern nicht.

Welche wäre dein Favorit? Warum?

Vermutlich normale CSS-Sprites oder?

Einen Favoriten gibt's bei mir nicht - siehe meine erste Antwort:

Bis auf 3.) und 5.) kommt bei mir seit jeher der Rest zum Einsatz, je nachdem, was im Einzelfall opportun ist, und in welchem Umfang Grafiken einzubinden sind. Und mit dem Bootstrap-Framework stehen mir zudem schicke Glyphicons zur Auswahl.

 

[Alice]

Falls jemand vor der selben Frage steht...

Die Kombination zwischen SVG und Data-URL scheint die beste zu sein. Natürlich stört mich auch, dass der Quelltext vergrößert wird, aber dafür ist die Qualität einfach 1. Klasse. Ich würde behaupten, dass es noch schärfer überhaupt nicht geht. Die Data-URL habe ich in meine CSS-Datei gepackt.

Seit einiger Zeit "prüft" Google ja auch CSS und JS Dateien. Mal schauen, ob ich die "Bots" austricksen kann.

Meine Idee: Ein Stylesheet extra für Google&Co bereithalten mit normalen CSS-Sprites.

Habe nun sämtliche Browser ausprobiert und keiner hat ein Problem mit SVG+Data-URL.

Das beste an der ganzen Sache ist...

Die Grafiken lassen sich mit "background-size" perfekt vergrößern/verkleinern.

Falls der Browser das SVG-Format nicht unterstützt, gibt es einen JQuery-Fallback.

Das könnte z.B. so aussehen:

  <script type="text/javascript" src="./script/modernizr.js"></script>

  <script>
  $(document).ready(function()
  {
  if (!Modernizr.svg)
  {
  $('header > logo > h1').css('background-image', 'none');
  $('header > logo > h1').css('background-color', '#ff0000');
  }
  });
  </script>

Hier gibt es das Skript zum downloaden: https://modernizr.com/download

Würde mich über Anregungen/Kritik freuen.

 

[Alice]

Möchte jetzt ungern ein neues Thema starten...

Wie findet ihr die Idee statt die lange Data-URL-Blöcke ins CSS zu schreiben, einfach eine Datei wie "sprite.php" anzugeben?

sprite.php

$SVG_File = 'logo.svg';

header('Content-Type: image/svg+xml');
header('Content-Length: ' . filesize($SVG_File));
echo file_get_contents($SVG_File);

CSS-Datei

#logo
{
   background-image: url("./image/sprite.php");
   background-repeat: no-repeate;
   background-size: cover;
}

Man könnte so auch alle "Data-URL" Grafiken in die "sprite.php" aufnehmen.

Was sagt ihr dazu?

 

[sheel]

Und wozu statische Dateien per PHP ausliefern, wenn es auch einfach ... statische normale Dateien sein könnten?
Inklusive ordentlichem Cachemanagement auf Server und Client usw.usw. gratis dazu

 

[Alice]

Mein Gedanke ist/war (?) das ich mit einer "sprite.php" gleich mehrere Probleme auf einmal lösen kann/könnte.

- SVG-Fallback
- Besserer Browsersupport (mehrere Fallbacks usw.)
- Data-URL in HTML/CSS "nicht" sichtbar D)
- Caching der PHP-Datei

 

[SpiceLab]

background-repeat: no-repeate;

no-repeat ohne e am Ende.

 

[Alice]

Hier mal ein Beispiel... (Quick&Dirty)

sprite.php

   if($_GET["image"] == "logo")
   {
      if($_GET["svg"] == "true")
      {
         $SVG = 'logo.svg';
         header('Content-Type: image/svg+xml');
         header('Content-Length: ' . filesize($SVG));
         echo file_get_contents($SVG);
      }
      if($_GET["svg"] == "false")
      {
         echo './images/logo.png';
      }
      if (empty($_GET["svg"]))
      {
         $SVG = 'logo.svg';
         header('Content-Type: image/svg+xml');
         header('Content-Length: ' . filesize($SVG));
         echo file_get_contents($SVG);
      }
  }

CSS

header > h1
{
   width: 298px;
   height: 60px;
   background-image: url("./image/sprite.php?image=logo");
   background-repeat: no-repeat;
   background-size: cover;
}

  <script type="text/javascript" src="./script/modernizr.js"></script>
  <script>
  $(document).ready(function()
  {
  if (!Modernizr.svg)
  {
  $('header > h1').css('background-image', 'url(./image/sprite.php?image=logo&svg=false)');
  }
  else
  {
  $('header > h1').css('background-image', 'url(./image/sprite.php?image=logo&svg=true)');
  }
  });
  </script>

Wie wäre dieser Ansatz in euren Augen?

 

[SpiceLab]

Wie wäre dieser Ansatz in euren Augen?

Zu viel Aufwand und Code für ein popeliges (Sprites)Hintergrundbild.

 

[Alice]

Es sollen ja mehrere Bilder eingebunden werden.