ฟังก์ชัน

จนถึงตอนนี้ คุณได้รู้จักฟังก์ชัน CSS หลายรายการในหลักสูตรนี้ ในโมดูลตารางกริด เราได้แนะนำ minmax() และ fit-content() ที่ช่วยคุณปรับขนาดองค์ประกอบ ในโมดูลสี เราได้แนะนำ rgb() และ hsl() ที่ช่วยคุณกำหนดสี

เช่นเดียวกับภาษาโปรแกรมอื่นๆ CSS มีฟังก์ชันในตัวมากมายที่คุณสามารถเข้าถึงได้ทุกเมื่อที่ต้องการ

ฟังก์ชัน CSS ทุกรายการมีวัตถุประสงค์เฉพาะเจาะจง ในบทเรียนนี้ คุณจะได้รับภาพรวมระดับสูง ซึ่งจะช่วยให้เข้าใจได้ดีขึ้นมากว่าควรใช้ฟังก์ชันเหล่านี้ที่ไหนและอย่างไร

ฟังก์ชันคืออะไร

ฟังก์ชันคือโค้ดที่มีชื่อซึ่งทำงานอย่างอิสระและทำงานหนึ่งๆ ให้เสร็จสมบูรณ์ ฟังก์ชันจะมีชื่อเพื่อให้คุณเรียกใช้ภายในโค้ดและส่งข้อมูลไปยังฟังก์ชันได้ ซึ่งเรียกว่าการส่งอาร์กิวเมนต์

แผนภาพฟังก์ชันตามที่อธิบายไว้ด้านบน

ฟังก์ชัน CSS จำนวนมากเป็นฟังก์ชันบริสุทธิ์ ซึ่งหมายความว่าหากคุณส่งอาร์กิวเมนต์เดียวกันให้กับฟังก์ชัน ฟังก์ชันนั้นจะแสดงผลลัพธ์เดิมเสมอ ไม่ว่าจะเกิดอะไรขึ้นในโค้ดส่วนที่เหลือ ฟังก์ชันเหล่านี้มักจะคํานวณใหม่เมื่อค่าใน CSS เปลี่ยนแปลง คล้ายกับองค์ประกอบอื่นๆ ในภาษา เช่น ค่าแบบ Cascade ที่คำนวณแล้ว เช่น 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 ออกเป็นรายการได้ พร็อพเพอร์ตี้ที่กำหนดเองจะได้รับผลกระทบจากการเรียงลําดับชั้นด้วย ซึ่งหมายความว่าสามารถดัดแปลงหรือกําหนดใหม่ตามบริบทได้ พร็อพเพอร์ตี้ที่กำหนดเองต้องมีขีดกลาง 2 ขีด (--) นำหน้าและต้องคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่

ฟังก์ชัน var() ใช้อาร์กิวเมนต์ที่ต้องระบุ 1 รายการ ได้แก่ พร็อพเพอร์ตี้ที่กำหนดเองที่คุณพยายามแสดงผลเป็นค่า ในข้อมูลโค้ดด้านบน ฟังก์ชัน var() ส่ง --base-color เป็นอาร์กิวเมนต์ หากมีการกําหนด --base-color ไว้ var() จะแสดงผลค่า

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

นอกจากนี้ คุณยังส่งค่าการประกาศสำรองไปยังฟังก์ชัน var() ได้ด้วย ซึ่งหมายความว่าหากไม่พบ --base-color ระบบจะใช้ประกาศที่ส่งมาแทน ซึ่งในกรณีของตัวอย่างนี้คือสี hotpink

ฟังก์ชันที่แสดงผลค่า

ฟังก์ชัน var() เป็นเพียงหนึ่งในฟังก์ชัน CSS ที่แสดงผลค่า ฟังก์ชันอย่าง attr() และ url() เป็นไปตามโครงสร้างที่คล้ายกับ var() โดยคุณส่งอาร์กิวเมนต์อย่างน้อย 1 รายการและใช้อาร์กิวเมนต์ดังกล่าวในด้านขวาของการประกาศ CSS

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

ฟังก์ชัน attr() ในส่วนนี้จะนำเนื้อหาของแอตทริบิวต์ href ขององค์ประกอบ <a> มาตั้งค่าเป็น content ขององค์ประกอบจำลอง ::after หากค่าของแอตทริบิวต์ href ขององค์ประกอบ <a> มีการเปลี่ยนแปลง ระบบจะแสดงค่านี้ในแอตทริบิวต์ content โดยอัตโนมัติ

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

ฟังก์ชัน url() ใช้ URL สตริงเพื่อโหลดรูปภาพ ฟอนต์ และเนื้อหา หากไม่ได้ส่ง URL ที่ถูกต้องหรือไม่พบทรัพยากรที่ URL ชี้ไป ฟังก์ชัน url() จะไม่แสดงผลใดๆ

ฟังก์ชันสี

คุณได้เรียนรู้เกี่ยวกับฟังก์ชันสีทั้งหมดในโมดูล color เราขอแนะนําอย่างยิ่งให้คุณอ่านบทความดังกล่าวหากยังไม่ได้อ่าน

