CSS Shorthand ที่จะทำให้คุณเขียน CSS ง่าย ๆ ใน 1 บรรทัด

CSS เป็นภาษาที่เขียนเพื่อให้เว็บไซต์สามารถแสดงองค์ประกอบต่าง ๆ ได้ตามต้องการ เช่น สี ฟอนต์ ความสูง ความกว้าง ระยะห่างของขอบ และอื่น ๆ อีกมากมาย ซึ่งในบทความนี้จะมาแจกทริคดี ๆ ที่ทำให้เพื่อน ๆ สามารถเขียน CSS ได้ง่ายใน 1 บรรทัด และจะมีทริคอะไรดี ๆ บ้างไปติดตามกันได้เลยค่ะ

ทำไมต้องเขียน CSS Shorthand ?

• ช่วยปรับปรุงโค้ด สามารถอ่านและทำความเข้าใจโค้ดได้ง่ายมากยิ่งขึ้น
• ช่วยปรับปรุงประสิทธิภาพของการโหลดหน้าเว็บ

 

🖥️ Background Shorthand
ช่วยให้เราสามารถกำหนดคุณสมบัติต่าง ๆ บนพื้นหลังได้ตามต้องการ เช่น สี ขนาด รูปภาพ ตำแหน่ง 

🔹 Old

.container {
   background-color: #000;
   background-image: url(images/bg.gif);
   background-repeat: no-repeat;
   background-position: left top;
}

 

🔸 Shorthand

.container{
   background: #000 url(images/bg.gif) no-repeat left top;
}

 

🖥️ Border Shorthand
ใช้กำหนดคุณสมบัติต่าง ๆ ของเส้นขอบ เช่น ความหนา ความบาง และสีของเส้น เป็นต้น

🔹 Old 

.container{
   border-width: 1px;
   border-style: solid;
   border-color: #000;
}

 

🔸 Shorthand

.container{
   border: 1px solid #000;
}

 

🖥️ Font Shorthand
ใช้กำหนดคุณสมบัติต่าง ๆ ให้กับตัวอักษรบนหน้าเว็บ เช่น ฟอนต์, ขนาด, และรูปแบบ เป็นต้น

🔹 Old

.container{
   font-style:italic;
   font-weight:bold;
   font-size:.8em;
   line-height:1.5;
   font-family:Arial, Helvetica, sans-serif
}

 

🔸 Shorthand

.container{
   font: italic bold .8em/1.5 Arial, Helvetica, sans-serif;
}

 

🖥️ Inset Shorthand
ใช้กำหนดตำแหน่งให้กับ Element เช่น บน ล่าง ซ้าย ขวา

🔹 Old

 .container{
   top: 10px;
   right: 4px;
   bottom: 4px;
   left: 10px;
}

 

🔸 Shorthand

.container{
   /* top | right | bottom | left */
   inset: 10px 4px 4px 10px;
}

 

🖥️ Padding Shorthand
ใช้กำหนดค่าให้กับ Padding เพื่อกำหนดหรือเพิ่มช่องว่างให้กับ Element ต่าง ๆ

🔹 Old

.container{
   padding-top: 10px;
   padding-right: 5px;
   padding-bottom: 10px;
   padding-left: 5px;
}

 

🔸 Shorthand

.container{
   /* top | right | bottom | left */
   padding: 10px 5px 10px 5px;
}

 

🖥️ Margin Shorthand
ใช้กำหนดค่าให้กับ Margin เพื่อกำหนดหรือเพิ่มช่องว่างให้กับ Element ต่าง ๆ ใช้งานคล้ายกับ Padding

🔹 Old

.container{
   margin-top: 10px;
   margin-right: 10px;
   margin-bottom: 10px;
   margin-left: 10px;
}

🔸 Shorthand

.container{
   /* top | right | bottom | left */
   margin: 10px 10px 10px 10px;
}

 

และทั้งหมดนี้คือ CSS Shorthand ที่เรานำมาฝากเพื่อน ๆ ลองไปปรับใช้กับโปรเจกต์กันดูนะ ^^ และหากบทความนี้ผิดพลาดตรงไหน ก็ขออภัยมา ณ ที่นี้ด้วยนะคะ