5 heiße neue CSS-Funktionen und wie Sie sie verwenden

In diesem Artikel erkunden wir fünf neue Immobilien, die in CSS kamen, werfen, was sie tun, und wie sie in Ihren Projekten in den praktischen Einsatz bringen können. Wir werden eine erstellen Website-Layout. Für eine Seite, die ein Newsfeed und ein kleines Chat-Feld in der Ecke enthält. Für weitere CSS-Tricks werfen Sie einen Blick auf unseren Artikel, der sich unterscheidet CSS-Animationsbeispiele. . Wenn Sie eine ganz neue Website erstellen, probieren Sie a Webseitenersteller und sei sicher, dass Sie durchsuchen Web-Hosting Optionen hier.

Für dieses Tutorial benötigen Sie Chrome 65+ oder Firefox 59+. Werfen Sie einen Blick auf die Begleitende Github-Repo. für den Schritt-für-Schritt-Code. Wir nutzen die folgenden Funktionen, um eine bessere Erfahrung zu schaffen und um einige Probleme zu arbeiten. Und wenn Sie neben einem Team entwerfen, nutzen Sie das Beste Cloud-Speicherung. Dinge kohärent halten.

CSS-Anzeigemodul (Level 3)

• Anzeige: Inhalt;
• W3c Status. - Arbeitsentwurf
• Browser-Unterstützung

CSS Conditional Rules-Modul (Level 3)

• @Unterstützung(...) {...}
• W3c Status. - Kandidatenempfehlung.
• Weiterlesung: MDN Web Docs.

CSS-Overscroll-Verhaltensmodul (Level 1)

• Überwachungsverhalten: enthalten;
• W3c Status. - inoffiziell.
• Browser-Unterstützung
• Weiterlesung: Übernehmen Sie die Kontrolle über Ihre Rolle

CSS-Selektor-Modul (Level 4)

• : Fokus-innerhalb
• W3c Status. - Arbeitsentwurf
• Browser-Unterstützung
• Weiterlesen: MDN Web Docs : Fokus - innerhalb , : Platzhalter-gezeigt

Das CSS-Containment-Modul (Level 1)

• enthalten: Farbe;
• W3c Status. - Kandidatenempfehlung.
• Browser-Unterstützung
• Weiterlesung: CSS Containment in Chrome 52

01. Richten Sie das HTML für das Newsfeed ein

Zuerst müssen wir ein super einfaches, wiederholendes Markup für unser Newsfeed einrichten. Lass uns ein erstellen .Container div mit einer ungeordneten Liste innen. Gib die & lt; ul & gt; die Klasse von .Futter , erstellen Sie dann 10 List-Elemente, die jeweils eine div mit der .Karte Klasse und Textkarte 1, Karte 2 usw.

Endlich ein anderes erstellen Listenpunkt zwischen 5 und 6 mit einer Klasse von .nested - das ist später hilfreich - und füge a hinzu & lt; ul & gt; Innerhalb mit drei Listenelementen mit der Textkarte A, Card B usw.

& lt; body & gt;
 & lt; div class = "container" & gt;
 & lt; UL-Klasse = "FEED" & GT;
 & lt; li & gt; & lt; div complass = "card" & gt; card 1 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div card = "card" & gt; card 2 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div computer = "card" & gt; card 3 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div card = "card" & gt; card 4 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div card = "card" & gt; card 5 & lt; / div & gt; & lt; / li & gt;
    & lt; li class = "verschachtelte" & gt;
 & lt; ul & gt;
 & lt; li & gt; & lt; div complass = "card" & gt; card a & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; card b & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div computer = "card" & gt; card c & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
 & lt; / li & gt;
 & lt; div complass = "card" & gt; card 6 & lt; / div & gt; & lt; / li & gt;
 & lt; div complass = "card" & gt; card 7 & lt; / div & gt; & lt; / li & gt;
 & lt; div class = "card" & gt; card 8 & lt; / div & gt; & lt; / li & gt;
 & lt; div class = "card" & gt; card 9 & lt; / div & gt; & lt; / li & gt;
 & lt; div complass = "card" & gt; card 10 & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
& lt; / div & gt;
& lt; / body & gt; 

02. Stil das Newsfeed

Jetzt müssen wir einige schnelle Stile hinzufügen, damit dies mehr wie ein Newsfeed aussieht. Zuerst können wir geben & lt; body & gt; Eine subtile graue Hintergrundfarbe. Dann gib .Container eine maximale Breite von 800 px und verwenden Marge: 0 Auto; Um es zu zentrieren.

