CSS-Kniffliges zum Wochenende

[Gunnar Bittersmann]

Ich habe noch keine Lösung gefunden. Vielleicht findet ja jemand von euch eine?

(keine festen Breiten, keine media queries, kein JavaScript)

☞ https://twitter.com/kizmarh/status/992346531423510528

LLAP 🖖

[beatovich]

hallo

Ich habe noch keine Lösung gefunden. Vielleicht findet ja jemand von euch eine?

(keine festen Breiten, keine media queries, kein JavaScript)

☞ https://twitter.com/kizmarh/status/992346531423510528

.test{
  display:flex; 
  justify-content:center; 
  flex-flow:wrap; width:19rem;
  /*! align-items: center; */
  border: 1px solid green;
}
.test > * { border:1px solid red; }
.test > *.nth-last-child(2) { margin-right:auto;}

[beatovich]

hallo

hallo

Ich habe noch keine Lösung gefunden. Vielleicht findet ja jemand von euch eine?

(keine festen Breiten, keine media queries, kein JavaScript)

☞ https://twitter.com/kizmarh/status/992346531423510528

.test{
  display:flex; 
  justify-content:center; 
  flex-flow:wrap; width:19rem;
  /*! align-items: center; */
  border: 1px solid green;
}
.test > * { border:1px solid red; }
.test > *.nth-last-child(2) { margin-right:auto;}

Das erfüllt nicht alle Bedingungen.

.test{
  display:flex; 
  justify-content:center; 
  flex-flow:wrap; 
  width:26rem;
  align-items: center;
  border: 1px solid green;
}
.test > * {border:1px solid red;/*! align-items: center; */}
.test > *.nth-last-child(1) {margin:0 auto;}

tut es auch nicht.

Meine Vermutung ist, ohne JS kommt man nicht zumm Ziel.

[Henry]

Hallo Gunnar,

gibt's auch eine Vorbedingung zum HTML, oder ist das vollkommen egal?

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

gibt's auch eine Vorbedingung zum HTML, oder ist das vollkommen egal?

HTML egal. Wenn du meinst, mit dreiundzwölfzig ineinandergeschachtelten divs zum Ziel zu kommen, dann tu es (in diesem Fall).

LLAP 🖖

[J o]

Moin,

(keine festen Breiten, keine media queries, kein JavaScript)

Also, ich mache mir jetzt seid gestern Abend Gedanken. Dazu habe ich noch eine Frage sowie einen Lösungsvorschlag.

☞ https://twitter.com/kizmarh/status/992346531423510528

Es stört mich, dass keine Queries verwendet werden dürfen, wobei doch schon der Orginal Tweet, Queries erlauben müsste, mit dem Satz 'When not enough space, there are two lines:'. Ja, das ist sehr großzügig ausgelegt aber ich denke man muss sich das Leben nicht unnötig schwer machen.

Wie dem auch sei, mit einem kleinen Query ist die Lösung relativ einfach aber bitte urteilt selbst. Vielleicht ist das ja auch ein erster Schritt zur vollständigen Lösung.

Gruß
Jo

[Gunnar Bittersmann]

@@J o

mit einem kleinen Query ist die Lösung relativ einfach

Die Breite der Boxen soll sich nach deren Inhalt richten. min-width kann man machen; das ändert aber prinzipiell nichts daran, dass die Breite der Boxen unbekannt ist. Wo also sollte der breakpoint sein?

Kein bekannter breakpoint, kein media query.

LLAP 🖖

[J o]

Hey,

Die Breite der Boxen soll sich nach deren Inhalt richten. min-width kann man machen; [...]

Das hab ich nur hinzugefügt, damit es nicht nur so breit ist wie der Buchstabe und es dem Bild etwas mehr entspricht.

[...] das ändert aber prinzipiell nichts daran, dass die Breite der Boxen unbekannt ist. Wo also sollte der breakpoint sein?

Kein bekannter breakpoint, kein media query.

Das stimmt. Warte... Moment... da.... fällt mir doch... hmm doch nix ein (Jedenfalls schonmal kein Query). Aber soweit sind sicher schon viele gekommen.
Naja, genug prokrastiniert, zurück an die richtige Arbeit.

Gruß und Schönes Wochenende
Jo

[J o]

Hey,

[...], dass die Breite der Boxen unbekannt ist. Wo also sollte der breakpoint sein?

