Wichtige HTML- und CSS-Tricks zum Verzicht auf JavaScript

Lassen Sie uns darüber sprechen, wann Sie JavaScript nicht verwenden sollten und warum HTML und CSS oft die besseren Tools für diese Aufgabe sein können. Das klingt vielleicht kontraintuitiv – vor allem, wenn es von einem Javascript-Entwickler kommt –, aber am Ende wird es Sinn ergeben, vertrauen Sie mir!

Ich bin kein Anti-JavaScript. Ich schreibe den ganzen Tag darin für einen Rich-Text-Editor. Aber im Laufe der Zeit habe ich herausgefunden, dass ich durch die Verwendung von HTML und CSS für viele Aufgaben meinen Code tatsächlich einfacher, wartbarer und oft auch leistungsfähiger machen kann. Dieser Ansatz basiert auf einem Kernprinzip der Webentwicklung, das als die Regel der geringsten Macht bekannt ist.

Die Herrschaft der geringsten Macht

Die Regel der geringsten Macht ist einfach: Verwenden Sie die am wenigsten mächtige Sprache, die für die Aufgabe geeignet ist. In der Webentwicklung bedeutet dies, wo immer möglich, HTML statt CSS und CSS statt JavaScript zu verwenden. Die Logik hier ist:

• HTML ist deklarativ und leichtgewichtig und eignet sich hervorragend zum Strukturieren von Inhalten.
• CSS ist ebenfalls deklarativ und wird für das Styling verwendet. Es bietet viele Layout- und Interaktionsoptionen, für die kein JavaScript erforderlich ist.
• JavaScript ist zwar leistungsstark, führt jedoch zu Komplexität, Leistungseinbußen und potenziellen Fehlern.

Lassen Sie uns also in einige Beispiele aus der Praxis eintauchen, die alle in diesem GitHub-Repository verfügbar sind, wo Sie normalerweise JavaScript verwendet haben, aber mit nur HTML und CSS bessere Ergebnisse erzielen können. Diese Beispiele zeigen, wie Sie Ihren Code vereinfachen und gleichzeitig Funktionalität und Leistung beibehalten können.

Beispiel 1: Benutzerdefinierte Schalter (Kontrollkästchen ohne JS)

Wir haben alle maßgeschneiderte Schalter gebaut. Normalerweise erfordert dies eine Menge JavaScript, um Klicks zu verarbeiten und Zustände umzuschalten. Aber so können Sie mit nur HTML und CSS einen voll funktionsfähigen, barrierefreien Switch erstellen.

Github Repo

HTML

<label class="switch">
  <input type="checkbox" class="switch-input">
  <span class="switch-slider"></span>
</label>

CSS

