7 erstaunliche neue CSS-Techniken für 2019

Veröffentlicht: 2019-05-01

Dies ist der richtige Zeitpunkt, um die Webentwicklung als Karriereoption zu wählen. Genau wie Webdesigner waren auch Webentwickler fasziniert von Möglichkeiten, neue CSS-Techniken auszuprobieren und die Grenzen dessen zu erweitern, was CSS leisten kann.

Hier werfen wir einen Blick auf einige der neuen CSS-Techniken und ganze Spezifikationen, die ihren Weg in kreative Designs finden. Sie können fast jeden Aspekt eines Designs durch ein gut beschriebenes CSS steuern. Außerdem kann es eine bessere allgemeine Benutzererfahrung verbessern – mit saubererem und konsistenterem Code.

1. Anfangsbuchstabe

Der Anfangsbuchstabe ist eine CSS-Eigenschaft, eine Eigenschaft, die den ersten Buchstaben des Elements auswählt und die Anzahl der Zeilen angibt, die der Buchstabe belegt. Am häufigsten wird es in Printmedien und Informationsseiten, Nachrichtenseiten verwendet, wo der erste Buchstabe des Absatzes viel höher ist als der Rest des Inhalts.

Die Anfangsbuchstabeneigenschaft passt automatisch sowohl die Anzahl der Zeilen an, die zum Erstellen der stilisierten Initiale benötigt werden, als auch die Schriftgröße. Anfangsbuchstabe genehmigt die folgenden Werte:

<Anzahl> bezieht sich darauf, wie viele Zeilen der Buchstabe einnimmt, in denen negative Werte nicht akzeptiert werden;
normal ist nützlich, wenn Sie den Wert zurücksetzen möchten, wenn er von der Kaskade geerbt werden könnte und kein Skalierungseffekt auf den ersten Buchstaben angewendet wird;
<integer> bestimmt die Anzahl der Zeilen, in denen der Buchstabe bei vorgegebener Größe versinken soll. Die Werte müssen größer als Null sein, und wenn der Wert nicht angegeben ist, wird der Größenwert dupliziert und auf die nächste positive ganze Zahl reduziert;

Das ::first-letter pseudo-element kann verwendet werden, um Zeichen auszuwählen, die als Anfangsbuchstaben formatiert werden. Das ::first-letter pseudo-element wählt nicht den ersten Buchstaben des Elements aus, das die Anzeige hat: inline, sondern funktioniert nur bei Elementen, die einen Anzeigewert von block, table-cell, table-caption oder list-item haben .

[xhtml]
<!DOCTYPE html>
<html>
<Kopf>
<Stil>
P {
Schriftfamilie: Serif;
Schriftgröße: 20px;
Rand unten: -15px;
}
h1 {
Schriftfamilie: Sans-serif;
Schriftgröße: 3,1em;
Farbe: Schwarz;
}
Karosserie {
Polsterung: 10px;
}
div {
Breite: 550px;
Zeilenhöhe: 25px;
}
p:erste Art:Anfangsbuchstabe {
Hintergrundfarbe: schwarz;
Farbe weiß;
Schwimmer: links;
Schriftgröße: 50px;
Rand rechts: 10px;
Rand oben: 7px;
Polsterung: 18px;
Box-Schatten: 0 0 10px -2px schwarz;
}
</style>
</head>
<Körper>
<h1>Über den Anfangsbuchstaben</h1>
<div>
<p>Nur wer sich mit ganzer Kraft und Seele einer Sache widmet, kann ein wahrer Meister sein. Aus diesem Grund fordert die Meisterschaft alles von einem Menschen.“</p>
<p>"Die Sorge um den Menschen und sein Schicksal muss immer das Hauptinteresse aller technischen Bestrebungen sein. Vergiss das niemals inmitten deiner Diagramme und Gleichungen"</p>
</div>
</body>
</html>
[/xhtml]

Initial letter

2. Variable Schriftarten

Variable Schriftarten stellen einen neuen Satz von Funktionen dar, die als Teil der OpenType-Spezifikation definiert sind, und ermöglichen es Schriftartdateien, mehrere Variationen einer Schriftart in einer einzigen Datei zu enthalten, die als variable Schriftart bezeichnet wird. In der Praxis ermöglicht es Ihnen, mit nur einer @ font-face-Referenz auf die in der Schriftartdatei enthaltenen Variablen zuzugreifen. Außerdem ermöglichen variable Schriften Funktionen wie das Übergehen von Schriftstilen, benutzerdefinierte Schriftstile und Animieren. Der Vorteil der Verwendung der variablen Schriftart besteht darin, dass Sie Zugriff auf die gesamte Palette der verfügbaren Stile, Gewichte und Breiten haben.