Kein bekannter breakpoint, kein media query.

Nach lesen des Beitrages von Rolf B und kurzem nachdenken über Element-queries, stellt sich mir noch eine kurze Frage.

Der breakpoint sollte doch nicht an der Elementbreite festgemacht werden, sondern an der Viewportbreite. Es heißt ja auch nicht umsonst media query, also nach meinem Verständnis die 'Frage nach dem Medium' beziehungsweise nach der 'device breite'. Oder sehe ich das falsch?

Wobei mir auch klar ist, dass beides zusammenhängt, also Elementbreite und Viewportbreite damit ein breakpoint sinnvoll ist.

Jedoch ist Flexbox gerade dafür da, dass die Elemente dem Viewport angepasst werden und der breakpoint wirklich nur noch von dem viewport abhängig sein kann, wenn nicht gerade durch Eigenschaften wie 'min-width' oder 'nowrap' dem entgegen gewirkt wird.

Gruß
Jo

[beatovich]

hallo

Jedoch ist Flexbox gerade dafür da, dass die Elemente dem Viewport angepasst werden und der breakpoint wirklich nur noch von dem viewport abhängig sein kann, wenn nicht gerade durch Eigenschaften wie 'min-width' oder 'nowrap' dem entgegen gewirkt wird.

Flexboxen werden aber auch in Kontexten verwendet, in welchen die Viewportgrösse ziemlich irrelevant geworden ist (zum Beispiel in anderen Flexboxen).

[Rolf B]

Hallo beatovich,

ich sehe durchaus den Vorteil in Element Queries. Mich wundert nur, dass Hodgins damit schon seit ein paar Jahren unterwegs zu sein scheint, sich aber im W3C keiner dafür zu interessieren scheint (es sei denn, das Thema läut dort unter anderem Namen). Ist der Performance-Impact zu hoch? Kollidiert es konzeptionell mit anderen Features?

An J o:

Der breakpoint sollte doch nicht an der Elementbreite festgemacht werden, sondern an der Viewportbreite.

Die Frage, ob eine Flexbox umbricht, hängt aber mit beidem zusammen.

Rolf

[J o]

Hey,

An J o:

Der breakpoint sollte doch nicht an der Elementbreite festgemacht werden, sondern an der Viewportbreite.

Die Frage, ob eine Flexbox umbricht, hängt aber mit beidem zusammen.

Ja und Nein. Ob ein Flex-Child wrapped muss diesem explizit gesagt werden. Das wrappen macht Flexbox dann aber automatisch, aufgrund dem längsten Inhalt des Child-Elementes. (Längster Inhalt z.B. längstes Wort, ist die minimale breite des Child-Elementes). Somit braucht Flexbox keine feste Breite mehr, da sich die Größe dem Inhalt anpasst (und der Breite des Containers).

Der Breakpoint allerdings, der dem media query zugewiesen wird, bezieht sich ja nur auf den Viewport, damit, wenn es kleiner wird, immer noch alles ansehnlich dargestellt wird. Also "Ja", es hängt von beidem ab aber meiner Meinung nach liegt die sinnvolle Wahl des Breakpoints nur im Auge des Betrachters und hat grundsätzlich nichts mit der Elementbreite zutun, deshalb "Nein". Oder, um einmal im Kreis zu gehen, ob sich der Breakpoint bei '992px','768px' oder 'Xpx' befindet hängt nur davon ab ob es darüber oder darunter "gut aussieht", was wiederum am Inhalt des Child-Elementes liegt, welches dessen Breite bestimmt.

Deshalb sagte ich auch, "Wobei mir auch klar ist, dass beides zusammenhängt,[...]"

Gruß
Jo

[Gunnar Bittersmann]

@@Rolf B

Element Queries […] sich aber im W3C keiner dafür zu interessieren scheint

Nein, das kann man so nicht sagen.

Ist der Performance-Impact zu hoch? Kollidiert es konzeptionell mit anderen Features?

Element queries können zu Endlosschleifen führen. Das ist nicht mal schnell gemacht, sondern es muss sorgfältig überlegt werden, ob es da überhaupt eine sinnvolle Lösung geben kann.

LLAP 🖖

[marctrix]

Hej Gunnar,

Ich habe noch keine Lösung gefunden. Vielleicht findet ja jemand von euch eine?

(keine festen Breiten, keine media queries, kein JavaScript)

