Machen Sie sich nicht die Mühe mit JavaScript, wenn es mit CSS geht

Vorwort

Jede Anwendung, die in JavaScript geschrieben werden kann, wird letztendlich in JavaScript geschrieben. ——Atwoods Gesetz

Obwohl alles mit JavaScript erreicht werden kann, ist die Betriebseffizienz von CSS bis zu einem gewissen Grad höher als die von JavaScript. Der Autor ist daher der Ansicht, dass man sich nicht mit JavaScript herumschlagen muss, wenn dies mit CSS erreicht werden kann.

Beide Sprachen haben unterschiedliche Verwendungszwecke. Da Browser immer mehr Funktionen und Eigenschaften erhalten, wird CSS zu einer leistungsstarken Sprache, die Funktionen verarbeiten kann, für deren Implementierung wir uns zuvor auf JavaScript verlassen mussten.

Reibungsloses Scrollen

Es gab eine Zeit, in der wir uns hierfür auf die window.scrollY Implementierung von JavaScript verlassen mussten, und wenn wir ein reibungsloses Scrollen wollten, mussten wir uns auf einen Timer verlassen, um eine Animation hinzuzufügen. Durch das Hinzufügen der scroll-behavior Eigenschaft können wir jetzt mit nur einer Zeile CSS ein reibungsloses Scrollen auf unserer Website ermöglichen! Die Browserunterstützung liegt bei etwa 75 %, die Kompatibilität ist also ziemlich gut.

html {
  Scroll-Verhalten: glatt;
} 

Vollständiger Code[1]

Rollende Erfassung

Diashows und Bildergalerien sind ebenfalls häufig genutzte Funktionen im Frontend. Die vorherige CSS-Generation verfügt nur über eingeschränkte Möglichkeiten, sodass wir uns zur Ausführung dieser Funktionen auf JavaScript verlassen müssen. Jetzt kann diese Funktionalität mit nur wenigen Codezeilen erreicht werden. In gewisser Weise funktioniert es ähnlich wie Flexbox oder CSS Grid in dem Sinne, dass Sie ein Containerelement benötigen, für das Sie scrolln-snap-type festlegen, und mehrere untergeordnete Elemente, für scroll-snap-align festgelegt ist, etwa wie folgt:

<Hauptklasse="übergeordnet">
  <Abschnitt Klasse="Kind"></Abschnitt>
  <Abschnitt Klasse="Kind"></Abschnitt>
  <Abschnitt Klasse="Kind"></Abschnitt>
</main>

.übergeordnet {
  Scroll-Snap-Typ: x obligatorisch;
}

.Kind {
  Scrollen-Snap-Align: Start;
} 

Vollständiger Code[2]

CSS-Animation

Es gab eine Zeit, in der die meisten Entwickler JavaScript (oder jQuery) verwendeten, um Elemente im Browser zu animieren. Es ist ganz einfach, dies auszublenden und das auszublenden. Da interaktive Projekte immer komplexer werden und die Anzahl mobiler Geräte zunimmt, wird die Leistung immer wichtiger. Flash wurde aufgegeben und talentierte Animationsentwickler verwendeten HTML5, um Effekte zu erzielen, die vorher nicht möglich waren. Sie benötigten bessere Tools, um komplexe Animationssequenzen zu entwickeln und die beste Leistung zu erzielen. JavaScript (oder jQuery) kann das nicht. Mit zunehmender Weiterentwicklung der Browser bieten diese auch zunehmend Lösungen an. Die am weitesten verbreitete Lösung ist die Verwendung von CSS-Animationen.

Vollständiger Code[3]

Formularvalidierung

HTML5 bereichert Formularelemente und stellt Formularelementattribute wie „Erforderlich“, „E-Mail“, „Tel.“ usw. bereit. In ähnlicher Weise können wir :valid und :invalid verwenden, um HTML5-Formularattribute zu validieren.

• Die Pseudoklasse :required gibt Formularelemente an, die über das erforderliche Attribut verfügen.
• Die Pseudoklasse :valid gibt an, dass ein Formularelement gültig ist, wenn es mit den erforderlichen
• Die Pseudoklasse :invalid gibt ein Formularelement an, das nicht den angegebenen Anforderungen entspricht.

Verwenden des Inhaltsattributs attr von CSS zum Erfassen von Daten

Ich schätze, jeder denkt danach an das Pseudoelement, aber wie bekommt man den Text? Man kann kein JavaScript verwenden.

CSS-Pseudoelemente sind sehr leistungsfähig. Wir können sie für viele Zwecke verwenden. Um Effekte zu erzielen, wird content:" " normalerweise leer gelassen, aber Sie können tatsächlich attr hineinschreiben, um Informationen zu erfassen!

<div data-msg="Hier ist der Inhalt, um Inhalt abzurufen">  
schweben
</div>

