函式

CSS Podcast - 020：函式

本課程到目前為止，您已接觸過幾個 CSS 函式。 在 grid 模組中 你認識minmax()和fit-content()。 有助於調整元素大小 在 color 模組中 本課程介紹了 rgb() 和 hsl()，這有助於您定義顏色。

如同許多其他程式設計語言 CSS 有許多內建功能 隨時都能使用

每個 CSS 函式都有特定用途 本課程將概略介紹 讓您深入瞭解這些按鈕的位置和方式

什麼是函式？

函式是已命名的獨立程式碼，用來完成特定工作。 為函式命名後，您可以在程式碼中呼叫該函式，並將資料傳入函式。 這就是傳送引數的功能。

上述函式圖表

許多 CSS 函式都是純函式 換句話說，如果您將相同的引數傳遞至這些引數 一律都會傳回相同結果 無論其他程式碼狀況如何 CSS 中的值有所變更時，這些函式通常會重新計算 類似語言中的其他元素 例如經過運算的串聯值，例如 currentColor。

在 CSS 中，您只能使用所提供的函式、 而不要自行撰寫 但在某些環境中，函式之間可以建立巢狀結構 因此能享有更多彈性 本單元稍後會進一步詳細說明。

功能選取器

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

您已經瞭解 虛擬課程模組 這些詳細的功能 :is()和 :not()。 傳遞至這些函式的引數是 CSS 選取器 然後評估 如果有相符的元素 並將其餘的 CSS 規則套用到規則。

自訂屬性和 var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

自訂屬性是一種變數，可讓你將 CSS 程式碼中的值代碼化。 自訂屬性也會受到串聯的影響 因此可以根據情境修改或重新定義。 自訂屬性必須以兩個破折號 (--) 開頭，須區分大小寫。

var() 函式使用一個必要引數： 您需要傳回這個自訂屬性的值。 在上述程式碼片段中，var() 函式已將 --base-color 做為引數傳遞。 如果已定義 --base-color，則 var() 會傳回值。

.my-element {
    background: var(--base-color, hotpink);
}

您也可以將備用宣告值傳遞至 var() 函式。 這表示如果您找不到 --base-color 系統會改用傳遞的宣告，在本範例中為 hotpink 顏色。

傳回值的函式

var() 函式只是傳回值的 CSS 函式之一。 這類函式包括 attr() 和 url() 會採用與 var() 類似的結構： 您傳遞一或多個引數，並使用這些引數在 CSS 宣告的右側中使用。

a::after {
  content: attr(href);
}

這裡的 attr() 函式 擷取 <a> 元素的 href 屬性內容 並將其設為 ::after 虛擬元素的 content。 如果 <a> 元素的 href 屬性值要變更， 並自動反映在這項 content 屬性中。

.my-element {
    background-image: url('/path/to/image.jpg');
}

url() 函式會使用「字串」網址，並用於載入圖片、字型和內容。 如未傳入有效網址，或是找不到網址指向的資源， url() 函式不會傳回任何內容。

色彩函式

您已瞭解 color 模組的所有色彩函數。 如果您之前還未閱讀，強烈建議您這樣做。

CSS 提供一些可用的色彩函式 rgb()、rgba()、hsl()、hsla()、hwb()、lab()和lch()。 所有這些元件的表單都類似，其中傳入設定引數，然後傳回顏色。

數學運算式

如同許多其他程式設計語言 CSS 提供實用的數學函式，協助你進行各種計算。

calc()

瀏覽器支援

  • Chrome：26.
  • Edge：12.
  • Firefox：16.
  • Safari：7.

資料來源

calc() 函式的參數會使用單一數學運算式做為參數。 這種數學運算式可以混合使用不同型別 例如長度、數字、角度和頻率也可以混合使用。

.my-element {
    width: calc(100% - 2rem);
}

在本例中，我們使用 calc() 函式調整元素的寬度 如同所含父項元素的 100% 然後移除已計算出的值 2rem。

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

calc() 函式可以在另一個 calc() 函式中建立巢狀結構。 您也可以在 var() 函式中傳遞自訂屬性，做為運算式的一部分。

min()和max()

瀏覽器支援

  • Chrome：79.
  • Edge：79，
  • Firefox：75。
  • Safari：11.1.

資料來源

min() 函式會傳回一或多個傳遞引數的最小計算值。 max() 函式則相反：取得一或多個傳遞引數的最大值。

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

在這個例子中 寬度必須是介於 20vw 之間的最小值 ：是可視區域寬度的 20%，以及 30rem。 高度應為介於 20vh 之間的最大值 ：佔可視區域高度的 20%，以及 20rem。

clamp()

瀏覽器支援

  • Chrome：79.
  • Edge：79，
  • Firefox：75。
  • Safari：13.1.

資料來源

clamp() 函式採用三個引數：大小下限 理想的尺寸和大小上限

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

在本例中，font-size 會根據可視區域寬度自動調整。 已將 vw 單位新增至 rem 單位，以支援縮放畫面。 因為無論縮放等級為何，vw 單位的大小都會相同。 乘以 rem 單位 (依據根字型大小)： 會提供包含相對計算點的 clamp() 函式。

想進一步瞭解 min()、max() 和 clamp() 函式，請參閱： 這篇文章。

