CSS verfügt über einige weniger bekannte, aber nützliche Funktionen. Wir werden einige davon untersuchen.

1. CSS scroll-snap-type-Eigenschaft und scroll-snap-stop-Eigenschaft

scroll-snap-stop

Wenn diese Eigenschaft für jedes untergeordnete Element unter dem übergeordneten Element festgelegt ist und Sie schnell auf dem Bildschirm scrollen, wird verhindert, dass das nächste Element beim schnellen Scrollen mit einem Trackpad oder Touchscreen passiert.

Gif:

Beispiel :

Wert :

• Normal: Dies ist der Standardwert. Scrollen ist das Standardverhalten

• Immer: Nach schnellem Wischen mit Touchpad oder Touchscreen stoppt der Bildlauf und das nächste Element wird scharfgestellt.

Scroll-Snap-Type-Eigenschaft

Ziehen Sie den Schieberegler horizontal, lassen Sie ihn los und Sie werden den Effekt sehen.
Der Effekt tritt ein, wenn Sie auf ein Kästchen klicken und dann mit der linken und rechten Pfeiltaste navigieren

Gif:

Beispiel :

Wert :

• Keine: Dies ist der Standardwert

• X: Der Effekt wird auf der x-Achse festgelegt

• Y: Der Effekt wird auf der y-Achse eingestellt

• Beide: Der Effekt wird auf der x-Achse und der y-Achse eingestellt

• Pflichtig: Nachdem das Scrollen beendet ist, bewegt sich das Scrollen automatisch zum Erfassungspunkt

2. CSS-Place-Items-Eigenschaft

Der für die Place-Items-Eigenschaft festgelegte Wert wird sowohl auf die align-items- als auch auf die justify-items-Eigenschaften angewendet.

Beispiel :

Wert :

• Start: Elemente am Anfang der Rasterzelle ausrichten

• Ende: Elemente am Ende der Rasterzelle ausrichten

• Mitte: Elemente in der Mitte der Rasterzelle ausrichten

3. CSS alle Eigenschaften

Ändert alle auf das Element oder sein übergeordnetes Element angewendeten Eigenschaften auf ihre Anfangswerte

Beispiel :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Wert :

• Unset: Ändert alle Eigenschaften, die auf das Element oder das übergeordnete Element des Elements angewendet werden, auf ihren übergeordneten Wert, wenn sie vererbbar sind, oder auf ihren Anfangswert, wenn nicht

4. CSS-Benutzerauswahl-Eigenschaft

Verhindert, dass Benutzer Texte auswählen

Beispiel:

The text of this div element cannot be selected.

5. CSS-Caret-Color-Eigenschaft

Ändert die Farbe des Cursors (Caret) in Texteingabefeldern.

6. CSS-Text-Decoration-Skip-Ink-Eigenschaft

Die CSS-Eigenschaft text-decoration-skip-ink gibt an, wie Überstreichungen und Unterstreichungen gezeichnet werden, wenn Glyphen über Linien und Unterstreichungen geführt werden.

Wert :

• Keine:

Beispiel :

text-decoration-skip-ink: none;

• Auto:

Beispiel :

text-decoration-skip-ink: auto;

7. CSS-Pointer-Events-Eigenschaft

Die Eigenschaft pointer-events definiert, ob ein Element auf Zeigerereignisse reagiert oder nicht.

Beispiel :

Google


 Google

Wert:

• Keine: Standard

• Auto: Das Element reagiert nicht auf Zeigerereignisse

Abschluss

Wir haben die wenig bekannten Funktionen von CSS untersucht. Wir haben die Funktionen kennengelernt, die in Ihren Anwendungen nützlich sein werden.