ฟังก์ชัน

พอดแคสต์ CSS - 020: ฟังก์ชัน

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

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

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

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

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

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

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

ตัวเลือกฟังก์ชัน

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

คุณได้เรียนรู้เกี่ยวกับตัวเลือกฟังก์ชันใน โมดูล Pseudo-class ซึ่งฟังก์ชันแบบละเอียด เช่น :is() และ :not() อาร์กิวเมนต์ที่ส่งผ่านไปยังฟังก์ชันเหล่านี้คือตัวเลือก CSS ซึ่งจะมีการประเมิน หากมีองค์ประกอบที่ตรงกัน และระบบจะบังคับใช้กฎ CSS ที่เหลือกับผู้ใช้รายนั้น

พร็อพเพอร์ตี้ที่กำหนดเองและvar()

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

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

พร็อพเพอร์ตี้ที่กำหนดเองคือตัวแปรที่ให้คุณแปลงค่าเป็นโทเค็นในโค้ด CSS ได้ พร็อพเพอร์ตี้ที่กำหนดเองยังได้รับผลกระทบจาก Cascade อีกด้วย ซึ่งหมายความว่าสามารถปรับเปลี่ยนหรือเปลี่ยนแปลงตามบริบทได้ พร็อพเพอร์ตี้ที่กำหนดเองต้องนำหน้าด้วยขีดกลาง 2 ขีด (--) และคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่

var() มีอาร์กิวเมนต์ที่จำเป็นหนึ่งรายการ: พร็อพเพอร์ตี้ที่กำหนดเองที่คุณพยายามแสดงเป็นค่า ในตัวอย่างข้างต้น ฟังก์ชัน 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()

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()

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

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

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

แคลมป์

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

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 ใช้รูปร่างต่างๆ เพื่อตัดภาพของกล่องหรือใส่รูปร่างให้เนื้อหาไหลลื่น

มีฟังก์ชันรูปร่างที่สามารถใช้กับพร็อพเพอร์ตี้ทั้ง 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%);
}

นอกจากนี้ยังมีฟังก์ชัน path() ที่ใช้กฎการเติม SVG เป็นอาร์กิวเมนต์เช่นเดียวกับ polygon() ทำให้วาดรูปร่างที่ซับซ้อนได้ด้วยเครื่องมือกราฟิก เช่น Illustrator หรือ Inkscape แล้วคัดลอกลงใน CSS

การแปลง

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

การหมุน

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

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

rotate3d() มี 4 อาร์กิวเมนต์

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

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

ปรับขนาด

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

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

และเช่นเดียวกับฟังก์ชัน rotate ยังมี scale3d() ค่านี้คล้ายกับ scale() แต่มีอาร์กิวเมนต์ 3 อาร์กิวเมนต์ คือ ค่าตัวคูณมาตราส่วน X, Y และ Z

แปล

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

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

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

เอียง

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

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

มุมมอง

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

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

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

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

ตรวจสอบความเข้าใจ

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