div{
Breite: 100px;
Rand: 1px durchgehend rot;  
Position: relativ;
}
div:hover:nach{
Inhalt:Attr(Datennachricht);
Position: absolut;
Schriftgröße: 12px;
Breite: 200 %;
Zeilenhöhe: 30px;
Textausrichtung: zentriert;
links: 0;
oben: 25px;
Rand: 1px, durchgehend grün;
} 

Anzeige bei Mouse-Hover

Das Hovern mit der Maus kommt sehr häufig vor, beispielsweise in Navigationsmenüs:

Im Allgemeinen sollten versteckte Elemente wie Menüs als untergeordnete Elemente oder angrenzende Elemente des Hover-Ziels platziert werden, um die CSS-Steuerung zu erleichtern. Beispielsweise wird das obige Menü als angrenzendes Element der Navigation platziert:

<!--Menü ist angrenzend li-->
<li class="user">Benutzer</li>
<li class="Menü">
    <ul>
       <li>Kontoeinstellungen</li>
       <li>Abmelden</li>
    </ul>
</li>

Im Normalzustand ist das Menü ausgeblendet:

.Speisekarte{
  Anzeige: keine;
}

Wenn Sie mit der Maus über die Navigation fahren, wird Folgendes angezeigt:

/*Verwenden benachbarter Selektoren und Hover*/
.Benutzer:hover + .menu{
  Anzeige: Listenelement;
}

Beachten Sie, dass hier ein benachbarter Selektor verwendet wird. Deshalb wird er, wie oben erwähnt, als benachbarte Elemente geschrieben. Die Position des Menüs kann absolut positioniert werden.

Gleichzeitig sollte auch das Menü selbst beim Hovern angezeigt werden, da das Menü sonst verschwindet, sobald die Maus die Navigation verlässt:

.menu:hover{
    Anzeige: Listenelement;
}

Hier gibt es ein kleines Problem: Menü und Navigation müssen nebeneinander liegen. Andernfalls funktioniert der oben hinzugefügte Menü-Hover nicht, wenn in der Mitte eine Lücke vorhanden ist. In tatsächlichen Situationen sollte jedoch aus ästhetischer Sicht ein gewisser Abstand zwischen den beiden bestehen. Das lässt sich eigentlich ganz einfach lösen. Zeichnen Sie einfach einen transparenten Bereich in das Menü, wie das blaue Quadrat unten:

Dies kann durch die Verwendung der Pseudoklassen „before“/„after“ mit absoluter Positionierung erreicht werden:

ul.menu:vor{
    Inhalt: "";
    Position: absolut;
    links: 0;
    oben: -20px;
    Breite: 100 %;
    Höhe: 20px;
    /*Hintergrundfarbe: rgba(0,0,0,0,2);*/
}

Wenn ich CSS-Hover schreibe und auf Mausereignisse achte und die Maus zum Steuern des Anzeigens und Ausblendens verwende, was passiert dann mit dem doppelten Effekt? Wenn ich der normalen Routine folge und beim Hovern im Mausereignis einen Anzeigestil „display: block“ hinzufüge, werden die CSS-Einstellungen überschrieben. Mit anderen Worten: Sobald Sie einmal mit der Maus darüberfahren, ist der CSS-Code nutzlos, da die Priorität von Inline-Stilen höher ist als die von externen Links. In der Praxis können jedoch unerwartete Dinge passieren. Das heißt, auf einem mobilen iPhone löst eine Berührung CSS-Hover aus, und diese Auslösung geht höchstwahrscheinlich dem Touchstart-Ereignis voraus. In diesem Ereignis wird bestimmt, ob der aktuelle Status angezeigt oder ausgeblendet wird. Da CSS-Hover eine Rolle spielt, wird beurteilt, ob es angezeigt wird, und dann wird es ausgeblendet. Mit anderen Worten: Wenn es beim ersten Klick nicht klappt, muss man eben zweimal klicken. Schreiben Sie daher am besten nicht beides gleichzeitig. Das zweite Szenario mit untergeordneten Elementen ist einfacher. Behandeln Sie das Hover-Ziel und das ausgeblendete Objekt als untergeordnete Elemente desselben übergeordneten Containers und schreiben Sie den Hover dann auf diesen übergeordneten Container. Sie müssen keinen Hover für das ausgeblendete Element wie oben schreiben:

.marker-container .detail-info{
    Anzeige: keine
}

.marker-container:hover .detail-info{
   Anzeige: Block
}

endlich

Die hier gezeigten Funktionen sind nur einige häufig verwendete Funktionen. Tatsächlich gibt es viele Funktionen, die über CSS implementiert werden können. Interessierte Studenten können sich weiter mit weiteren CSS-Funktionen befassen, die nicht auf JavaScript basieren.

Dies ist das Ende dieses Artikels darüber, wie Sie sich nicht mit JavaScript herumschlagen müssen, wenn Sie CSS verwenden können. Weitere relevante Inhalte zum Thema CSS-Smooth-Scrolling finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!