☞ https://twitter.com/kizmarh/status/992346531423510528

Abgesehen davon, dass mir allein dazu schon nichts einfällt: wie soll es denn bei drei Zeilen aussehen?

Über manche Fragen lohnt es sich nicht nachzudenken. Oder um es mit Nietzsche zu sagen:

[…]Warum ich überhaupt so klug bin? Ich habe nie über Fragen nachgedacht, die keine sind[…]

😉

Marc

[Rolf B]

Hallo Marc,

ich habe aus dem Twitter-Thread immerhin mal wieder ein paar Tricks gelernt, und sie benennt ihr Anliegen sehr deutlich: Sie will im CSS Standard eine Methode bekommen, mit der man bei umgebrochenen Flex-Containern die Ausrichtung je Zeile (oder Spalte, je nach flex-direction) unterschiedlich definieren kann.

Es gibt bestimmt reguläre Wege, um Änderungswünsche in die CSS Gremien zu bekommen. Ob ihr diese Wege nicht offen stehen, oder ob sie auf diesen Wegen hängengeblieben ist, keine Ahnung, aber jedenfalls ist dieses „Rätsel“ für mich nichts anderes als ein Vehikel, um Interessenten für diesen Erweiterungswunsch zu generieren; also Politik.

Dass dann ganz unauffällig der Link zu Element-Queries eingestreut wird, passt dazu; ich weiß allerdings nicht recht, ob Tommy Hodgins ein Trittbrett gesucht und gefunden hat oder ob es ihm gezielt aufgebaut wurde.

Rolf

[marctrix]

Hej Rolf,

jedenfalls ist dieses „Rätsel“ für mich nichts anderes als […] Politik.

Ich hätte dem Link folgen sollen - hole ich noch nach!

Danke für die Erläuterung!

Marc

[Rolf B]

Hallo marctrix,

„Erläuterung“ – nun ja. Es ist meine Sicht der Dinge. Sie könnte paranoid sein.

Rolf

[marctrix]

Hej Rolf,

„Erläuterung“ – nun ja. Es ist meine Sicht der Dinge. Sie könnte paranoid sein.

Hmm - a jedenfalls eine plausible Sicht der Dinge.

Bin mir aber nicht sicher, ob es mehr ist als ein Rätsel.

Für mich klingt es wie die Bitte um ein Perpetuum mobile…

Marc

[Gunnar Bittersmann]

@@Rolf B

… sie benennt ihr Anliegen sehr deutlich: Sie will …

Welche Sie meinst du?

LLAP 🖖

[Tabellenkalk]

Hallo,

Welche Sie meinst du?

Du meinst Roma ist ein Romus?

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Du meinst Roma ist ein Romus?

Meinst du nicht auch?

