Heim > Artikel > Web-Frontend > 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 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:
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.
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
<label class="switch"> <input type="checkbox" class="switch-input"> <span class="switch-slider"></span> </label>
/* 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.
Die Funktion zur automatischen Vervollständigung wird oft mit einer Bibliothek oder benutzerdefiniertem JavaScript durchgeführt. Aber mit HTMLs
Github Repo
<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>
.container { width: 300px; display: block; } input { padding: 10px; font-size: 18px; width: 100%; box-sizing: border-box; }
Hier ist der
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
<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>
/* 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.
Accordion menus are often built with JavaScript to toggle visibility of content. But HTML provides the elements that give us this functionality with no extra code.
Github Repo
<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; }
This simple markup gives us an interactive, accessible accordion that can open and close, without needing any JavaScript.
Why This Is Better:
Animating elements based on scroll position is often done with JavaScript libraries. But with the scroll-margin property and scroll-behavior CSS, you can create smoother, more accessible animations.
Github Repo
<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); }
There are plenty of cases where you can avoid the complexity of JavaScript entirely by using native browser features and clever CSS tricks.
As we see the rise of AI assistants in coding and Chat-Oriented Programming, the ability to adopt and enforce simpler, declarative solutions like HTML and CSS becomes even more crucial. AI tools can generate javascript code quickly, but leveraging HTML and CSS for core functionality ensures that the code remains maintainable and easy to understand, both by humans and AI. By using the least powerful solution for the job, you not only make your code more accessible but also enable AI to assist in a more efficient and optimized way.
HTML and CSS provide powerful tools for building interactive, accessible, and responsive web components—without the need for heavy JavaScript. So next time you’re tempted to reach for JavaScript, take a moment to consider if a simpler solution using HTML and CSS might work just as well, or even better.
Check out the Github repository for all the examples in the article. Also, check out the TinyMCE blog for insights, best practices, and tutorials, or start your journey with TinyMCE by signing up for a 14-day free trial today.
Happy coding!
Das obige ist der detaillierte Inhalt vonWichtige HTML- und CSS-Tricks zum Verzicht auf JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!