COOL IT IDEAS AND STUFF

See the original english version Click here!

สำหรับ CSS แล้ว Functions ถือเป็น Features ที่สำคัญและมีประโยชน์ที่ Developer ทุกคนควรรู้จักไว้ บาง CSS Functions ช่วยให้คุณสามารถซ้อนใน Functions อื่น ๆ ได้ ทำให้มีประสิทธิภาพมากยิ่งขึ้น ซึ่งคุณสามารถบรรลุสิ่งต่างๆ มากมายด้วยการใช้ Function ใน CSS และนี่ก็คือ 5 CSS Functions มีประโยชน์ ที่คุณควรรู้จักไว้

1. The calc() function

calc() Function ของ CSS จะช่วยให้คุณสามารถทำการคำนวณเพื่อกำหนดค่าของ CSS Property และแน่นอนว่า Browsers หลัก ๆ ทั้งหมด รองรับการใช้งานเจ้า Function นี้

โปรดทราบว่า Function นี้รับ Arguments 2 ตัวและคำนวณผลลัพธ์ตามลำดับของ Operator (+, -, *, /) ที่คุณระบุ โดยมีเงื่อนไขว่า Arguments เหล่านั้น เป็นตัวเลขที่มีหรือไม่มี Unit ก็ได้

ดูตัวอย่างได้ที่ Code นี้:

คุณยังสามารถดูตัวอย่างใน Codepen ที่คำนวณความกว้างของ div element โดยใช้ calc() Function

The Calc function(iframe from Codepen outside Medium)

2. The CSS attr() function

attr() Function จะ Return ค่าของ Attribute ของ Elements ที่ถูกเลือกไว้ มันช่วยให้คุณดึง Content ของ Attribute จาก HTML และ Feed มันไปยัง CSS Content Property

นี่คือตัวอย่าง Code Snippet:

อย่างที่คุณเห็นด้านบน attr() Function จะช่วยให้เราสามารถแสดงค่า Attribute ของ HTML Element ที่ต้องการได้

ตัวอย่างนี้จะแสดง Attribute ที่มีค่าเป็น “Medium” ไว้ใน Page ซึ่งคุณสามารถตรวจสอบจาก Codepen ที่อยู่ด้านล่างนี้:

The attr() function(iframe from Codepen outside Medium). 

3. The function filter()

filter() Function จะทำการเปลี่ยนแปลงทางด้าน Graphical ให้กับรูปภาพที่ถูก Input และ Elements ต่าง ๆ ของมัน

ต่อไปนี้ เป็น Effects ที่เราสามารถทำได้: Blur, Brightness, Contrast, Grayscale, Hue-Rotate, Opacity, Invert, Sepia, Saturate, Drop-Shadow และอื่น ๆ อีกมากมาย

นี่คือตัวอย่าง CSS Code ที่เราสามารถใช้ Filter Function ได้:

เพื่อความเข้าใจที่มากขึ้น คุณสามารถดูจาก Codepen ที่อยู่ด้านล่างนี้:

The filter function(iframe from Codepen).

4. The function var()

หากคุณต้องการแทรกค่าของ CSS Variable ใน Property คุณจะต้องใช้ var() Function

Function นี้ จะมีประโยชน์สำหรับการสร้าง CSS Variable บางตัว ที่เราสามารถใช้ได้ตลอดทั้ง Code ของเรา

คุณสามารถดู Code ด้านล่างนี้ เพื่อทำความเข้าใจวิธีใช้ Variables ใน CSS

ถ้าคุณดูที่ Code คุณจะรู้ว่า เราสร้าง Variable ของเราใน Root Element จากนั้นเราก็ใช้มันใน div elements ของเรา

อย่างที่คุณเห็น CSS Variables สามารถถูกประกาศได้โดยใช้เครื่องหมาย -- นำหน้า แล้วตามด้วยชื่อ Variable ที่ต้องการ

ตัวอย่างเช่น เราสามารถใช้ --main-bg-color เพื่อกำหนด Custom Property สำหรับสี Background หลัก เมื่อประกาศ Variable แล้ว Variable นั้นสามารถถูกใช้ได้ทั่วทั้ง Stylesheet โดยใช้ var() Function เช่น background-color: var(--main-bg-color)

ซึ่งมันจะช่วยให้คุณสร้าง CSS Styles ที่สามารถ Reuse ได้ และ Maintain ได้มากขึ้น คุณยังสามารถตั้งค่า Default สำหรับ Variables และแทนที่ได้ตามต้องการสำหรับ Sections ต่าง ๆ ของ Website ของคุณ

5. The function URL

คุณสามารถใช้ url() Function ใน Project Code ของคุณได้ เพื่ออธิบายหรือระบุตำแหน่งของ Files (ไม่ว่าจะเป็น Image, PDF เป็นต้น)

Function นี้ มักถูกใช้งานบ่อยเมื่อต้องเขียน Properties ต่าง ๆ เช่น Background-Image, List-Style, Content, Border และอื่น ๆ

นี่คือตัวอย่าง Code:

Function นี้ จะช่วยให้เรากำหนด Files หรือ Media Resources เป็นค่าให้กับ CSS Properties บางอย่างได้

สรุป

อย่างที่คุณเห็น นี่เป็นเพียงส่วนหนึ่งของ CSS Functions ที่คุณสามารถใช้ใน Code ของคุณได้ หวังว่าพวกมันจะช่วยให้คุณทำงานได้ตามที่ต้องการและมีความราบรื่นยิ่งขึ้น 

ที่มา: https://javascript.plainenglish.io/

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

บทความล่าสุด

• 15 VS Code Extensions ที่ช่วยประหยัดเวลาในการทำงานของคุณ
• 4 ตัวอย่าง เพื่อให้เข้าใจการใช้ Subqueries และ Joins
• 17 Productivity Tools ที่ช่วยปรับปรุง Workflow ของ Developer