15 個非 JavaScript 的高級 Web 開發技巧
隨著尖端 HTML 和 CSS 功能的引入，Web 開發正在經歷一場變革之旅。在今天這篇文章中，我們將探討 15 種高級功能，這些功能現在可以在不依賴 JavaScript 的情況下實現。
我們將提供真實世界的示例，并將它們與舊的基于 JavaScript 的方法進行比較，展示現代 Web 技術的力量。
1.響應式排版
傳統上，JavaScript 用于根據屏幕尺寸操縱字體大小。隨著CSS自定義屬性（變量）和clamp()函數的出現，響應式排版變得輕而易舉。
舊方法（JavaScript）：
<p id="responsiveText">This is some text</p>
<script>
const screenWidth = window.innerWidth;
const baseFontSize = (screenWidth > 768) ? '20px' : '16px';
document.getElementById('responsiveText').style.fontSize = baseFontSize;
</script>新方法（CSS 自定義屬性）：
:root {
--base-font-size: 16px;
}
p {
font-size: clamp(var(--base-font-size), 5vw, var(--base-font-size * 1.25));
}CSS自定義屬性和clamp()創建一個響應式且可擴展的排版系統，無需JavaScript也可以實現。
2. 深色模式開關
實現暗模式切換通常使用 JavaScript 來處理。現在，prefers-color-scheme 媒體查詢和 CSS 自定義屬性無需編寫腳本即可實現無縫的暗模式體驗。
舊方法（JavaScript）：
<label class="switch">
<input type="checkbox" onclick="toggleDarkMode()">
<span class="slider"></span>
</label>
<script>
function toggleDarkMode() {
document.body.classList.toggle('dark-mode');
}
</script>新方法（CSS 和媒體查詢）：
:root {
--background-color: #fff;
--text-color: #000;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #333;
--text-color: #fff;
}
}
body {
background-color: var(--background-color);
color: var(--text-color);
}通過利用CSS自定義屬性和prefers-color-scheme媒體查詢，無需任何JavaScript干預即可實現暗模式。
3. 交互式懸停過渡
創建復雜的懸停過渡需要使用 JavaScript 來實現更復雜的效果。借助過渡屬性和高級 CSS 偽元素，現在無需一行 JavaScript 即可實現這些過渡。
舊方法（JavaScript）：
<div onmouseover="expandElement(this)" onmouseout="shrinkElement(this)">Hover me</div>
<script>
function expandElement(element) {
element.style.transform = 'scale(1.2)';
}
function shrinkElement(element) {
element.style.transform = 'scale(1)';
}
</script>新方法（CSS）：
div {
transition: transform 0.3s ease-in-out;
}
div:hover {
transform: scale(1.2);
}過渡屬性簡化了懸停效果，使其無需 JavaScript 即可流暢且具有交互性。
4. 占位符動畫
輸入字段中的占位符動畫通常使用 JavaScript 完成。CSS 中的 ::placeholder 偽元素現在無需編寫腳本即可實現時尚且動態的占位符動畫。
舊方法（JavaScript）：
<input type="text" onfocus="animatePlaceholder(this)" onblur="resetPlaceholder(this)">
<script>
function animatePlaceholder(input) {
input.placeholder = 'Type something...';
}
function resetPlaceholder(input) {
input.placeholder = '';
}
</script>新方法（CSS）：
input::placeholder {
transition: all 0.3s ease-in-out;
}
input:focus::placeholder {
transform: translateY(-100%);
opacity: 0.7;
}當輸入字段獲得焦點時，::placeholder 偽元素上的 CSS 動畫會產生視覺上吸引人的效果。
5. 圖片延遲加載
傳統上，JavaScript 用于延遲加載圖像。img 元素中的加載屬性提供了本機解決方案，無需額外的腳本。
舊方法（JavaScript）：
<img data-src="image.jpg" alt="Lazy-loaded Image" id="lazyImage">
<script>
document.addEventListener('DOMContentLoaded', function () {
const lazyImage = document.getElementById('lazyImage');
lazyImage.src = lazyImage.dataset.src;
});
</script>新方法（HTML 加載屬性）：
<img src="image.jpg" alt="Lazy-loaded Image" loading="lazy">load="lazy" 屬性可確保瀏覽器延遲加載圖像，從而減少對自定義 JavaScript 實現的需求。
6. 滾動觸發的動畫
滾動上的動畫元素傳統上涉及 JavaScript。通過引入scroll-margin-top CSS 屬性，我們現在無需一行 JavaScript 即可觸發動畫。
舊方法（JavaScript）：
<div class="animate-me" onscroll="animateElement(this)">Scroll to animate</div>
<script>
function animateElement(element) {
// JavaScript animation logic
// ...
}
</script>新方法（CSS）：
.animate-me {
opacity: 0;
transition: opacity 0.5s;
scroll-margin-top: 20vh;
}
.animate-me.in-view {
opacity: 1;
}CSS 與滾動邊距頂部屬性一起，無需 JavaScript 即可實現平滑的滾動觸發動畫。
7. 可定制的表單控件
設置表單控件的樣式以匹配特定的設計通常需要 JavaScript。隨著 :focus-within 偽類和 CSS 自定義屬性的出現，我們無需編寫腳本即可實現此目的。
舊方法（JavaScript）：
<input type="text" class="custom-input" onfocus="highlightInput(this)" onblur="resetInput(this)">
<script>
function highlightInput(input) {
input.classList.add('focused');
}
function resetInput(input) {
input.classList.remove('focused');
}
</script>新方法（CSS）：
.custom-input {
border: 2px solid var(--input-border);
}
.custom-input:focus-within {
border: 2px solid var(--input-border-focused);
}
:root {
--input-border: #ccc;
--input-border-focused: #007bff;
}:focus-within 偽類和 CSS 自定義屬性為可定制的表單控件提供了純 CSS 解決方案。
8. 全頁疊加菜單
創建覆蓋菜單傳統上涉及 JavaScript。現在，通過使用 :checked 偽類和 CSS，我們無需編寫腳本即可實現全頁覆蓋。
舊方法（JavaScript）：
<input type="checkbox" id="menuToggle" onclick="toggleMenu()">
<label for="menuToggle">Open Menu</label>
<script>
function toggleMenu() {
// JavaScript logic to toggle menu visibility
// ...
}
</script>新方法（CSS 和 :checked）：
#menuToggle {
display: none;
}
#menuToggle:checked + label {
/* Styles for open menu */
}
label {
cursor: pointer;
}通過利用 :checked 偽類，我們可以在沒有 JavaScript 的情況下創建全頁覆蓋菜單。
9.漸變邊框
傳統上，實現漸變邊框涉及復雜的 CSS 或 JavaScript 解決方案。隨著 conic-gradient 屬性的出現，我們無需任何腳本即可創建漸變邊框。
舊方法（JavaScript）：
<div class="gradient-border" onclick="toggleGradient()">Click to toggle gradient border</div>
<script>
function toggleGradient() {
// JavaScript logic to toggle gradient border
// ...
}
</script>新方法（CSS 圓錐梯度）：
.gradient-border {
border: 5px solid;
border-image: conic-gradient(from 0deg at 50% 50%, red, yellow, green, blue, purple);
border-image-slice: 1;
}conic-gradient 屬性簡化了漸變邊框的創建，無需 JavaScript。
10. 多列布局
傳統上，創建多列布局需要 JavaScript 來進行動態調整。隨著CSS中column屬性的出現，我們無需編寫腳本即可實現復雜的多列布局。
舊方法（JavaScript）：
<div class="multi-column" onclick="adjustColumns()">Click to adjust columns</div>
<script>
function adjustColumns() {
// JavaScript logic to adjust column layout
// ...
}
</script>新方法（CSS 列）：
.multi-column {
column-count: 3;
column-gap: 20px;
}CSS 中的 column 屬性允許創建優雅的多列布局，而無需依賴 JavaScript。
11.自定義復選框和單選按鈕樣式
使復選框和單選按鈕的樣式與特定設計保持一致通常涉及 JavaScript。現在，使用 :checked 偽類和 CSS，我們可以實現自定義樣式，而無需編寫腳本。
舊方法（JavaScript）：
<input type="checkbox" id="customCheckbox" onclick="toggleCheckbox()">
<label for="customCheckbox" class="custom-checkbox"></label>
<script>
function toggleCheckbox() {
// JavaScript logic to toggle checkbox state
// ...
}
</script>新方法（CSS 和 :checked）：
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
width: 20px;
height: 20px;
background-color: #ccc;
display: inline-block;
}
input[type="checkbox"]:checked + label {
background-color: #007bff;
}利用 :checked 偽類可以在不使用 JavaScript 的情況下創建自定義復選框樣式。
12. 無縫頁面轉換
創建無縫頁面轉換通常需要使用 JavaScript 來處理動畫。使用滾動行為 CSS 屬性，我們無需編寫腳本即可實現平滑過渡。
舊方法（JavaScript）：
<a href="#about" onclick="scrollToSection('about')">About</a>
<script>
function scrollToSection(section) {
// JavaScript logic to scroll to the specified section
// ...
}
</script>新方法（CSS 滾動行為）：
body {
scroll-behavior: smooth;
}滾動行為屬性可以實現平滑滾動，而不需要 JavaScript 事件偵聽器。
13.等高列的柔性盒（Flexbox）
傳統上，均衡列高需要 JavaScript 來進行動態調整。通過CSS中的Flexbox布局，我們可以毫不費力地實現等高的列。
舊方法（JavaScript）：
<div class="flex-container" onclick="adjustColumnHeights()">Click to adjust column heights</div>
<script>
function adjustColumnHeights() {
// JavaScript logic to equalize column heights
// ...
}
</script>新方法（CSS Flexbox）：
.flex-container {
display: flex;
}
.flex-container > div {
flex: 1;
}Flexbox 布局允許靈活且等高的列，無需 JavaScript 調整。
14.動態漸變文本
創建動態漸變文本傳統上涉及復雜的 JavaScript 或 SVG 解決方案。 借助CSS，我們現在可以輕松實現漸變文字效果。
舊方法（JavaScript）：
<div class="gradient-text" onclick="toggleGradientText()">Click to toggle gradient text</div>
<script>
function toggleGradientText() {
// JavaScript logic to toggle gradient text
// ...
}
</script>新方法（CSS線性漸變）：
.gradient-text {
background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #ff8c00, #ffcd00);
}background-clip 屬性和 Linear-gradient 使得動態漸變文本可以通過純 CSS 實現。
15. 在圖像上疊加文本
傳統上，在圖像上疊加文本需要 JavaScript 來定位。 通過CSS中的position屬性，我們無需編寫腳本就可以輕松實現文本疊加。
舊方法（JavaScript）：
<div class="image-container">
<img src="image.jpg" alt="Overlay Image">
<div class="overlay-text" onclick="toggleOverlayText()">Click to toggle overlay text</div>
</div>
<script>
function toggleOverlayText() {
// JavaScript logic to toggle text overlay position
// ...
}
</script>新方法（CSS Position ）：
.image-container {
position: relative;
}
.overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Position屬性簡化了在圖像上疊加文本的過程，無需 JavaScript 計算。
結論
在這個引人入勝的探索中，我們深入研究了 15 種不依賴 JavaScript 的高級 Web 開發技術。 探索創建無縫頁面轉換、巧妙設置復選框樣式以及輕松實現響應式排版的藝術 - 所有這些都使用 HTML 和 CSS 的強大組合。
涵蓋的主題：
- 無需 JavaScript 的響應式排版：探索 CSS 自定義屬性和用于創建響應式和可擴展文本的clamp（）函數的世界。
- 使用 CSS Magic 進行深色模式切換：深入研究首選顏色方案媒體查詢和 CSS 自定義屬性，無需一行 JavaScript 即可無縫實現深色模式。
- 交互式懸停轉換變得簡單：通過簡單的轉換屬性和高級 CSS 偽元素來轉換懸停效果，將 JavaScript 拋在后面。
- 使用純 CSS 的動態漸變文本：見證使用背景剪輯屬性和線性漸變輕松實現的動態漸變文本效果的優雅。
- 使用 Flexbox 實現等高列：告別用于均衡列高的 JavaScript，擁抱 CSS Flexbox 的強大功能，實現靈活且統一的布局。
- 踏上以 HTML 和 CSS 為中心的編碼冒險之旅，揭示各種可能性，從而提高您的 Web 開發技能。 關注我們，一起揭開現代 Web 開發的秘密，一次一種無 JavaScript 的技術。
當我們學習完了這 15 種不需要 JavaScript 的高級 Web 開發技術時，很明顯 你的HTML 和 CSS 的力量得到了充分的展示。 每種技術不僅簡化了復雜的任務，而且無需編寫腳本即可增強用戶體驗。
從響應式排版和暗模式切換到圖像延遲加載和無縫頁面轉換，這些技術展示了現代網絡技術的靈活性和功能。 通過利用這些功能，開發人員可以創建復雜的交互式 Web 應用程序，同時保持干凈高效的代碼庫。
這一探索強調了了解 HTML 和 CSS 最新功能的重要性。 隨著 Web 開發環境的發展，采用這些無 JavaScript 解決方案成為構建高效、可訪問且用戶友好的網站的關鍵。
如果你發現這些無 JavaScript 的技術很有趣的話，請記得給我點贊，并且關注我，你將會學習到更多有趣有用的知識。
