grid: 1fr 2fr; verhindern dass 1fr-Spalte < 1fr

[michaah]

In meinen responsive design habe ich nun, ausgehend von "mobile first" insgesamt 4 Schritte eingebaut.

Beim 2-spaltigen Design ergibt sich jedoch das Problem, dass die sich dort befindlichen Grafiken je nach Viewportbreite von 100% auf (nahe) 0% skalieren, entgegen meiner Festlegung, dass diese Spalte 1fr breit sein soll. Erst nach dem runter skalieren kommt es zum Wechsel in das Einspalten Design.

Irgendwo (und das ist leider wohl eines meiner größeren Probleme, dass ich dann nicht mehr weiß wo ich etwas herhabe ... und dann nicht mehr zum Nachlesen finde) habe ich gelesen, dass bei grid die Spalten erst nach den längsten Wörtern aufteilt, und erst dann den verbleibenden Platz entsprechend der Festlegung verteilt. Ich gehe davon aus, dass genau dies hier der Fall ist.

Frage: Lässt sich das verhindern? Wie?

Mir wäre es viel lieber, das Design würde, statt die 1fr-Spalte herunter zu skalieren, stattdessen zur Ein-Spalten-Version wechseln. Den Punkt wo das Design von einer zu zwei Spalten wechselt kann ich ja durch einen entsprechenden em-Wert bestimmen. Aber, um diese unerwünschte Skalierung zu verhindern müsste ich diesen Wert viel höher setzen als ich es aus gestalterischen Gründen eigentlich wollte.

Lässt sich das beheben?

Gruß

M

PS: Es bleibt schwer nachvollziehbar, warum ausgerechnet "padding" (deutsch für "Polsterung") so unnachgiebig wie ein Fels in der Brandung daherkommt ... Für mich wäre es das erste Element, das für eine "Abpufferung" von Zwängen heran zu zeihen wäre.

[Matthias Apsel]

Hallo michaah,

PS: Es bleibt schwer nachvollziehbar, warum ausgerechnet "padding" (deutsch für "Polsterung") so unnachgiebig wie ein Fels in der Brandung daherkommt ... Für mich wäre es das erste Element, das für eine "Abpufferung" von Zwängen heran zu zeihen wäre.

Wenn du in deinem CSS festlegst, dass du für irgendein Element einen Innenabstand haben möchtest, dann steht diese Festlegung unnachgiebig wie ein Fels in der Brandung.

Bis demnächst
Matthias

[Rolf B]

Hallo michaah,

neulich beim Zahnarzt: „Jetzt beißen Sie mal die Zähne zusammen und machen Sie den Mund auf!“

Ähnlich geht es deinem Browser. Du sagst ihm: 1fr („Beißen Sie die Zähne zusammen!“). Und dann gibt's das Browser-Stylesheet und die CSS Defaults. Die sagen: overflow:visible („machen Sie den Mund auf!“).

Armer Browser. Für eins muss er sich entscheiden. Und wie jeder gute Spieß scheißt Du ihn dafür dann auch noch zusammen.

Also: Entkrampfe seine Zähne. Erlaube ihm, den überlaufenden Text zu scrollen (overflow: scroll) oder zu verstecken (overflow:hidden).

Oder sperr ihm nicht so lange Wörter in den Mund. Gönne Dir eine Handvoll ­ und streue sie vorsichtig über die langen Worte im Text. Dann bröseln sie sanft auseinander und passen auch in den 1fr Schlitz.

PS: Padding kannst Du mit Sprungfedern versehen, wenn Du es in % statt in px bemisst. Du kannst auch die CSS-Funktionen min, max oder clamp verwenden, um einen Maximalwert, Minimalwert oder Bereich für das Padding festzulegen. Beispielsweise sorgt min(10%, 2em) für ein Padding von 10%, aber maximal 2em. Oder clamp(0.25em, 5%, 1.5em) für ein Padding von 5%, das sich im Intervall 0.25em bis 1.5em bewegt. Ab FF 75 und Chrome 79 verfügbar. Und Safari 11.1. Natürlich nicht im IE.

Rolf

[michaah]

...