ฟังก์ชันสีที่ใช้ได้ใน CSS มีดังนี้ rgb(), rgba(), hsl(), hsla(), hwb(), lab() และ lch() ทั้งหมดนี้มีรูปแบบคล้ายกันตรงที่ระบบจะส่งอาร์กิวเมนต์การกําหนดค่าและแสดงผลสี

นิพจน์ทางคณิตศาสตร์

CSS มีฟังก์ชันทางคณิตศาสตร์ที่มีประโยชน์เพื่อช่วยในการคำนวณประเภทต่างๆ เช่นเดียวกับภาษาโปรแกรมอื่นๆ อีกมากมาย

calc()

Browser Support

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

Source

ฟังก์ชัน 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()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

ฟังก์ชัน min() จะแสดงผลค่าที่คำนวณแล้วต่ำสุดของอาร์กิวเมนต์ที่ส่งอย่างน้อย 1 รายการ ฟังก์ชัน max() จะทํางานในทางตรงกันข้าม คือรับค่าที่ใหญ่ที่สุดจากอาร์กิวเมนต์ที่ส่งอย่างน้อย 1 รายการ

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

ในตัวอย่างนี้ ความกว้างควรเป็นค่าที่น้อยที่สุดระหว่าง 20vw ซึ่งเป็น 20% ของความกว้างของวิวพอร์ต และ 30rem ความสูงควรเป็นค่าที่ใหญ่ที่สุดระหว่าง 20vh ซึ่งเท่ากับ 20% ของความสูงของวิวพอร์ต กับ 20rem

clamp()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 13.1.

Source

ฟังก์ชัน clamp() ใช้อาร์กิวเมนต์ 3 รายการ ได้แก่ ขนาดต่ำสุด ขนาดที่เหมาะสม และขนาดสูงสุด

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

ในตัวอย่างนี้ font-size จะปรับขนาดตามความกว้างของวิวพอร์ต ระบบจะเพิ่มหน่วย vw ลงในหน่วย rem เพื่อช่วยในการซูมหน้าจอ เนื่องจากหน่วย vw จะมีขนาดเท่ากันไม่ว่าจะซูมระดับใดก็ตาม การคูณด้วยหน่วย rem ซึ่งอิงตามขนาดแบบอักษรรูทจะทําให้ฟังก์ชัน clamp() มีจุดคํานวณแบบสัมพัทธ์

ดูข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชัน min(), max() และ clamp() ได้ในบทความนี้

รูปร่าง

พร็อพเพอร์ตี้ CSS ของ clip-path, offset-path และ shape-outside ใช้รูปร่างเพื่อตัดกล่องหรือกำหนดรูปร่างให้เนื้อหาไหลไปรอบๆ

มีฟังก์ชันรูปร่างที่ใช้กับพร็อพเพอร์ตี้ทั้ง 2 รายการนี้ได้ รูปร่างง่ายๆ เช่น 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 เป็นอาร์กิวเมนต์ด้วย ซึ่งช่วยให้คุณวาดรูปทรงที่ซับซ้อนสูงในเครื่องมือกราฟิกได้ เช่น Illustrator หรือ Inkscape จากนั้นจึงคัดลอกลงใน CSS

การแปลง

สุดท้ายในภาพรวมของฟังก์ชัน CSS คือฟังก์ชัน transform ซึ่งบิดเบี้ยว ปรับขนาด และแม้แต่เปลี่ยนความลึกขององค์ประกอบ ฟังก์ชันต่อไปนี้ทั้งหมดใช้กับพร็อพเพอร์ตี้ transform

การหมุน

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

คุณสามารถหมุนองค์ประกอบได้โดยใช้ฟังก์ชัน rotate() ซึ่งจะหมุนองค์ประกอบบนแกนกลาง นอกจากนี้ คุณยังใช้ฟังก์ชัน rotateX(), rotateY() และ rotateZ() เพื่อหมุนองค์ประกอบตามแกนที่ต้องการแทนได้ด้วย คุณสามารถส่งหน่วยองศา การหมุน และเรเดียนเพื่อกำหนดระดับการหมุนได้

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

ฟังก์ชัน rotate3d() ใช้อาร์กิวเมนต์ 4 รายการ

Browser Support

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

Source

โดยอาร์กิวเมนต์ 3 รายการแรกจะเป็นตัวเลขซึ่งกำหนดพิกัด X, Y และ Z อาร์กิวเมนต์ที่ 4 คือการหมุน ซึ่งจะรับองศา มุม และการเลี้ยวได้เช่นเดียวกับฟังก์ชันการหมุนอื่นๆ

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

ปรับขนาด

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

