Responsive Webdesign – Grundlagen

Medienangaben in CSS 2.1

Testen Sie unsere 1984 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
In CSS 2.1 sind die Medienangaben noch recht einfach gehalten. Sie können beispielsweise unterschiedliche Stylesheets für den Ausdruck und für den Bildschirm definieren. Das war's dann aber auch schon.

Transkript

Bereits in CSS 2.1 können Sie unterschiedliche Formatierungen je nach Ausgabegerät definieren. Am häufigsten verwendet werden die Typen: Screen, Print und All. Diese können sehr verschiedene Arten angeben. Und außerdem gibt es unterschiedliche Methoden die Formatierung zu organisieren. Es ist wichtig, das alles zu kennen, da das die Basis für die CSS 3 Media Queris darstellt. Ich habe hier einmal aufgerufen die Seite vom W3C, vom World Wide Web Consortium, wo es in der Spezifikation von CSS 2.1 über die Media Types geht. Und da sehen Sie hier dann auch erklärt, wo man diese Medien-Typen einsetzen kann. Sie können ja externe Style Sheets in CSS über @import einbinden. Hier sehen Sie ein Beispiel dafür, dahinter folgt url und der Pfad zur der CSS-Datei. Und dahinter können Sie direkt angeben, dass diese Formatierungen beispielsweise nur für den Bildschirm gedacht sind. @import ist praktisch erst einmal für die Organisation von Style Sheets, aber im echten Einsatz sollten Sie es vermeiden, weil es von der Performance her nicht gut ist. Die andere Möglichkeit diese Medien-Angaben zu machen ist bei so einer @-Regel innerhalb eines Style Sheets. Hier sehen Sie ein Beispiel: @media und dann kommt die Angabe print. Und in diesen geschweiften Klammern steht dann alles, was beispielsweise für die Ausgabe auf einem Drucker gelten soll. Die dritte Möglichkeit ist hier aufgeführt: in der Spezifikation des W3C. Hier an dieser Stelle sehen Sie ein Link-Element, um ein externes Style Sheet einzubinden. Und auch dort kann man Media angeben und sagen: die Formatierungen, die in dieser Datei, im Beispiel, dass die foo.css stehen, sollen hier beispielsweise nur für Print und Handheld gelten. Was für Möglichkeiten der Ausgabe haben wird denn, also welche Geräte können berücksichtigt werden? Das finden Sie hier jetzt dann W3C aufgeführt. Am häufigsten verwendet ist sicher die Angabe All all, Print und Screen, aber es gibt eine Reihe weiterer. Also, All gilt für alle Geräte, es könnte man auch weglassen. Braille ist für sozusagen eine Braille-Tastatur. Das ist für stark in ihrer Sehfähigkeit eingeschränkte Leute. Das hier ist auch für solche Braille-Drucker. Und interessant ist jetzt die Angabe Handheld. Die ist gedacht für Handheld Devices. Also, Handheld, es heißt mit dem üblicherweise kleinen Screen und schlechten Verbindungsdaten. Das Wichtige in unserem Zusammenhang ist aber, dass Smartphones diese Angabe Handheld nicht berücksichtigen, sondern die berücksichtigen das, was dann bei Screen steht. Also, bei Bildschirm, womit man aber auch die normalen anderen Desktops, Laptops oder sonst welche Bildschirme - das diesen zuordnen kann. Handheld, eine Ausnahme gibt es, wo es doch berücksichtigt wird, und zwar in dem Browser Opera Mini, den es für schwach-brüstige Geräte gibt. Und wenn man da den Mobile View aktiviert, dann würde Opera Mini diese Handheld-Angaben lesen. Es ist aber eine Ausnahme und in dem Normalfall können Sie das einfach ignorieren, werden Handheld nicht einsetzen. Print ist sicher das, was Sie am häufigsten brauchen werden, denn Sie können über diese Medien-Angaben speziell auch Sachen für den Ausdruck definieren. Projection wäre für ein Projektionsgerät. Screen ist der normale Bildschirm. Es gibt auch für die Sprachausgabe, aber das sind alles Sachen, die man weniger braucht. Schauen wir uns jetzt einmal in der Praxis an, wie das Ganze funktioniert. Ich habe hier ein kleines Layout vorbereitet. Sie sehen: hier ist mein HTML Code, schauen wir uns das einmal hier im Browser an. Und dann sehen Sie ein ganz einfaches Layout. Ich habe die Angaben jetzt hier nicht mit irgendwelchen Media-Angaben gemacht, das heißt, die gelten für alle Ausgabegeräte. Das heißt, zum Beispiel diese hier jetzt, festgelegt in Formatierung, gelten auch für den Ausdruck. Wie das Ganze ausgedruckt werden würde, könnte ich natürlich austesten, indem ich es drucken lasse. Einfacher ist es, ich gehe in die Druckvorschau meines Browsers. Hier bin ich der Druckvorschau und dann sehen Sie, wie das aussieht. Sie sehen, das könnte irgendwie optimiert werden, weil der Platz nicht gut ausgenutzt wird. Und außerdem gibt es jetzt Elemente, die ausgedruckt nicht sinnvoll sind, wie beispielsweise die Navigation hier, oder auch die Navigation dort oben. Schauen wir uns das einmal an, wie wir das machen können, dass die Navigation ausgeblendet wird. Wir haben eben gesehen, es gibt verschiedene Möglichkeiten mit diesen Medien zu arbeiten. Und ich zeige Ihnen hier jetzt die Angaben direkt im Style Sheet. Das heißt, ich kann in das Style Sheet hingehen und @media schreiben, dann schreibe ich Print. Das heißt jetzt, dass was ich jetzt angebe, soll nur im Ausdruck verwendet werden. Und ich habe hier eine geschweifte Klammer, die aufgeht und eine geschweifte Klammer, die zugeht. Und alles was drin ist, ist jetzt nur für den Ausdruck gedacht. Wir hatten eben gesagt, die Navigation ist eigentlich nicht sinnvoll, wenn sie ausgedruckt wird. Das heißt, da könnte ich jetzt angeben. In meinem Beispiel habe ich zwei Navigationen: subnavi und navi. Und wenn ich die beide hier angebe, könnte ich einfach jetzt angeben display: none. Und damit ist es ausgeschaltet, dass die ausgedruckt werden. Wenn ich jetzt noch weiter bei den Formatierungen gehe, dann wäre es beispiels sinnvoll, dass die Bereiche, die derzeit auf eine feste Größe festgelegt sind, dass die so breit werden, wie sie werden können, weil wir ja jetzt ein anderes Format auch am Bildschirm beim Druck haben, als am Bildschirm. Und da könnte ich jetzt zum Beispiel sagen: ich möchte gerne eine Breite von 100%. Eben war das in Pixeln festgelegt und die sollen nicht mehr gefloatet werden. Wenn ich diese kleinen Formatierungen jetzt vorgenommen habe, dann kann ich mir das mal ansehen, wie das aussieht. Und wenn ich jetzt hier in die Druckvorschau wieder gehe, vom Firefox, dann sehen Sie: die Navigation etc, die sind ausgeblendet. Und diese Bereiche hier sind jetzt auf 100% Breite geschaltet. Was wir dann noch machen könnten, ist dass wir den Kopfbereich, der hatte ja im ursprünglichen Layout eine bestimmte Hintergrundfarbe und einen weißen Text - so etwas wäre auch gut, wenn wir das ändern. Weil prinzipiell beim Ausdruck Farben nicht mitkommen, Also, es kommen nicht die Hintergrundfarben mit. Beziehungsweise, ist es eine Sache des Benutzers das festzulegen. Und man sollte sicherheitshalber immer, wenn man einen weißen Text hat auf einem farbigen Hintergrund, den Hintergrund auf Weiß setzen und den Text einfärben stattdessen, weil es sonst unter ungünstigen Umständen schlecht rauskommen könnte. Also, würden wir hier auch noch hingehen und beim Kopfbereich beispielsweise jetzt die Farben ändern und die Hintergrundfarbe auf Weiß setzen. Also, background-color: white und die Textfarbe beispielsweise auf schwarz, oder auf etwas anderes. Auf diese Art legt man Angaben nur für den Ausdruck fest. Genauso gut könnte ich natürlich hier auch media screen schreiben und würde dann Angaben nur für den Bildschirm definieren. Wenn ich mit diesen Angaben innerhalb eines Style Sheets arbeite, dann wird das Ganze hier geklammert. Das heißt, hier diese geschweifte Klammer klammert alles, was jetzt in unserem Beispiel für den Ausdruck gelten soll. Und hier hört das wieder auf. Und dadrin stehen, wie gewohnt meine CSS-Regeln, die ja auch immer in so geschweiften Klammern eingeschlossen sind. Das heißt, auch am Ende habe ich zwei geschweifte Klammern hier stehen. Das ist die eine Möglichkeit damit zu arbeiten. Die andere Möglichkeit ist, dass Sie das Ganze in ein externes Style Sheet auslagern. Und das wollen wir uns auch einmal kurz anschauen. Ich speichere das Dokument mal unter einem neuen Namen. Ich nenne das jetzt mal layout_extern. Und dann nehme ich die Angaben, die ich hier drinnen habe, schneide sie aus, füge sie in ein neues Style Sheet ein, speichere das Style Sheet beispielsweise für druck.css, unter diesem Namen ab. Dieses brauche ich hier nicht mehr. Und dann kann ich ganz normal auf diese Style Sheet verweisen, also, mit link rel="stylesheet". type=css kann ich weglassen, wenn ich HTML5 nehme, was ich im Beispiel verwende. Und dann kann ich angeben druck.css, das ist der Verweis auf diese Datei. Und muss natürlich jetzt noch sagen: diese soll nur für den Ausdruck gelten. Mit diesen media="print". Wenn ich das jetzt hier auf diese Art mache, dann schaut das genauso aus, wie eben auch. Also, wenn ich es im Firefox anschaue und in die Druckvorschau gehe, dann ist es wieder so, dass wir die Navigationen ausgeblendet haben. Wenn ich das hier mit einem externen Style Sheet mache, dann könnte ich natürlich und beim echten Projekt hätte ich das natürlich auch, die anderen Angaben auch in ein externes Style Sheet tun. Und hätte ich eben zwei Style Sheets. Das Eine allgemein festgelegt und das Andere nur für den Ausdruck. Wir hatten ja zuerst das nicht mit den externen Style Sheets gemacht, sondern die Medien-Regeln direkt in das Dokument selber geschrieben. Das hat den Vorteil, dass Sie HttpRequest sparen. Es ist nämlich so, dass ein Browser prinzipiell alle Style Sheets lädt. Also, auch wenn der am Bildschirm dargestellt wird, lädt der Browser trotzdem schon das Style Sheet für den Ausdruck, weil es ja auch sein kann, dass es dann ausgedruckt wird. Und das heißt in dem Moment, wo Sie ein Style Sheet, ein Allgemeines haben und ein Druck Style Sheet, sind es auf jeden Fall schon mal zwei Anforderungen an den Server. Und für performante Seiten versucht man die Anzahl der Anforderungen ja zu reduzieren. Deswegen ist diese @media-Regel eigentlich fast die beste Möglichkeit, die wir uns jetzt da eben angeschaut hatten. Also, wenn ich hier nochmal kurz hingehe, dann war das diese @media-Regel. In diesem Film haben Sie gesehen, dass es schon mit CSS 2.1 die Möglichkeit gibt unterschiedliche Formatierungen, je nach Ausgabe, Medium festzulegen. Am häufigsten verwendet wird Print und Screen. Und Sie können die Angaben fürs Print und Screen, zum einen, in einen externen Style Sheet machen, indem Sie hier mit dem HTML-Attribut Media arbeiten. Oder Sie können die Angaben auch direkt innerhalb des Style Sheets machen. Dafür verwenden Sie eine sogenannte @media-Regel. Die letzte Variante ist meist die praktischere.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!