พอดแคสต์ 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()