พอดแคสต์ CSS - 020: ฟังก์ชัน
ในหลักสูตรนี้ คุณจะเห็นฟังก์ชัน CSS หลายรายการ
ในโมดูลตารางกริด คุณจะได้รู้จักกับ minmax() และ fit-content() ซึ่งช่วยในการกำหนดขนาดองค์ประกอบ
ในโมดูลสี
เราแนะนำให้คุณรู้จักกับ rgb() และ hsl() ซึ่งช่วยกำหนดสี
เช่นเดียวกับภาษาโปรแกรมอื่นๆ CSS มีฟังก์ชันในตัวจำนวนมากที่คุณเข้าถึงได้ทุกเมื่อที่ต้องการ
ทุกฟังก์ชัน CSS มีวัตถุประสงค์เฉพาะ ในบทเรียนนี้ คุณจะได้เห็นภาพภาพรวมระดับสูง ซึ่งช่วยให้คุณเข้าใจมากขึ้นเกี่ยวกับสถานที่และวิธีใช้
ฟังก์ชันคืออะไร
ฟังก์ชันเป็นโค้ดที่มีชื่อครบถ้วนสมบูรณ์ในตัวซึ่งทำงานหนึ่งๆ จนเสร็จ ฟังก์ชันจะได้รับการตั้งชื่อเพื่อให้คุณเรียกใช้ภายในโค้ดและส่งผ่านข้อมูลไปยังฟังก์ชันได้ วิธีนี้เรียกว่าการส่งอาร์กิวเมนต์
ฟังก์ชัน CSS จำนวนมากเป็นฟังก์ชันที่แท้จริง ซึ่งหมายความว่าหากคุณส่งอาร์กิวเมนต์เดียวกันลงในฟังก์ชัน ฟังก์ชันเหล่านั้นจะให้ผลลัพธ์เดียวกันแก่คุณเสมอ โดยไม่คำนึงถึงสิ่งที่เกิดขึ้นในโค้ดที่เหลือ
ฟังก์ชันเหล่านี้มักจะคำนวณใหม่เมื่อค่ามีการเปลี่ยนแปลงใน CSS ซึ่งคล้ายกับองค์ประกอบอื่นๆ ในภาษา เช่น ค่าแบบ Cascade ที่คำนวณแล้ว เช่น currentColor
ใน CSS คุณสามารถใช้เฉพาะฟังก์ชันที่ให้ไว้ แทนที่จะเขียนฟังก์ชันของคุณเอง แต่ฟังก์ชันจะซ้อนกันได้ในบางบริบท ซึ่งทำให้มีความยืดหยุ่นมากขึ้น เราจะอธิบายเรื่องนี้อย่างละเอียดยิ่งขึ้นภายหลังในโมดูลนี้
ตัวเลือกฟังก์ชัน
.post :is(h1, h2, h3) {
line-height: 1.2;
}
คุณได้เรียนรู้เกี่ยวกับตัวเลือกฟังก์ชันในโมดูล Pseudo-classes ซึ่งมีฟังก์ชันโดยละเอียด เช่น :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() จะไม่พบสิ่งใด
ฟังก์ชันสี
คุณเรียนรู้ทุกอย่างเกี่ยวกับฟังก์ชันสีในโมดูลสีไปแล้ว หากคุณยังไม่ได้อ่าน เราขอแนะนำเป็นอย่างยิ่งให้คุณอ่าน
ฟังก์ชันสีบางส่วนที่ใช้ได้ใน 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() จะแสดงผลค่าที่คำนวณน้อยที่สุดของอาร์กิวเมนต์ที่ส่งผ่านอย่างน้อย 1 รายการ
ฟังก์ชัน max() จะทำงานตรงกันข้าม คือ รับค่าสูงสุดของอาร์กิวเมนต์ที่ส่งผ่านอย่างน้อย 1 รายการ
.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 ใช้รูปร่างเพื่อตัดคลิปจากกล่องหรือทำให้เป็นรูปร่างของเนื้อหา
มีฟังก์ชันของรูปร่างที่สามารถใช้กับคุณสมบัติทั้งสองนี้ได้
รูปร่างง่ายๆ เช่น
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
เช่นเดียวกับ rotate() จะมี
scaleX(),
scaleY() และ
scaleZ()
ทำหน้าที่ปรับขนาดองค์ประกอบบนแกนที่เจาะจงแทน
.my-element {
transform: scaleX(1.2) scaleY(1.2);
}
นอกจากนี้ ยังมีฟังก์ชัน scale3d() เหมือนกับฟังก์ชัน rotate
วิธีนี้คล้ายกับ scale() แต่ใช้อาร์กิวเมนต์ 3 รายการ ได้แก่ ตัวประกอบสเกล X, Y และ Z
แปลภาษา
translate() จะช่วยย้ายองค์ประกอบขณะรักษาตำแหน่งในการไหลเวียนของเอกสาร
โดยจะยอมรับค่าความยาวและค่าเปอร์เซ็นต์เป็นอาร์กิวเมนต์
ฟังก์ชัน translate() จะแปลองค์ประกอบตามแกน X หากมีการกำหนดอาร์กิวเมนต์ไว้ 1 รายการ และแปลองค์ประกอบตามแกน X และ Y หากมีการกำหนดอาร์กิวเมนต์ทั้ง 2 รายการ
.my-element {
transform: translatex(40px) translatey(25px);
}
คุณสามารถใช้ translateX, translateY และ translateZ ได้เช่นเดียวกับฟังก์ชันการเปลี่ยนรูปแบบอื่นๆ
คุณยังใช้
translate3d
ซึ่งให้คุณกำหนดการแปล X, Y และ Z ได้ในฟังก์ชันเดียว
การเอียง
คุณเอียงองค์ประกอบได้โดยใช้ฟังก์ชัน skew() ซึ่งยอมรับมุมเป็นอาร์กิวเมนต์
ฟังก์ชัน skew() ทำงานในลักษณะที่คล้ายกันมากกับ translate()
หากคุณกำหนดอาร์กิวเมนต์เพียงรายการเดียว อาร์กิวเมนต์ X จะส่งผลต่อแกน X เท่านั้น และการกำหนดเป้าหมายทั้งคู่จะส่งผลต่อแกน X และแกน Y
คุณยังใช้ skewX และ skewY เพื่อกำหนดแต่ละแกนแยกกันได้ด้วย
.my-element {
transform: skew(10deg);
}
มุมมอง
สุดท้าย คุณสามารถใช้พร็อพเพอร์ตี้ perspective ซึ่งเป็นส่วนหนึ่งของกลุ่มพร็อพเพอร์ตี้ที่เปลี่ยนรูปแบบ เพื่อเปลี่ยนระยะทางระหว่างผู้ใช้และระนาบ Z
ซึ่งทำให้รู้สึกถึงระยะทางและสามารถใช้สร้างมิติความลึกในการออกแบบได้
ตัวอย่างนี้ของ David Desandro จากบทความที่มีประโยชน์มากของเขา ซึ่งแสดงให้เห็นวิธีการใช้ พร้อมกับพร็อพเพอร์ตี้ perspective-origin-x และ perspective-origin-y เพื่อสร้างประสบการณ์ 3 มิติอย่างแท้จริง
ฟังก์ชันภาพเคลื่อนไหว การไล่ระดับสี และฟิลเตอร์
นอกจากนี้ CSS ยังมีฟังก์ชันที่ช่วยให้คุณทำให้องค์ประกอบเคลื่อนไหว ใช้การไล่ระดับสีกับองค์ประกอบนั้น และใช้ตัวกรองแบบกราฟิกเพื่อปรับรูปลักษณ์ขององค์ประกอบ เราจะรวมทุกโมดูลไว้ในโมดูลที่ลิงก์เพื่อให้โมดูลนี้สั้นกระชับที่สุด โดยทุกฟังก์ชันจะมีโครงสร้างที่คล้ายกับฟังก์ชันที่แสดงในโมดูลนี้
ทดสอบความเข้าใจ
ทดสอบความรู้ของคุณเกี่ยวกับฟังก์ชัน
ระบุฟังก์ชัน CSS ด้วยอักขระใดได้บ้าง
[]{}():::CSS มีฟังก์ชันทางคณิตศาสตร์ในตัวไหม
คุณวางฟังก์ชัน calc() ไว้ภายใน calc() อื่น เช่น font-size: calc(10px + calc(5px * 3)); ได้
ข้อใดต่อไปนี้เป็นฟังก์ชันรูปร่าง CSS
ellipse()square()circle()rect()inset()polygon()