...Gönne Dir eine Handvoll ­ und streue sie vorsichtig über die langen Worte im Text. Dann bröseln sie sanft auseinander und passen auch in den 1fr Schlitz.

Das Problem ist ja, dass die langen Wörter in der 2fr-Spalte dafür sorgen, dass deshalb die 1fr-Spalte herunter skaliert. Umbruch in der Listenüberschrift der 2-fr-Spalte? ... vielleicht ist das (auf den betreffenden Geräten/viewports) dann eben so ...

PS: Padding kannst Du mit Sprungfedern versehen, wenn Du es in % statt in px bemisst.

Selbstvertändlich nicht "px", allerdings halt auch nicht "%", sondern "em". Aber ich werde nun mal "%" ausprobieren.

Du kannst auch die CSS-Funktionen min, max oder clamp verwenden, um einen Maximalwert, Minimalwert oder Bereich für das Padding festzulegen.

Ups, das kannte ich überhaupt nicht, das muss ich ich mir jetzt mal reinpfeifen, das klingt sehr interessant.

Beispielsweise sorgt min(10%, 2em) für ein Padding von 10%, aber maximal 2em. Oder clamp(0.25em, 5%, 1.5em) für ein Padding von 5%, das sich im Intervall 0.25em bis 1.5em bewegt.

:-)

Ab FF 75 und Chrome 79 verfügbar. Und Safari 11.1.

Immerhin, aber dann doch kein Allheilmittel 😟

Natürlich nicht im IE.

Latürnich!

Gruß und Danke

M

[Gunnar Bittersmann]

@@Rolf B

Natürlich nicht im IE.

IE steht für „ist egal“.

😷 LLAP

[Rolf B]

Hallo Gunnar,

wenn's das Layout dort unlesbar zerreißt, nicht.

Rolf

[Gunnar Bittersmann]

@@Rolf B

wenn's das Layout dort unlesbar zerreißt, nicht.

Wenn’s das Layout dort unlesbar zerreißt, hat man was Grunglegendes falsch gemacht.

😷 LLAP

[michaah]

Ab FF 75 und Chrome 79 verfügbar. Und Safari 11.1. Natürlich nicht im IE.

Rolf

Um den IE mache ich mir in diesem Zusammenhang mal die geringsten Sorgen, da ich (siehe entsprechender IE Thread) vorhabe, diesem die alte Webseite vorzusetzen.

Aber FF 75 und Chrome 79 heißt ja in etwa nur Browser ab 2020. Und in einem Umfeld mit 20% IE9 (!) Nutzern darf ich auch bei Nicht-IE-Browsern reichlich Altbestände erwarten.

Was machen die mit min/max/clamp? Ignorieren? Kommen die ausser Tritt? Ist es dann gängige Praxis dies alles zweifach auszuzeichnen, erst alt dann zusätzlich neu?

irgendwas {
padding-left: 2em; 
padding-left: max(0.5em, 1em, 2em)
}

???

Gruß

M

[Matthias Scharwies]

Servus!

Aber FF 75 und Chrome 79 heißt ja in etwa nur Browser ab 2020. Und in einem Umfeld mit 20% IE9 (!) Nutzern darf ich auch bei Nicht-IE-Browsern reichlich Altbestände erwarten.

Die IE-Nutzer sind imho Robots und Crawler.

Alle anderen Browser haben automatische Updates, sodass alte Versionen auf Caniuse oft schnell nur noch 0.01% Anteil haben.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Die IE-Nutzer sind imho Robots und Crawler.

es ist unglaublich schwer, Leuten, die nicht in Großunternehmen tätig sind, klarzumachen, dass der IE dort nicht totzukriegen ist.

In einem Großunternehmen wiederum ist es unglaublich schwer, eine Betriebsabteilung zu finden, die bereit ist, zwei Browser zu supporten und Updates auszurollen (weil: Auto-Update in einer gemanagten Umgebung sind ein no-go).

