Teilen Sie einige erstaunliche Beispiele dafür, was CSS leisten kann_Erleben Sie den Austausch

Als ich den Artikel „5 Wege, wie JavaScript und CSS interagieren, die Sie möglicherweise nicht kennen“ schrieb, waren die Leute überrascht, wie sich JavaScript und CSS überschneiden. Heute werde ich 7 Dinge hervorheben, die Sie mit CSS tun können – ohne JavaScript oder Bilder.

CSS@supports

Jeder gute Frontend-Entwickler muss Funktionstests durchführen, wenn er Funktionen verwendet, die in einigen Browsern möglicherweise nicht verfügbar sind. Funktionstests wurden schon immer in JavaScript durchgeführt, und viele Leute verwenden Modernizr, ein hervorragendes Dienstprogramm, das aus vielen gut getesteten Fällen besteht, um Funktionstests durchzuführen. Für Entwickler ist jedenfalls eine neue API erschienen: @supports, mit der Sie Funktionstests mit CSS durchführen können. Hier sind einige einfache Beispiele dafür, wie @supports funktioniert:

Code kopieren Der Code lautet wie folgt:

/* grundlegende Verwendung */
@supports( prop:value) {
/* weitere Stile */
}

/* echte Verwendung */
@supports (display: flex) {
div { display: flex🎜>}

/* auch Präfixe testen */

@supports (Anzeige: -webkit-flex) oder
(Anzeige: -moz-flex) oder
(Anzeige: flex) {

Abschnitt {

Anzeige: -webkit-flex;
Anzeige: -moz-flex;
Anzeige: flex;
float: none;
}
}

Für diese neue @supports-Funktion gibt es auch eine entsprechende JavaScript-Version, diese ist jedoch abgelaufen. Wir freuen uns darauf, sie bald zu verwenden!

CSS-Filter

Schreiben Sie einen Dienst, um den Farbton eines Bildes zu ändern, und verkaufen Sie es dann für Milliarden von Dollar an Facebook. Sicher, das ist eine Selbstverständlichkeit, aber das Schreiben von Bildfiltern ist keine Wissenschaft. Ein kleines Programm, das ich in meiner ersten Woche bei Mozilla geschrieben habe (das einen Preis gewonnen hat, eh, ich sage es nur), hat etwas JS-basierte Mathematik verwendet, um Bildfilter mit Canvas zu erstellen, aber jetzt können wir Bilder mit CSS Filtered erstellen.

Code kopieren Der Code lautet wie folgt:

/* einfacher Filter */
.myElement {
-webkit-filter: Blur(2px);
}
/* erweiterter Filter */

.myElement {
-webkit-filter: Blur(2px) Grayscale (.5) Opacity(0.8) Hue-Rotate(120deg);
}

Dieser Filtertyp verändert lediglich das ursprüngliche Erscheinungsbild des Bildes. Der besagte Filter wird nicht beim Speichern oder Exportieren des Bildes verwendet, ist aber sehr nützlich, wenn Sie das Foto verschönern oder das Poster bearbeiten müssen.

　Zeigerereignisse und Bricking-Klicks

Die CSS-Pointer-Events-Eigenschaft bietet eine Möglichkeit, ein Element effektiv zu deaktivieren. Aus diesem Grund löst das Klicken auf einen Link über JavaScript kein Klickereignis aus:

Code kopieren Der Code lautet wie folgt:

/* nichts tun, wenn angeklickt oder aktiviert * /
.disabled { pointer-events: none; }/* Dies wird aufgrund der pointer-events: none-Anwendung _nicht_ ausgelöst */
document.getElementById("disabled-element").addEventListener("click", function(e) {

warning("Clicked!");
});

Im obigen Beispiel wird das Klickereignis aufgrund des CSS-Werts „pointer-events“ nicht ausgelöst. Ich habe festgestellt, dass dies eine große Hilfe ist. Sie müssen nicht überall den Klassennamen oder die Eigenschaften überprüfen, um sicherzustellen, dass ein Element deaktiviert ist.

　

　Menü ein- und ausklappen

Mit CSS können wir Übergangseffekte und Animationen erstellen, aber oft benötigen wir JavaScript-Bibliotheken, die uns dabei helfen, einige Dinge zu ändern und Animationen zu steuern. Eine sehr beliebte Animation ist der Klapp- und Erweiterungsmenüeffekt. Viele Leute wissen nicht, dass er nur mit CSS erreicht werden kann!

Code kopieren Der Code lautet wie folgt:

/* Schieberegler im geöffneten Zustand */
. slider {
overflow-y: versteckt;
max-height: 500px; /* ungefähre maximale Höhe */
Übergangseigenschaft: alle;

Übergangsdauer: .5s;
Übergangs-Timing-Funktion: Kubikbezier(0, 1, 0,5, 1);
}

/* schließe es mit der Klasse „closed“ */

.slider.closed {
max-height: 0;
}

Une utilisation intelligente de Max-height peut permettre aux éléments de s'effondrer et de s'étendre selon l'effet souhaité.

　Compteur CSS

Le terme « compteur » nous fait souvent rire de ce qu'il signifie sur le Web, mais les compteurs CSS sont une autre chose qui nous fait rire encore plus. Les compteurs CSS permettent aux développeurs d'incrémenter un compteur sur des éléments spécifiés en utilisant :before et :after :

Copier le code Le code est le suivant :

/* initialiser le compteur */
ol. slides {
compteur-réinitialisation : slideNum;
}

/* incrémente le compteur */
ol.slides > li {
counter-increment: slideNum;
}

/* afficher la valeur du compteur */
ol.slides li:after {
content: "[" counter(slideNum) "]";
}

Vous voyez souvent des compteurs CSS utilisés dans les effets de diaporama et les listes comme le contenu d'un formulaire.

　Nom du style CSS Unicode

Il existe de nombreux documents sur les meilleures pratiques CSS, et ils commencent tous par la façon de nommer les styles CSS. Vous ne verrez jamais de document indiquant de nommer vos styles avec des symboles Unicode :

Copier le code Le code est le suivant :

.ಠ_ಠ {
bordure : 1px uni #f00 ;
fond : rose ;
}

.❤ {
arrière-plan : vert clair ;
bordure : 1px vert uni ;
}

Veuillez ne pas utiliser ces symboles. Sauf si vous le pouvez !

　Cercle CSS

Le triangle CSS est une tâche technique, et il en va de même pour le cercle CSS. En abusant du CSS border-radius, vous pouvez créer des cercles parfaits !

Copier le code Le code est le suivant :

cercle {
bordure-rayon : 50%;
width: 200px;
height: 200px;
/* la largeur et la hauteur peuvent être n'importe quoi, tant qu'elles sont égales */
}

Vous pouvez ajouter des dégradés à vos cercles, et vous pouvez même utiliser des animations CSS pour faire bouger vos cercles ! CSS est sur le point de disposer d'API plus unifiées pour ces formes, mais pour l'instant, vous pouvez créer des cercles de cette façon.

Voilà, 7 choses que vous pouvez faire avec CSS qui vous surprendront, certaines d'entre elles sont très utiles, et d'autres dont vous n'aurez pas besoin au travail. S'il vous plaît dites-moi s'il me manque d'excellentes méthodes CSS au travail que vous utilisez régulièrement.