Variable Schriftarten definieren ihre Variationen durch Variationsachsen und es gibt 5 Standardachsen:

ital: Die kursive Achse funktioniert anders, da sie aktiviert oder deaktiviert ist, es gibt kein Dazwischen. Der Wert kann mit der CSS-Eigenschaft font-style festgelegt werden. Durch die Einführung von font-synthesis: none wird außerdem verhindert, dass Browser versehentlich die Variationsachse und eine synthetisierte Kursivschrift anwenden.
wght: steuert die Gewichtung der Schriftart und der Wert kann mit der CSS-Eigenschaft font-weight festgelegt werden.
wdth: steuert die Breite der Schrift und der Wert kann mit der CSS-Eigenschaft font-width gesetzt werden. In CSS mit der Eigenschaft font-stretch können wir die Schriftbreite mit prozentualen Werten setzen und wenn wir einen Wert angeben, der außerhalb der Font- codierte Domäne, der Browser stellt die Schriftart auf den nächstmöglichen zulässigen Wert.
opsz: Optical Sizing bezieht sich auf die Praxis, die optische Größe der Schriftart zu ändern, und der Wert kann mit dem CSS font-optical-sizing festgelegt werden. Optische Größenwerte werden automatisch abhängig von der Schriftgröße angewendet, können aber mit der Schriftartvariation manipuliert werden -settings. Bei Verwendung von font-optical-sizing sind die zulässigen Werte auto oder none, und bei Verwendung von font-variation-settings wird ein numerischer Wert bereitgestellt.
slnt: steuert die Neigung der Schriftart und der Wert kann mit der CSS-Eigenschaft font-style festgelegt werden. Sie ist variabel, indem sie als numerischer Bereich ausgedrückt wird, und dies ermöglicht es, die Schriftart überall entlang dieser Achse zu variieren.

Verwenden variabler Schriftarten mit @font-face – Wenn Sie variable Schriftarten im Web verwenden, müssen Sie Regeln für @font-face definieren, die Dateien mit variablen Schriftarten angeben. Hier sind 2 Links, mit denen Sie variable Schriftarten finden können: axis-praxis.org und v -fonts.com.

[xhtml]
<!DOCTYPE html>
<html>
<Kopf>
<title>Über variable Schriftarten</title>
</head>
<Stil>
@Schriftart {
Schriftfamilie: 'Avenir Next Variable';
src: url('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') format('truetype');
}
html {
Schriftfamilie: 'Avenir Next Variable', serifenlos;
}
P {
Schriftvariationseinstellungen: 'wght' 630, 'wdth' 88;
}
</style>
<Körper>
<h1>Über variable Schriftarten</h1>
<h2>Über variable Schriftarten</h2>
<p>
„Jeder intelligente Narr kann Dinge größer und komplexer machen … Es braucht einen Hauch von Genie – und viel Mut, um in die entgegengesetzte Richtung zu gehen.“
</p>
</body>
</html>
[/xhtml]

Variablefonts

3. Logische Eigenschaften und Werte

Logische Eigenschaften und Werte ist ein CSS-Modul, das logische Eigenschaften und Werte einführt, die es ermöglichen, das Erscheinungsbild durch logische Richtungen und Dimensionszuordnungen zu steuern. Logische Eigenschaften und Werte verwenden die Begriffe wie Block und Inline, um die Richtung zu beschreiben, in die sie fließen Die Spezifikation logischer Eigenschaften und Werte charakterisiert Abbildungen für physikalische Werte in ihren logischen Beziehungen.

Die Inline-Dimension – ist die Dimension, entlang der eine Textzeile in der verwendeten Schrift geschrieben wird. In einem beliebigen englischen Dokument ist der Text also horizontal von links nach rechts, in einem anderen arabischen Dokument ist die Schrift ebenfalls horizontal, aber von rechts nach links, und wenn wir ein japanisches Dokument berücksichtigen, ist die Inline-Dimension jetzt vertikal, weil die Schreibmodus vertikal laufen.

Die Blockdimension – entspricht der Reihenfolge, in der die Blöcke auf der Seite angezeigt werden. In Englisch und Arabisch werden sie vertikal ausgeführt, während sie in jedem vertikalen Schreibmodus horizontal ausgeführt werden.