Bei uns gibt's seit einem halben Jahr immerhin Chromium-Edge parallel zum Internet Explorer. Den Fuchs haben wir zwar auch, aber der wurde nur für eine bestimmte Anwendung freigeschaltet (die mit IE schlicht zu lahm war) und er hängt auf einer ESR-Version fest. Die Sharepoint-Migration läuft seit Monaten (wegen des schieren Volumens), der alte Sharepoint braucht IE. Und es gibt auch noch etliche andere Intranetseiten, die nur mit IE funktionieren. Legacy ist ein Teer, aus dem man kaum rauskommt. Und den Anwendern klarzumachen, dass sie für diese Seite unbedingt den IE brauchen und für jede Seite ihn unbedingt meiden müssen, ist gruselig. Die sind teils froh, wenn sie einen Doppelklick schaffen, ohne dabei die Maus zu verreißen.

Weswegen ich so hartnäckig den IE aufzeige und jedesmal angepisst bin, wenn Gunnar ihn in die Irrelevanzecke steckt.

Rolf

[Gunnar Bittersmann]

@@Rolf B

… der alte Sharepoint braucht IE. Und es gibt auch noch etliche andere Intranetseiten, die nur mit IE funktionieren.

Edge hat einen IE-Modus.

Weswegen ich so hartnäckig den IE aufzeige und jedesmal angepisst bin, wenn Gunnar ihn in die Irrelevanzecke steckt.

Das tue ich nicht. Ich zitiere hier ein ums andere Mal Jeremy Keith: „Ich unterstütze jeden Browser, ich optimiere für keinen.“

Auch IE sollte eine brauchbare Darstellung liefern. Wenn du da noch Unsicherheiten hast, ob „brauchbar“ nun „genauso wie in anderen Browsern“ heißt, einfach mal das Internet befragen.

😷 LLAP

[Rolf B]

Hallo Gunnar,

Auch IE sollte eine brauchbare Darstellung liefern.

Ja, aber darum geht's doch. Michaah hat beschrieben, dass eine Spalte auf Breite 0 kollabiert. Wenn man dieses Problem mit einem Konstrukt angeht, das im IE nicht greift, dann ist die Darstellung im IE eben nicht brauchbar.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Auch IE sollte eine brauchbare Darstellung liefern.

Ja, aber darum geht's doch. Michaah hat beschrieben, dass eine Spalte auf Breite 0 kollabiert.

In Nicht-IEs.

Davon, dass er CSS Grid auch in IEs verwendet (es im IE also überhaupt Spalten gibt), hat er nichts geschrieben.

Wenn man dieses Problem mit einem Konstrukt angeht, das im IE nicht greift, dann ist die Darstellung im IE eben nicht brauchbar.

Wenn im IE alle Boxen untereinander sind, dann ist die Darstellung im IE eben doch brauchbar.

😷 LLAP

[michaah]

In Nicht-IEs.

Richtig.

Davon, dass er CSS Grid auch in IEs verwendet (es im IE also überhaupt Spalten gibt), hat er nichts geschrieben.

Richtig. Irgendwo hatte ich aber geschrieben, dass IE meine geringste Sorge sind weil er die alte Version der WEbseite verarbeiten darf ...

Und so interessant es ist euren Ausflügen in die (Haar-) Spalten der Gebirge eures CSS-Wissens zu lauschen, so wenig hilfreich ist es:

A) Siehe oben B) das streuen von ein paar &shy;'s hat das Problem soweit entschärft, dass nun nur noch von 100% geschätzt auf 60% runter skaliert wird (bevor eine andere @media-Regel greift. Das mit den skalierenden Bildern sieht jedoch deshalb besonders unschön aus, weil eben der draufgeschobene Text (nicht wie ich einst behauptete mit negativem margins, sondern relative zum Bild positioniert) nicht skaliert, somit aus dem Bild gewandert wird um schlussendlich dann mutterseelen allein in der Gegend herumhängend doch eher ein verlorenes Dasein zu fristen gezwungen sich vorfindet. Ich werde mal versuchen mittels grid den Text auf das Bild zu plazieren, in der Hoffnung, dass dann das Bild nicht unter dem Text weg-skalieren kann, ist ja die selbe Box.

