Separates Einbinden von internen Stylsheets funktioniert nicht

**monaco** · 25.03.2015, 11:06

Hallo zusammen,

ich habe zwei existierende Seitenlayouts. Seitenlayout (standard) und Seitenlayout (mobil). Diesen habe ich entsprechend interne stylesheets (standard.css) und (responsive.css) zugewiesen.
Ich habe natürlich die standard.css kopiert und diese in responsive umbenannt und anschließend innerhalb der responsiv.css die CSS-Anweisungen geändert.
Ferner habe ich ein entsprechende media query (max-width: 767px) für die responsive.css angelegt.

Damit das aber funktioniert, muss ich jedem der beiden Seitenlayouts alle beide css-Dateien zuweisen. Ich dachte bisher, dass das so funktioniert, dass ich eben dem Standardlayout die standard.css zuweise und dem Seitenlayout(mobil) die responsive.css.

Kann mir jemand sagen, warum das so nicht funktioniert? Oder ist das normal?

**tab** · 25.03.2015, 11:27

Wenn du das so machst, also nur die respnsive.css beim mobilen Seitenlayout, dann haben als mobil eingestufte Browser/Geräte mit einer Viewportgrösse von mehr als 767px eben überhaupt kein CSS mehr. Auf welchem Gerät und mit welchem Browser "funktioniert" es denn nicht?

**monaco** · 25.03.2015, 11:38

Also ich habe mal die standard.css und die responsiv.css dem standardlayout zugewiesen.

Dem mobilen Seitenlayout habe ich nur die responsiv.css zugewiesen.

Und schon da funktioniert das responsiv nicht; bei den Browsern IE, Firefox, Opera und Chrome

**tab** · 25.03.2015, 12:10

Damit dein responsive.css greifen kann, muss erst mal das mobile Layout verwendet werden. Wenn du das auf dem Desktoprechner testest, dann wird natürlich nicht das mobile Seitenlayout verwendet. Oder hast du dir einen "Umschalter" eingebaut in deine Seite?

**monaco** · 25.03.2015, 12:20

Zitat von tab

Damit dein responsive.css greifen kann, muss erst mal das mobile Layout verwendet werden. Wenn du das auf dem Desktoprechner testest, dann wird natürlich nicht das mobile Seitenlayout verwendet. Oder hast du dir einen "Umschalter" eingebaut in deine Seite?

Nein, ich habe bisher noch keinen "Umschalter" eingebaut. Getestet habe ich das so, in dem ich auf meinem Desktoprechner (24Zoll) screen das Browserfenster verkleinert habe.

**tab** · 25.03.2015, 12:28

Ok, dann wird also das normale Layout verwendet. Da du hier ebenfalls die "responsiv.css" mit eingebunden hast, gibt es zumindest mal eine Chance, dass die was bewirkt. Allerdings nur, wenn sie auch NACH der "standard.css" eingebunden ist. Sonst überschreiben dir die Styles aus der "standard.css" deine Styles aus der "responsiv.css".

**ciaobello** · 25.03.2015, 12:30

https://contao.org/de/manual/3.4/man...#verschiedenes

Zweit unterster Inserttag im Bereich "verschiedenes" ist der von Tab erwähnter Umschalter.

**monaco** · 25.03.2015, 12:44

ok. Also ich habe die Seite mal hochgeladen:
http://www.stars-training.de

Ich habe nun aktuell dem standard-layout nur die (standard.css) zugewiesen. Und dem Mobilen-Layout die (standard.css und responsive.css)

Also wenn ich die Seite auf dem Smartphone aufrufe, funktioniert es.

Um eine Seite auf responsiv zu testen, ist das Vergrößern/Verkleinern des Browserfensters auf dem Desktoprechner wohl keine 100%ige Garantie?

**tab** · 25.03.2015, 13:01

Nein, es ja entweder das Desktop oder das mobile Layout verwendet, je nachdem, was im user agent String des Browsers angegeben wird. Wird das als mobil einestuft, dann das mobile Layout, falls nicht, das Desktop Layout. Mit dem Umschalter kannst du aber zumindest in etwa beurteilen, wie das mobile Layout aussieht, weil du dann zwischen den Seitenlaxyout hin- und herschalten kannst. Auch auf dem Desktop PC. Und natürlich auch umgekehrt kannst du dann auf dem Smartphone auswählen, welche Layoutvariante du haben willst. Das ist (zumindest) während der Entwicklung ganz hilfreich.

