responsives Design ohne media queries? - geht!

[Matthias Scharwies]

Servus!

Ich hatte mich vor Jahren mal im stillen Kämmerlein über einen Stammposter aufgeregt, der fragte, „ob man RWD auch ohne media queries realisieren könnte“.

Dann kam grid mit repeat(auto-fill, minmax(20em, 1fr)); und mittlerweile gibt es noch mehr Möglichkeiten:

css-tricks: Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs von David Atanda, 04.09.2020

Das müsste man ins Deutsche übersetzen,

evtl. als eigenes Kapitel zu HTML/Tutorials/responsive_Webdesign

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Das müsste man ins Deutsche übersetzen,

Wenn ich das hier lese, dann scheint es mir, als hätte Chris damit überhaupt kein Problem. Es ist ihm sogar egal, ob man ihn als Quelle nennt. Tun sollte man es natürlich schon.

Ob man die Bilder 1:1 kopieren darf, da bin ich mir allerdings weniger sicher. Ich kann sie neu malen, aber das ändert wenig an der Tatsache, dass ich eine Idee übernehme.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

Das müsste man ins Deutsche übersetzen,

Wenn ich das hier lese, dann scheint es mir, als hätte Chris damit überhaupt kein Problem. Es ist ihm sogar egal, ob man ihn als Quelle nennt. Tun sollte man es natürlich schon.

Ob man die Bilder 1:1 kopieren darf, da bin ich mir allerdings weniger sicher. Ich kann sie neu malen, aber das ändert wenig an der Tatsache, dass ich eine Idee übernehme.

Falls sich jemand an die Übersetzung / Anpassung macht, würde ich die Infografiken in SVG erstellen.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

ich habe in meinem Userspace mal angefangen. Muss aber jetzt erstmal vom PC weg.

Rolf

[Rolf B]

So, fertig

Ob Bilder wirklich nötig sind, kann jemand anderes entscheiden. Und wenn jemand die Übersetzung qualitätssichern möchte, wäre das auch nicht schlecht.

Rolf

[MudGuard]

Hi,

So, fertig

Ob Bilder wirklich nötig sind, kann jemand anderes entscheiden. Und wenn jemand die Übersetzung qualitätssichern möchte, wäre das auch nicht schlecht.

Ich fänd's noch besser, wenn bei den Code-Beispielen das picture-lg usw. durch bild-gross usw. ersetzt würde (wenn schon übersetzen, dann richtig)

Ich hab erst mal kurz gestutzt, was das lg bedeuten soll (und wenn jemand wirklich kein Englisch kann, also die Leute, für die der Artikel übersetzt wird ...).

cu,
Andreas a/k/a MudGuard

[Tabellenkalk]

Hallo,

Ich hab erst mal kurz gestutzt, was das lg bedeuten soll

lg steht für lag, weil größere Bilder lä(n)ger benötigen…

Gruß
Kalk

[Matthias Scharwies]

Servus!

Hi,

So, fertig

Vielen, vielen Dank!

Ob Bilder wirklich nötig sind, kann jemand anderes entscheiden.

Ich fänd's noch besser, wenn bei den Code-Beispielen das picture-lg usw. durch bild-gross usw. ersetzt würde (wenn schon übersetzen, dann richtig)

Ich hab erst mal kurz gestutzt, was das lg bedeuten soll (und wenn jemand wirklich kein Englisch kann, also die Leute, für die der Artikel übersetzt wird ...).

Ich wrde heut nachmittag mal eine Infografik zusammenbasteln. Was haltet ihr von

• Bild-XXL
• Bild-XL
• Bild-L und img?

Das ist zwar auch DEnglisch, aber mittlerweile wohl verständlich, oder?

Und wenn jemand die Übersetzung qualitätssichern möchte, wäre das auch nicht schlecht.

Ich gucke heute nachmittag mal.

Meine erste Frage: Wie, wenn überhaupt, würdet ihr den Titel übersetzen?

Beyond Media queries

