CSS -Funktionshandbuch

CSS -Funktionshandbuch: leistungsstarke Tools zur Steuerung der Stile

Wie andere Programmiersprachen hat auch CSS Funktionen. Diese Funktionen können in die Position eines Wertes oder in einigen Fällen mit einer anderen Werterklärung eingefügt werden. Einige CSS -Funktionen ermöglichen es Ihnen sogar, andere Funktionen zu nisten!

Mehr

In der Programmierung ist eine Funktion ein genannter Code, der eine bestimmte Aufgabe ausführt. Zum Beispiel eine Funktion in JavaScript namens sayWoof() :

 Funktion Sayswoof () {
 console.log ("Woof!");
}

Wir können diese Funktion verwenden, nachdem wir das gewünschte Verhalten definiert haben. In diesem Beispiel werden jedes Mal, wenn Sie sayWoof() in Ihre Website oder die JavaScript Ihrer Webanwendung eingeben, "Woof!" zur Konsole des Browsers.

Funktionen können auch Parameter verwenden, die Slots für numerische oder Textfragmente sind, die Sie in die Logik der Funktion eingeben können, um sie zu ändern. In JavaScript funktioniert es wie folgt:

 Funktion countdogs (Menge) {
 console.log ("Es gibt" Betrag "Hunde!");
}

Hier haben wir eine Funktion namens countDogs() , die einen Parameter namens amount hat. Wenn eine Zahl für amount bereitgestellt wird, wird diese Zahl verwendet und fügt sie dem vorgegebenen Satz hinzu. Dies ermöglicht es uns, Sätze zu erstellen, die uns sagen, wie viele Hunde wir gezählt haben.

 Countdogs (3); // Es gibt 3 Hunde!
Countdogs (276); // Es gibt 276 Hunde!
Countdogs ("viele"); // Es gibt viele Hunde!

Einige Programmiersprachen sind mit integrierten Funktionen ausgestattet, mit denen Sie nicht das Rad für jedes neue Projekt neu erfinden können. Im Allgemeinen sollen diese Funktionen dazu beitragen, die Hauptvorteile und -funktionen der Sprache einfacher zu nutzen.

Zum Beispiel Bibliothek. Eine Bibliothek ist eine Sammlung von Code, die aus sorgfältig ausgewählten Sammlungen von Funktionen besteht, die dazu beitragen sollen, die Entwicklung zu beschleunigen und zu vereinfachen - wie Fitvids.js, zum Erstellen flexibler Videoelemente.

### Grundlagen der CSS -Funktionen

Im Gegensatz zu anderen Programmiersprachen können wir keine eigenen Funktionen in CSS erstellen. Diese Logik ist dem CSS -Selektor reserviert, mit dem Sie leistungsstarke Regeln für bedingte Stile erstellen können.

