CSS 也能實現 if 判斷?實現動態高度下的不同樣式展現

2023-11-14 12:00:33

最近在群裡,有個小夥伴問了這麼一道很有趣的問題:

  1. CSS 能否實現,容器再某個高度下是某種表現,一旦超出某個高度,則額外展示另外一些內容

為了簡化實際效果,我們看這麼一張示意效果圖:

可以看到,當容器高度沒有超過某一個值時,沒有箭頭圖示。反之,箭頭圖示出現。

這個效果在很多場景都會出現,可以算是一個高頻場景,那麼在今天,我們能否不使用 JavaScript,僅僅憑藉 CSS 實現類似於這樣的功能呢?

答案當然是可以,XBoxYan 大佬在 CSS 實現超過固定高度後出現展開摺疊按鈕 介紹了一種非常巧妙的藉助浮動的解法,十分有意思,感興趣的同學可以先行一步瞭解。

當然,浮動 float 在現如今的 CSS 世界,運用的已經非常少了。那麼除了浮動,還有沒有其它有意思的解法?本文我們將一起來探究探究。

方法一:藉助最新的容器查詢

第一種方法,非常簡單,但是對相容性有所要求。那就是使用容器查詢 -- @container 語法。

容器查詢在 新時代佈局新特性 -- 容器查詢 也詳細介紹過。

簡單而言,容器查詢它給予了 CSS,在不改變瀏覽器視口寬度的前提下,只是根據容器的寬度或者高度變化,對佈局做調整的能力。

基於這個場景,我們假設我們有如下的 HTML/CSS 結構:

<div class="g-container">
    <div class="g-content">
        Lorem ipsum dolor s...
    </div>
</div>
.g-container {
    position: relative;
    width: 300px;
    height: 300px;
    resize: vertical;
    overflow: hidden;

    .g-content {
        height: 100%;
    }

    .g-content::before {
        content: "↑";
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translate(-50%, 0);
    }
}

它是這麼一個樣式效果:

其中,我們給元素 .g-content 新增了 resize: vertical,讓它變成了一個可以在豎直方向上通過拖動改變高度的容器,以模擬容器在不同內容的場景下,高度不一致的問題:

我們通過元素的偽元素實現了箭頭 ICON,並且它是一直顯示在容器內的。

下面,我們通過簡單的幾句容器查詢程式碼,就可以實現讓箭頭 ICON,只在容器高度超過特定高度的時候才出現:

.g-container {
    container-type: size;
    container-name: container;
}

@container container (height <= 260px) {
    .g-content::before {
        opacity: 0;
    }
}

簡單解釋一下:

  1. .g-container 它被用作容器查詢的目標容器
    • container-type 屬性指定了容器的型別為 size,表示我們將使用容器的尺寸來應用樣式。
    • container-name 屬性指定了容器的名稱為 container,以便在後面的容器查詢規則中參照。
  2. @container container (height <= 260px) {} 表示這是一個容器查詢規則,在括號中的條件 (height <= 260px) 表示當容器的高度小於等於 260px 時,應用該規則下的樣式
  3. 具體規則為,如果容器的高度小於等於 260px 時,.g-content 元素的偽元素將變得透明

這樣,我們就非常簡單的實現了容器在不同高度下,ICON 元素的顯示隱藏切換:

完整的程式碼,你可以戳這裡:CodePen Demo -- flexible content

當然,這個方案的唯一缺點在於,截止至今天(2023-11-11),相容性不是那麼好:

那,有沒有相容性更好的方案?當然,來我們一起來看看 clamp + calc 的方案。

方法二:clamp + calc 大顯神威

上面效果的核心在於:

  1. 如果容器的高度大於某個值,顯示樣式 A
  2. 如果容器的高度小於等於某個值,顯示樣式 B

那麼想想看,如果拿容器的高度減去一個固定的高度值,會發生什麼?假設一下,ICON 元素的 CSS 程式碼如下:

.g-content::before {
    content: "↑";
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: calc(100% - 200px);
}

仔細觀察 bottom: calc(100% - 200px),在元素的 bottom 屬性中,100% 表示的是容器當前的高度,因此 calc(100% - 200px) 的含義就代表,容器當前高度減去一個固定高度 200px。因此:

  1. 當容器高度大於 200pxcalc(100% - 200px) 表示的是一個正值
  2. 當容器高度小於 200pxcalc(100% - 200px) 表示的是一個負值
  3. 當容器高度等於 200pxcalc(100% - 200px) 表示 0

我們看看這種情況下,整個 ICON 的表現是如何的:

可以看到,當容器高度大於 200px 的時候,箭頭 ICON 確實出現了,但是,它無法一直定位在整個容器的最下方

有什麼辦法讓它在出現後,一直定位在容器的最下方嗎?

別忘了,CSS 中,還有幾個非常有意思的數學函數:min()max()clamp(),它們可以有效限定動態值在某個範圍之內!

不太瞭解的,可以看看這篇 現代 CSS 解決方案:CSS 數學函數

利用 clamp(),我們可以限定計算值的最大最小範圍,在這個場景下,我們可以限制 bottom 的最大值為 10px

.g-content::before {
    // ...
    bottom: clamp(-99999px, calc(100% - 200px), 10px);
}

上面的程式碼 clamp(-99999px, calc(100% - 200px), 10px),核心在於,如果 calc(100% - 200px) 的計算值大於 10px,它只會取值為 10px,利用這個技巧,我們可以在容器高度超長時,把箭頭 ICON 牢牢釘在容器的下方,無論容器的高度是多少:

到此,結束了嗎?顯然沒有。

雖然上面的程式碼,解決當 calc(100% - 200px) 的計算值大於 10px 的場景,但是沒有解決,當 calc(100% - 200px) 的計算值處於 -10px ~ 10px 這個範圍內的問題。

我們可以清楚的看到,當我們往下拖動容器變高的時候,箭頭元素是逐漸慢慢向上出現,而不是突然在某一個高度下,直接出現,所以在實際使用中,會出現這種 ICON 只出現了一半的尷尬場景:

但是,莫慌!這個問題也好解決,我們只需要給 calc(100% - 200px) 的計算值,乘上一個超級大的倍數即可。原因在於:

  1. calc(100% - 200px) 的計算值是負數時,我們其實不希望 ICON 出現,此時,乘上一個超級大的倍數,依然是負數,不影響效果
  2. calc(100% - 200px) 的計算值是正數時,為了避免 ICON 處在只漏出部分的尷尬場景,通過乘上一個超級大的倍數,讓整個計算值變得非常大,但是由於又有 clamp() 最大值的限制,無論計算值多大,都只會取 10px

看看程式碼,此時,整個 bottom 的取值就改造成了:

.g-content::before {
    // ...
    bottom: clamp(-9999px, calc(calc(100% - 200px) * 100000), 10px);
}

通過,將 calc(100% - 200px) 的值,乘上一個超大的倍數 100000,無論是正值還是負值,我們把計算值放大了 100000 倍。這樣,整個效果就達成了我們想要的效果:

仔細看上圖,ICON 元素從漸現,變成了瞬間出現!與上面的 @container 效果幾乎一致,最終達成了我們想要的效果。

其核心就在於 clamp(-9999px, calc(calc(100% - 200px) * 100000), 10px),一定需要好好理解這一段程式碼背後的邏輯。

基於此,我們就巧妙的利用 clamp() + calc() 方法,近似的實現了類似於 if/else 的邏輯,實在是妙不可言!

CodePen Demo -- flexible content

最後

好了,本文到此結束,希望本文對你有所幫助