**monaco** · 25.03.2015, 13:39

Aber wieso funktioniert das Responsiv auf dem Desktoprechner nur wenn ich dem Standard-Layout sowohl die standard.css als auch die responsiv.css zuweise?

**tab** · 25.03.2015, 13:45

Sollte doch auch ohne die "standard.css" funktionieren. Außer natürlich, dein Browserfenster (eigentlich Viewport) ist breiter als 767px, dann greift ja das responsiv.css nicht, außer du hast das media query direkt im Stylesheet responsiv.css nur für die Styles gemacht, die sich bei Breite <= 767px ändern. Ich habe es aber so verstanden, dass das media query bei dir für das gesamte Stylesheet gilt.

**monaco** · 25.03.2015, 13:50

Zitat von tab

Außer natürlich, dein Browserfenster (eigentlich Viewport) ist breiter als 767px, dann greift ja das responsiv.css nicht, außer du hast das media query direkt im Stylesheet responsiv.css nur für die Styles gemacht, die sich bei Breite <= 767px ändern.

Ja genau so habe ich es definiert. siehe Anlage

**Spooky** · 25.03.2015, 13:53

monaco: du Misverstehst die Contao Layout Einstellung "Mobiles Seitenlayout". Das Layout kommt nur dann zum Einsatz, wenn Contao erkennt, dass der Benutzer über ein mobiles Gerät auf die Seite zugreift. Wenn du dies also mit dem Desktoprechner testest, wird natürlich das normale Seitenlayout benutzt, nicht das mobile Seitenlayout. Mit der Größe des Browsers hat das nichts zu tun.

**monaco** · 25.03.2015, 14:03

Das verstehe ich schon. Wenn ich beispielsweise die Seite https://inetrobots.de/ auf dem Desktop-Rechner teste bzw.durch das Verschieben des Browserfensters verkleinere, wird die Seite angepasst bzw. responsiv.

**tab** · 25.03.2015, 14:09

Das ist natürlich völlig richtig. Aber wenn er sein "responsive-767" Stylesheet mit der media query zusätzlich zum normalen CSS ins normale Desktop-Layout einbindet, dann sollten die Styles schon berücksichtigt werden, wenn der Viewport des (Desktop-)Browsers nicht größer als 767 px ist. Ausgeliefert werden müsste sie allerdings immer, und ich kann sie im ausgelieferten CSS nicht finden. Vielleicht ist sie ja auch gerade deaktiviert?!?

**Spooky** · 25.03.2015, 14:40

Zitat von monaco

ok. Also ich habe die Seite mal hochgeladen:
http://www.stars-training.de

Ich habe nun aktuell dem standard-layout nur die (standard.css) zugewiesen. Und dem Mobilen-Layout die (standard.css und responsive.css)

Also wenn ich die Seite auf dem Smartphone aufrufe, funktioniert es.

Um eine Seite auf responsiv zu testen, ist das Vergrößern/Verkleinern des Browserfensters auf dem Desktoprechner wohl keine 100%ige Garantie?

Auf der Seite ist derzeit kein "standard.css" Stylesheet zu sehen, nur ein "layout.css".

**monaco** · 25.03.2015, 14:46

Zitat von Spooky

Auf der Seite ist derzeit kein "standard.css" Stylesheet zu sehen, nur ein "layout.css".

Oh, sorry. Ich hatte es layout.css genannt, welches ich dem standardlayout zugewiesen habe.

**Spooky** · 25.03.2015, 15:04

Ok, wollte ich nur klarstellen

. Hab aber beim derzeitigen Informationsstand auch sonst keine Idee.

**monaco** · 27.03.2015, 12:49

Also das verwirrt mich doch jetzt etwas. Ich habe den layout-Builder deaktiviert, da ich flexbox verwende. Habe ein Standardlayout mit einer entsprechenden internen css-Datei standard.css.

Wir geht ihr vor, wenn ihr ein entsprechendes Design für entsprechende Endgeräte anfertigen wollt.

Ich habe erstmal ein Seitenlayout (mobil) angelegt. Und danach eine mobil.css mit einem media-query @media screen and (max-width: 767px), mit der gewisse css-Anweisungen aus der standard.css überschrieben werden.

