The CSS Podcast - 020: Functions
จนถึงตอนนี้ คุณได้รู้จักฟังก์ชัน 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()
ฟังก์ชัน 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()
ฟังก์ชัน 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
การหมุน
คุณสามารถหมุนองค์ประกอบได้โดยใช้ฟังก์ชัน 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 เท่ากัน และการกําหนดทั้ง 2 รายการเป็นการเขียนย่อสําหรับ 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 หากมีการกําหนดอาร์กิวเมนต์ 1 รายการ และเปลี่ยนตําแหน่งองค์ประกอบตามแกน X และ Y หากมีการกําหนดอาร์กิวเมนต์ทั้ง 2 รายการ
.my-element {
transform: translatex(40px) translatey(25px);
}
คุณสามารถใช้ฟังก์ชันที่เฉพาะเจาะจงสำหรับแกนใดแกนหนึ่งได้เช่นเดียวกับฟังก์ชันการเปลี่ยนรูปแบบอื่นๆ โดยจะใช้translateX
, translateY
และ translateZ
นอกจากนี้ คุณยังใช้ translate3d
ได้ด้วย ซึ่งจะช่วยให้คุณกําหนดการแปล X, Y และ Z ในฟังก์ชันเดียวได้
Skewing
คุณสามารถบิดเบือนองค์ประกอบได้โดยใช้ฟังก์ชัน skew()
ที่รับมุมเป็นอาร์กิวเมนต์
ฟังก์ชัน skew()
ทำงานในลักษณะที่คล้ายกับ translate()
มาก
หากคุณกําหนดอาร์กิวเมนต์เพียงรายการเดียว อาร์กิวเมนต์นั้นจะส่งผลต่อแกน X เท่านั้น และหากคุณกําหนดทั้ง 2 รายการ อาร์กิวเมนต์นั้นจะส่งผลต่อทั้งแกน X และ Y
นอกจากนี้ คุณยังใช้
skewX
และ
skewY
เพื่อส่งผลต่อแต่ละแกนแยกกันได้ด้วย
.my-element {
transform: skew(10deg);
}
มุมมอง
สุดท้าย คุณสามารถใช้พร็อพเพอร์ตี้ 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()