Contao 4: CSS Grid Layout

[Schnippel]

Hi,

befasse mich gerade mit dem CSS-Grid-Layout. Das Arbeiten mit den grid-areas ist eine tolle Sache.
Was in modernen Browsern gut ausschaut, ist aber im IE11 und Edge eine reine Katastrophe.

Welche Möglichkeiten gibt es in Contao 4, dieses Problem zu beheben?

[MacKP]

Hallo Schnippel,
da macht Contao mal gar nix. Ist auch nicht die Aufgabe von Contao. Ist dein Job ;-)
Hier mal Infos dazu: https://www.smashingmagazine.com/201...-without-grid/
Weitere Infos: Findest du mit der Suchmaschine deines vertrauens im Internet (aka Neuland)

Viele Grüße

[mlweb]

Das hat nichts mit Contao zu tun, sondern ist ein reines CSS-Thema. Bei Microsoft Edge sind mir bisher noch keine gravierenden Probleme aufgefallen. Beim IE11 muss man mit Prefixes und alter Spezifikation arbeiten. Dann klappt zumindestens vieles. Den Rest konnte ich bisher mit ein wenig CSS-Phantasie und der sehr hilfreichen Klasse .ie11 ausbügeln, die Contao vergibt. Die ganzen Prefix-Geschichten kann man händisch machen oder man nutzt den überaus hilfreichen Autoprefixer und Postcss. Ein interessanter Artikel zu diesem Thema: https://css-tricks.com/css-grid-in-i...-autoprefixer/

Falls man den Autoprefixer nicht in den eigenen Workflow integriert hat (gulp, grunt, editor-plugin), den autoprefixer gibt es auch online https://autoprefixer.github.io/.

Nachtrag: Alternative vor allem wenn man noch ältere IEs unterstützen muss, ist dann das gute alte Float welches auch bei den Dinosauriern meist zufriedenstellend funktioniert.

[rusty]

Ich habe schon mehrfach mit dem Gedanken gespielt, CSS Grid für die Umsetzung von Layouts zu verwenden. Vor allem, wenn Elemente eine bestimmte Höhe erhalten sollen, die mit der Höhe anderer Elemente korrelieren, wäre das eigentlich ziemlich smart.
Gescheitert ist das bisher immer an der Eigenschaft grid-auto-flow, die es ermöglicht, Elemente ohne explizite Zuweisung einer Position in das Grid fließen zu lassen. Im Kontext eines CMS, bei dem Redakteure die Freiheit haben sollen, zusätzliche Inhalte anzulegen, die dann automatisch im Layout platziert werden, ist diese Eigenschaft essentiell. Aber meines Wissens leider nicht für IE11 realisierbar. Und auf den wollte dann bisher doch noch kein Kunde verzichten.

[Schnippel]

und der sehr hilfreichen Klasse .ie11 ausbügeln, die Contao vergibt

Wo befindet sich die .ie11?

[rusty]

im body-Tag. Zusammen mit anderen Klassen für das jeweilige Betriebssystem, Browser und Rendering-Engine.

[lucina]