Binde ich dann sowohl im standardlayout als auch im seitenlayout (mobile) beide css-dateien ein?

**tab** · 27.03.2015, 13:21

Ja, alles CSS, was an mobile Geräte ausgeliefert werden soll, muss auch im mobilen Seitenlayout eingebunden werden. Alles CSS, was für "normale" Geräte ausgeliefert werden soll, muss im normalen Seitenlayout eingebunden werden.

Das sind wirklich zwei völlig unabhängige Seitenlayouts, in die völlig unterschiedliches CSS, JS, was auch immer eingebunden werden kann. Auch völlig unterschiedliche Module, unterschiedliche Layoutbereiche ...

Wenn also für ein Gerät das mobile Seitenlayout benutzt wird, dann wird NICHTS aus dem normalen Seitenlayout ausgeliefert, auch kein "Standard"-CSS. Nur das, was im mobilen Seitenlayout eingebunden wird. Natürlich kannst du deine standard.css in beiden Layouts einbinden, dann wird sie beide Male ausgeliefert.

Dein Ansatz, mit einer standard.css, die für einen Desktop alles beinhaltet und einer zusätzlichen CSS-Datei geht im Prinzip (fast) genauso gut auch ohne mobiles Seitenlayout.

Das wird z.B. benötigt, wenn speziell für mobile Geräte andere Module benutzt werden sollen oder die im Desktop-Layout vielleicht in den Seitenspalten ausgegebenen Module jetzt entweder in der Hauptspalte ausgegeben werden sollen oder manche eventuell auch gar nicht mehr.

**Spooky** · 27.03.2015, 13:21

Zitat von monaco

Wir geht ihr vor, wenn ihr ein entsprechendes Design für entsprechende Endgeräte anfertigen wollt.

Nur über Media Queries innerhalb der CSS Dateien. Ein mobiles Layout* brauchst du nicht unbedingt.

Ein separates mobiles Layout* ist zum Beispiel dann sinnvoll, wenn sich der ausgegebene Inhalt zwischen der Desktop und der mobilen Version unterscheidet bzw. unterscheiden soll. Das kann bei grundsätzlich verschiedenem Content der Fall sein, aber auch wenn das verwendete Design bzw. Layout für die mobile Version es nicht zulässt, es nur über Media Queries zu realisieren.

* hier ist die Einstellung Layout für mobile Seiten in den Einstellungen der Seite in der Seitenstruktur gemeint

**monaco** · 27.03.2015, 14:15

Dankeschön euch beiden. Also hier im Bespiel http://www.iso.org/iso/home.htm wird ja, wenn man den Viewport verkleinert die Navigation zu einer Quicknavigation verändert.
Um das ganze in Contao (hypothetisch) durchzuspielen:

Dem Standardlayout wird die standard.css zugewiesen. Wenn ich nun das Browserfenster verkleinere muss ja dann die responsive.css incl. media query auch noch eingebunden werden, damit auf das Verkleinern reagiert wird.

Binde ich dann in Bezug auf das Bespiel im Mobilen-Seitenlayout auch beide css-Dateien (standard und responsive.css) ein und schmeiße einmal aus dem standardseitenlayout die quicknav heraus und aus dem mobilen Seitenlayout das Modul (navigationsmenü) bzw. mannav.

**tab** · 27.03.2015, 15:17

Ja, so könnte man das machen. Ich mache es eher selten und nutze meist nur ein gemeinsames Seitenlayout. Das mit den unterschiedlichen Navis bekommt man trotzdem hin, je nach Viewport-Breite wird eben per CSS die eine Navi mit display:none; ausgeblendet und die andere mit display:block; eingeblendet. Nachteil dabei: Im Seitenquelltext stehen beide Navis drin. Das lässt sich mit dem mobilen Layout vermeiden.

Problematisch am "mobilen" Layout finde ich, dass ich die Unterscheidung mobil/Desktop nicht immer nachvollziehen kann. Woran soll man das festmachen? Viewport? Internetverbindung? Touch display? ... Keine Ahnung, jedenfalls, wie immer es gemacht wird, irgendwas ist immer verkehrt.

**mlweb** · 27.03.2015, 16:35

Ich schließ mich dem an. Ich habe bisher auch noch nie ein extra "mobiles" Seitenlayout benötigt.
Das entspricht auch dem Gedanken von responsive Webdesign.