Alternative zu CSS min()

  • Ich weiß nicht wirklich wie ich es beschreiben soll... Ich habe habe eine dynamische Anzahl Divs, die links floaten und horizontal gescrollt werden können. Die dargestellten Divs sollen dabei solange den verfügbaren Platz ausfüllen (also eine flexible Breite haben), bis ein weiteres Div von mindestens 190px Breite vollständig angezeigt werden kann.


    Hmmm...

    Ich habe hier mal einen "funktionierenden" Beispielcode beigefügt:

    Im Grunde funktioniert das Ganze so ja auch.

    Über die CSS-Variablen --childNodes (Anzahl aller Divs im scrollContainer) und --showNodes (Anzahl der Divs, die bei einer bestimmten (Seiten-)Breite angezeigt werden), lässt sich das Verhalten steuern. Die Variable --childNodes wird dabei via PHP oder JS gefüllt während --showNodes durch unterschiedliche Media-Queries variiert.

    Das funktioniert, so lange der scrollContainer maximal so breit ist, dass alle Divs angezeigt werden. Wird noch größer, skalierten die Divs nicht mehr, um den gesamten verfügbaren Platz auszufüllen.


    Um das Problem zu lösen gibt es nun m.M. nach zwei Optionen:


    1. "Überflüssige" Media-Queries entfernen

    Natürlich würde es schon helfen, alles Media-Queries zu entfernen, die für --showNodes eine höhere Anzahl vorsehen, als tatsächlich vorhanden sind. Ich empfinde es allerdings als extrem unschönen Stil CSS dynamisch zu generieren und würde es gerne - soweit wie möglich - auf ein absolutes Minimum beschränken. Das dynamische setzen der --childNodes ist schon... Naja... :thumbdown:


    2. CSS-Funktion min()

    Könnte ich im scrollContainer die Berechnung der Breite um die CSS-Funktion min() erweitern, wäre dies eigentlich mein favorisiertes Ziel! Voll dynamisch, 100% valide und ohne dynamische Generierung.

    Code
    1. .outerContainer .scrollContainer {
    2. width: calc(100% / min(var(--showNodes), var(--childNodes)) * var(--childNodes));
    3. background:#00ff00;
    4. height:100%;
    5. }

    Allerdings ist der Support von min() - gelinde gesagt - suboptimal... :cursing:


    Daher wollte ich einfach mal offen fragen, ob irgendjemand eine Idee hat, wie ich das Problem dennoch ohne Skripting lösen kann und/oder ob ich mit diesem Konstrukt schon völlig auf dem Holzweg bin und man dies ggf. besser/einfacher/konformer/etc. lösen könnte...


    Für eventuelle Lösungs- oder Verbesserungsvorschläge wäre ich sehr dankbar!!!


    LG

    Q

  • Ich habe mit deinem Code eine Testdatei gemacht und denke, ich verstehe, was dein Ziel ist: Du möchtest die Divs von der Breite her so einrichten, dass keines abgeschnitten ist, auch wenn wegen des Scrollings rechts ein Teilbereich unsichtbar ist.


    Wenn es meine Aufgabe wäre, hätte ich nicht solche Berührungsängste, Parameter mit Javascript zu berechnen. CSS ist nun mal nicht dafür gedacht, zu rechnen, wenn man mal von solch einfachen Dingen wie calc absieht, sondern sieht bestimmte Verfahren bzw. Layoutmuster vor, die mit Flex- oder Gridlayout definiert werden und wo der Browser dann die passenden Abmessungen berechnet.


    Einfach die passende Breite der Divs ausrechnen und setzen.

  • Also schon mal vielen Dank für deine Antwort!


    Hmmm... Irgendwie widersteht es mir schon Degin und Script zu vermengen. Insbesondere, da CSS ja eigentlich unter anderem daraus entstanden ist, um Inhalt und Design-Angaben zu trennen.

    Jetzt mit JS zu designen - ich weiß nicht - wirkt für mich wie ein Sakrileg :/


    Das kommt vielleicht noch aus alten Tagen... ist nun über 10 Jahre her, dass ich mich zuletzt so intensiv mit der Materie beschäftigt habe und es ist seither ja viel passiert... Responsive-Design, viele neue HTML-Elemente und CSS-Attribute und Konstrukte, wie Grids und Flex-Boxen gab es damals nicht. Da wurde gerade angefangen das Tabellen-Layout zu verteufeln.


    Und irgendwie habe ich es auch bisher immer mit irgendwelchen Tricks geschafft, zumindest das Layout ohne JS aufzubauen und auch - zumindest im Frontend - weitestgehend auf JS zu verzichten...

  • Zitat

    Irgendwie widersteht es mir schon Degin und Script zu vermengen. Insbesondere, da CSS ja eigentlich unter anderem daraus entstanden ist, um Inhalt und Design-Angaben zu trennen.

    Das hat natürlich immer noch seine Berechtigung. Man müsste aber auch die Begründung dieser Forderung berücksichtigen: Wenn ich es richtig verstehe, soll dadurch lesbarer, übersichtlicher und leicht zu ändernder Code entstehen.


    Wenn auf der anderen Seite aber eine Situation entsteht:

    Zitat

    Und irgendwie habe ich es auch bisher immer mit irgendwelchen Tricks geschafft, zumindest das Layout ohne JS aufzubauen und auch - zumindest im Frontend - weitestgehend auf JS zu verzichten...

    kann durch Trickserei dieses Ziel in das Gegenteil verkehrt werden und ich würde eine Lösung bevorzugen, mit einem Skript eine geradlinige Berechnung durchzuführen.


    Bestes Beispiel sind Slideshows rein mit CSS: Machbar und eine interessante Herausforderung, aber eine Qual, wenn es um die Erweiterung geht.


    Oder man denke an die Aufgabe, eine Reihe von Containern unabhängig vom Inhalt auf gleiche Höhe einzustellen. Bevor es Flexlayout gab, nur mit Javascript zu lösen (oder gab es doch irgend welche Tricks mit CSS?).

  • Das hat natürlich immer noch seine Berechtigung. Man müsste aber auch die Begründung dieser Forderung berücksichtigen: Wenn ich es richtig verstehe, soll dadurch lesbarer, übersichtlicher und leicht zu ändernder Code entstehen.

    Ja, nein - jein... Im Grunde möchte ich mich nach so vielen Jahren Abstinenz wieder mehr mit dem Thema beschäftigten und versuche gerade alles aufzuarbeiten, was sich in der Zwischenzeit so geändert hat.

    Wenn auf der anderen Seite aber eine Situation entsteht:

    kann durch Trickserei dieses Ziel in das Gegenteil verkehrt werden und ich würde eine Lösung bevorzugen, mit einem Skript eine geradlinige Berechnung durchzuführen.

    Das kommt natürlich auf die Trickserei an. Es gibt sehr viele gängien "Tricks" im CSS-Bereich, die man kennen sollte. Ich dachte, hier gibt es vielleicht auch etwas in die Richtung...

    Oder man denke an die Aufgabe, eine Reihe von Containern unabhängig vom Inhalt auf gleiche Höhe einzustellen. Bevor es Flexlayout gab, nur mit Javascript zu lösen (oder gab es doch irgend welche Tricks mit CSS?).

    Ich glaube die Anforderung verstehe ich nicht...

    Unabhängig vom Inhalt heißt für mich die Höhe vorzugeben... Also kann ich allen Containern die gleiche Höhe geben - absolut oder prozentual.


    Aber wie gesagt, ich glaube die Problemstellung nicht verstanden zu haben... Wobei ich mich nun mal aus dem Fenster lehnen und behaupten würde, man könne das gesamte Verhalten von Flex-Boxen ausschließlich mit CSS (und ein paar Containern mehr) abbilden.