suchen
HeimWeb-FrontendCSS-TutorialTeilen 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.

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Wie viel Spezifität haben @Rules wie @Keyframes und @Media?Wie viel Spezifität haben @Rules wie @Keyframes und @Media?Apr 18, 2025 am 11:34 AM

Ich habe diese Frage neulich bekommen. Mein erster Gedanke ist: seltsame Frage! Bei der Spezifität geht es um Selektoren, und Rules sind keine Selektoren, also ... irrelevant?

Können Sie @Media und @Support -Abfragen nisten?Können Sie @Media und @Support -Abfragen nisten?Apr 18, 2025 am 11:32 AM

Ja, Sie können, und es ist nicht wirklich wichtig in welcher Reihenfolge. Ein CSS -Präprozessor ist nicht erforderlich. Es funktioniert in regulären CSS.

Schnellschluck -Cache -BustingSchnellschluck -Cache -BustingApr 18, 2025 am 11:23 AM

Sie sollten auf jeden Fall weitausgestellte Cache-Header auf Ihren Vermögenswerten wie CSS und JavaScript (und Bilder und Schriftarten und was auch immer) festlegen. Das sagt dem Browser

Auf der Suche nach einem Stapel, der die Qualität und Komplexität von CSS überwachtAuf der Suche nach einem Stapel, der die Qualität und Komplexität von CSS überwachtApr 18, 2025 am 11:22 AM

Viele Entwickler schreiben darüber, wie sie eine CSS -Codebasis pflegen können, aber nicht viele von ihnen schreiben darüber, wie sie die Qualität dieser Codebasis messen. Sicher, wir haben

Datalist dient dazu, Werte vorzuschlagen, ohne Werte durchzusetzenDatalist dient dazu, Werte vorzuschlagen, ohne Werte durchzusetzenApr 18, 2025 am 11:08 AM

Haben Sie jemals ein Formular gehabt, das ein kurzes, willkürliches Stück Text akzeptieren musste? Wie ein Name oder was auch immer. Das ist genau das, wofür es ist. Es gibt viele

Frontkonferenz in ZürichFrontkonferenz in ZürichApr 18, 2025 am 11:03 AM

Ich bin so aufgeregt, nach Zürich, der Schweiz, zur Frontkonferenz zu gehen (liebe diesen Namen und diese URL!). Ich war noch nie in der Schweiz, also bin ich aufgeregt

Erstellen einer serverlosen Full-Stack-Anwendung mit Cloudflare-MitarbeiternErstellen einer serverlosen Full-Stack-Anwendung mit Cloudflare-MitarbeiternApr 18, 2025 am 10:58 AM

Eine meiner Lieblingsentwicklungen in der Softwareentwicklung war das Aufkommen von Serverless. Als Entwickler, der die Tendenz hat, sich in den Details festzuhalten

Erstellen dynamischer Routen in einer Nuxt -AnwendungErstellen dynamischer Routen in einer Nuxt -AnwendungApr 18, 2025 am 10:53 AM

In diesem Beitrag werden wir eine E -Commerce -Store -Demo verwenden, die ich für Netlify erstellt und bereitgestellt habe, um zu zeigen, wie wir dynamische Routen für eingehende Daten erstellen können. Es ist fair

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Crossplay haben?
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

SublimeText3 Linux neue Version

SublimeText3 Linux neue Version

SublimeText3 Linux neueste Version

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

PHPStorm Mac-Version

PHPStorm Mac-Version

Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung