5 heiße neue CSS-Funktionen und deren Verwendung

Seite 1 von 2: Entdecken Sie 5 neue CSS-Funktionen: Schritte 01-10

In diesem Artikel werden fünf neue Eigenschaften von CSS erläutert. Sehen Sie sich an, was sie tun und wie Sie sie in Ihren Projekten in die Praxis umsetzen können. Wir werden eine erstellen Website-Layout für eine Seite, die einen Newsfeed und eine kleine Chatbox in der Ecke enthält. Weitere CSS-Tricks finden Sie in unserem Artikel über verschiedene Themen Beispiele für CSS-Animationen .

Für dieses Tutorial benötigen Sie Chrome 65+ oder Firefox 59+. Schauen Sie sich das an begleitendes GitHub Repo für den Schritt-für-Schritt-Code. Wir werden die folgenden Funktionen nutzen, um eine bessere Erfahrung zu erzielen und einige Probleme zu umgehen.



CSS-Anzeigemodul (Stufe 3)



Modul für bedingte CSS-Regeln (Stufe 3)

CSS-Overscroll-Verhaltensmodul (Stufe 1)



CSS-Auswahlmodul (Stufe 4)

wie man ein Profilbild auf Facebook blockiert

Das CSS-Containment-Modul (Stufe 1)

01. Richten Sie den HTML-Code für den Newsfeed ein

