Aktueller CSS Media-Query zur Anzeige von hochauflösenden Bildern

Ich habe heute einen sehr interessanten und aktuellen Artikel über die Einbindung von CSS Media-Queries zur Anzeige von Grafiken auf hochauflösenden Displays gelesen. Der Ursprung liegt in der Markteinführung des Apple iPhone 4 und folgender CSS-Deklaration:

.image {
  background-image: url("images/200_200.png");
  width: 200px;
  height: 200px;
}
 
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .image {
    background-image: url("images/400_400.png");
    background-size: 200px 200px;
  }
}

Inzwischen verfügen aber auch Smartphones mit Android oder Windows-Phone Betriebssystemen über die Möglichkeit zur Darstellung von hochauflösenden Grafiken auf hochauflösenden Displays. Im Wandel der Zeit hat sich daher auch die zur verwendende CSS Media-Query-Eigenschaft angepasst (siehe Retina Display Ready With Media Query):

@media 
/* WebKit based browsers (Chrome, Safari, latest Opera) */
only screen and (-webkit-min-device-pixel-ratio: 1.5), 
/* Older Firefox browsers (prior to Firefox 16) */
only screen and (min--moz-device-pixel-ratio: 2),   
/* Opera Mini & Opera Mobile */
only screen and (-o-min-device-pixel-ratio: 3/2),  
/* Kindle Fire, Kindle HD */
only screen and (min-device-pixel-ratio: 1.5),  
/* The standard way: dots-per-physical-inch */
only screen and (min-resolution: 2dppx),
/* dppx-Fallback: dots-per-CSS-inch */
only screen and (min-resolution: 192dpi) {
  .image {
    background-image: url("images/400_400.png");
    background-size: 200px 200px;
  }
}

Der empfohlene Weg ist demnach die Verwendung des Kriteriums „min-resolution“. Googles Chrome-Browser zeigt in der Developer Console sogar eine Meldung an, falls ein anderer Media-Query verwendet wird:

Consider using ‚dppx‘ units instead of ‚dpi‘, as in CSS ‚dpi‘ means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual ‚dpi‘ of a screen.

Für die Unterstützung älterer Geräte müssen weiterhin die anderen Eingrenzungen verwendet werden. Damit die Media-Queries wie erwartet funktionieren, muss im HTML-Dokument folgendes HTML-Tag im Kopfbereich gesetzt werden:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Die Zukunft verspricht jedoch eine Ablösung des Viewport-Meta-Tags durch folgende CSS-Angaben (siehe An introduction to meta viewport and @viewport):

@-webkit-viewport { width: device-width }
@-moz-viewport { width: device-width }
@-ms-viewport { width: device-width }
@-o-viewport { width: device-width }
@viewport { width: device-width }

Um der Flut an herstellerspezifischen Angaben gerecht zu werden, empfehle ich die dynamische Stylesheet Sprache Less in Kombination mit LESS Hat 2. Wer nur LESS benutzen möchte, der kann sich mit folgendem Mixin behelfen:

@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
~"only screen and (min--moz-device-pixel-ratio: 2)",
~"only screen and (-o-min-device-pixel-ratio: 3/2)",
~"only screen and (min-device-pixel-ratio: 1.5)",
~"only screen and (min-resolution: 2dppx)",
~"only screen and (min-resolution: 192dpi)";
 
.image {
  background-image: url("images/200_200.png");
  width: 200px;
  height: 200px;
  @media @highdensity {
    background-image: url("images/400_400.png");
    background-size: 200px 200px;
  }
}

Responsive Website-Designs mit Pure

Zur Umsetzung von responsiven Webseiten gibt es eine Vielzahl an CSS-Frameworks. Ein CSS Framework, das mir besonders gut gefällt, ist Pure. Pure besteht aus verschiedenen Modulen und kann Basis-Klassen für Navigationsleisten, Buttons, Tabellen, Formulare und Textinhalte vorgeben. Die einzelnen Module sind im Durchschnitt genau 1 KB groß und als Gesamtpaket sogar nur 4,4 KB. Mit dem Grid-Modul (0,9 KB) lässt sich ganz schnell ein Rasterlayout für eine Webseite erstellen, das sich je nach Bildschirmgröße anpasst und perfekt auf einen gleichzeitigen Designentwurf für Smartphones, Tablets und Desktops ausgelegt ist. Im Folgenden möchte ich ein Beispiel-Layout zeigen, das ich entworfen habe und welches die Inhalte einer Webseite modular aufbaut.
Responsive Website-Designs mit Pure weiterlesen

Div Container horizontal und vertikal zentrieren

Div Container lassen sich mit absoluter Positionierung und Minusabständen zentrieren (siehe [post id=3140][/post]). Meine neue Lieblingsmethode, um einen Div Container mittig zu platzieren, ist aber Folgende:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8">
    <style>
      #wrapper {
        width: 400px;
        height: 400px;
 
        position: relative;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
 
        background-color: black;
      }
 
      #center {
        width: 200px;
        height: 200px;
 
        position: relative;
        display: inline-block;  
 
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="center"></div>
    </div>
  </body>
</html>

Texte und Links mit CSS einfügen

Mit CSS werden Inhalte für gewöhnlich ausgeschmückt. Mit der content-Eigenschaft lassen sich aber auch Texte und Links einfügen. Zum Beispiel kann man auf weiterführende Links aufmerksam machen:

a:before {
  content: 'Mehr erfahren: ';
}

In meinem Blog nutze ich diese Technik, um externe Links mit einem Pfeilchen zu kennzeichnen:

css-after-content

Möchte man nur Links auszeichnen, die in einem neuen Tab geöffnet werden, dann hilft folgende Anweisung:

1
2
3
a[target="_blank"]:after {
  content: ' →';
}

Es lassen sich auch HTML-Attribute ausgeben, wie beispielsweise das href-Attribut eines Links:

a:after{
  content: ' Webseiten-Adresse: ' attr(href);
}

Die Verwendung von Bildern ist ebenfalls möglich:

a:after{
  content: url('https://www.google.de/images/srpr/logo3w.png');
}

Die Eigenschaft content gehört übrigens zum CSS Level 2 Standard und funktioniert ab Internet Explorer 8.

Eigene Fonts in Webseiten einbinden

Mit HTML5 und der CSS3-Regel @font-face ist das Einbinden von eigenen Schritarten (engl. fonts) zum Kinderspiel geworden. Das Einzige was man beachten muss, ist das Format der Schriftart. Internet Explorer 9 und aufwärts unterstützten nur das von Microsoft und Adobe entwickelte OpenType-Format. Alle anderen HTML5-Browser kommen mit TrueType Fonts (TTF) zurecht. Zum Glück gibt es einen TTF to EOT Font Converter, der einem aus einer TTF-Datei eine EOT-Datei erzeugen kann. Hat man beide Formate vorliegen, kann man die Schriftarten deklarieren und verwenden.
Eigene Fonts in Webseiten einbinden weiterlesen