CSS und JavaScript arbeiten gut zusammen, wobei jede ihre eigenen Stärken hat. Ich bin jedoch zuversichtlich, dass Webanwendungen umso widerstandsfähiger und zuverlässiger sind, je mehr CSS zur Steuerung des Erscheinungsbilds von Benutzeroberflächen verwendet wird. Der Punkt hier ist wie folgt:
- CSS ist von Natur aus eine ausfallsichere Technologie. Dies bedeutet, dass ein CSS-Parser, der auf eine Eigenschaft stößt, die er nicht versteht, diese einfach ignoriert und fortfährt. Mit anderen Worten, mit CSS wendet der Programmierer Stile an und erwartet, dass sie funktionieren.
- JavaScript ist keine fehlertolerante Technologie. Ein einzelner Syntaxfehler im JS-Code kann die gesamte Anwendung beschädigen. Das heißt, wenn Sie das Styling von Sites mit JS verwalten, ist es unbedingt erforderlich, die Funktionalität der entsprechenden Strukturen zu überprüfen.
Bei der Beantwortung der Frage, wann CSS über JS verwendet werden soll, sind viele weitere Überlegungen zu berücksichtigen.
CSS bietet uns neue Möglichkeiten, fantastische Lösungen zu entwerfen, die viel einfacher als die entsprechenden JS-Lösungen und einfacher zu erstellen sind. Dies bezieht sich auf viele Funktionen von CSS: Übergänge, benutzerdefinierte Eigenschaften, Animationen, Filter, Mathematik.
In diesem Beitrag werde ich einige der coolen Funktionen von CSS behandeln (von denen einige sehr neu sind), die Sie möglicherweise noch nicht kennen. Wir werden nämlich über das reibungslose Scrollen, über eine Eigenschaft
position: stickyund über andere Möglichkeiten sprechen , für deren Implementierung zuvor viele Zeilen genialen JS-Codes geschrieben werden mussten.
1. Reibungsloses Scrollen
In der Vergangenheit waren für die Ausstattung einer Seite mit reibungslosem Bildlauf mehrere Zeilen JS-Code erforderlich. Und jetzt kann diese Aufgabe ausschließlich mittels CSS gelöst werden. Ist es nicht wunderbar? Jetzt können Sie mithilfe der CSS-Eigenschaft das reibungslose Scrollen nutzen
scroll-behavior.
So sieht es aus:
html {
scroll-behavior: smooth;
}
Implementieren eines reibungslosen Bildlaufs
→ Hier ist ein Beispiel für CodePen
Zum Zeitpunkt dieses Schreibens wird diese Eigenschaft
scroll-behaviornur in Chrome und Firefox unterstützt. Es wird noch nicht von Edge, IE und Safari (Desktop und Mobile) unterstützt. Details zur Unterstützung dieser Eigenschaft finden Sie unter Kann ich verwenden .
2. Elemente fixieren
Das Fixieren von Elementen ist eine meiner bevorzugten CSS-Funktionen. Der Punkt ist, dass die entsprechenden Elemente beim Scrollen durch die Seiten nicht aus dem Ansichtsfenster verschwinden. Um die Elemente auf der Seite zu reparieren, müssen Sie nicht mehr auf
offsetTound window.scrollYin JS zurückgreifen . Heutzutage können Sie nur die CSS-Eigenschaft nutzen position: sticky:
header {
position: sticky;
top: 0;
}
Der Navigationsblock "ruht" am oberen Rand des Ansichtsfensters und verschwindet beim Scrollen der Seite nicht
→ Hier ist ein CodePen-Projekt, das ein Beispiel für die Verwendung der Eigenschaft zeigt.
position: sticky
Um diese Eigenschaft korrekt zu verwenden, müssen Sie die Besonderheiten ihrer Auswirkung auf Elemente berücksichtigen. Bei der Anwendung spielt die Struktur der HTML-Seite eine Rolle. Übrigens liegt es genau daran, dass diese Funktionen nicht berücksichtigt werden, und der Grund dafür ist, dass diese Eigenschaft manchmal nicht funktioniert.
Schauen wir uns den folgenden HTML-Code an:
<main class="container">
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="main-content">Main Content</div>
<footer class="footer">Footer</footer>
</main>
Das Menü (das Element
navaus diesem Beispiel) kann nur in dem Bereich festgelegt werden, der von seinem übergeordneten Element ( mainin unserem Beispiel) überlappt wird . Infolgedessen können bei Verwendung einer Eigenschaft position: stickyzwei Hauptklassen von Elementen unterschieden werden:
- Andockbares Element: Dies ist das Element, auf das wir die Eigenschaft anwenden
position: sticky(navin unserem Fall). Dieses Element bewegt sich innerhalb des übergeordneten Elements, bis es die angegebene Position erreicht. Zum Beispiel - es kann seintop: 0px. - Dockable-Element-Container: Dies ist das HTML-Element, das das andockbare Element enthält. Dies ist der Bereich, in dem sich das angedockte Objekt bewegen kann. Dieser "Container" definiert die Grenzen, innerhalb derer das andockbare Element existieren kann.
Die Verwendung dieser Funktion kann die Benutzerfreundlichkeit der Website erheblich verbessern. Dies gilt insbesondere für Projekte, deren Benutzer häufig durch die Seiten scrollen müssen.
Diese Funktion bietet fast 100% Browserunterstützung .
3. Text zuschneiden
CSS gibt uns zwei wunderbare Eigenschaften:
text-overflowund line-clamp. Sie ermöglichen es Ihnen, Texte zu kürzen, Wörter sorgfältig zu behandeln und uns gleichzeitig die Notwendigkeit zu ersparen, JavaScript oder andere komplexe Methoden zur Lösung solcher Probleme zu verwenden. Beide Eigenschaften sind nicht neu, aber äußerst nützlich.
Zuschneiden von Texten
→ Hier ist ein Beispiel für CodePen.
Lassen Sie uns mehr über Eigenschaften
text-overflowundsprechenline-clamp.
▍Text-Überlauf-Eigenschaft
Diese Eigenschaft steuert, wie Text in Situationen angezeigt wird, in denen er abgeschnitten werden sollte, wenn er nicht in eine Zeile passt. Ein Beispiel für eine solche Situation ist in der obigen Abbildung in der Kopfzeile der Karte dargestellt. Hier können Sie die Konstruktion verwenden
text-overflow: ellipsis, die dazu führt, dass das Unicode-Zeichen ( …) am Ende des zugeschnittenen Textes hinzugefügt wird .
Damit die Eigenschaft
text-overflow: ellipsisihre Aufgabe erfüllen kann, müssen dieselben Eigenschaften white-space: nowrapund verwendet werden overflow: hidden.
.card-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Diese Funktion wird in allen modernen Browsern fast vollständig unterstützt .
▍Die Line-Clamp-Eigenschaft
Diese Eigenschaft hilft uns in Fällen, in denen wir nicht mit einzeiligem, sondern mit mehrzeiligem Text arbeiten müssen (ein Beispiel für einen solchen Text ist der Inhalt der Karte aus der obigen Abbildung). Obwohl dies Teil des CSS Overflow Module Level 3- Standards ist , der jetzt den Status "Working Draft" hat, wird diese Eigenschaft bereits von etwa 95% der Browser unterstützt, allerdings mit einem Präfix
-webkit-. Bevor Sie es verwenden, ist es wichtig zu berücksichtigen, dass es nicht die Möglichkeit bietet, die Anzahl der angezeigten Zeichen zu steuern. Aber es ist trotzdem unglaublich nützlich.
Um es zu verwenden, müssen wir die alte Flexbox-Implementierung verwenden
display: -webkit-boxund die Eigenschaften und verwenden -webkit-box-orient: vertical. So sieht es aus:
.card-description {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
4. Benutzerdefinierte CSS-Eigenschaften: CSS-Variablen
In der JavaScript-Welt sind CSS-Präprozessoren (wie Sass, Less und Stylus) sehr nützliche und beliebte Technologien. Präprozessoren erweitern die Funktionen von CSS, sodass Sie beispielsweise Variablen und Funktionen verwenden können. Moderne Webdesigner haben jedoch Zugriff auf leistungsstarke Standard-CSS-Funktionen, die als benutzerdefinierte CSS-Eigenschaften oder CSS-Variablen bezeichnet werden.
CSS-Variablen helfen dabei, Anwendungen konsistent zu halten und DRY zu implementieren. Sie erleichtern die Entwicklung und Pflege von Anwendungsthemen. Diese Fähigkeiten sind einer der Hauptgründe für den Erfolg von Präprozessoren. Mehr dazu lesen Sie hier .
Wenn Sie Standard-CSS-Funktionen verwenden, benötigen Sie keine Präprozessoren mehr, um Variablen zu erstellen. Variablen arbeiten wie andere Standard-CSS-Funktionen, die wir lieben, kaskadierend.
Es ist sehr einfach, CSS-Variablen zu erstellen. Um eine Variable zu deklarieren, reicht es aus, zwei Bindestriche (
--) vor ihren Namen zu setzen. Danach, wenn der Wert der Variablen benötigt wird, wird die Funktion aufgerufen var()und die zuvor erstellte Variable als Argument übergeben. Wie Sie sehen können, ist alles sehr einfach.
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
img {
padding: var(--spacing);
background: var(--base);
-webkit-filter: blur(var(--blur));
filter: blur(var(--blur));
}
.hl {
color: var(--base);
}
CSS-Variablen können über JavaScript bearbeitet werden.
Verwenden von CSS-Variablen
→ Hier ist ein Beispiel für CodePen, das die Verwendung von CSS-Variablen und die Verwaltung des JS-Codes zeigt
5. Unterstützung für das dunkle Thema
Seit Apple letztes Jahr das dunkle Thema für macOS eingeführt hat und dank der Möglichkeit, mit CSS die Verwendung dieses Themas mithilfe von Medienabfragen zu erkennen, haben viele große Webprojekte (wie Twitter und Google Maps) ein solches Thema erworben. ( Hier ist eine Liste von Projekten, die das dunkle Thema unterstützen).
Das dunkle Thema ist nicht nur eine Möglichkeit, Webseiten zu dekorieren. Es kann einigen Leuten wirklich helfen, im Internet zu surfen.
Hier sind einige Zitate.
Und dann gibt es Leute, die aus objektiven Gründen den dunklen Modus brauchen. Sie verwenden diesen Modus als eines der Werkzeuge für Menschen mit Behinderungen. Zum Beispiel sprechen wir über Menschen mit Sehbehinderung.
Thomas Steiner, Ingenieur für Kundenlösungen, Google, Deutschland.
Molly hat das Usher-Syndrom. Aus diesem Grund hört sie nichts und das Sichtfeld eines ihrer Augen ist auf 5 Grad begrenzt. (…) Das Anzeigen von Seiten im dunklen Modus liegt in ihrer Macht. Dieser Modus kann auch für andere Personen nützlich sein und die Möglichkeiten der Internetnutzung für diejenigen erweitern, die Kopfschmerzen haben oder an einem Computer in einem schlecht beleuchteten Raum sitzen müssen. Wenn Sie sich bei der Entwicklung nur auf bestimmte Benutzer konzentrieren, ist dies nicht nur für diese Benutzer von Nutzen.
Charles Reynolds , Designer, britische Regierung.
Auch aus MaterialSie können von Thomas Steiner lernen, wie die Verwendung des Dunkelmodus zur Energieeinsparung beiträgt: „(…) Wie Sie wissen, spart die Verwendung des Dunkelmodus auf AMOLED-Displays viel Energie. Android-Untersuchungen, die auf beliebte Google-Apps wie YouTube abzielen, haben gezeigt, dass die Energieeinsparung in einigen Fällen bis zu 60% betragen kann. “
Eine neue CSS-Funktion, die uns darüber informiert, ob für einen Benutzer ein dunkles Thema aktiviert ist, wird durch eine Medienfunktion dargestellt
prefers-color-scheme. Es ist bereits mit Chrome, Firefox, Safari und Opera kompatibel .
In Kombination mit CSS-Variablen ist es für einen Webentwickler sehr einfach, seinen Besuchern die Nutzung der dynamischen Hell- und Dunkelmodi zu erleichtern.
:root {
--color: #222;
--background: #eee;
--text: 'default';
}
body {
color: var(--color);
background: var(--background);
}
body:after {
content: var(--text);
display: block;
text-align: center;
font-size: 3rem;
}
@media (prefers-color-scheme: light) {
:root {
--color: #222;
--background: #eee;
--text: 'light';
}
}
@media (prefers-color-scheme: dark) {
:root {
--color: #eee;
--background: #222;
--text: 'dark';
}
}
Automatische Erkennung des vom Gerät verwendeten Themas
→ In diesem CodePen-Projekt hängt das Seitendesign davon ab, welches Thema der Viewer verwendet
6. Richtlinie unterstützt
Webentwickler mussten lange Zeit auf Lösungen von Drittanbietern (wie das Modernizr JS-Tool ) zurückgreifen, um herauszufinden, ob bestimmte CSS-Funktionen vom aktuellen Browser unterstützt werden. Durch Konfigurieren einer Elementeigenschaft
-webkit-line-clampkönnen Sie beispielsweise überprüfen, ob die Eigenschaft im Browser unterstützt wird, und wenn nicht, können Sie einen Fallback verwenden.
Nachdem die Direktive in CSS veröffentlicht wurde
@supports, war es möglich, die Funktionen von Browsern direkt aus dem CSS-Code heraus zu überprüfen.
Die Richtlinie ist
@supportsMedienabfragen sehr ähnlich. Es unterstützt verschiedene Kombinationsausdrücke, die mit bedingten Anweisungen erstellt wurden AND, ORund NOT:
@supports (-webkit-line-clamp: 2) {
.el {
...
}
}
Dies prüft, ob der Browser die Eigenschaft unterstützt
-webkit-line-clamp. Wenn ja, dh wenn die Bedingung erfüllt ist, wird der in der Direktive deklarierte Stil angewendet @supports. Alle modernen Browser unterstützen
diese Funktion .
Ergebnis
In diesem Beitrag habe ich einige nützliche Funktionen von CSS behandelt. Wenn Sie etwas ohne JS tun können, aber nur mit CSS, dann tun Sie dies.
Die moderne Welt des Frontends verändert sich rasant. Wir haben ständig neue Möglichkeiten zur Verfügung, die uns helfen, unser Geschäft schneller und besser zu machen. Das Experimentieren mit CSS und das Erlernen neuer Dinge ist nicht nur sehr lohnend, sondern auch äußerst interessant. Ich rate Ihnen, etwas Neues auszuprobieren, von dem Sie heute erfahren haben.
Kennen Sie aktuelle CSS-Funktionen, mit denen Sie dieselben Probleme lösen können, die Sie zuvor nur mit JavaScript gelöst haben?