“he/him” [https://twitter.com/kizmarh]

LLAP 🖖

[Rolf B]

Hallo Gunnar,

ich bin kein Tweeter und weiß darum nichts mit den Anzeigen unter dem Foto anzufangen; das Bild erschien mir irgendwie weiblich und "Roma" klingt für ein deutsches Ohr auch nicht männlich. Die Interessenschwerpunkte Katzen und Feminismus haben mir auch nicht weitergeholfen.

Die Idee, dass eine Frau Frontend-Expertin ist, erschien mir nicht abwegig.

Aber wenn man dem Link nach http://kizu.ru/en/ folgt, steht da tatsächlich Roman, nicht Roma.

Rolf

[Gunnar Bittersmann]

@@Rolf B

"Roma" klingt für ein deutsches Ohr auch nicht männlich.

Wenn weiblich, dann wäre der Nachname Komarova.

Aber wenn man dem Link nach http://kizu.ru/en/ folgt, steht da tatsächlich Roman, nicht Roma.

Ich weiß nicht, ob Roma vielleicht so eine Art Koseform ist. In anderen slawischen Sprachen gibt es auch Koseform auf -a: polnisch/tschechisch Kuba für Jakób/Jakub, tschechisch Jirka für Jiří.

LLAP 🖖

PS: Was für ein Link? Ich hab’s für dich gefixt.

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Aber wenn man dem Link nach http://kizu.ru/en/ folgt, steht da tatsächlich Roman, nicht Roma.

Ich weiß nicht, ob Roma vielleicht so eine Art Koseform ist. In anderen slawischen Sprachen gibt es auch Koseform auf -a: polnisch/tschechisch Kuba für Jakób/Jakub, tschechisch Jirka für Jiří.

Und er schreibt von sich Я при­ду­мал - männliches Präteritum - er muss es ja wissen.

приду́мывать – sich etwas ausdenken

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ich weiß nicht, ob Roma vielleicht so eine Art Koseform ist.

Краткая форма имени Роман: Рома, Ромася, Ромуля, Романка, Ромаха, Ромаша, Романя, Роро, Ро
(https://kakzovut.ru/names/roman.html)

Kurzformen des Namens Roman: Roma, Romassja, Romulja, Romanka, Romacha, Romascha, Romanja, Roro, Ro

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

Hallo Gunnar Bittersmann,

Ich weiß nicht, ob Roma vielleicht so eine Art Koseform ist.

Краткая форма имени Роман: Рома, Ромася, Ромуля, Романка, Ромаха, Ромаша, Романя, Роро, Ро
(https://kakzovut.ru/names/roman.html)

Kurzformen des Namens Roman: Roma, Romassja, Romulja, Romanka, Romacha, Romascha, Romanja, Roro, Ro

Häufig werden dann auch weibliche Verbformen verwendet: Roma dumala o…

Kann sein, dass es grammatikalisch falsch ist. Gehört habe ich es allerdings öfters…

Marc

[Matthias Apsel]

Hallo marctrix,

Häufig werden dann auch weibliche Verbformen verwendet: Roma dumala o…

я ­ду­мал – Sprecher ist männlich

я ­ду­мала – Sprecher ist weiblich

Рома ду­мал – Roma ist männlich

Рома ду­мала – Roma ist weiblich (Kurzform von Romina)

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

Рома ду­мала – Roma ist männlich (Kurzform von Romina)

Ich weiß. Dennoch oft (aus Muttersprachlers Mund) gehört…

Was ganz und gar nicht belegt, dass es korrekt wäre. 😉

Marc

[Henry]

Hallo marctrix,

Рома ду­мала – Roma ist männlich (Kurzform von Romina)

Die Seite weist ja eine Menge Fehler auf, daher habe ich eine Frage. Wenn ich mit das mit IE anschaue, sehe ich nur Hieroglyphen, weil IE die Zeichencodierung als westlich einstuft. Firefox zeigts zwar leserlich an. Aber wenn ich den Validator bemühe zeigt sich:

Error: The encoding cp1251 is not the preferred name of the character encoding in use. The preferred name is windows-1251. (Charmod C024)

Verhält sich FF nur kulant, oder macht IE einen Fehler?

Und ich habe noch eine Frage. Entgegen dem Quelltext, zeigt mir die Entwicklerkonsole eine andere Ausgabe an (vermutlich DOM Manipulation, nicht näher geprüft). In dieser sind einige Scripte zwischen HTML und Head, da wollte ich mal wissen ob das überhaupt gestattet ist. Das Wiki hier brachte dann zwar eine Antwort aber auch noch eine interessante Sache. So fand ich, das mir bis dato unbekannte, <template> Element. So was habe ich mir schon länger gewünscht aber bisher nicht wahrgenommen (vermutlich immer überlesen, weil klang nach CSS oder sonst was Template). Da ich es jetzt kenne und es für mich evtl. hilfreich sein wird, dachte ich, schreib ich mal mit hier zu(kennen andere vielleicht auch noch nicht) und weil ich dabei selbst noch eine Frage habe. <template> ist nicht im DOM vorhanden, aber unterscheidet es sich auch sonst noch irgendwie von display:none;?

Gruss
Henry

[Rolf B]

Hallo Henry,

unterscheidet es sich auch sonst noch irgendwie von display:none;

Ein Template hat sein eigenes DOM (als DocumentFragment), deswegen musst Du seinen Inhalt ja auch mit importNode hereinholen. Den Inhalt eines Template kannst Du nicht per CSS sichtbar machen. display:none ist was ganz anderes. Die Frage ähnelt der nach dem Unterschied zwischen konkav und konkret...

Ich habe mir jetzt mal im Wiki angeschaut, was da zu Web Components steht. Und ins MDN geschaut. Und in die Spec. Vor allem zum Thema Shadow DOM. Oh mein Gott. Was für ein Chaos. Man merkt, dass hier eine Menge Bewegung in der Spec ist und die diversen Beschreibungen auf diversen Zeitpunkten aufsetzen. Es hilft auch nicht, dass w3.org die entsprechenden Dokumente als retired klassifiziert und einen in die github-Wüste schickt, wo man aber ratlos steht und sich fragt, wo nun der Einstieg ist und mal jemand aufgeschrieben hat, was nun die Ideen hinter all dem sind. Wenn man der Diskussion in den letzten Jahren nicht gefolgt ist, so wie ich, ist der aktuelle Status: HÄ? WTF? Shadow Trees werden im DOM Standard zwar beschrieben, aber ohne ein Sterbenswörtchen darüber zu verlieren was das überhaupt soll und was man damit anfangen kann. In der ganzen HTML Spec wird das Wort Shadow DOM keinmal erwähnt.

Hilfesuchend warf ich noch einen Blick in den SelfBlog „WebComponents“ von 2014. Aua aua, nach dreimaligem Lesen habe ich einen Ansatz von einer Ahnung, was er da gemeint hat. Das „beste“ ist ja dies hier:

vergleichen das, was wir sehen, mit dem Quelltext, den ich für den Screenshot geschrieben habe:

Hm, ja. Wenn er diesen Quelltext denn mal im Blog drin hätte. Nachdem ich dann stumpf weitergelesen habe, habe ich Shadow-DOM dann sogar verstanden. Wie das alles mit Templates zusammenspielt, dazu muss ich noch einiges lesen. Unser Wiki scheint noch nicht sehr hilfreich zu sein.

Rolf

[Matthias Apsel]

Hallo marctrix,

Рома ду­мала – Roma ist männlich (Kurzform von Romina)

Hier hast du meinen Text verändert 😉

Ich weiß. Dennoch oft (aus Muttersprachlers Mund) gehört…

Was ganz und gar nicht belegt, dass es korrekt wäre. 😉

Sexus schlägt Genus – normalerweise. Vielleicht passiert es beim Sprechen automatisch, dass man eine Angleichung vornimmt.

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

Рома ду­мала – Roma ist männlich (Kurzform von Romina)

Hier hast du meinen Text verändert 😉

Ja, wollte die Roman-Variante, hatte die aber gelöscht. Strg-Z gibt es nicht auf dem Tablet und konnte die nicht wiederherstellen. Also habe ich händisch „weiblich“ durch „männlich“ ersetzt, was dasselbe war. Außer dass ich das in der Klammer vergessen hatte.

😇

Ich weiß. Dennoch oft (aus Muttersprachlers Mund) gehört…

Was ganz und gar nicht belegt, dass es korrekt wäre. 😉

Sexus schlägt Genus

Ja.

Vielleicht passiert es beim Sprechen automatisch, dass man eine Angleichung vornimmt.

Oft setzen sich umgangssprachlich ja Vereinfachungen durch. Kann sein, dass es sich so eingeschliffen. Kann auch ein regionales Phänomen sein, will gar nicht behaupten, dass „der Russe“ es immer so macht. – Mehr noch: ich weiß, dass er es meist nicht macht. Es passiert aber oft genug, um einen nicht gleich als Ausländer zu entlarven, wenn es einem selber passiert (mit passiert es tatsächlich automatisch, weil man normalerweise nach einem weiblich klingenden Wort eine entsprechende verbform nutzt. Das passiert nicht bei häufig benutzten Worten. Zum Beispiel klingen ja viele sächliche Worte wie weibliche Formen, weil das o am Ende wie ein a gesprochen wird. Aber da ist die richtige Form halt in Fleisch und Blut übergegangen – auch das gilt nicht für unbedingt für jeden feiernden Russen in entlegenen Dörfern. Da findet man oft erstaunlich fantasievolle Abwandlungen 😉).

Marc

[marctrix]

Hej Gunnar,

@@Rolf B

Aber wenn man dem Link nach http://kizu.ru/en/ folgt, steht da tatsächlich Roman, nicht Roma.

Ich weiß nicht, ob Roma vielleicht so eine Art Koseform ist. In anderen slawischen Sprachen gibt es auch Koseform auf -a: polnisch/tschechisch Kuba für Jakób/Jakub, tschechisch Jirka für Jiří.

Im russischen auch:

• Dimitri → Dima
• Viktor → Vitja
• Juri → Jura

PS: Was für ein Link? Ich hab’s für dich gefixt.

Edel sei der Mensch, hilfreich und gut 😊

Marc