[xhtml]
<!DOCTYPE html>
<html>
<Kopf>
<Stil>
html {
Schriftart: 20px serifenlos;
}
Karosserie {
Polsterung: 25px;
Hintergrundfarbe: hellgelb;
Farbe: Schwarz;
}
.Kasten {
Rand: 4px durchgehend schwarz;
Randradius: 20px;
Polsterung: 20px;
Rand: 12px;
}
.ein {
Blockgröße: 100px;
Inline-Größe: 200px;
}
.zwei {
Höhe: 100px;
Breite: 200px;
}
</style>
</head>
<Körper>
</div>
<div id="container">
<div class="box one">
Meine Blockgröße beträgt 100 Pixel, meine Inline-Größe 200 Pixel.
</div>
<div class="box two">
Meine Höhe beträgt 100 Pixel, meine Breite 200 Pixel.
</div>
</div>
</body>
</html>
[/xhtml]

Logical properties and values

4. Scroll-Snapping

Die CSS-Eigenschaft vom Typ scroll-snap bestimmt die Starrheit, mit der Befestigungspunkte auf den Scroll-Container angewendet werden. Mit anderen Worten, sie sperrt das Ansichtsfenster an bestimmten Elementen oder Orten, nachdem der Benutzer mit dem Scrollen fertig ist. Dies ist eine hervorragende Möglichkeit, Bildergalerien anzuzeigen .Früher konnte es mit JavaScript verwendet werden, aber dank des neuen CSS Scroll Snap-Moduls kann der Effekt in CSS gesteuert werden. Das Scroll-Snapping erfolgt durch die Definition des Eltern-/Container-Elements und der untergeordneten Elemente im Container, die entsprechend einrasten Regeln, die innerhalb des Containers definiert sind. Die Eigenschaft Scroll-snap-type ist die wichtigste Eigenschaft, die für das Containerelement gilt. Definiert die Scroll-Snap-Achse x, y, Block, Inline oder beides und die Scroll-Snap-Strenge None, Proximity oder Mandatory.

[xhtml]
<!DOCTYPE html>
<html>
<Kopf>
<Stil>
html, Körper, .C {
Höhe: 50 %;
}
.C {
Anzeige: Flex;
Ausrichtungselemente: Mitte;
Begründungsinhalt: Zwischenraum;
Flex-Flow: Spalte Nowrap;
Schriftfamilie: arial;
}
.container {
Anzeige: Flex;
Flex: keine;
Überlauf: automatisch
}
.container.x {
Breite: 70 %;
Höhe: 150px;
Flex-Flow: Reihe nowrap;
}
.container.y {
Breite: 256px;
Höhe: 256px;
Flex-Flow: Spalte Nowrap;
}
.y.mandatory-scroll-snapping {
scroll-snap-type: y obligatorisch;
}
.x.Proximity-Scroll-Snapping {
Scroll-Snap-Typ: x Nähe;
}
.container > div {
Textausrichtung: Mitte;
scroll-snap-align: center;
Flex: keine;
}
.x.container> div {
Zeilenhöhe: 128px;
Schriftgröße: 64px;
Breite: 100 %;
Höhe: 128px;
}
.y.container> div {
Zeilenhöhe: 256px;
Schriftgröße: 128px;
Breite: 256px;
Höhe: 256px;
}
.y.container>div:{
Zeilenhöhe: 1,4;
Schriftgröße: 80px;
}
.container >div:{
Hintergrundfarbe: weiß;
}
.container >div:{
Hintergrundfarbe: weiß;
}
</style>
</head>
<Körper>
<div class=".C">
<div class="container x obligatorisch-scroll-snapping" dir="ltr">
<div>Scroll-Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container und obligatorisches Scroll-Snapping" dir="ltr">
<div>Über das Scropp-Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>
[/xhtml]

Scroll snapping

5. Gitterebene 2 und Untergitter

Die Level-2-Spezifikation enthält alles aus Level 1 und einige neue Features. Ebene 2 der Grid-Spezifikation erstellt die Subgrid-Funktion von CSS Grid. In den folgenden Zeilen werden wir uns die Subgrid-Funktion ansehen, wie sie derzeit im Draft of Grid Level 2 des Editors beschrieben wird. Sie können also Grids erstellen, wenn Sie die verwenden Grid-Layout-Option, ein Grid-Element kann in einen Grid-Container umgewandelt werden, indem display: grid darauf eingestellt wird diese stimmen nicht mit den Spuren des Elternteils überein.

