Bernd: IE - display: grid

Guten Morgen,

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.

https://codepen.io/anon/pen/MMwQPJ

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?

  1. Dein Quellcode ist alleine deine Entscheidung. Wenn du veraltetes HTML und CSS verwenden willst - mach es.

    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.

    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.

    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.

    Am einfachsten lassen sich Fallbacks mit dem Vorgehen "Mobile First" verwirklichen. Damit solltest du also anfangen.

    1. Hallo

      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.

      Am einfachsten lassen sich Fallbacks mit dem Vorgehen "Mobile First" verwirklichen. Damit solltest du also anfangen.

      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. 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?

      Tschö, Auge

      --
      Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
      Hohle Köpfe von Terry Pratchett

      Folgende Beiträge verweisen auf diesen Beitrag:

      1. Hallo,

        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. 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?

        dieses habe ich vorhin probiert

        display: -ms-grid;
        

        dann habe ich ein Problem mit

        grid-template-columns: repeat(auto-fit, minmax(390px, 390px));
        

        dieses versteht der IE in den älteren Version leider auch nicht.

        1. Hallo

          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. 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?

          dieses habe ich vorhin probiert

          display: -ms-grid;
          

          dann habe ich ein Problem mit

          grid-template-columns: repeat(auto-fit, minmax(390px, 390px));
          

          dieses versteht der IE in den älteren Version leider auch nicht.

          Wie ich schon sagte „Dass da nicht alles geht, was die moderne Syntax hergibt, steht auf einem anderen Blatt.“ 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.

          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).

          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.

          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.

          Tschö, Auge

          --
          Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
          Hohle Köpfe von Terry Pratchett
      2. 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.

        Deshalb weise ich auf browserspezifische Lösungen nicht hin.

    2. 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.

      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.

      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.

      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.

      1. Hab ich doch geschrieben: Beschäftige dich mit Fallbacks.

        1. Hab ich doch geschrieben: Beschäftige dich mit Fallbacks.

          Ich habe mich auf diese Aussage bezogen

          Der IE 11 und älter müssen nicht mehr unterstützt werden

          Und dieses ist meiner Meinung nach falsch!

          1. @@Bernd

            Der IE 11 und älter müssen nicht mehr unterstützt werden

            Und dieses ist meiner Meinung nach falsch!

            Meiner Meinung nach auch. Ich schließe mich Jeremy Keith an: „Ich unterstütze jeden Browser; ich optimiere für keinen.“

            (Vermutlich meinte @Mr.Murphy das auch so.)

            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.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

            Folgende Beiträge verweisen auf diesen Beitrag:

            1. 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.

              Ich hoffe gibst mir hier recht, es sieht einfach scheiße und unseriös aus? Hier würde ich keine Anfrage stellen gar eine Bestellung aufgeben. So kann ich es einfach nicht lassen. Der IE versteht ja überhaupt nichts.

              1. Das bestreitet doch niemand.

                1. Überlege, ob CSS-Grid hier überhaupt sinnvoll verwendet werden kann.

                2. Erstelle die Seite (HTML und / oder CSS) gegebenenfalls neu.

                3. Testen.

                4. Bei Bedarf ein Fallback erstellen.

      2. Hallo,

        Fakt ist: Der IE 11 und älter müssen nicht mehr unterstützt werden.

        Fakt ist, dieses Aussage ist einfach nicht richtig.

        Fakt ist: Du hast die Aussage nicht ganz richtig verstanden.

        "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.
        Das kann dann auch mal ein bisschen altbacken aussehen, ganz nach dem Werbeslogan "Du willst es, du kriegst es".

        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.

        Verstehe ich, aber das spricht ja nicht gegen den Vorschlag von MrMurphy, für ältere Browser ein Fallback anzubieten.

        Wie kann man so einem Posting nur ein + geben?

        Weil der Rat an sich sinnvoll und richtig ist.

        Hauptsache man kann sagen man setzt auf modernste Technik und schließt User aus die nicht auf neuste Technik zurückgreifen können

        Nein, genau das darf nicht sein.

        wie es oftmals bei Behörden der Fall ist.

        Hmm, das würde mich wundern.

        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.

        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.

        Ciao,
         Martin

        --
        Ein Tag, an dem du nicht wenigstens einmal gelacht hast, ist ein verlorener Tag.
  2. Hallo Bernd,

    Jetzt habe ich mir die Seite selbst im IE angesehen und es sieht tatsächlich total scheiße aus.

    Dein Codepen lässt sich in meinem IE11 nicht öffnen. Keine Ahnung wieso.

    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.

    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.

    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?

    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.

    Rolf

    --
    sumpsi - posui - clusi
    1. @@Rolf B

      Ich selbst bin deshalb immer extrem zurückhaltend mit dem Einsatz neuer Funktionen.

      „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 ☞ weiterlesen

      ich persönlich bin nicht der Meinung wie Gunnar oder Mr. Murphy, dass einem dieser Browser egal sein kann.

      Ich sagte das Gegenteil.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    2. Hallo

      … ich persönlich bin nicht der Meinung wie Gunnar oder Mr. Murphy, dass einem dieser Browser egal sein kann.

      Nur, weil Bernd genau das aus Mr.Murphys Posting herausgelesen hat, hat dieser das nicht geschrieben. Genauer gesagt hat keiner 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.

      Tschö, Auge

      --
      Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
      Hohle Köpfe von Terry Pratchett
  3. Wie @Auge schon sagte:

    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.

    Ich nutze dafür autoprefixer mit der Einstellung grid: true.

    Ein guter Artikel dazu ist https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/