形狀

clip-path、 offset-path和 shape-outside CSS 屬性會使用形狀以視覺方式裁剪方塊，或為內容提供形狀，

有些形狀函式可與這兩種屬性搭配使用。 簡單的形狀，例如 circle()、 ellipse()和 inset() 並使用設定引數進行大小調整 較複雜的形狀，例如 polygon()敬上 並以半形逗號分隔的 X 軸和 Y 軸值組來建立自訂形狀。

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

和 polygon() 一樣，另有 path() 函式，可將 SVG 填充規則做為引數。 如此一來，即可在圖形工具中繪製高度複雜的形狀 再複製到 CSS 中

轉換

最後，這個 CSS 函式總覽說明轉換函式 可傾斜、調整大小，甚至改變元素的深度。 下列所有函式都會與 transform 屬性搭配使用。

旋轉

瀏覽器支援

  • Chrome：1.
  • Edge：12.
  • Firefox：3.5。
  • Safari：3.1.

資料來源

您可以使用 rotate()敬上 函式，藉此在中心軸旋轉元素。 您也可以使用 rotateX()、 rotateY()和 rotateZ() 函式，改為在特定軸上旋轉元素。 您可以通過度數、轉動和弧度單位，決定旋轉程度。

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

rotate3d() 函式需要四個引數

瀏覽器支援

  • Chrome：12.
  • Edge：12.
  • Firefox：10.
  • Safari：4.

資料來源

前 3 個引數是定義 X、Y 和 Z 座標的數字。 第四個引數是旋轉 如同其他旋轉函式，可接受度數、角度和轉向。

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

規模

瀏覽器支援

  • Chrome：1.
  • Edge：12.
  • Firefox：3.5。
  • Safari：3.1.

資料來源

您可以使用 transform 和 scale() 函式。 此函式接受一或兩個數字做為值，以判斷縮放比例為正數或負數。 如果您只定義一個數字引數 X 軸和 Y 軸都會縮放，同時定義兩者均為 X 和 Y 的簡寫。 和 rotate() 一樣， 提供 scaleX(), scaleY()和 scaleZ() 函式，改為在特定軸上縮放元素。

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

此外，與 rotate 函式一樣 scale3d() 函式。 這與 scale() 類似，但需要三個引數：X、Y 和 Z 縮放比例係數。

翻譯

瀏覽器支援

  • Chrome：1.
  • Edge：12.
  • Firefox：3.5。
  • Safari：3.1.

資料來源

translate() 函式會移動元素，同時保持元素在文件流程中的位置。 可接受長度和百分比值做為引數。 定義一個引數時，translate() 函式會沿著 X 軸轉譯元素。 如果同時定義了兩個引數，則會根據 X 軸和 Y 軸轉譯元素。

.my-element {
  transform: translatex(40px) translatey(25px);
}

您可以像使用其他轉換函式一樣，為特定軸使用特定函式， 使用 translateX、 translateY和 translateZ。 您也可以使用 translate3d敬上 這樣就能在單一函式中定義 X、Y 和 Z 轉譯。

歪斜

瀏覽器支援

  • Chrome：1.
  • Edge：12.
  • Firefox：3.5。
  • Safari：3.1.

資料來源

您可以使用 skew()敬上 函式，可接受角度做為引數。 skew() 函式的運作方式與 translate() 非常類似。 如果您只定義一個引數，只會影響 X 軸，如果同時定義兩者， X 和 Y 軸都會造成影響 您也可以使用 skewX 和 skewY 可單獨影響每個軸。

.my-element {
  transform: skew(10deg);
}

行進方向朝上

瀏覽器支援

  • Chrome：36.
  • Edge：12.
  • Firefox：16.
  • Safari：9.

資料來源

最後，您可以使用 perspective 資源 — 變更使用者和 Z 平面之間的距離，此為轉換系列屬性的一部份。 這種感覺有距離，可以用來在設計中創造深度。

以 David Desandro 的例子來說，這是他們實用文章中的用法： 以及 perspective-origin-x 和 perspective-origin-y 屬性，可打造真正的 3D 體驗。

動畫函式、漸層和濾鏡

CSS 也提供函式，方便您為元素建立動畫。 為這類特徵套用漸層，並使用圖形篩選器來操控這些外觀。 為了讓本單元盡可能簡潔扼要， 相關的所有單元都會詳細介紹 這些函式的結構都與本單元所述的函式類似。

隨堂測驗

測試您對函式的瞭解程度

哪些字元代表 CSS 函式？

[]
這些字元適用於 JavaScript 中的陣列。
{}
這些字元會在 CSS 中包裝規則。
()
函式會使用這些字元包裝引數！
::
這些字元適用於 CSS 中的虛擬元素。
:
這些字元是 CSS 中的虛擬類別。

CSS 內建數學函式嗎？

是
這已有許多種，規格和瀏覽器也將支援更多新功能！
否
請再試一次！

calc() 函式可放在另一個 calc() (例如 font-size: calc(10px + calc(5px * 3));) 中

是
🎉
否
請再試一次！

以下何者為 CSS 形狀函式？

ellipse()
🎉
square()
請再試一次！
circle()
🎉
rect()
請再試一次！
inset()
🎉
polygon()
🎉