[xhtml]
<!DOCTYPE html>
<html>
<Kopf>
<title>CSS-Rasterebene 2 – Unterraster</title>
</head>
<Stil>
Karosserie {
Rand: 20px;
}
.ein {
Hintergrundfarbe: schwarz;
Farbe weiß;
Randradius: 20px;
Polsterung: 20px;
Schriftgröße: 120 %;
}
.Eine Eins {
Hintergrundfarbe: hellgrau;
}
.NETZ {
Anzeige: Raster;
Rasterabstand: 10px;
Rastervorlagenspalten: 3fr 1,5fr 2fr 1fr 1fr 2fr;
Hintergrundfarbe: weiß;
Farbe: Schwarz;
Marge: 1,5em 0;
}
.EIN {
Polsterung: 0;
Rasterabstand: 15px;
Grid-Spalte: auto / span 4;
Anzeige: Raster;
Raster-Template-Spalten: 3fr 1,5fr 1,5fr;
}
</style>
<Körper>
<div class="GRID">
<div class="one 1">1</div>
<div class="one 2">2</div>
<div class="one 3">3</div>
<div class="one 4">4</div>
<div class="one 5">5</div>
<div class="one 6">6</div>
<div class="one 7">7</div>
<div class="one 8">8</div>
<div class="one A">
<div class="one 9">9</div>
<div class="one 10">10</div>
<div class="one 11">11</div>
<div class="one 12">12</div>
<div class="one 13">13</div>
<div class="one 14">14</div>
</div>
<div class="one 15">15</div>
<div class="one 16">16</div>
<div class="one 17">17</div>
<div class="one 18">18</div>
<div class="one 19">19</div>
<div class="one 20">20</div>
</div>
</body>
</html>
[/xhtml]

Grid level 2 and subgrid

Da es sich um ein Open-Source-Projekt handelt, können Sie auf GitHub sehen, wie sich die Arbeit in der CSS-Gruppe entwickelt. Die Entwicklung von Browserspezifikationen und Implementierung ist ein kreisförmiger Prozess. So können Sie beobachten, wie sich diese Subgrid-Funktion entwickelt und welche Browser-Implementierungen aufkommen.

6. Verwenden Sie CSS, um die Browserunterstützung zu testen

CSS hat eine Möglichkeit entwickelt, die Browserunterstützung für neue Funktionen zu testen. Stellen Sie grundsätzlich eine Frage, um herauszufinden, ob der Browser eine bestimmte CSS-Funktion akzeptiert. Auf diese Weise werden die neuen Funktionen auf sichere und übersichtliche Weise verwendet. Wenn Sie eine neue CSS-Funktion verwenden, müssen Sie überprüfen, ob der Browser diese Funktion unterstützt. In dieser Zeile wird empfohlen, die Daten auf caniuse.com zu konsultieren, wo Sie können die Daten für Ihren Standort importieren.

Use CSS to test browser support

Mit @supports CSS können Sie Deklarationen angeben, die von der Browserunterstützung für CSS-Features abhängen, was als Feature-Abfrage bezeichnet wird. Diese Regel kann an den Anfang des Codes geschrieben oder in eine beliebige andere at-Regel einer bedingten Gruppe eingebettet werden.

[CSS]
@supports (Anzeige: Raster) {
div {
Anzeige: Raster;
}
}
[/css]

7. Syntaxverbesserungen für Medienabfragen – Stufe 4

Die Spezifikation von Media Queries Level 4 enthält einige Verbesserungen an der Syntax, um Medienabfragen mithilfe von Features zu erstellen, die einen Bereichstyp wie Höhe und Breite haben.

Zur Veranschaulichung verwenden wir die Max-Funktionalität für die Breite

[CSS]
@media (max. Breite: 20em)
[/css]

Wir können eine Breite zwischen zwei zufälligen Werten mit min- und max- ausprobieren.

[CSS]
@media (min. Breite: 20 em) und (max. Breite: 35 em)
[/css]

Zum besseren Verständnis wollen wir im obigen Beispiel sagen, dass die Breite größer oder gleich 20em und kleiner oder gleich 35em ist

Fazit

Website-Entwickler sollten sich über neue CSS-Techniken im Klaren sein und diese in zukünftigen Projekten anwenden. Sie werden ihre Arbeitsstandards erhöhen und die Kunden werden mit dem verbesserten Aussehen der Website zufrieden sein.