Stylesheets Reihenfolge

[MuellerM]

Hallo zusammen,

so langsam bringt mich ein Punkt mit Contao so langsam zum verzweifeln.
Gibt es irgendwelche Regeln, nach denen die Stylsheets im Seitenlayout sortiert werden müssen.
Bei mir überschreiben z.B. kleinere Media Queries größere.
Ich dachte immer das die Stylesheets nach Größe sortiert werden müssen. Dies funktioniert aber bei mir nicht da sind alle kreuz und quer

Ich hoffe ihr versteht mein Problem und könnt mir etwas Licht ins Dunkle bringen.

Anhang 19891

[mlweb]

Link funktioniert nicht.
Ansonsten kommt es bei der Reihenfolge drauf an ob Du mobile First entwickelst oder eben nicht.
Verwendest Du eigentlich interne oder externe Stylesheets?
Die Reihenfolge der externen Stylesheets kann man in Contao im Seitenlayout festlegen, auch ob interne oder externe Stylesheets zuerst geladen werden sollen.

[MuellerM]

Hey danke dir für die super schnelle Rückmeldung.
Hm bei mir zeigt es den Anhang an.
Ich habe zu 100% interne Stylesheets.
Mein Problem ist nun wie die Stylesheets im Seitenlayout korrekt sortiert werden müssen.
Ich habe nicht mobile first entwickelt, sondern von der Größten Desktop Version zum Hany hin.

[mlweb]

So hab es gerad in der Demo getestet. Ich selbst benutze keine internen Stylesheets. Ist Contao 4 sollte aber in Contao 3 genauso gehen.
Geh mit der Maus über das kleine grüne Symbol bei den angezeigten internen Stylesheets und schiebe diese in die Reihenfolge die Du haben willst.

Nachtrag: Hier noch ein Screenshot

2017_09_28_interne_stylesheet.png

[MuellerM]

Hey,
soweit war ich schon, bei mir hapert es aber an der Reihenfolge.
Ich weiß also wie man sie sortieren kann aber nicht wie ein sauberer Aufbau wäre.
Eine Reihenfolge von der größten bis zur kleinsten Media Querie funktioniert bei einfach nicht korrekt.
Dann überschreibt z.B. bei einer Viewportgröße von 450px eine Media Querie max-width 680px eine Media Querie mit einer max-width 480px.

[tab]

Wie sehen deine Media Queries aus? Falls die korrekt sind und alle nur max-width benutzen, dann sollte zuoberst das CSS ohne eine max-width stehen und darunter dann die CSS-Dateien mit max-width in absteigender Reihenfolge. Wenn dann ein CSS mit max-width: 480px von einem CSS mit max-width: 680px überschrieben wird, was ja vor dem CSS für 480px eingebunden wird, dann läuft was ziemlich falsch. Eventuell Klammerfehler im CSS. Lade dir das ausgelieferte CSS mal runter und untersuche es mit einem geeigneten Editor, der zumindest die schliessende Klammer zu einer ausgewählten öffnenden Klammer anzeigen kann (z.B. Notepad++) und kontrolliere, ob die Klammern der Media Queries stimmig sind. Gelegentlich hat man eine schliessende Klammer zuviel drin und dann gehört das nachfolgende CSS für den Browser nicht mehr zur Media-Query, obwohl es anders gedacht war.

[mlweb]

Ach so, dann hatte ich Dich etwas falsch verstanden.
Dann zeig doch mal einen Link, damit wir sehen können wo da etwas schief läuft.

[MuellerM]

Ich glaube ich habe mich auch einfach nicht klar Ausgedrückt.
Hilft es euch wenn ich euch die Website online stelle und ihr die im Frontend anschauen könnt?

@tab Der Fehler ist genau wie von dir beschrieben. Also ja, da läuft noch etwas sehr falsch.

Wenigsten weiß ich jetzt, wie die Reihenfolge eigentlich sein sollte.
Mal schauen ob ich dann doch noch meinen Fehler finde, ansonsten stelle ich sie euch einmal online.

Auf jeden Fall schon einmal vielen Dank für eure Hilfe.

[tab]

Wenn du nur die internen Stylesheets benutzt dann schau hauptsächlich jeweils bei "eigener Code", ansonsten kann man ja nicht allzu viel falsch machen. Obwohl, gibt schon auch Fehlermöglichkeiten wenn man einfach unzulässige Werte eingibt. Beim "eigenen Code" kann es z.B. auch ein fehlendes Semikolon oder eine falsch geschriebene Eigenschaft sein. Ich hatte mal einen Fall, da wurde durch einen Fehler im internen CSS das restliche, nachfolgende CSS nicht mehr geparst vom Browser. Also auch mal schauen in den Entwicklertools, ob das vermeintlich überschriebene CSS für die kleinere Breite überhaupt angezeigt wird. Also ob es wirklich überschrieben wird oder ob es einfach fehlt.

[MuellerM]

@tab Was soll ich sagen du hast mir den Tag gerettet.
Mit dem Problem kämpfe ich schon seit Monaten und im Endeffekt war es jetzt einfach eine von mir gesetzte geschweifte Klammer im Feld eigener Code.
Contao hat natürlich brav eine zweite dazu gesetzt.
War ja klar das es so ein simpler Fehler von mir sein muss.

Ein großes Dankeschön an euch beide für eure Hilfe!

[mlweb]

Für mich auch einer der Gründe nur externe Stylesheets zu benutzen. Man kann m.E. solche Codefehler eher von vornherein vermeiden.

[MuellerM]

Das mag natürlich sein, aber ich habe den Editor schon recht lieb gewonnen. Mit den Entsprechenden Erweiterungen und Tastenkürzeln bin ich so einfach schneller.
Für einen Profi kann ich das allerdings nachvollziehen.