C) Das Problem tritt ja in viewports auf im Übergangsbereich von smartphone zu tabletts. Da habe ich es ja vornehmlich mit Android-Chromes und IOS-Safaris zu tun (ja, und allen, die ihren Desktopbrowser im Schmalspurmodus verwenden wollen). Von 3 noch laufenden Winphones abgesehen bleib uns ja de mobileIE erspart. Laufen die 2020 chrome und safari Versionen auch auf betagten IPhones und Androiden?

D) wie auch immer: funktioniert eine Doppelauszeichnung (alt+neu)?

[Matthias Apsel]

Hallo michaah,

D) wie auch immer: funktioniert eine Doppelauszeichnung (alt+neu)?

Ja. Anweisungen, die aus Sicht eines Browsers ungültig sind, ignoriert er.

Bis demnächst
Matthias

[Der Martin]

Moin,

funktioniert eine Doppelauszeichnung (alt+neu)?

Ja. Anweisungen, die aus Sicht eines Browsers ungültig sind, ignoriert er.

damit das wie gewünscht funktioniert, ist allerdings die Reihenfolge wichtig: Erst die "alte" Angabe, die wohl von allen Browsern verstanden und berücksichtigt wird, dann "hat man überhaupt schon mal was". Danach in einer weiteren CSS-Regel die "neue" Angabe, die von alten Browsern ignoriert wird, in neueren aber die vorher gültige Regel überschreibt.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Matthias Apsel

Ja. Anweisungen, die aus Sicht eines Browsers ungültig sind, ignoriert er.

Anweisungen?

Deklarationen.

😷 LLAP

[michaah]

Ja, soweit es diesen Thread betrifft deklariere ich mich hiermit in diesem Sinne nicht ohne mich für die rege Anteilnahme zu bedanken.

Gruß

M

[Matthias Apsel]

Hallo Rolf B,

es ist unglaublich schwer, Leuten, die nicht in Großunternehmen tätig sind, klarzumachen, dass der IE dort nicht totzukriegen ist.

So ist es.

Bis demnächst
Matthias

[michaah]

Servus!

Aber FF 75 und Chrome 79 heißt ja in etwa nur Browser ab 2020. Und in einem Umfeld mit 20% IE9 (!) Nutzern darf ich auch bei Nicht-IE-Browsern reichlich Altbestände erwarten.

Die IE-Nutzer sind imho Robots und Crawler.

Echt? Ich bin da wenig Fachmann, aber was hätte eine Suchmaschine von so einem Fossil? Und das mit 20% des Gesamtaufkommens an Nicht-Robot-Besuchern?

Alle anderen Browser haben automatische Updates, so dass alte Versionen auf Caniuse oft schnell nur noch 0.01% Anteil haben.

• FF <= 57 4%
• IE9 9%
• Chrome <= 78 18%
• Alte Mozillas 7%
• Opera <= 16 1%
• Alte Safaris 1%

---

          40% Altbrowser, ohne IE immer noch gut 30%

Zurück zum Problem: Selektoren also doppelt auszeichnen?

[Matthias Apsel]

Hallo michaah,

Die IE-Nutzer sind imho Robots und Crawler.

Echt? Ich bin da wenig Fachmann, aber was hätte eine Suchmaschine von so einem Fossil?

Das ist kein Browser. Da wird einfach nur der Inhalt abgeholt. Das Aussehen ist einem solchen Bot völlig egal.

Bis demnächst
Matthias

[Matthias Scharwies]

Servus!

Servus!

Aber FF 75 und Chrome 79 heißt ja in etwa nur Browser ab 2020. Und in einem Umfeld mit 20% IE9 (!) Nutzern darf ich auch bei Nicht-IE-Browsern reichlich Altbestände erwarten.

Die IE-Nutzer sind imho Robots und Crawler.

Echt? Ich bin da wenig Fachmann, aber was hätte eine Suchmaschine von so einem Fossil? Und das mit 20% des Gesamtaufkommens an Nicht-Robot-Besuchern?

SELF-Wiki: User-Agent-Kennung

Das ist kein IE, sondern der Robot verwendet die (falschen) Informationen im Header. Anders als moderne Browserversionen ist es denen ja auch egal.

Herzliche Grüße

Matthias Scharwies