CSS 永遠改變了：你需要知道的演化特徵-css教學-PHP中文網

CSS 永遠改變了：你需要知道的演化特徵

DDD

發布： 2024-12-05 19:57:12

原創

390 人瀏覽過

CSS Just Changed Forever: evolutionary Features You Need to Know

身為 Web 開發人員，我們在處理 CSS 時都經歷過那些沮喪的時刻。從居中 div 到管理暗模式轉換，CSS 一直是無數開發人員頭痛的問題。但情況正在改變。憑藉最近的重大更新和 Rebecca Purple 的漂亮新徽標，CSS 正在進入一個具有強大、開發人員友好功能的新時代。

？每週將 CSS 技巧、程式碼片段和教學直接發送到您的收件匣 - 100% 免費！

麗貝卡·紫色的意義

在深入了解新功能之前，值得注意的是新 CSS 標誌顏色背後的感人故事。 Rebecca Purple 不僅僅是另一個顏色名稱 - 它在 Web 開發社群中具有深遠的意義。這種顏色以 CSS 先驅 Eric Meyer 的女兒 Rebecca Meyer 的名字命名，是一種永恆的致敬。麗貝卡六歲時堅持要求別人稱呼她的全名，不久後就去世了。她的記憶透過這種標準 CSS 顏色得以延續，這可能會成為未來幾個世紀網路基礎的一部分。

1. 不複雜地調整內容

還記得所有關於將 div 置中的迷因嗎？它們現在已經過時了。新的align-content屬性可以直接在任何區塊佈局中使用，不需要flexbox或網格。令人驚訝的是，花了 25 年才實現這樣一個基本功能，但遲做總比不做好。

.centered-content {
    align-content: center;  /* That's it! No flexbox or grid needed */
    block-size: 100vh;
}

登入後複製

2. 使用 @property 類型化 CSS 變量

@property 規則是 CSS Houdini 的一部分，它改變了變數處理的遊戲規則。以前，CSS 變數被解釋為簡單的字串，限制了它們的動畫潛力。現在，您可以指定數字、顏色或百分比等變數類型，從而實現更安全的程式碼和更複雜的動畫。

/* Old way - limited animation capabilities */
:root {
    --gradient-stop: 50%;
}

/* New way - fully animatable */
@property --gradient-stop {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

.gradient {
    background: linear-gradient(90deg, blue var(--gradient-stop), red);
    transition: --gradient-stop 0.3s;
}

.gradient:hover {
    --gradient-stop: 75%;
}

登入後複製

3. 起始風格：更好的第一印象

新的@starting-style規則解決了常見的動畫挑戰。當使用 display:none 隱藏的元素變得可見時，它們的入口動畫通常無法觸發。此規則可讓您在首次呈現元素時定義元素的初始樣式，非常適合對話方塊、彈出視窗和其他動態內容。

.dialog {
    display: none;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.3s, opacity 0.3s;
}

@starting-style {
    .dialog {
        transform: translateY(20px);
        opacity: 0;
    }
}

.dialog.open {
    display: block;  /* Will now animate smoothly from the starting style */
}

登入後複製

4. 增強數學能力

CSS 不斷發展成為一種具有新數學函數的強大樣式語言：

.mathematical {
    /* Rounding numbers */
    width: round(45.6px);           /* 46px */
    height: round(down, 45.6px);    /* 45px */
    margin: round(up, 45.6px);      /* 46px */

    /* Remainder operations */
    padding: rem(17, 5);            /* 2 (remainder of 17÷5) */
    gap: mod(17, 5);               /* Same as rem() */
}

登入後複製

5. 使用 light-dark() 簡化深色模式

使用 light-dark() 函數，深色模式的實作變得更加簡單。此功能可讓您為淺色和深色配色方案指定不同的值，而無需媒體查詢。

6.更聰明的表單驗證樣式

表單驗證使用者體驗透過新的使用者有效和使用者無效偽類得到改進。與它們的前輩（:valid 和 :invalid）不同，它們僅在使用者互動後觸發，從而防止過早出現錯誤訊息。

.centered-content {
    align-content: center;  /* That's it! No flexbox or grid needed */
    block-size: 100vh;
}

登入後複製

7. interpolate-size 的動畫突破

也許最令人興奮的添加是插值大小屬性。它解決了動態高度動畫元素的長期挑戰。

/* Old way - limited animation capabilities */
:root {
    --gradient-stop: 50%;
}

/* New way - fully animatable */
@property --gradient-stop {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

.gradient {
    background: linear-gradient(90deg, blue var(--gradient-stop), red);
    transition: --gradient-stop 0.3s;
}

.gradient:hover {
    --gradient-stop: 75%;
}

登入後複製