CSS @supports Regel

David Walsh berichtet heute über weiter reichende Unterstützung diverser Browser der @supports – Regel, auch das W3C hat Ende März sein Dokument zu den Conditional Rules aktualisiert.

Wer es noch nicht schon gelesen hat, die @supports-Regel dient zum Abfragen, Testen und Filtern per CSS oder JavaScript, ob bestimmte CSS-Eigenschaften auf dem jeweiligen Browser verfügbar sind, oder eben nicht.

Grundsätzliche Funktionsweise hierbei:

<style>
@supports (Eigenschaft:Wert) {
Element {
/* Elementeigenschaften */
}
}
</style>

Zu deutsch: Wenn der Browser die Darstellung dieser Eigenschaft mit diesem Wert unterstützt, dann (und nur dann) wende die folgenden Style-Deklarationen für ein Element xy an. (diese folgenden Eigenschaften müssen aber nicht zwangsläufig zu der wenn-Frage gehören!)

Hierzu gibt es auch eine Verneinung, also eine Negation:

<style>
@supports not (Eigenschaft:Wert) {
Element {
/* Elementeigenschaften */
}
}
</style>

Weiterlesen

  • Veröffentlicht in: CSS3
media-queries

CSS3 Media-Queries Anwendungsbeispiel

Bereits mit CSS2 konnte man bestimmte Media-Typen als Ausgabegeräte ansprechen und ihnen unterschiedliche Style-Angaben zuweisen. Ein zu druckendes Dokument sollte in der Regel den jeweiligen Artikel mit Überschrift und -text enthalten, nicht aber alle anderen sicht- (oder unsicht-)baren Elemente der Webseite wie Navigation, Werbung, etc.

Ich habe hier meist media=“print“ für die Druck- und media=“screen“ für die Bildschirmausgabe eines HTML-Dokumentes gebraucht. Mit zunehmender Zahl an mobilen Endgeräten wurde auch media=“handheld“ populärer. Aber schon hier fingen die Komplikationen an, da natürlich nicht alle mobilen Endgeräte sich als „handheld“ outen oder gar die entsprechenden Anweisungen verstehen wollten.

Grundsätzlich verfügbar waren neben den genannten Media-Typen auch „all“, „braille“, „projection“, „tty“, „tv“, „embossed“ und „speech“.

Mit CSS3 Media-Queries haben wir nun die Möglichkeit, gezielt auf Mediengrössen und Ausrichtungen der jeweiligen Endgeräte zu servieren.

Im Wesentlichen schaut man bei einem Endgerät auf die im Browser zur Verfügung stehende Breite oder Höhe eines Viewports (Angaben in der Regel in Pixel, px), also die Breite oder Höhe des jeweiligen (Browser-)Fensters oder die Auflösung des Bildschirms z. B. bei Smartphones und Tablets. Auch die Ausrichtung „landscape“ (Querformat) und „portrait“ (Hochformat) ist greifbar. Dies ist gerade für pad bzw. Tablets wichtig.

Ich möchte hier und heute noch gar nicht weiter auf die Möglichkeiten und deren Anwendung eingehen.

Wichtig für mich war es am Anfang, das Thema „vor die Augen“ also visualisiert zu bekommen. Zu sehen, was passiert, wenn ich das Browserfenster kleiner und größer mache oder wenn ich meinen 22″ Bildschirm auf die Seite stelle, das Pad drehe …

Weiterlesen

schicke screenshots deines (responsive) layouts gefällig?

Schon einmal ausprobiert, wie Dein Layout auf Pads, Smartphones und grösseren Screens aussieht? Oder Du möchtest Dein Layout ansprechend und professionell Deinen Freunden oder einem Kunden präsentieren?

Am-I-Responsive

Auf der Webseite ami.responsivedesign.is/ wird Deine Webseite in 4 verschiedenen Viewports in einer Grafik auf enstprechenden Geräten gezeigt:

  • Desktop – 1600 x 992px
  • Laptop – 1280 x 802px
  • Tablet – 768 x 1024px
  • Mobile – 320 x 480px

Weiterlesen