Lass uns auch geben .Karte ein weißer Hintergrund, 10px Polsterung und Rand und schließlich a Mindesthöhe von 300px - dies sollte uns genug geben, um die Seite scrollbar zu machen. Schließlich sprechen wir etwas Flexbox-Magie auf der .Futter Um die Gegenstände nett zu fließen, mit zwei Karten pro Zeile.

 .feed {
Anzeige: Flex;
Flex-Wrap: Wrap;
}
.feed li {
Flex: 1 0 50%;
} 

03. Layout-Probleme beheben

Wenn Sie die Liste nach unten scrollen, stellen Sie fest, dass unsere Karten in der verschachtelten Liste, der Karte A - C, einige Layout-Probleme verursachen. Idealerweise möchten wir sie mit den restlichen Karten fließen, aber sie sind alle in einem Block zusammengeklebt. Der Grund dafür ist, dass ein Flex-Container - was mit erstellt wird Anzeige: Flex. - macht nur seine unmittelbaren Kinder (d. H. Die Listenelemente) in Flex-Artikel.

Nun, normalerweise ist die einzige Möglichkeit, dies zu fixieren, um das Markup zu ändern, aber geben wir vor, dass Sie diesen Luxus nicht haben. Vielleicht wird das Newsfeed-Markup von einem Skript eines Drittanbieters oder seines Legacy-Codes generiert, den Sie nur versuchen, sich zu erfassen. Wie können wir das beheben?

Treffen Anzeige: Inhalt . Dieser kleine One-Liner macht im Wesentlichen ein Element, als ob es nicht da ist. Sie sehen immer noch die Nachkommen des Elements, aber das Element selbst beeinflusst das Layout nicht.

Weil wir so tun, als würden wir das Markup nicht ändern (nur für diesen Schritt) können wir etwas klug sein und das machen .Karte Elemente Die Flex-Elemente und ignorieren fast vollständig das Listenmarkup.

Entfernen Sie zuerst das vorhandene .feed li. Klasse und dann verwenden Anzeige: Inhalt für beide & lt; ul & gt; und & lt; li & gt; Elemente:

 .feed ul,
.feed li {
Anzeige: Inhalt;
} 

Jetzt sollten Sie die in der Reihenfolge fließenden Karten sehen, aber wir haben die Größen verloren. Fixieren Sie das, indem Sie das Flex-Eigenschaft hinzufügen .Karte stattdessen:

 .card {
Flex: 1 0 40%;
} 

TA-DA! Unsere Karten verwenden jetzt die Wunder von Flexbox, als ob ihre strukturelles ungeordnete ListenmarkUp nicht vorhanden ist.

Als seitliche Hinweis fragen Sie sich vielleicht, warum das Flex-Basis Der Wert ist auf 40% eingestellt. Das ist weil das .Karte Klasse hat eine Marge, die nicht in der Breitenberechnung enthalten ist, wie Sie bei der Verwendung erwarten würden Kastengröße: Border-Box . Um dies zu umgehen, müssen wir nur das einstellen Flex-Basis Hoch genug, um die Umhüllung am notwendigen Punkt auszulösen, und FlexBox füllt den verbleibenden Raum automatisch.

04. Erkunden Sie Feature-Abfragen

Obwohl Anzeige: Inhalt Genau das, was wir brauchen, ist es immer noch nur bei der Arbeit des Status des Entwurfs mit W3C. Und in Chrome-Support kam nur in der Version 65 in der Version 65 ein, die im März 2018 veröffentlicht wurde. Unglaublich Firefox hatte seit April 2015 Unterstützung!

Wenn Sie den Stil in Devtools deaktivieren, werden Sie feststellen, dass unsere Änderungen mit dem Layout ein bisschen ein Durcheinander gemacht haben Anzeige: Inhalt wird nicht angewendet. Also, was können wir dagegen tun? Zeit für unsere nächste neue Funktion - Feature-Anfragen.

Diese Arbeiten sind wie Medienabfragen, aber sie können den Browser fragen - mit CSS allein verwenden - wenn ein Eigenschafts- und Wertausdruck unterstützt wird. Wenn sie sind, werden die in der Abfrage enthaltenen Stile angewendet. Nun, lass uns unsere bewegen Anzeige: Inhalt Stile in eine Funktionsabfrage.

 @supports (Anzeige: Inhalt) {
.feed ul,
.feed li {
  Anzeige: Inhalt;
}
.card {
  Flex: 1 0 40%;
}
} 

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

