tag:forum.selfhtml.org,2005:/self IE - display: grid – SELFHTML-Forum 2019-06-13T22:28:20Z https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750358#m1750358 Bernd 2019-06-13T06:41:14Z 2019-06-13T06:41:14Z IE - display: grid <p>Guten Morgen,</p> <p>gerade eine total böse eMail von einem User bekommen, sieht alles scheiße aus. Jetzt habe ich mir die Seite selbst im IE angesehen und es sieht tatsächlich total scheiße aus.</p> <p><a href="https://codepen.io/anon/pen/MMwQPJ" rel="noopener noreferrer">https://codepen.io/anon/pen/MMwQPJ</a></p> <p>Gibt es eine Lösung für display: grid im IE zumindest für die Versionen 10 und 11 und neuer natürlich? Vielleicht doch lieber auf die neue Sachen verzichten und auf display_inline-block setzen oder gar eine Tabelle bzw. float?</p> https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750363#m1750363 Mr.Murphy 2019-06-13T08:06:20Z 2019-06-13T08:06:20Z IE - display: grid <p>Dein Quellcode ist alleine deine Entscheidung. Wenn du veraltetes HTML und CSS verwenden willst - mach es.</p> <p>Es gibt keine Lösung für veraltete Browser. CSS-Grid, Flexbox, ... wurden doch extra erdacht um bislang nicht vorhandene Darstellungen und Möglichkeiten zu ermöglichen.</p> <p>Fakt ist: Der IE 11 und älter müssen nicht mehr unterstützt werden. Daran ändert dein verärgerter User (falls es den überhaupt gibt) gar nichts.</p> <p>Für veraltete Browser kannst du problemlos ein Fallback einbauen. Dazu muss aber der Originalquellcode sinnvoll erstellt worden sein. Das Aussehen ist dann natürlich in der Regel etwas anders. Damit sind viele Webseitenersteller, die aktuelle Techniken ablehnen, leider überfordert. Zumal wenn du zu Tabellen, Float und Inline-Block greifen willst.</p> <p>Am einfachsten lassen sich Fallbacks mit dem Vorgehen "Mobile First" verwirklichen. Damit solltest du also anfangen.</p> https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750374#m1750374 Rolf B 2019-06-13T08:54:03Z 2019-06-13T08:54:03Z IE - display: grid <p>Hallo Bernd,</p> <blockquote> <p>Jetzt habe ich mir die Seite selbst im IE angesehen und es sieht tatsächlich total scheiße aus.</p> </blockquote> <p>Dein Codepen lässt sich in meinem IE11 nicht öffnen. Keine Ahnung wieso.</p> <p>Aber das Problem "IE" musst Du Dir eigentlich an die eigene Backe binden, ein Test der Seite mit allen nicht völlig irrelevanten Browsern ist Pflicht. IE11 muss daher getestet werden, IE10 meiner Meinung nach nicht zwingend (da reicht ein Blick auf die IE10 Emulation im IE11). Der IE11 wird bei caniuse.com mit einem deutschen Marktanteil von 2,35% angegeben. Das klingt wenig, aber man muss beachten, dass die aktuelle Werte einen Marktanteil für Desktop-Browser von unter 30% nennen. Unter den Desktop-Browsern hat der IE11 also immer noch 8% oder mehr, und im Firmen-Bereich ist der Anteil nochmal höher, weil der IE ein paar Alleinstellungsmerkmale wie ActiveX hat.</p> <p>Ich selbst bin deshalb immer extrem zurückhaltend mit dem Einsatz neuer Funktionen. MS hat uns Entwicklern mit dem trägen Entwicklungstempo und dann -stopp des IE ein böses Ei gelegt, und ich persönlich bin nicht der Meinung wie Gunnar oder Mr. Murphy, dass einem dieser Browser egal sein kann.</p> <p>Die Frage, was "scheiße" ist, muss man aber differenziert betrachten. Sind die Boxen komplett durcheinander? Findet man sich überhaupt nicht mehr zurecht? Oder ist einfach nur alles untereinander gerutscht?</p> <p>Die Frage ist nun, was für Dich einfacher ist. In die table- und float-Steinzeit zurückkehren solltest Du nicht. Die Frage ist: zurück zu einem flexbox-Layout für alle (was zusätzliches Markup bedeutet und den Umgang mit der Bug-Pest des IE bei Flexbox) oder der Versuch, -ms-grid kennenzulernen und ein Layout zu finden, dass sich mit grid und -ms-grid umsetzen lässt. Es gibt im Netz Tutorials dazu, aber du wirst dann sehr sorgfältig vorgehen und gut testen müssen.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750411#m1750411 djr 2019-06-13T22:28:20Z 2019-06-13T22:28:20Z IE Grid per autoprefixer <p>Wie <a href="/users/15" class="mention registered-user" rel="noopener noreferrer">@Auge</a> schon <a href="https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750364#m1750364" rel="noopener noreferrer">sagte</a>:</p> <blockquote> <p>Speziell in diesem Fall (grid in IE 10 und 11) stünde noch die Möglichkeit im Raum, diese mit der veralteten Syntax, die sie verstehen, zu füttern.</p> </blockquote> <p>Ich nutze dafür <a href="https://github.com/postcss/autoprefixer" rel="noopener noreferrer">autoprefixer</a> mit der Einstellung <code>grid: true</code>.</p> <p>Ein guter Artikel dazu ist <a href="https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/" rel="nofollow noopener noreferrer">https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/</a></p> https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750364#m1750364 Auge 2019-06-13T08:14:18Z 2019-06-13T08:14:18Z IE - display: grid <p>Hallo</p> <blockquote> <p>Es gibt keine Lösung für veraltete Browser. CSS-Grid, Flexbox, ... wurden doch extra erdacht um bislang nicht vorhandene Darstellungen und Möglichkeiten zu ermöglichen.</p> <p>Am einfachsten lassen sich Fallbacks mit dem Vorgehen "Mobile First" verwirklichen. Damit solltest du also anfangen.</p> </blockquote> <p>Speziell in diesem Fall (grid in IE 10 und 11) stünde noch die Möglichkeit im Raum, diese mit der veralteten Syntax, <a href="https://caniuse.com/#feat=css-grid" rel="noopener noreferrer">die sie verstehen</a>, zu füttern. Dass da nicht alles geht, was die moderne Syntax hergibt, steht auf einem anderen Blatt. Dann sieht's halt ein wenig anders aus, who cares?</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750365#m1750365 Bernd 2019-06-13T08:18:35Z 2019-06-13T08:18:35Z IE - display: grid <blockquote> <p>Fakt ist: Der IE 11 und älter müssen nicht mehr unterstützt werden. Daran ändert dein verärgerter User (falls es den überhaupt gibt) gar nichts.</p> </blockquote> <p>Fakt ist, dieses Aussage ist einfach nicht richtig. Wenn User sich beschweren, dadurch Kaufabbrüche stattfinden und vielleicht sogar eine Schlechte Bewertung bei Facebook und Co. hinterlassen dann sollte man dieses ernst nehmen. So eine Aussage wie du sie getroffen hast kann nur von jemanden kommen der nicht auf User / Umsatz angewiesen ist. Ich möchte alles mögliche für meine User / Kunden tun dass die sich wohlfühlen und vor allem dass keine Kaufabbrüche stattfinden, denn dieses schadet mir enorm.</p> <p>Wie kann man so einem Posting nur ein + geben? Einfach lächerlich. Da sieht man mal ganz deutlich ihr beschäftigt euch mit solchen Sachen 0. Hauptsache man kann sagen man setzt auf modernste Technik und schließt User aus die nicht auf neuste Technik zurückgreifen können wie es oftmals bei Behörden der Fall ist.</p> <p>Einige Kunden von mir arbeiten in der Stadtverwaltung wenn ich da ab und an Screenshots anfordere möchte ich am liebsten heulen, Windows NT, Windows 98, Windows Vista auch 2019 noch alles mit dabei. Und auf solche Kunden soll ich verzichten mit der Gefahr dieser springt.</p> https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750366#m1750366 Bernd 2019-06-13T08:22:50Z 2019-06-13T08:22:50Z IE - display: grid <p>Hallo,</p> <blockquote> <p>Speziell in diesem Fall (grid in IE 10 und 11) stünde noch die Möglichkeit im Raum, diese mit der veralteten Syntax, <a href="https://caniuse.com/#feat=css-grid" rel="noopener noreferrer">die sie verstehen</a>, zu füttern. Dass da nicht alles geht, was die moderne Syntax hergibt, steht auf einem anderen Blatt. Dann sieht's halt ein wenig anders aus, who cares?</p> </blockquote> <p>dieses habe ich vorhin probiert</p> <pre><code class="block language-css"><span class="token property">display</span><span class="token punctuation">:</span> -ms-grid<span class="token punctuation">;</span> </code></pre> <p>dann habe ich ein Problem mit</p> <pre><code class="block language-css"><span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>auto-fit<span class="token punctuation">,</span> <span class="token function">minmax</span><span class="token punctuation">(</span>390px<span class="token punctuation">,</span> 390px<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>dieses versteht der IE in den älteren Version leider auch nicht.</p> https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750367#m1750367 Mr.Murphy 2019-06-13T08:24:11Z 2019-06-13T08:24:11Z IE - display: grid <p>Es gibt ähnlich seltene Browser wie IE11 und älter, die mit aktuellem CSS nichts anfangen können. Ich halte es für sinnvoller die alle gleichzeitig mit einem Fallback zu versorgen, falls dies gewünscht wird. Das ist dann ein Aufwasch, der weniger Aufwand bedeutet, als sich in die veraltete IE-Technik einzuarbeiten.</p> <p>Deshalb weise ich auf browserspezifische Lösungen nicht hin.</p> https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750368#m1750368 Mr.Murphy 2019-06-13T08:25:57Z 2019-06-13T08:25:57Z IE - display: grid <p>Hab ich doch geschrieben: Beschäftige dich mit Fallbacks.</p> https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750371#m1750371 Der Martin 2019-06-13T08:33:13Z 2019-06-13T08:33:13Z IE - display: grid <p>Hallo,</p> <blockquote> <blockquote> <p>Fakt ist: Der IE 11 und älter müssen nicht mehr unterstützt werden.</p> </blockquote> <p>Fakt ist, dieses Aussage ist einfach nicht richtig.</p> </blockquote> <p>Fakt ist: Du hast die Aussage nicht ganz richtig verstanden.</p> <p>"Nicht unterstützen" soll nicht bedeuten, dass einem die Nutzer älterer Browser egal sind. Sie müssen insofern berücksichtigt werden, als sie dann eben eine leicht abgewandelte, einfachere Darstellung kriegen. Etwas, das diese Browser dann auch noch darstellen können.<br> Das <em>kann</em> dann auch mal ein bisschen altbacken aussehen, ganz nach dem Werbeslogan "Du willst es, du kriegst es".</p> <blockquote> <p>Ich möchte alles mögliche für meine User / Kunden tun dass die sich wohlfühlen und vor allem dass keine Kaufabbrüche stattfinden, denn dieses schadet mir enorm.</p> </blockquote> <p>Verstehe ich, aber das spricht ja nicht gegen den Vorschlag von MrMurphy, für ältere Browser ein Fallback anzubieten.</p> <blockquote> <p>Wie kann man so einem Posting nur ein + geben?</p> </blockquote> <p>Weil der Rat an sich sinnvoll und richtig ist.</p> <blockquote> <p>Hauptsache man kann sagen man setzt auf modernste Technik und schließt User aus die nicht auf neuste Technik zurückgreifen können</p> </blockquote> <p>Nein, genau das darf nicht sein.</p> <blockquote> <p>wie es oftmals bei Behörden der Fall ist.</p> </blockquote> <p>Hmm, das würde mich wundern.</p> <blockquote> <p>Einige Kunden von mir arbeiten in der Stadtverwaltung wenn ich da ab und an Screenshots anfordere möchte ich am liebsten heulen, Windows NT, Windows 98, Windows Vista auch 2019 noch alles mit dabei.</p> </blockquote> <p>Ach, so meintest du das. Ja, das kann ich wieder nachvollziehen. Ich dachte, du meintest die Webportale von Behörden und wirfst denen vor, zu modern zu sein und keine Rücksicht auf alte Technologien zu nehmen.</p> <p>Ciao,<br>  Martin</p> <div class="signature">-- <br> Ein Tag, an dem du nicht wenigstens einmal gelacht hast, ist ein verlorener Tag. </div> https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750388#m1750388 Auge 2019-06-13T11:04:56Z 2019-06-13T12:34:49Z IE - display: grid <p>Hallo</p> <blockquote> <blockquote> <p>Speziell in diesem Fall (grid in IE 10 und 11) stünde noch die Möglichkeit im Raum, diese mit der veralteten Syntax, <a href="https://caniuse.com/#feat=css-grid" rel="noopener noreferrer">die sie verstehen</a>, zu füttern. Dass da nicht alles geht, was die moderne Syntax hergibt, steht auf einem anderen Blatt. Dann sieht's halt ein wenig anders aus, who cares?</p> </blockquote> <p>dieses habe ich vorhin probiert</p> <pre><code class="block language-css"><span class="token property">display</span><span class="token punctuation">:</span> -ms-grid<span class="token punctuation">;</span> </code></pre> <p>dann habe ich ein Problem mit</p> <pre><code class="block language-css"><span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>auto-fit<span class="token punctuation">,</span> <span class="token function">minmax</span><span class="token punctuation">(</span>390px<span class="token punctuation">,</span> 390px<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>dieses versteht der IE in den älteren Version leider auch nicht.</p> </blockquote> <p>Wie ich schon sagte <em>„Dass da nicht alles geht, was die moderne Syntax hergibt, steht auf einem anderen Blatt.“</em> Auch in deinem Fall gilt, dass eine Website nicht überall gleich aussehen muss, nicht überall gleich aussehen kann. Wiedererkennbar soll sie sein, aber wenn gewisse Elemente nicht überall an der selben Stelle und in der selben Reihenfolge zu sehen sind, ist das wurscht.</p> <p>Der Benutzer deiner Seite wird einen Unterschied entweder nicht bemerken oder ihn für normal hinnehmen. Nicht bemerken wird er ihn, wenn er die Seite immer von einem Gerät aus aufruft, da er dort typischerweise immer mit dem selben Browser unterwegs ist. Für ihn ändert sich nie etwas am Layout. Den Unterschied als normal nehmen wird er, wenn er es gewohnt ist, eine Seite von verschiedenen Geräten aus aufzurufen. Dann kennt er nämlich auch das Phänomen, dass Seiten in verschiedenen Browsern (auf verschiedenen Geräten) unterschiedlich aussehen (können).</p> <p>Du, wie wohl alle anderen Entwickler, machst dir einfach nicht oder zu selten klar, dass du, wie wohl alle anderen anderen Entwickler, der einzige bist, der deine Seite auch an einem Gerät für Tests mit verschiedenen Browsern aufruft. Isso und ist auch nicht schlimm. Es führt einen nur immer wieder in eine falsche Richtung, in eine Ecke, in der man allein herumsteht.</p> <p>Mit einem Grundlayout, wie es Mr.Murphy vorschlug, das überall funktioniert, egal ob Smartphone oder Uralt-Desktop-Browser, und den dieses Layout erweiternden oder ändernden Regeln für moderne Browser, bist du, mit nicht zu unterschlagendem Aufwand, auf dem richtigen Weg.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750369#m1750369 Bernd 2019-06-13T08:27:28Z 2019-06-13T08:27:28Z IE - display: grid <blockquote> <p>Hab ich doch geschrieben: Beschäftige dich mit Fallbacks.</p> </blockquote> <p>Ich habe mich auf diese Aussage bezogen</p> <blockquote> <p>Der IE 11 und älter müssen nicht mehr unterstützt werden</p> </blockquote> <p>Und dieses ist meiner Meinung nach falsch!</p> https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750370#m1750370 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-06-13T08:33:09Z 2019-06-13T08:33:09Z IE - display: grid <p>@@Bernd</p> <blockquote> <blockquote> <p>Der IE 11 und älter müssen nicht mehr unterstützt werden</p> </blockquote> <p>Und dieses ist meiner Meinung nach falsch!</p> </blockquote> <p>Meiner Meinung nach auch. Ich schließe mich Jeremy Keith an: <em>„Ich unterstütze jeden Browser; ich optimiere für keinen.“</em></p> <p>(Vermutlich meinte <a href="/users/10918" class="mention registered-user" rel="noopener noreferrer">@Mr.Murphy</a> das auch so.)</p> <p>Unterstützung heißt: Es soll im IE nicht Scheiße aussehen.</p> <p>Unterstützung heißt nicht: Es muss im IE genauso aussehen wie in modernen Browsern.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750372#m1750372 Bernd 2019-06-13T08:37:46Z 2019-06-13T08:37:46Z IE - display: grid <blockquote> <p>Unterstützung heißt: Es soll im IE nicht Scheiße aussehen. Unterstützung heißt nicht: Es muss im IE genauso aussehen wie in modernen Browsern.</p> </blockquote> <p>Ich hoffe gibst mir hier recht, es sieht einfach scheiße und unseriös aus? Hier würde <em>ich</em> keine Anfrage stellen gar eine Bestellung aufgeben. So kann ich es einfach nicht lassen. Der IE versteht ja überhaupt nichts.</p> <p><a href="/images/d87fb2a2-5dfc-4283-abdf-f1d25209ef8d.png" rel="noopener noreferrer"><img src="/images/d87fb2a2-5dfc-4283-abdf-f1d25209ef8d.png?size=medium" alt="" loading="lazy"></a></p> https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750373#m1750373 Mr.Murphy 2019-06-13T08:42:42Z 2019-06-13T08:42:42Z IE - display: grid <p>Das bestreitet doch niemand.</p> <ol> <li> <p>Überlege, ob CSS-Grid hier überhaupt sinnvoll verwendet werden kann.</p> </li> <li> <p>Erstelle die Seite (HTML und / oder CSS) gegebenenfalls neu.</p> </li> <li> <p>Testen.</p> </li> <li> <p>Bei Bedarf ein Fallback erstellen.</p> </li> </ol> https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750386#m1750386 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-06-13T10:14:55Z 2019-06-13T10:14:55Z IE - display: grid <p>@@Rolf B</p> <blockquote> <p>Ich selbst bin deshalb immer extrem zurückhaltend mit dem Einsatz neuer Funktionen.</p> </blockquote> <p>„Die Grundfunktionalität zu erstellen dauert nicht allzu lange. Wenn man das getan hat, kann man seine Zeit damit verbringen, mit den neusten und großartigsten Browsertechnologien zu experimentieren; sicher in dem Wissen, dass selbst wenn diese noch nicht weitgehend unterstützt werden, man den Fallback ja bereits hat.“ —Jeremy Keith ☞ <a href="https://forum.selfhtml.org/self/2015/sep/19/technische-fragen-zu-einer-seite-die-nur-aus-einer-seite-besteht/1650342#m1650342" rel="noopener noreferrer">weiterlesen</a></p> <blockquote> <p>ich persönlich bin nicht der Meinung wie Gunnar oder Mr. Murphy, dass einem dieser Browser egal sein kann.</p> </blockquote> <p><a href="https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750370#m1750370" rel="noopener noreferrer">Ich sagte das Gegenteil.</a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/jun/13/ie-display-grid/1750387#m1750387 Auge 2019-06-13T10:29:03Z 2019-06-13T10:29:03Z IE - display: grid <p>Hallo</p> <blockquote> <p>… ich persönlich bin nicht der Meinung wie Gunnar oder Mr. Murphy, dass einem dieser Browser egal sein kann.</p> </blockquote> <p>Nur, weil Bernd genau das aus Mr.Murphys Posting herausgelesen hat, hat dieser das nicht geschrieben. Genauer gesagt hat <strong>keiner</strong> der beiden genannten das gesagt oder geschrieben. Beide schreiben von Fallbacks für alte Browser, die nichts mit Grid anfangen können. Mr.Murphy hat sogar den zu beschreitenden Weg (unterneinander stehende Blockelemente in einem Mobile-First-Layout) skizziert. Genau deshalb hat er – ich schreibe das, weil hier wegen der Bewertung schon wieder rumgeningelt wird — von mir auch die positive Bewertung bekommen.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div>