Zuerst müssen wir ein supereinfaches, sich wiederholendes Markup für unseren Newsfeed einrichten. Lassen Sie uns eine erstellen .Container div mit einer ungeordneten Liste im Inneren. Gib die

    die Klasse von .Futter Erstellen Sie dann 10 Listenelemente, die jeweils ein div mit dem enthalten .Karte Klasse und der Text Karte 1, Karte 2 usw.



    Erstellen Sie schließlich eine andere Listenpunkt zwischen 5 und 6 mit einer Klasse von verschachtelt - Dies wird später hilfreich sein - und fügen Sie ein

      innen mit drei Listenelementen unter Verwendung des Textes Karte A, Karte B usw.

      • Card 1
      • Card 2
      • Card 3
      • Card 4
      • Card 5
        • Card A
        • Card B
        • Card C
      • Card 6
      • Card 7
      • Card 8
      • Card 9
      • Card 10

      02. Gestalte den Newsfeed

      Jetzt müssen wir einige schnelle Stile hinzufügen, damit dies eher wie ein Newsfeed aussieht. Zuerst können wir geben eine subtile graue Hintergrundfarbe. Dann gib .Container eine maximale Breite von 800px und verwenden Rand: 0 Auto; zum zentrieren ausrichten.

      Lassen Sie uns auch geben .Karte ein weißer Hintergrund, 10px Polsterung und Rand und schließlich ein Mindesthöhe von 300px - dies sollte uns genug geben, um die Seite scrollbar zu machen. Zuletzt streuen wir etwas Flexbox-Magie auf die .Futter damit die Gegenstände gut fließen, mit zwei Karten pro Reihe.

      .feed { display: flex; flex-wrap: wrap; } .feed li { flex: 1 0 50%; }

      03. Layoutprobleme beheben

      Wenn Sie in der Liste nach unten scrollen, werden Sie feststellen, dass unsere Karten in der verschachtelten Liste, Karte A - C, einige Layoutprobleme verursachen. Idealerweise möchten wir, dass sie mit dem Rest der Karten zusammenfließen, aber sie sind alle in einem Block zusammengeklebt. Der Grund dafür ist, dass ein Flex-Container - der mit erstellt wird Anzeige: flex - macht nur seine unmittelbaren untergeordneten Elemente (d. H. Die Listenelemente) zu flexiblen Elementen.

      Normalerweise besteht die einzige Möglichkeit, dies zu beheben, darin, das Markup zu ändern. Stellen Sie sich jedoch vor, Sie hätten diesen Luxus nicht. Möglicherweise wird das Newsfeed-Markup von einem Skript eines Drittanbieters generiert oder es handelt sich um Legacy-Code, den Sie nur neu erstellen möchten. Wie können wir das beheben?

      Treffen Anzeige: Inhalt . Dieser kleine Einzeiler bewirkt im Wesentlichen, dass sich ein Element so verhält, als ob es nicht vorhanden wäre. Sie sehen immer noch die Nachkommen des Elements, aber das Element selbst hat keinen Einfluss auf das Layout.

      Da wir so tun, als könnten wir das Markup nicht ändern (nur für diesen Schritt), können wir ein bisschen schlau sein und das machen .Karte Elemente die Flex-Elemente und ignorieren fast vollständig das Listen-Markup.

      Entfernen Sie zuerst das vorhandene .feed li Klasse und dann verwenden Anzeige: Inhalt für beide

        und
      • Elemente:

        wie man Copic Marker Anime verwendet
        .feed ul, .feed li { display: contents; }

        Jetzt sollten Sie sehen, wie die Karten in der richtigen Reihenfolge fließen, aber wir haben die Größe verloren. Beheben Sie dies, indem Sie die Flex-Eigenschaft zum hinzufügen .Karte stattdessen:

        .card { flex: 1 0 40%; }

        Ta-da! Unsere Karten nutzen jetzt die Wunder von Flexbox, als ob ihr strukturelles ungeordnetes Listen-Markup nicht existiert.

        Als Randnotiz fragen Sie sich vielleicht, warum die Flex-Basis Wert ist auf 40% eingestellt. Das liegt daran, dass die .Karte Klasse hat einen Rand, der nicht wie erwartet in die Breitenberechnung einbezogen wird Box-Größe: Border-Box . Um dies zu umgehen, müssen wir nur das einstellen Flex-Basis hoch genug, um die Umhüllung an der erforderlichen Stelle auszulösen, und Flexbox füllt den verbleibenden Platz automatisch aus.

        04. Funktionsabfragen untersuchen

        Obwohl Anzeige: Inhalt macht genau das, was wir brauchen, es ist immer noch nur im Working Draft Status mit W3C. Und in Chrome ist der Support erst in der im März 2018 veröffentlichten Version 65 verfügbar. Unglaublich, Firefox unterstützt seit April 2015!

        Wenn Sie den Stil in DevTools deaktivieren, werden Sie feststellen, dass unsere Änderungen das Layout etwas durcheinander gebracht haben, wenn Anzeige: Inhalt wird nicht angewendet. Was können wir dagegen tun? Zeit für unser nächstes neues Feature - Feature-Abfragen.

        Diese funktionieren genau wie Medienabfragen, aber Sie können den Browser - nur mit CSS - fragen, ob ein Eigenschafts- und Werteausdruck unterstützt wird. Wenn dies der Fall ist, werden die in der Abfrage enthaltenen Stile angewendet. Bewegen wir jetzt unsere Anzeige: Inhalt Stile in eine Feature-Abfrage.

        @supports (display: contents) { .feed ul, .feed li { display: contents; } .card { flex: 1 0 40%; } }

        05. Verwenden Sie 'nicht' für ein saubereres Ergebnis

        Normalerweise würden wir in dieser Art von progressivem Erweiterungsszenario die Abfrage verwenden, um die neuen Stile hinzuzufügen, aber es müssten auch einige der ursprünglichen Stile deaktiviert werden, die für das Fallback-Layout erforderlich sind.

        Sie können jedoch entscheiden, dass Sie die Feature-Abfrage tatsächlich verwenden möchten, da die Unterstützung für Feature-Abfragen ziemlich gut ist (wenn Sie den IE ignorieren) nicht Operator. Es funktioniert genau wie erwartet, sodass wir unser Original erneut anwenden können biegen Eigenschaft zu den Listenelementen wenn Anzeige: Inhalt wird nicht unterstützt:

        @supports not (display: contents) { .feed li { flex: 1 0 50%; } }

        In der nicht Abfrage können wir einige Stile hinzufügen, so dass die verschachtelt Elemente wenden im Grunde genommen erneut an, was durch Verwendung geerbt wurde Anzeige: Inhalt .

        bester Computer für Adobe Creative Cloud
        feed li.nested { flex-basis: 100%; } .feed li.nested ul { display: flex; flex-wrap: wrap; }

        06. Noch einen Schritt weiter gehen

        Sie können bereits das Potenzial von Feature-Abfragen erkennen, aber das wirklich Coole ist, dass Sie Ausdrücke mit den drei verfügbaren Operatoren kombinieren können: und , oder und nicht . Vielleicht könnten wir auch nachsehen Anzeige: flex unterstützen und dann einen Float-basierten Fallback hinzufügen.

        Wir werden das hier nicht tun, aber wenn wir es wären, würden wir zuerst die beiden Feature-Abfragen wie folgt ändern:

        @supports (display: flex) and (display: contents) { ... } @supports (display: flex) and (not (display: contents)) { ... }

        Als Bonus können Sie auch die Unterstützung für benutzerdefinierte Eigenschaften wie folgt testen:

        @supports (--foo: green) { ... }

        07. Fügen Sie eine Chatbox hinzu

        Jetzt haben wir einen schönen Newsfeed. Fügen wir eine kleine Chat-Box hinzu, die unten rechts auf dem Bildschirm angebracht ist. Wir benötigen eine Liste mit Nachrichten und ein Textfeld, damit der Benutzer seine Nachricht eingeben kann. Fügen Sie diesen Block direkt nach dem Öffnen hinzu Etikett:

        • Message 1
        • Message 2
        • Message 3
        • Message 4
        • Message 5
        • Message 6
        • Message 7
        • Message 8
        • Message 9
        • Message 10

        08. Gestalte die Chatbox

        Es ist Zeit, schnell etwas Styling hinzuzufügen, damit es halbwegs anständig aussieht.

        .chat { background: #fff; border: 10px solid #000; bottom: 0; font-size: 10px; position: fixed; right: 0; width: 300px; z-index: 10; } .messages { border-bottom: 5px solid #000; overflow: auto; padding: 10px; max-height: 300px; } .message { background: #000; border-radius: 5px; color: #fff; margin: 0 20% 10px 0; padding: 10px; } .messages li:last-child .message { margin-bottom: 0; } .input { border: none; display: block; padding: 10px; width: 100%; }

        09. Bildlaufverkettung

        Hoffentlich haben Sie jetzt eine kleine Chat-Box mit einer scrollbaren Liste von Nachrichten, die über Ihrem Newsfeed liegt. Großartig. Aber haben Sie bemerkt, was passiert, wenn Sie in einem verschachtelten Bereich scrollen und das Ende seines scrollbaren Bereichs erreichen? Versuch es. Scrollen Sie bis zum Ende der Nachrichten und Sie werden sehen, dass die Seite selbst stattdessen mit dem Scrollen beginnt. Dies wird als Scroll-Verkettung bezeichnet.

        In unserem Beispiel ist das keine große Sache, aber in einigen Fällen könnte es sein. Wir mussten diese Funktion bereits umgehen, wenn wir scrollbare Bereiche in Modalen oder Kontextmenüs erstellen.

        Die schmutzige Lösung ist das Einstellen der zu Überlauf versteckt , aber es gibt eine schöne, glänzende neue CSS-Eigenschaft, die all dies behebt, und es ist ein einfacher Einzeiler. Sag Hallo zu Overscroll-Verhalten . Es gibt drei mögliche Werte:

        • Auto - Die Standardeinstellung, die eine Bildlaufverkettung ermöglicht
        • enthalten - Deaktiviert die Bildlaufverkettung
        • keiner - Deaktiviert die Bildlaufverkettung und andere Overscroll-Effekte (z. B. Gummibänder).

        Wir können die Kurzschrift verwenden Overscroll-Verhalten oder wir können mit eine bestimmte Richtung zielen Overscroll-Verhalten-x (oder -Y ). Fügen wir es unserem hinzu .Mitteilungen Klasse:

        .messages { ... overscroll-behavior-y: contain; ... }

        Versuchen Sie nun erneut, einen Bildlauf durchzuführen, und Sie werden feststellen, dass der Bildlauf der Seite nicht mehr beeinflusst wird, wenn Sie das Ende des Inhalts erreichen.

        Diese Eigenschaft ist auch sehr praktisch, wenn Sie eine Pull-to-Refresh-Funktion in Ihrer PWA implementieren möchten, beispielsweise um den Newsfeed zu aktualisieren. Einige Browser, wie z. B. Chrome für Android, fügen automatisch ihre eigenen hinzu. Bisher gab es keine einfache Möglichkeit, diese zu deaktivieren, ohne JS zum Abbrechen von Ereignissen mithilfe leistungsbeeinträchtigender nicht passiver Handler zu verwenden.

        Jetzt müssen Sie nur noch hinzufügen Overscroll-Verhalten: enthalten wahrscheinlich auf das Ansichtsfenster enthaltende Element oder .

        Wie groß ist ein iPhone 8 Plus?

        Es ist erwähnenswert, dass diese Eigenschaft kein W3C-Standard ist, sondern ein Vorschlag der Web Incubator Community Group (WICG). Beliebte, stabile und ausgereifte WICG-Vorschläge werden zu einem späteren Zeitpunkt für die Migration in eine W3C-Arbeitsgruppe in Betracht gezogen.

        10. Reduzieren Sie die Chat-Box, wenn Sie sie nicht verwenden

        Im Moment nimmt die Chat-Box ziemlich viel Platz ein, was etwas ablenkend ist, wenn wir nicht mit ihr interagieren. Glücklicherweise können wir mit ein wenig CSS-Magie etwas dagegen tun.

        Aber zuerst müssen wir unsere vorhandenen Stile leicht modifizieren. Standardmäßig möchten wir, dass die Chat-Box reduziert wird, daher müssen wir die reduzieren maximale Höhe Wert in der .Mitteilungen Klasse. Während wir dort sind, können wir auch einen Übergang zum hinzufügen maximale Höhe Eigentum:

        .messages { ... max-height: 25px; transition: max-height 500ms; }

        Nächste Seite: Fahren Sie mit den neuen CSS-Funktionen in den Schritten 11 bis 20 fort

        • 1
        • zwei

        Aktuelle Seite: Entdecken Sie 5 neue CSS-Funktionen: Schritte 01-10

        Nächste Seite Entdecken Sie 5 neue CSS-Funktionen: Schritte 11-20