In diesem progressiven Verbesserungsszenario würden wir normalerweise die Abfrage verwenden, um den neuen Stilen hinzuzufügen, aber es müsste auch einige der ursprünglichen Stile deaktivieren, die für das Fallback-Layout erforderlich sind.

Sie können jedoch entscheiden, dass, da die Unterstützung für Feature-Abfragen ziemlich gut ist (wenn Sie ignorieren, dh ig) Sie möchten, dass Sie die Funktionsabfrage verwenden möchten nicht Operator. Es funktioniert genauso wie Sie erwarten, damit wir unser Original erneut anwenden können biegen Eigenschaft an die List-Elemente wann Anzeige: Inhalt wird nicht unterstützt:

 @ supports nicht (Anzeige: Inhalt) {
.feed li {
  Flex: 1 0 50%;
}
} 

In der. nicht Abfrage können wir einige Stile hinzufügen, damit die .nested Gegenstände wenden im Wesentlichen erneut an, was von der Verwendung ererbt wurde Anzeige: Inhalt .

 FEED LI.NESTED {
Flex-Basis: 100%;
}
.feed li.naged ul ul {
 Anzeige: Flex;
 Flex-Wrap: Wrap;
} 

06. Nehmen Sie einen Schritt weiter

Sie können bereits das Potenzial von Merkmalsabfragen sehen, aber die wirklich coole Sache ist, dass Sie Ausdrücke mit den drei verfügbaren Bedienern kombinieren können: und , oder und nicht . Vielleicht könnten wir auch nachsehen Anzeige: Flex. Unterstützung und fügen Sie dann einen Float-basierten Fallback hinzu.

Wir werden das hier nicht tun, aber wenn wir wären, hätten wir uns zunächst die beiden Merkmalsabfragen wie so:

 @Supports (Anzeige: Flex) und (Anzeige: Inhalt) {
...
}
@Supports (Anzeige: Flex) und (nicht (Anzeige: Inhalt)) {
...
} 

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

 @ supports (--foo: grün) {
...
} 

07. Fügen Sie ein Chat-Feld hinzu

Jetzt haben wir ein schönes Newsfeed an Ort und Stelle, lassen Sie uns ein kleines Chat-Feld hinzufügen, das an der rechten Seite rechts auf dem Bildschirm befestigt ist. Wir benötigen eine Liste von Nachrichten und ein Textfeld, um den Benutzer ihre Nachricht einzugeben. Fügen Sie diesen Block kurz nach der Öffnung hinzu & lt; body & gt; Etikett:

 & lt; div class = "chat" & gt;
 & lt; div class = "meldungen" & gt;
 & lt; ul & gt;
& lt; div class = "Nachricht" & gt; Nachricht 1 & lt; / div & gt; & lt; / li & gt;
Div Class = "Nachricht" & GT; Nachricht 2 & lt; / div & gt; & lt; / li & gt;
& lt; div class = "Nachricht" & gt; Nachricht 3 & lt; / div & gt; & lt; / li & gt;
& lt; div class = "Nachricht" & GT; Nachricht 4 & lt; / div & gt; & lt; / li & gt;
& lt; div class = "message" & gt; Nachricht 5 & lt; / div & gt; & lt; / li & gt;
& lt; div class = "message" & gt; Nachricht 6 & lt; / div & gt; & lt; / li & gt;
& lt; div class = "Nachricht" & gt; Nachricht 7 & lt; / div & gt; & lt; / li & gt;
& lt; div class = "Nachricht" & gt; Nachricht 8 & lt; / div & gt; & lt; / li & gt;
& lt; div class = "message" & gt; Nachricht 9 & lt; / div & gt; & lt; / li & gt;
& lt; div class = "Nachricht" & gt; Nachricht 10 & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
 & lt; / div & gt;
 & lt; Eingangstyp = "Text" Klasse = "INPUT" & GT;
& lt; / div & gt; 

08. Style das Chat-Feld