Contao setzt eine CSS-Klasse für den Body, in der in diesem Fall .ie11 drinsteht. Also kann man mit .ie11 .foobar speziell den Browser ansprechen. Man könnte auch auf die Idee kommen, dem IE mittels eines Conditional Comments (<!--[if IE 11|>...<![endif]--> ein separates Stylesheet unterzusemmeln. Ich habe das neulich mal gemacht und dabei einer Seite, die auf dem CSS-Grid von Bootstrap 4 aufbaut, extra für alte IEs nochmal das Grid von Bootstrap 3 störungsfrei mitgegeben.

Darüber hinaus gibt es ein Polyfill, dass den alten Microsoft-Browsern einen Teil der Grid-Syntax beibiegt.

Wie dem auch sei: Ich sehe da ohnehin Nutzungszahlen, die nicht wirklich ins Gewicht fallen. Der IE11 ist in DE zur Zeit bei etwas über drei Prozent, und vielleicht sollte man diesen User*innen auch mal zumuten, eine alte Software (aus dem Jahr 2013) nicht mehr zu benutzen. Der einzige Browser, der das wirklich nicht unterstützt, ist Opera Mini, aber deren Anwender*innen sind ja ohnehin Kummer gewohnt.

[Stefko]

Moin,

Man könnte auch auf die Idee kommen, dem IE mittels eines Conditional Comments (<!--[if IE 11|>...<![endif]--> ein separates Stylesheet unterzusemmeln.

öhmmmm, ich dachte seit IE10 sei Schluss mit den Conditional Comments?
Kann mich düster erinnern, dass ich vor einiger Zeit mit dem obigen Konstrukt versuchte nem IE11 ein extra CSS zu verpassen, was um's Verrecken nicht klappen wollte ... bis ich dann mal googelte und bemerkte, dass CCs nicht mehr unterstützt werden.

Darüber hinaus gibt es ein Polyfill, dass den alten Microsoft-Browsern einen Teil der Grid-Syntax beibiegt.

Werde ich mir mal anschauen.

Wie dem auch sei: Ich sehe da ohnehin Nutzungszahlen, die nicht wirklich ins Gewicht fallen. Der IE11 ist in DE zur Zeit bei etwas über drei Prozent, und vielleicht sollte man diesen User*innen auch mal zumuten, eine alte Software (aus dem Jahr 2013) nicht mehr zu benutzen.

Naja, die 3% mögen ein statistischer Mittelwert sein, aber es gibt durchaus Ausreißer. Ich habe hier zwei Kundenseiten, da sind's 12% und bei der zweiten Seite sogar 18% mit IE11. Da wird's dann argumentativ schon schwer in Sachen Überzeugung.
Richtig unschön wird es, wenn der Kunde zB eine städtische Behörde ist, die selbst noch mit Win7 unterwegs ist ...

[lucina]

Stimmt, das war ein 10er, gerade nachgesehen. Hast natürlich Recht, sorry.

[mlweb]

Ja bestimmte Dinge funktionieren mit dem IE11 nicht/nicht richtig. Wenn der IE11 unterstützt werden muss (sind bei mir nicht alle Kunden), dann kostet es halt mehr und es gibt ggf. ein Fallback mit Float und/oder Flexbox. Kommt immer auf den konkreten Fall an.

Für autofill hier zum Beispiel eine Beschreibung für ein Fallback mit Flex https://css-tricks.com/css-grid-in-i...rid-with-gaps/ andere setzen polyfills ein http://ianmcnally.me/blog/2017/10/19...cement-in-ie11

[Schnippel]

Ich habe das jetzt mal ausprobiert:

.example {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns:1fr 1fr 1fr 1fr;
    grid-template-columns:1fr 1fr 1fr 1fr;
    grid-template-areas:
   "c1 c1 c1 ad"
   "c2 c2 c2 ad";	
		 

    
}

.c1 { 
-ms-grid-row:1; 
-ms-grid-column:1; 
-ms-grid-column-span:3; 
grid-area:c1;
}

.c2 {
-ms-grid-row:2;
-ms-grid-column:1;
-ms-grid-column-span:3;
grid-area:c2;
}

.ad {
-ms-grid-row:1;
-ms-grid-row-span:2;
-ms-grid-column:4;
grid-area:ad;
}

Mit dem Autoprefixer kann man die CSS-Angaben entsprechend ergänzen (siehe ROT). Es funktioniert damit nun auch im IE11.

Problem bei Flat-TV / Flachbildschirm-Fernsehr
Ich habe mir das Ganze dann mal über den Fernsehr angeschaut, und da funktioniert das mit den grid-areas nun wieder nicht (bei Verwendung des obigen CSS-Codes).
Gibt es da bei den Fernseh-Geräten in Verbindung mit den CSS-Grid-Layout irgendwelche Besonderheiten zu beachten?

Für mich stellt sich halt die Frage, inwieweit ich mit CSS-Grid-Layout heut schon anfange oder doch lieber auf alt bewährte Techniken zurückgreife, die
bisher gut funktioniert haben - incl. IE und Flat-TV, aber eben nicht so komfortabel im layouten sind.

[lucina]

Problem bei Flat-TV / Flachbildschirm-Fernsehr
Ich habe mir das Ganze dann mal über den Fernsehr angeschaut, und da funktioniert das mit den grid-areas nun wieder nicht (bei Verwendung des obigen CSS-Codes).
Gibt es da bei den Fernseh-Geräten in Verbindung mit den CSS-Grid-Layout irgendwelche Besonderheiten zu beachten?

Für mich stellt sich halt die Frage, inwieweit ich mit CSS-Grid-Layout heut schon anfange oder doch lieber auf alt bewährte Techniken zurückgreife, die
bisher gut funktioniert haben - incl. IE und Flat-TV, aber eben nicht so komfortabel im layouten sind.

Das kommt ganz sicher darauf an, welcher Browser in welcher Version auf dem TV mit welcher Firmware drauf ist. Da gibt es ja eine Reihe von Varietäten (und mir persönlich sind die auch relativ egal weil ich - ausser meinem eigenen Gerät - noch nie Besucher im Log hatte, die damit unterwegs waren).

Nachsatz: Android TV auf meinem Philips mit Chrome 67 hat da null Probleme.
Nachsatz 2: Im Log steht noch Opera 12 mit Presto-Engine, der CSS-Grid mit Holzhammermethode ebenfalls klaglos anzeigt.

[Stefko]

Ich habe mir das Ganze dann mal über den Fernsehr angeschaut, und da funktioniert das mit den grid-areas nun wieder nicht (bei Verwendung des obigen CSS-Codes).

Ich vermute mal, dass Du den TV nicht einfach nur als Monitor verwendet hast, sondern den internen Browser des (Smart)TVs verwendet hast, korrekt?

[Schnippel]

Ja, mit dem internen Browser des TV.

[lucina]

Wenn man Marke des Gerätes inkl Typnummer, Betriebssystem inkl. Version sowie Namen und Version des Browsers wüsste könnte man möglicherweise nachschauen. 'Smart TV' oder 'interner Browser' reicht da ganz sicher nicht. Schau mal in deine Serverlogs, vielleicht steht da ja der Useragent irgendwo drin.

[Stefko]

Ja, mit dem internen Browser des TV.

Auf die Schnelle habe ich nur diese Liste hier gefunden https://en.wikipedia.org/wiki/List_o...eware_software
Wenn man jetzt davon ausgeht, das jeder Hersteller wahrscheinlich noch verschiedene OS-Versionen verwendet und das mit den jeweils verfügbaren Browsern multipliziert ...

Wenn ich mal Langeweile oder zu gute Laune habe, schaue ich mir mal ein paar meiner Seiten über die PS3 an ...

[lucina]

... wobei dann sicher auch noch die Frage ist, wie Du das ggf. debuggen möchtest. Bei Android TV geht das per ADB (nicht schön, aber es geht), aber bei den vielen verdongelten Lösungen?

[mlweb]

Für mich bleibt aber die vorhin schon mal von @lucina gemachte Anmerkung. Warum ist das für Dich relevant? Kommen die Besucher Deiner Websites respektive die Deiner Kunden tatsächlich in größerer Anzahl über TV auf die Seiten?
Wenn ja dann ist das m.E. ein absoluter Sonderfall und Du wirst von den Erfahrungen mit dem Einsatz von css-grid hier im Forum kaum profitieren können. Wenn nicht, dann musst Du Dir über dieses Medium wohl auch nicht allzu viele Gedanken machen.

Wobei es insgesamt sicher auch bei diesem Medium möglich ist die "verfügbaren" css-Eigenschaften abzufragen (modernizr) und eine Fallback-Lösung einzusetzen.