COOL IT IDEAS AND STUFF

See the original english version Click here!

บทความนี้จะกล่าวถึง 10 CSS One-Liners ที่มีประโยชน์ต่อการทำงานของคุณ ซึ่งแน่นอนว่าจะช่วยสร้างความแตกต่างและผ่านการพิสูจน์แล้วว่า มันมีประโยชน์ต่อการทำงานในสถานการณ์ต่าง ๆ เรามาดูกันเลยว่ามีอะไรบ้าง

1. Aspect Ratio

One-Liner แรกจะเป็นการกำหนดอัตราส่วนภาพขององค์ประกอบ (Element) ทำให้ง่ายต่อการปรับความสูงให้ตอบสนองตามความกว้างที่กำหนดได้อย่างง่ายดาย (หรือในทางกลับกัน)

2. Logical Properties

คุณเบื่อกับการใช้ margin-left, margin-right, margin-top และ margin-bottom แล้วใช่ไหม?

ลองใช้วิธีนี้แทน:

ด้วยวิธีเดียวกันนี้ สามารถใช้กับ padding ได้เช่นกัน

Properties เหล่านี้จะปรับค่าโดยอัตโนมัติตาม Text Direction (เช่น จากซ้ายไปขวา หรือ จากขวาไปซ้าย) ทำให้ Code ของคุณอ่านง่ายขึ้น สั้นลง ยืดหยุ่นขึ้น และรองรับการปรับเปลี่ยนตาม Text Direction ได้ดี

3. การกำหนดขนาด Box แบบ Universal

นี่อาจเป็นหนึ่งใน Properties ที่ถูกลืมมากที่สุดตัวหนึ่งในการ Set ค่า โดย Property นี้จะกำหนดวิธีว่า Box จะตอบสนองต่อ Border และ Padding ของ Elements ภายในอย่างไร

โดยค่า Default แล้ว Box-Sizing Property จะถูกตั้งค่าเป็น Content-Box ซึ่งหมายความว่า ความกว้าง (Width) และความสูง (Height) ของ Element จะไม่รวม Padding และ Border ซึ่งอาจทำให้เกิดปัญหาเกี่ยวกับการจัด Layout โดยไม่คาดคิดได้

เพื่อแก้ไขปัญหานี้ คุณสามารถเพิ่ม One-Liner ต่อไปนี้ ลงใน CSS ของคุณ:

4. การ Scroll ที่ลื่นไหล

นี่อาจเป็นหนึ่งใน Feature โปรดของใครหลาย ๆ คน

Feature นี้ช่วยให้การ Scroll หน้า Page ทั้งหมดมีความลื่นไหล รวมทั้งช่วยเพิ่ม User Experience เมื่อคลิกที่ Anchor Links

ลองดูที่นี่:

5. โหมดการเขียนในแนวตั้ง

Property นี้จะ Rotate Text ให้แสดงในแนวตั้งจากขวาไปซ้าย มันมีประโยชน์อย่างมากสำหรับ Elements ที่ออกแบบเป็นพิเศษหรือภาษา ที่อ่านในแนวตั้ง

6. ตัดข้อความที่ยาวเกินด้วยจุดไข่ปลา

ป้องกันไม่ให้ Text ยาวเกินขอบของ Container และแทนที่ Text ส่วนเกินด้วยจุดไข่ปลา (…) เพื่อความเรียบร้อย

มันมีประโยชน์อย่างยิ่งสำหรับตัวอย่าง Text หรือ Link ที่ยาวเกินไป

7. Place-items

place-Items คือคำย่อที่ใช้สำหรับ ตั้งค่าทั้ง align-items และ justify-items พร้อมกัน การตั้งค่าเป็น center จะทำให้ทั้ง align-items และ justify-items อยู่กึ่งกลาง

8. จำกัดความกว้างของข้อความ

วิธีนี้จะช่วยให้สามารถ ระบุความกว้างของบรรทัดข้อความให้อยู่ในหน่วยของจำนวนตัวอักษรได้ ซึ่งจะทำให้ชัดเจนและอ่านง่ายขึ้น

9. ตกแต่งข้อความใน Placeholder

วิธีนี้จะช่วยตกแต่ง Placeholder Text ในช่องกรอกข้อมูล (Input Fields) ได้

10. Accent Color

CSS Rule นี้จะช่วยปรับสีไฮไลต์ ให้มีความสม่ำเสมอทั่วทั้ง Webpage สำหรับ Interactive Elements เช่น Link และ ปุ่ม

นั่นหมายถึง คุณไม่จำเป็นต้องกำหนด Style ให้แต่ละ Element ทุกครั้งที่คุณต้องการใช้สีนี้ ซึ่งจะช่วยให้ Website มีความสม่ำเสมอมากขึ้น

และทั้งหมดนี้ก็คือ 10 CSS One-Liners ที่มีประโยชน์ต่อการทำงานของคุณ ซึ่งคำสั่งเหล่านี้จะสะท้อนถึงความสามารถของ CSS ในการแก้ปัญหาการจัด Layout และการตกแต่งทั่วไปได้อย่างมีประสิทธิภาพ เพียงแค่เพิ่มคำสั่งเหล่านี้ใน Workflow ประจำวันของคุณ คุณก็สามารถเพิ่มความสวยงามและปรับ Function ของ Web Projects อย่างง่ายดายและมีประสิทธิภาพ

ที่มา: https://levelup.gitconnected.com/

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

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

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

• 10 Developer Tools สุดเจ๋ง ที่จะช่วยให้ชีวิตของคุณง่ายขึ้น
• 12 Libraries ที่ช่วยเพิ่มประสิทธิภาพของการพัฒนา Frontend
• 9 Built-In Functions ทรงพลังของ Python ที่คุณไม่ควรมองข้าม