Zeit, um schnell etwas Styling hinzuzufügen, so sieht es halb anständig aus.

 .chat {
 Hintergrund: #FFF;
 Rand: 10px fest # 000;
 unten: 0;
 Schriftgröße: 10px;
 Position: Fixiert;
 Rechts: 0;
 Breite: 300px;
 Z-Index: 10;
}
.Mitteilungen {
 Grenzboden: 5px fest # 000;
 Überlauf: Auto;
 Polsterung: 10px;
 max-höhe: 300px;
}
.Botschaft {
 Hintergrund: # 000;
 Borderradius: 5px;
 Farbe: #FFF;
 Marge: 0 20% 10px 0;
 Polsterung: 10px;
}
.Messages Li: Last-Child .Message {
 Margin-Bottom: 0;
}
.input {
 Rand: Keine;
 Bildschirmsperre;
 Polsterung: 10px;
 Breite: 100%;
} 

09. Scroll Chaining.

Hoffentlich haben Sie jetzt ein kleines Chat-Feld mit einer scrollbaren Liste von Nachrichten, die auf Ihrem Newsfeed sitzen. Großartig. Aber haben Sie bemerkt, was passiert, wenn Sie in einem verschachtelten Bereich scrollen, und Sie erreichen das Ende des scrollbaren Bereichs? Versuch es. Blättern Sie den ganzen Weg bis zum Ende der Nachrichten und Sie sehen, dass die Seite selbst stattdessen Scrollen beginnt. Dies wird als Scroll-Verkettung bezeichnet.

Es ist kein großer Deal in unserem Beispiel, aber in einigen Fällen könnte es sein. Wir mussten diese Funktion vor dem Erstellen von scrollbaren Bereichen innerhalb von Modalen oder Kontextmenüs umgehen.

Das schmutzige Fix besteht darin, das einzustellen & lt; body & gt; zu Überlauf versteckt , aber es gibt ein schönes, glänzendes neues CSS-Hotel, das das alles behebt, und es ist ein einfacher One-Liner. Sag Hallo zu Überwachungsverhalten . Es gibt drei mögliche Werte:

• Auto - Die Standardeinstellung, wodurch die Scroll-Verkettung möglich ist
• enthalten - Deaktiviert die Scroll-Verkettung
• keiner - Deaktiviert die Scrollkaving und andere überversorgbare Effekte (z. B. Gummibandierung)

Wir können die Abkürzung verwenden Überwachungsverhalten oder wir können eine bestimmte Richtung mit zielen Überwachungsverhalten-X (oder -y ). Lass es uns zu unseren hinzufügen .Mitteilungen Klasse:

 .Messages {
...
Überversorgungsverhalten-y: enthalten;
...} 

Versuchen Sie nun das Scrollen erneut und Sie werden sehen, dass es nicht mehr die Rolle der Seite beeinflusst, wenn Sie das Ende des Inhalts erreichen.

Diese Eigenschaft ist auch ziemlich praktisch, wenn Sie eine Pull-to-Refresh-Funktion in Ihrem PWA umsetzen möchten, um das Newsfeed zu aktualisieren. Einige Browser, z. B. Chrome für Android, fügen automatisch eigene, und bis jetzt hat es keine einfache Möglichkeit, ihn ohne Verwendung von JS zu deaktivieren, um Ereignisse mit leistungsorientierenden nicht-passiven Handlern abzubrechen.

Jetzt müssen Sie nur hinzufügen Überwachungsverhalten: enthalten an das ansichtsfensterhaltende Element wahrscheinlich & lt; body & gt; oder & lt; HTML & GT; .

Es ist erwähnenswert, dass diese Eigenschaft kein W3C-Standard ist, eher ein Vorschlag der WEB-Inkubator-Gemeinschaftsgruppe (WICG). Beliebte, stabile und reife WICG-Vorschläge werden zu einem späteren Zeitpunkt für die Migration zu einer W3C-Arbeitsgruppe berücksichtigt.

10. Sammeln Sie das Chat-Feld, wenn Sie nicht verwendet werden

Im Moment nimmt die Chat-Box ziemlich viel Platz an, was es sei denn, wir interagieren, wenn wir damit interagieren, ist ein bisschen ablenkend. Glücklicherweise können wir etwas dagegen mit einem kleinen CSS-Magie tun.

Aber vor allem müssen wir unsere vorhandenen Stile leicht ändern. Standardmäßig möchten, dass das Chat-Feld zusammengebrochen ist, sodass wir das reduzieren müssen maximale Höhe Wert in der .Mitteilungen Klasse. Während wir dort sind, können wir auch einen Übergang zum maximale Höhe Eigentum:

 .Messages {
 ...
 max-höhe: 25px;
Übergang: max-höhenhöhe 500 ms; } 

Nächste Seite: Erkundung neuer CSS-Funktionen in den Schritten 11-20

• 1.
• 2.

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