senäh

17senäh und so…

Media Query Variablen

HTML/CSS/JS
03. Mai 2012
Kommentare: 2

Angewandte Media-Queries mit JavaScript auslesen – ohne Breakpoint-Doppelung

Kategorien: HTML/CSS/JS | 03. Mai 2012 | Kommentare: 2

Ich bin über einen interessanten Artikel zum Thema Navigation in Responsive Designs gestoßen, der mögliche Variationen der Navigation aufzeigt, sobald der Bildschirm des Endgeräts schmaler wird. Was dabei angesprochen wurde: statt der eigentlichen Navigationsleiste am oberen Ende der Seite findet man ein Dropdown-Menü, das alle nötigen Navgationspunkte beinhaltet. Mittlerweile gar nicht so unüblich.

Dazu bedarf es jedoch ein wenig JavaScript. Die Listenpunkte müssen ja irgendwie in ein Dropdown-Menü umgewandelt werden. Nun hat man im CSS schon mühsam seine Breakpoints gesetzt, an denen sich das Layout jeweils anpasst. Müssen wir diese jetzt im JavaScript erneut formulieren? Dopplungen soll man doch immer vermeiden. Was ist wenn wir die Breakpoints ändern wollen? Wir müssten stets 2 verschiedene Stellen – sowohl im CSS als auch im JavaScript – pflegen. Kann das die Lösung sein? Weiterlesen →

CSS3 Logo Thumbnail

HTML/CSS/JS
04. Okt 2011
Kommentare: 0

Funktionsumfang und Syntax von Media Queries

Kategorien: HTML/CSS/JS | 04. Okt 2011 | Kommentare: 0

Nach den lästigen Grundlagen kommen wir endlich zum Kern dieser Serie: den Media Queries. Ich werde euch jetzt eine Übersicht über den Funktionsumfang und kleine Codebeispiele für Media Queries geben. Anschließend werde ich euch den ein oder anderen Anwendungsfall zeigen. Los geht’s! Weiterlesen →

CSS3 Logo Thumbnail

HTML/CSS/JS
30. Sep 2011
Kommentare: 0

Media Types als Grundlage

Kategorien: HTML/CSS/JS | 30. Sep 2011 | Kommentare: 0

Vor ein paar Tagen hatte ich ja schon einmal kurz über Media Queries berichtet. Ich hatte euch zwar gezeigt was man so ungefähr mit Media Queries machen kann, aber nicht wirklich erklärt wie. Das möchte ich nun ausführlich nachholen. Warum? Weil Responsive Design mit Media Queries in der letzten Zeit unter Designern ein ebenso großes Buzzword ist wie HTML5 für Programmierer. Deswegen sollte man wissen, was dahinter steckt. Weiterlesen →

Longcat Thumbnail

HTML/CSS/JS
18. Sep 2011
Kommentare: 1

Media Queries make longcat short!

Kategorien: HTML/CSS/JS | 18. Sep 2011 | Kommentare: 1

Schon einmal von Media Queries gehört? Media Queries sind in gewisser Weise eine mit CSS3 eingeführte verbesserte Version der Media Types von CSS2. Media Types dienen dazu das Design einer Webseite mittels CSS für verschiedene Ausgabegeräte anzupassen. So kann man beispielsweise einstellen, dass die Schrift beim Ausdruck einer Webseite kleiner sein soll, als auf der eigentlichen Webseite, um Druckerpapier zu sparen. Media Queries erweitern diese Idee in dem auch bestimmte Eigenschaften und Zustände des Ausgabegerätes abgefragt werden können. Weiterlesen →