/* The outer container for the switch */
.switch { 
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* The hidden checkbox input */
.switch-input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The visible slider (background) of the switch */
.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

/* The circle (slider button) inside the switch */
.switch-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

/* Pseudo-class that styles the switch when the checkbox is checked */
.switch-input:checked + .switch-slider {
  background-color: #2196F3;
}

/* Moves the slider button to the right when the switch is checked */
.switch-input:checked + .switch-slider:before {
  transform: translateX(26px);
}

Dieses Setup erstellt einen voll funktionsfähigen Schalter ohne JavaScript und nutzt die Pseudoklasse :checked für Stiländerungen. Diese Pseudoklasse zielt auf das Element (das Kontrollkästchen) ab, wenn es sich im Status „aktiviert“ befindet. Es löst die Stiländerungen für den Schalter aus, z. B. das Ändern der Hintergrundfarbe und das Bewegen des Schiebereglers, wenn das Kontrollkästchen aktiviert ist.

Warum das besser ist:

• Kein JavaScript erforderlich:Weniger bewegliche Teile, weniger Risiko für Fehler.
• Im Auslieferungszustand verfügbar:Sie erhalten automatisch Tastatur- und Mausunterstützung, was die Wartung erleichtert.

Beispiel 2: Automatischer Vorschlag mit

Die Funktion zur automatischen Vervollständigung wird oft mit einer Bibliothek oder benutzerdefiniertem JavaScript durchgeführt. Aber mit HTMLs

Github Repo

HTML

<input type="text" list="suggestions" placeholder="Choose an option...">
<datalist id="suggestions">
  <option value="Open AI">
  <option value="Open Source">
  <option value="Open Source Software">
</datalist>

CSS

.container {
  width: 300px; 
  display: block; 
}

input {
  padding: 10px;
  font-size: 18px;
  width: 100%;
  box-sizing: border-box;
}

Hier ist der

Warum das besser ist:

• Leicht: Es ist in den Browser integriert und daher schneller und effizienter.
• Einfach:Keine zusätzliche JS, Abhängigkeiten oder komplexe Logik erforderlich.

Beispiel 3: Reibungsloses Scrollen mit CSS

Auf vielen Websites wurde das reibungslose Scrollen auf einer Webseite mit jQuery oder benutzerdefinierten JavaScript-Funktionen gehandhabt. Aber jetzt können wir dies mit einer einzigen CSS-Zeile erreichen.

Github Repo

HTML

<nav>
  <a href="#section1">Go to Section 1</a>
  <a href="#section2">Go to Section 2</a>
  <a href="#section3">Go to Section 3</a>
</nav>

<!-- Section 1 -->
<section id="section1">
  <h2>Section 1</h2>
</section>

<!-- Section 2 -->
<section id="section2">
  <h2>Section 2</h2>
</section>

<!-- Section 3 -->
<section id="section3">
  <h2>Section 3</h2>
</section>

CSS

/* Basic styling for sections */
section {
    height: 100vh;
    padding: 20px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Different background colors for each section */
#section1 {
    background-color: lightcoral;
}

#section2 {
    background-color: lightseagreen;
}

#section3 {
    background-color: lightblue;
}

/* Styling for the navigation */
nav {
    position: fixed;
    top: 10px;
    left: 10px;
}

nav a {
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
    color: white;
    padding: 10px 20px;
    background-color: #333;
    border-radius: 5px;
}

nav a:hover {
    background-color: #555;
}

Wenn ein Benutzer auf den Ankerlink eines Abschnitts klickt, wird dadurch sichergestellt, dass die Seite reibungslos zu diesem Abschnitt scrollt.

Why This Is Better:

• Less Code: Achieve smooth scrolling with a single line of CSS instead of complex JavaScript, reducing code complexity.
• Improved Performance: Native CSS scrolling is faster and more efficient than JavaScript-based solutions.
• Browser Consistency: CSS ensures smooth scrolling works consistently across browsers and devices.

Example 4: Accordions using

and

Accordion menus are often built with JavaScript to toggle visibility of content. But HTML provides the

<details>
  <summary>Click to toggle</summary>
  <p>This is some content!</p>
</details>

details {
  width: 300px;
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
  font-size: 18px;
}

summary {
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}

details[open] summary {
  color: #2196F3;
}

<body>
     <!-- Navigation with anchor links -->
     <nav style="position:fixed; top:10px; left:10px;">
        <a href="#section1">Section 1</a>
        <a href="#section2">Section 2</a>
        <a href="#section3">Section 3</a>
        <a href="#section4">Section 4</a>
    </nav>

    <!-- Section 1 -->
    <section id="section1">
        <h2>Welcome to Section 1</h2>
    </section>

    <!-- Section 2 -->
    <section id="section2">
        <h2>Welcome to Section 2</h2>
    </section>

    <!-- Section 3 -->
    <section id="section3">
        <h2>Welcome to Section 3</h2>
    </section>

    <!-- Section 4 -->
    <section id="section4">
        <h2>Welcome to Section 4</h2>
    </section>
</body>

html {
    scroll-behavior: smooth;
}

/* Remove body margins */
body {
    margin: 0;
}

/* Full viewport height for sections with centered content */
section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    transition: background-color 0.6s ease-in-out;
}

/* Styling for headings */
section h2 {
    font-size: 36px;
    margin: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
    opacity: 0;
    transform: translateY(30px);
}

/* Add margin for scroll snapping */
section:nth-child(odd) {
    background-color: #ffcccb;
}

section:nth-child(even) {
    background-color: #d0e7ff;
}

/* Scroll-triggered animation */
section:target h2 {
    opacity: 1;
    transform: translateY(0);
}