สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
ในโลกของการพัฒนาเว็บไซต์ หนึ่งในเครื่องมือพื้นฐานที่นักพัฒนาทุกคนจำเป็นต้องใช้งานคือ Cascading Style Sheets (CSS) แต่ทว่า ไม่ใช่ทุกคนที่จะเข้าใถึงและใช้พลังของ CSS ได้อย่างเต็มที่ ในบทความนี้ เราจะมาสำรวจ 5 CSS Functions ที่มีประโยชน์ซึ่งสามารถช่วยยกระดับการออกแบบเว็บไซต์ และทำให้ CSS ของคุณมีความยืดหยุ่นและประสิทธิภาพสูงขึ้น
Function `calc()` เป็นเครื่องมือที่ทรงพลังในการคำนวณค่า CSS โดยอนุญาตให้คุณบวก, ลบ, คูณ หรือหารค่าต่างๆ มันช่วยให้คุณสามารถผสมผสานหน่วยวัดต่างๆ เช่นเปอร์เซ็นต์, px, em, และอื่นๆ โดยไม่ต้องเขียนโค้ด JavaScript ซับซ้อน
.box {
width: 50%;
padding: calc(10px + 2em);
}
ในตัวอย่างนี้ `calc()` ใช้เพื่อคำนวณค่าของ padding ซึ่งมีการใช้หน่วยทั้ง px และ em ในการคำนวณเดียวกัน
การใช้งาน `var()` ช่วยให้คุณสามารถกำหนด Custom Properties หรือ Variables ใน CSS ซึ่งสามารถนำกลับมาใช้ซ้ำได้ทั่วทั้งเอกสาร
:root {
--primary-color: #333;
--spacing: 15px;
}
.container {
color: var(--primary-color);
padding: var(--spacing);
}
ที่นี่เราได้กำหนดค่าสีหลักและขนาดของการเว้นวรรคไว้ใน root แล้วเรียกใช้โดยใช้ `var()` หากต้องการเปลี่ยนค่าในอนาคต เราสามารถเปลี่ยนได้เพียงหนึ่งจุด
`clamp()` เป็นฟังก์ชั่นที่มีประโยชน์ในการกำหนดค่าที่มีข้อจำกัด โดยจะกำหนดขอบเขตขั้นต่ำและขั้นสูงสำหรับค่าของ property
.text {
font-size: clamp(1rem, 2vw + 1rem, 2rem);
}
ในตัวอย่างนี้ `1rem` เป็นขนาดตัวอักษรขั้นต่ำ, `2rem` เป็นขนาดตัวอักษรสูงสุด และ `2vw + 1rem` คือการคำนวณที่ยืดหยุ่นตามขนาดของ viewport
ฟังก์ชั่น `attr()` อนุญาตให้คุณใช้ค่าของ attribute ใน HTML ไปยังการตกแต่งใน CSS
[data-tooltip]:after {
content: attr(data-tooltip);
position: absolute;
top: -5px;
}
ที่นี่ตัวอย่างแสดงการใช้ `attr()` เพื่อสร้าง Tooltip โดยดึงค่าจาก custom attribute `data-tooltip` ใน HTML
ฟังก์ชั่น `filter()` เสนอสมรรถนะการจัดการภาพหรือองค์ประกอบของเว็บ ทำให้สามารถเพิ่มเอฟเฟ็กต์ต่างๆ เช่น จางหาย, ความสว่าง, การหมุนสี ฯลฯ
.image {
filter: brightness(150%) sepia(50%);
}
ตัวอย่างนี้ `brightness(150%)` กำลังเพิ่มความสว่าง และ `sepia(50%)` กำลังเพิ่มเอฟเฟ็กต์ sepia
CSS เป็นหนึ่งในภาษาที่ควรเรียนรู้เพื่อพัฒนาเว็บ ด้วยการใช้ฟังก์ชั่นเหล่านี้ คุณสามารถพัฒนาหน้าเว็บแบบไดนามิกและตอบสนองได้ดียิ่งขึ้น หากคุณสนใจที่จะเรียนรู้มากขึ้นเกี่ยวกับการสร้าง CSS อย่างมืออาชีพ การเรียนรู้และฝึกฝนทักษะการเขียนโปรแกรมที่ครอบคลุมจากแหล่งความรู้ที่น่าเชื่อถือ เช่น EPT, เป็นการลงทุนที่ดีสำหรับอนาคตอาชีพของคุณในฐานะผู้พัฒนาเว็บไซต์มืออาชีพ ไม่ว่าจะเป็นการเรียนรู้ทฤษฎีใหม่ๆ หรือการลองใช้ฟังก์ชั่นเหล่านี้ในโปรเจ็กต์จริง ஜ
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: css functions calc var clamp attr filter web_development front-end
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com