พอดแคสต์ 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 ยังมีฟังก์ชันที่ช่วยคุณทำให้องค์ประกอบเคลื่อนไหว ให้ใช้การไล่ระดับสี และใช้ตัวกรองแบบกราฟิกเพื่อปรับแต่งรูปลักษณ์ของรูปภาพ เพื่อให้โมดูลนี้กระชับที่สุด ซึ่งกล่าวถึงในโมดูลที่ลิงก์ ทุกเครื่องมือมีโครงสร้างคล้ายกับฟังก์ชันที่แสดงในโมดูลนี้
ตรวจสอบความเข้าใจ
ทดสอบความรู้ของคุณเกี่ยวกับฟังก์ชัน
ฟังก์ชัน CSS ระบุด้วยอักขระใดได้บ้าง
:
[]
{}
::
()
CSS มีฟังก์ชันคณิตศาสตร์ในตัวไหม
คุณวางฟังก์ชัน calc()
ไว้ใน calc()
อื่น เช่น font-size: calc(10px + calc(5px * 3));
ได้
ข้อใดต่อไปนี้คือฟังก์ชันรูปร่าง CSS
square()
circle()
ellipse()
inset()
rect()
polygon()