Gibt es eine funktionierende Implementierung der CSS3 Grid Layout für Webkit?

CSS Grid Layouts, Editor ' s Draft, 21 November 2011

Ich bin in der Mitte, einen Prototypen zu erzeugen, die angezeigt wird, um Kunden auf ausgewählten Geräten und Browsern. Ich bin nicht besorgt über cross-browser-Kompatibilität zu dieser Zeit.

IE10 Developer Preview ist die folgende:

display: -ms-grid;
-ms-grid-columns: ;
-ms-grid-rows: ;
-ms-grid-column: ;
-ms-grid-row: ;
-ms-grid-row-align: stretch;
columns: ;
column-fill: auto;
column-gap: ;

Mozilla entzieht, um Sie ähnlich zu oben (ich habe nicht getestet, ob es funktioniert, noch nicht). Allerdings Webkit scheinen eine sehr unterschiedliche Umsetzung:

display: -webkit-box;
-webkit-columns: ;
-webkit-column-gap: ;

Nun ist Webkit unter Verwendung der gleichen Spezifikation, oder ist dies für ein ganz anderes Modell? Wenn es mit der gleichen Spezifikation, könnten Sie mir sagen, was die syntax ist:

grid-columns: ;
grid-rows: ;
grid-column: ;
grid-row: ;

Und wenn es mit einem anderen Modell, könnten Sie bitte lassen Sie mich wissen, was syntax ist und wie unterscheidet es sich von MS E10. Referenzen werden geschätzt.

Es ist erwähnenswert, dass ich Google Chrome Canary installiert, sowie die neuste version von Safari, um zu testen, das raster auf Webkit.

Es ist erwähnenswert, dass Google Chrome hat ein funktionierendes Modell des Flex-Box-layout, welches ich verwenden könnte, als Notlösung, aber funktioniert sehr unterschiedlich. Ich würde es vorziehen, zu verwenden ein ähnliches Modell.
Ich bin sehr begeistert von css-grids für das layout. Hier ist der Vorschlag für die interessierten: w3.org/TR/css3-grid-layout

InformationsquelleAutor DigiKev | 2012-01-26

  1. 5

    http://caniuse.com/css-grid

    März 2017, ganz wenige Browser unterstützen CSS-Tabellen-Layout:

    Gibt es eine funktionierende Implementierung der CSS3 Grid Layout für Webkit?

    alte Antwort:

    Gibt es etwas in den Werken, hier ist die vollständige Ausgabe-Struktur für die Implementierung:

    https://bugs.webkit.org/showdependencytree.cgi?id=60731&hide_resolved=0

    Hier einige CSS von diese Datei:

    .gridWithFixed {
    display: -webkit-grid;
    -webkit-grid-columns: 7px 11px;
    -webkit-grid-rows: 17px 2px;
}

    Können Sie sehen, die Absicht. Leider, Sie haben nur so weit wie das Parsen von CSS.

    So, wie es aussieht, im Moment gibt es keine funktionierende Implementierung dieser für WebKit.

    Während Grid-Layout hat einen sehr schlechten support, Flexbox hat ordentliche Unterstützung (scheinbar, einschließlich IE10). Ich schlage vor, Sie verwenden, Flexbox statt.

    Aber flexbox ist nichts im Vergleich zu der Kraft von CSS3-grid-layout! Nooooo! Außerdem, flexbox nicht unterstützt wird weit genug, dass Sie bequem es zu benutzen, entweder (caniuse.com sagt <60% der Benutzer), und den meisten Browsern nur teilweise unterstützt. Die CSS3-grid-spec wird völlig Beseitigung der Notwendigkeit für die flexbox, wie es kann alles, was flexbox soll und mehr.
    Ich bin nicht einverstanden, dass die grid-spec Rottet die Notwendigkeit für eine flexbox. Es gibt Dinge, die flexboxes gut sind, werden die Gitter nicht.
    Wenn Sie möchten, aktualisieren Sie Ihre Antwort, Safari 10.1 ist im Lieferumfang Netz jetzt.
    Danke, ich aktualisierte meine Antwort ein wenig.

    InformationsquelleAutor thirtydot

  2. 4

    Chrome Canary implementiert die CSS-Grid-Layout TR 20130910. Ich habe gefunden geringfügige Unterschiede in einigen von den Namen der Eigenschaft. Steven Bradley fasst die TR und bietet Anleitung und Beispiele für, wie, um loszulegen mit dem grid-layout. Zum aktivieren der experimentellen Funktionen in Kanarischen kopieren und fügen Sie den folgenden in die Adressleiste

    chrome://flags/#enable-experimental-web-platform-features

    und klicken Sie auf 'aktivieren'.

    InformationsquelleAutor wjohnson

Schreibe einen Kommentar