คุณเปลี่ยนการปรับขนาดขององค์ประกอบได้ด้วย transform และฟังก์ชัน scale() ฟังก์ชันนี้ยอมรับตัวเลข 1 หรือ 2 รายการเป็นค่าซึ่งกำหนดการปรับขนาดเชิงบวกหรือเชิงลบ หากคุณกําหนดอาร์กิวเมนต์ตัวเลขเพียงรายการเดียว ระบบจะปรับขนาดทั้งแกน X และ Y เท่ากัน และการกําหนดทั้ง 2 รายการเป็นการเขียนย่อสําหรับ X และ Y เช่นเดียวกับ rotate() ก็มีฟังก์ชัน scaleX(), scaleY() และ scaleZ() เพื่อปรับขนาดองค์ประกอบบนแกนใดแกนหนึ่งแทน

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

เช่นเดียวกับฟังก์ชัน rotate ก็มีฟังก์ชัน scale3d() ด้วย ซึ่งคล้ายกับ scale() แต่ใช้อาร์กิวเมนต์ 3 รายการ ได้แก่ ปัจจัยการแปลงขนาด X, Y และ Z

แปล

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

ฟังก์ชัน translate() จะย้ายองค์ประกอบโดยยังคงตำแหน่งเดิมในลำดับเอกสาร โดยรับค่าความยาวและเปอร์เซ็นต์เป็นอาร์กิวเมนต์ ฟังก์ชัน translate() จะเปลี่ยนตำแหน่งองค์ประกอบตามแกน X หากมีการกําหนดอาร์กิวเมนต์ 1 รายการ และเปลี่ยนตําแหน่งองค์ประกอบตามแกน X และ Y หากมีการกําหนดอาร์กิวเมนต์ทั้ง 2 รายการ

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

คุณสามารถใช้ฟังก์ชันที่เฉพาะเจาะจงสำหรับแกนใดแกนหนึ่งได้เช่นเดียวกับฟังก์ชันการเปลี่ยนรูปแบบอื่นๆ โดยจะใช้translateX, translateY และ translateZ นอกจากนี้ คุณยังใช้ translate3d ได้ด้วย ซึ่งจะช่วยให้คุณกําหนดการแปล X, Y และ Z ในฟังก์ชันเดียวได้

Skewing

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

คุณสามารถบิดเบือนองค์ประกอบได้โดยใช้ฟังก์ชัน skew() ที่รับมุมเป็นอาร์กิวเมนต์ ฟังก์ชัน skew() ทำงานในลักษณะที่คล้ายกับ translate() มาก หากคุณกําหนดอาร์กิวเมนต์เพียงรายการเดียว อาร์กิวเมนต์นั้นจะส่งผลต่อแกน X เท่านั้น และหากคุณกําหนดทั้ง 2 รายการ อาร์กิวเมนต์นั้นจะส่งผลต่อทั้งแกน X และ Y นอกจากนี้ คุณยังใช้ skewX และ skewY เพื่อส่งผลต่อแต่ละแกนแยกกันได้ด้วย

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

มุมมอง

Browser Support

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

Source

สุดท้าย คุณสามารถใช้พร็อพเพอร์ตี้ perspective ซึ่งเป็นส่วนหนึ่งของตระกูลพร็อพเพอร์ตี้การเปลี่ยนรูปแบบ เพื่อเปลี่ยนระยะห่างระหว่างผู้ใช้กับระนาบ Z วิธีนี้ช่วยให้รู้สึกถึงระยะทางและสามารถใช้เพื่อสร้างระยะชัดลึกในการออกแบบ

ตัวอย่างนี้จาก David Desandro จากบทความที่มีประโยชน์มากจะแสดงวิธีใช้พร็อพเพอร์ตี้นี้ พร้อมกับพร็อพเพอร์ตี้ perspective-origin-x และ perspective-origin-y เพื่อสร้างประสบการณ์ 3 มิติอย่างแท้จริง

ฟังก์ชันภาพเคลื่อนไหว ไล่ระดับสี และฟิลเตอร์

นอกจากนี้ CSS ยังมีฟังก์ชันที่ช่วยให้คุณanimateองค์ประกอบ ใช้การไล่สีกับองค์ประกอบ และฟิลเตอร์กราฟิกเพื่อปรับเปลี่ยนลักษณะขององค์ประกอบ เราได้อธิบายหัวข้อเหล่านี้ไว้ในโมดูลที่ลิงก์ไว้แล้ว เพื่อให้โมดูลนี้กระชับที่สุด ฟังก์ชันเหล่านี้ทั้งหมดมีโครงสร้างคล้ายกับฟังก์ชันที่แสดงในข้อบังคับนี้

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับฟังก์ชัน

ฟังก์ชัน CSS ระบุได้ด้วยอักขระใด

{}
[]
:
()
::

CSS มีฟังก์ชันคณิตศาสตร์ในตัวไหม

เท็จ
จริง

คุณสามารถวางฟังก์ชัน calc() ไว้ภายใน calc() อื่นได้ เช่น font-size: calc(10px + calc(5px * 3));

เท็จ
จริง

ฟังก์ชันรูปร่าง CSS รายการใดต่อไปนี้

circle()
inset()
ellipse()
rect()
square()
polygon()