• Nicht nur Media queries* (von @Rolf B find ich gut!, hab's jetzt erst gesehen!)

Jenseits von Media Queries

Mehr als Media queries

Oder so lassen?

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

ich habe die Dateien gestern in bild-gross/-mittel/-klein umbenannt, letztlich bin ich da aber schmerzfrei.

Mit der Überschrift habe ich gekämpft 😣. Die wörtliche Übersetzung "jenseits" klingt im Deutschen irgendwie merkwürdig. "Mehr als" und "Nicht nur" gefällt mir beides. Die englische Überschrift stehen lassen möchte ich eigentlich nicht. Das passt nicht zu Selfhtml - ich erinnere an das Ringen um eine gute Übersetzung von phrasing content 😉

Was mir weniger Freude gemacht hat, ist, dass Kalk und Matthias Apsel in dem Text in meinem Userspace editiert haben. Das ist jetzt kein „Finger weg von meinen Sachen“, sondern die Sorge um Datenverlust. Was in meinem Userspace ist, betrachte ich als "ausgecheckt" und exklusiv für mich. Da rechne ich nicht mit Parallel-Edits und bin viel unvorsichtiger, was längere Bearbeitungszeiten angeht. Die Edits waren schon hilfreich, aber wenn jemand editiert hätte während ich das Ding ein paar Stunden auf dem Bildschirm hatte, dann hätte das unangenehm werden können (es sei denn, Media Wiki hat seit neuestem eine Hilfe zum Auflösen von Edit-Kollisionen).

Rolf

[Matthias Apsel]

Hallo Rolf B,

Was mir weniger Freude gemacht hat, ist, dass Kalk und Matthias Apsel in dem Text in meinem Userspace editiert haben.

Das tue ich gewöhnlich nicht. Du hattest allerdings explizit nachgefragt …

Bis demnächst
Matthias

[Der Martin]

Hallo Rolf,

Mit der Überschrift habe ich gekämpft 😣. Die wörtliche Übersetzung "jenseits" klingt im Deutschen irgendwie merkwürdig.

ja, das hat ein bisschen was Transzendentes ... 😉

Alternativ biete ich noch "über ... hinaus" an. Ist aber für eine Überschrift nicht so schön, da sollte die Formulierung eher knackig-griffig sein.

"Mehr als" und "Nicht nur" gefällt mir beides.

Mir auch.

Live long and pros healthy,
 Martin

[MudGuard]

Hi,

• Bild-XXL
• Bild-XL
• Bild-L und img?

Das ist zwar auch DEnglisch, aber mittlerweile wohl verständlich, oder?

XXL, XL usw. sind gebräuchliche Abkürzungen im Alltag (kennt jeder, der schon mal Klamotten gekauft hat).

Im Gegensatz zu lg für large oder sm für small.

cu,
Andreas a/k/a MudGuard

[kai345]

Ich wrde heut nachmittag mal eine Infografik zusammenbasteln. Was haltet ihr von

• Bild-XXL
• Bild-XL
• Bild-L und img?

Das ist zwar auch DEnglisch, aber mittlerweile wohl verständlich, oder?

Aber was bedeutet XXL XL L? Jeder dürfte diesbezüglich andere Vorstellungen haben. Für einen ist 4096px schon XXL, für Andere sind es >= 20000px ...

Ich finde generell die Angabe (einer|beider) Maßeinheit(en) besser. Dann erkennt man auch nach längerer Zeit [brain.flush()] immer sofort die Bildgröße.

• bild-20000
• bild-4096
• bild-1024

und würde es gerade auch für Tutorials sinnvoll finden, damit sich die Leser von Beginn an eine sinnvolle Benamung angewöhnen.

Ist natürlich nur meine Meinung von "sinnvoll" .

[Der Martin]

Hallo,

• Bild-XXL
• Bild-XL
• Bild-L und img?

Das ist zwar auch DEnglisch, aber mittlerweile wohl verständlich, oder?

Aber was bedeutet XXL XL L? Jeder dürfte diesbezüglich andere Vorstellungen haben. Für einen ist 4096px schon XXL, für Andere sind es >= 20000px ...

das ist ein Grundproblem, wenn Größen (im Sinne von: physikalische Größen) in Prosa angegeben werden. Ich sag nur USB. "Full Speed" ist historisch bedingt 12Mbps. Oder Ethernet. "Fast Ethernet" ist für mich 1000Mbps.

Bei Kleidung ist es ähnlich schwierig. Allgemein korreliert L bei Herrenkleidung in etwa mit der "klassischen" Konfektionsgröße 50, eventuell 52. Bei manchen Herstellern liegt die Messlatte aber auch deutlich höher oder niedriger. Wer normal Größe XL trägt und zur Abwechslung mal bei einem China-Lieferanten einkauft, braucht eventuell plötzlich 3XL.

Ich bevorzuge daher eindeutige numerische Größenangaben, z.B. W33/L34 bei Hosen oder 480Mbps bei USB.

Ich finde generell die Angabe (einer|beider) Maßeinheit(en) besser. Dann erkennt man auch nach längerer Zeit [brain.flush()] immer sofort die Bildgröße.

• bild-20000
• bild-4096
• bild-1024

Hmm, war mit der Zahl jetzt die Breite oder die Höhe gemeint? .oO(?)

und würde es gerade auch für Tutorials sinnvoll finden, damit sich die Leser von Beginn an eine sinnvolle Benamung angewöhnen.

Ist natürlich nur meine Meinung von "sinnvoll".

Ja, aber durchaus nachvollziehbar.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo,

da der Artikel <source>-Media-Queries bezüglich der Breite enthält, wäre eine Benennung der Bilder nach der Bildbreite, oder des Breitenbreakpoints, vermutlich sinnvoll.

Rolf

[Matthias Scharwies]

Servus!

Hallo,

da der Artikel <source>-Media-Queries bezüglich der Breite enthält, wäre eine Benennung der Bilder nach der Bildbreite, oder des Breitenbreakpoints, vermutlich sinnvoll.

Vielen Dank an @kai345 @Der Martin und @Rolf B für Euren Input. Bisher (HTML/Tutorials/Bilder_im_Internet/responsive_Bilder#hochauflösende_Versionen_mit_srcset) hatte ich -gross, -mittel und klein, was ich jetzt nicht mehr gut finde und ändern werde!

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Rolf B,

ich habe in meinem Userspace mal angefangen. Muss aber jetzt erstmal vom PC weg.

Vielen lieben Dank.

Wir haben die Konvention, dass die spitzen Klammern nicht zum Element gehören. Also p-Element, nicht <p>-Element.

Bis demnächst
Matthias

[ThomasM]

Hallo Matthias,

Wir haben die Konvention, dass die spitzen Klammern nicht zum Element gehören. Also p-Element, nicht <p>-Element.

Zum Element schon, aber nicht zum Elementnamen.

SCNR,
Thomas 😉

[Matthias Apsel]

Hallo Matthias Scharwies,

Das müsste man ins Deutsche übersetzen,

scheint erlaubt zu sein.

Gut, dass die Antwortentwürfe im local storage gespeichert werden. 😀

Bis demnächst
Matthias

[klawischnigg]

Hi there,

css-tricks: Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs von David Atanda, 04.09.2020

interessanter Artikel, ich hab' noch nie etwas von einer CSS-Anweisung "objekt-fit" gehört - man lernt halt nie aus...😉

[Rolf B]

Hallo Matthias,

um ganz ehrlich zu sein: Was da über min(), max() und minmax() steht, scheint mir falsch zu sein.

The min() function specifies the absolute smallest size that an element can shrink to.

Nein, andersrum. min() liefert das Minimum zweier Werte. Ich kann mit min() festlegen, welcher Wert nicht überschritten werden soll.

And, hey, we can even set a minimum and maximum range instead using the minmax() function: .box { width: minmax(600px, 50%); }

Nach allem was ich weiß ist das ungültiges CSS. minmax ist Teil der Grid-Spezifikation. width: clamp(600px, 50%, 1000px); wäre etwas, das funktioniert.

Bin ich verwirrt, oder ist es David?

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

um ganz ehrlich zu sein: Was da über min(), max() und minmax() steht, scheint mir falsch zu sein.

Ich habe das nur überflogen. Aber in den Kommentaren steht von einem Christopher Kirk-Nielsen:

BTW, for max(), I believe this should read (copy-paste error I presume):

If 60% computes to a value greater than 600px, 
the browser uses 60% as the width. 
On the flip side, if 60% computes to a value 
smaller than 600px, then 600px will be used 
as the element’s width. 

The min() function specifies the absolute smallest size that an element can shrink to.

Nein, andersrum. min() liefert das Minimum zweier Werte. Ich kann mit min() festlegen, welcher Wert nicht überschritten werden soll.

And, hey, we can even set a minimum and maximum range instead using the minmax() function: .box { width: minmax(600px, 50%); }

Nach allem was ich weiß ist das ungültiges CSS. minmax ist Teil der Grid-Spezifikation. width: clamp(600px, 50%, 1000px); wäre etwas, das funktioniert.

Bin ich verwirrt, oder ist es David?

Mir war so, als ob man Werte wie min-content und Funktionen wie minmax() auch anderswo einsetzen könnte; unser Wiki-Artikel verlinkt auf MDN und WhatWG, die das beide nur für Grid sehen.

Ich probier die Tage mal aus und würde dann die Beispiele ins Wiki stellen.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

ich möchte in einer BeispielText Vorlage eine Tabelle verwenden. Die | der Tabelle bringen ihn aber durcheinander, ich erhalte die Meldung

... ruft Vorlage:BeispielText mit mehr als einem Wert für den Parameter „“ auf. Nur der letzte angegebene Wert wird verwendet.

Wie verberge ich die | vor dem Vorlagenparser?

Rolf

[Tabellenkalk]

Hallo,

Wie verberge ich die | vor dem Vorlagenparser?

Hilft die Vorlagenhilfe der WP?

Gruß
Kalk

[Rolf B]

Hallo Tabellenkalk,

ich schreibe ja keine Vorlage, sondern nutze sie.

Aber ich hab's probiert: wenn ich {{|}} verwende, mault der Parser nicht mehr, jedoch das {{|}} landet 1:1 in der Ausgabe.

Update: es ist {{!}}. Damit entsteht:

{{{!}} 
{{!}}.8rem {{!}}{{!}}={{!}}{{!}}8px (0,8 * 10)
{{!}}-
{{!}}1rem {{!}}{{!}}={{!}}{{!}}10px (1 * 10)
{{!}}-
{{!}}2rem {{!}}{{!}}={{!}}{{!}}20px (2 * 10)
{{!}}}

Au weia. Dann doch lieber <pre>.

Rolf

[Matthias Apsel]

Hallo Rolf B,

Update: es ist {{!}}. Damit entsteht:

Au weia. Dann doch lieber <pre>.

Alternativ die Tabelle unterhalb des Beispiels schreiben.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

Kategorie: Seiten mit Syntaxhervorhebungsfehlern

Begründung: Im <source> Element fehlt das lang Attribut.

Hm.

Tja. Was tun? Alle <source> Elemente, die ein lang-Attribut brauchen, haben eins. Aber es gibt welche, die brauchen keins. Mit &lt; komme ich nicht weiter.

<source lang="html">
<picture>
  <source media="(max-width:1000px)" srcset="bild-gross.png">
  <source media="(max-width:600px)" srcset="bild-mittel.png">
  <source media="(max-width:400px)" srcset="bild-klein.png">
  <img src="picture.png" alt="picture"">
</picture>
</source> 

Rolf

[Matthias Apsel]

Hallo Rolf B,

<source lang="html">
<picture>
  <source media="(max-width:1000px)" srcset="bild-gross.png">
  <source media="(max-width:600px)" srcset="bild-mittel.png">
  <source media="(max-width:400px)" srcset="bild-klein.png">
  <img src="picture.png" alt="picture"">
</picture>
</source> 

<pre>
<picture>
  <source media="(max-width:1000px)" srcset="bild-gross.png">
  <source media="(max-width:600px)" srcset="bild-mittel.png">
  <source media="(max-width:400px)" srcset="bild-klein.png">
  <img src="picture.png" alt="picture"">
</picture>
</pre>

Das ist auch auf der entsprechenden Kategorieseite als häufiger Fehler beschrieben.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

ich will pre nicht verwenden, weil ich die Syntaxfärbung möchte. Mein lang-Attribut ist ja auch richtig. Aber er mault die source-Kinder des picture an, denke ich. Und das dürfte er nicht tun.

Rolf

[Matthias Apsel]

Hallo Rolf B,

ich will pre nicht verwenden, weil ich die Syntaxfärbung möchte. Mein lang-Attribut ist ja auch richtig. Aber er mault die source-Kinder des picture an, denke ich. Und das dürfte er nicht tun.

Ah, ja. Das kann sein. Das müsste man dann wohl einfach so hinnehmen.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

es ist sehr merkwürdig. Seit du dran warst, ist die Kategorisierung weg. Und vor allem hast Du ja das <pre> auch nur am <img> Beispiel gemacht, wo gar kein <source> Kind drin war. Ich bin verwirrt. Hat jemand den Scanner gefixt?

Rolf

[Matthias Apsel]

Hallo Rolf B,

es ist sehr merkwürdig. Seit du dran warst, ist die Kategorisierung weg. Und vor allem hast Du ja das <pre> auch nur am <img> Beispiel gemacht, wo gar kein <source> Kind drin war. Ich bin verwirrt. Hat jemand den Scanner gefixt?

Es ist mutmaßlich das source im Text gewesen. Das hatte auch den ganzen nachfofgenden Text kaputt gemacht.

Bis demnächst
Matthias

[Matthias Scharwies]

Servus!

Das müsste man ins Deutsche übersetzen,

Vielen Dank an @Rolf B und alle anderen.

evtl. als eigenes Kapitel zu HTML/Tutorials/responsive_Webdesign

Ich hab's mal mit Live-Beispielen angereichert und an die passende Stelle geschoben: HTML/Tutorials/responsive_Webdesign/neuere_HTML-_und_CSS-Features

Herzliche Grüße

Matthias Scharwies