Im Gegensatz zu anderen Programmiersprachen - die Ausgabe von Funktionen in anderen Programmiersprachen beeinflusst normalerweise implizit die nachfolgende Logik - ist die Ausgabe von CSS -Funktionen visueller Natur. Diese Ausgabe wird verwendet, um das Layout und die Präsentation des Inhalts zu steuern. Zum Beispiel:

 .has-orange-glow {
  Filter: Drop-Shadow (0,25REM 0 0,75REM #EF9035);
}

Die CSS- filter drop-shadow() verwendet die Parameter, die wir zur Verfügung stellen, um einen orangefarbenen äußeren Glüheffekt auf alles zu erzeugen, was sie angewendet hat.

In der folgenden Demonstration habe ich eine JavaScript-Funktion namens toggleOrangeGlow , die die Anwendung der .has-orange-glow Klasse auf dem CSS-Tricks-Logo umschaltet. Wenn Sie dies mit dem CSS -Übergang verwenden, können wir einen coolen Glüheffekt erzeugen:

Sie sind vielleicht mit einigen CSS -Funktionen vertraut, aber die Sprache hat eine erstaunlich umfangreiche Liste!

Wie bei jeder anderen Technologie im Web haben verschiedene CSS -Funktionen unterschiedliche Browser -Unterstützung. Stellen Sie sicher, dass Sie recherchieren und testen, um sicherzustellen, dass Ihre Erfahrung für alle funktioniert, und verwenden Sie so etwas wie @supports , um eine qualitativ hochwertige alternative Erfahrung zu bieten.

Häufig verwendete CSS -Funktionen

url()

 .el {
  Hintergrund: URL (/images/image.jpg);
}

Verwenden Sie url()

url() können Sie mit anderen Ressourcen verlinken, um sie zu laden. Dies kann Bilder, Schriftarten und sogar andere Stilblätter umfassen. Aus Leistungsgründen ist es am besten, das zu begrenzen, was Sie über url() laden, da jede Deklaration eine zusätzliche HTTP -Anforderung darstellt.

#### attr()

 /*<div data-example="foo"> */
div {
  Inhalt: Attr (Daten-Beispiel);
}<p><details><summary> Verwenden Sie <code>attr()</code></summary><p> Mit dieser Funktion können wir HTML eingeben, den Inhalt der Eigenschaft abrufen und der CSS <code>content</code> bereitstellen. Normalerweise sehen Sie <code>attr()</code> , das in einem Stilblatt verwendet wird, mit dem die URL des Links nach dem Link -Text angezeigt wird. Eine weitere gute Anwendung dieser Funktion besteht darin, sie zu verwenden, um eine alternative Beschreibung des Bildes anzuzeigen, wenn es nicht geladen wird.</p></details></p>
<p> #### <code>calc()</code></p>
<pre class="brush:php;toolbar:false"> .el {
  Breite: Calc (100VW - 80px);
}

Verwenden Sie calc()

Wenn Sie eine Funktion haben, die einige Zeit zum Experimentieren in Anspruch nehmen sollte, ist das calc() . Wir haben eine vollständige Anleitung zu calc() .

Diese Funktion enthält zwei Parameter und berechnet das Ergebnis basierend auf den von Ihnen angegebenen Operatoren (, -, *, /), vorausgesetzt, diese Parameter sind Zahlen mit oder ohne begleitende Einheiten.

Im Gegensatz zu CSS -Präprozessoren wie Sass kann calc() Einheiten mischen, was bedeutet, dass Sie Dinge wie das Subtrahieren von 6REM von 100%tun können. calc() wird ebenfalls dynamisch aktualisiert. Wenn 100% Breite darstellen, funktioniert es weiterhin, wenn sich diese Breite ändert. calc() kann auch CSS -benutzerdefinierte Eigenschaften als Parameter akzeptieren, was Ihnen eine unglaubliche Flexibilität bietet.

#### lang()

 P: Lang (en) {
  Zitate: "\ 201c" "\ 201d" "\ 2018" "\ 2019" "\ 201c" "\ 201d" "\ 2018" "\ 2019";
}

Verwenden Sie lang()

Das Einbeziehen von lang -Attributen in Ihr HTML ist eine sehr wichtige Sache. Wenn es in Ihrem HTML angezeigt wird, können Sie die lang() -Funktion verwenden, um das Erscheinungsbild des Eigenschaftswerts zu lokalisieren und den Stil bedingt darauf anzuwenden.

Eine gemeinsame Verwendung dieses Selektors besteht darin, sprachspezifische Zitate festzulegen, die für die Internationalisierung sehr nützlich sind.

Intelligente Designer und Entwickler verwenden es möglicherweise auch als Haken für eine Website mit stilletzten Versionen, bei denen kulturelle und/oder sprachliche Überlegungen unterschiedliche Wahrnehmungen von Dingen wie negativem Raum bedeuten.

#### :not()

 H3: nicht (: Erstkind) {
  Rand: 0;
}

Verwenden Sie not()

Dieser Pseudo-Klasse-Selektor wählt alles aus, was nicht von Ihnen angegeben wird. Zum Beispiel können Sie body:not(img) um etwas zu lokalisieren, das kein Bild ist. Während dieses Beispiel sehr leistungsfähig ist, kann die Beschränkung des Umfangs von :not() auf einen zentraleren Selektor (z. B. BEMs Blockklasse) viel Vielseitigkeit bieten.

Derzeit :not() unterstützt nur einen Selektor als Parameter, aber die Unterstützung mehrerer von Kommas getrennter Parameter wird entwickelt (z. B. div:not(.this, .that) )!

Weitere Informationen zu Funktionen finden Sie im Originaltext. Aufgrund von Platzbeschränkungen wird hier die verbleibende Anzahl von CSS -Funktionen im Originaltext weggelassen. Informationen zur vollständigen Informationen finden Sie im Originaltext.