سی‌اس‌اس/shorthand

ریست و نرمالایز

shorthand

animation

سی‌اس‌اس

ویژگی‌های shorthand در CSS

ویژگی shorthand یا «کوتاه‌نویسی» در CSS به ویژگی‌هایی گفته می‌شود که چندین ویژگی مرتبط را در یک خط و با یک مقدار یا چند مقدار به صورت خلاصه تعریف می‌کنند. هدف از shorthand کاهش حجم کد، افزایش خوانایی و سرعت نوشتن است.

اصول کلی shorthand

• یک ویژگی shorthand می‌تواند ترکیبی از چند ویژگی مرتبط باشد.
• ترتیب مقادیر در ویژگی shorthand مهم است و باید طبق استاندارد رعایت شود.
• در صورتی که مقدار برخی ویژگی‌ها مشخص نشود، مقدار پیش‌فرض یا مقدار قبلی آن‌ها حفظ می‌شود.
• استفاده بهینه از shorthand موجب کاهش حجم CSS و بهبود عملکرد بارگذاری صفحه می‌شود.

مهم‌ترین ویژگی‌های shorthand در CSS

• margin
• padding
• border
• background
• font
• list-style
• transition
• animation
• flex
• grid-template
• border-radius
• outline
• columns
• text-decoration
• box-shadow

مثال‌ها

1. margin

margin: 10px 20px 15px 5px;
معادل: 
margin-top: 10px; 
margin-right: 20px; 
margin-bottom: 15px; 
margin-left: 5px;

2. padding

padding: 5px 10px;
معادل: 
padding-top: 5px; 
padding-right: 10px; 
padding-bottom: 5px; 
padding-left: 10px;

3. border

border: 2px solid red;
معادل: 
border-width: 2px; 
border-style: solid; 
border-color: red;

4. background

background: url('image.png') no-repeat center/cover #fff;
معادل: 
background-image: url('image.png');  
background-repeat: no-repeat; 
background-position: center; 
background-size: cover; 
background-color: #fff;

5. font

font: italic small-caps bold 16px/1.5 Arial, sans-serif;
معادل: 
font-style: italic; 
font-variant: small-caps; 
font-weight: bold; 
font-size: 16px; 
line-height: 1.5; 
font-family: Arial, sans-serif;

6. list-style

list-style: square inside url('icon.png');
معادل: 
list-style-type: square; 
list-style-position: inside; 
list-style-image: url('icon.png');

7. transition

transition: all 0.3s ease-in-out 0.1s;
معادل: 
transition-property: all; 
transition-duration: 0.3s; 
transition-timing-function: ease-in-out; 
transition-delay: 0.1s;

8. animation

animation: slidein 3s ease-in 1s infinite reverse;
معادل: 
animation-name: slidein; 
animation-duration: 3s; 
animation-timing-function: ease-in; 
animation-delay: 1s; 
animation-iteration-count: infinite; 
animation-direction: reverse;

9. flex

flex: 1 0 auto;
معادل: 
flex-grow: 1; 
flex-shrink: 0; 
flex-basis: auto;

10. grid-template

grid-template: "a a a" 100px "b b b" 200px / 1fr 2fr 1fr;
معادل: 
grid-template-rows: 100px 200px; 
grid-template-columns: 1fr 2fr 1fr; 
grid-template-areas: "a a a" "b b b";

11. border-radius

border-radius: 10px 5px 0 15px;
معادل: 
border-top-left-radius: 10px; 
border-top-right-radius: 5px; 
border-bottom-right-radius: 0; 
border-bottom-left-radius: 15px;

12. outline

outline: 2px dotted blue;
معادل: 
outline-width: 2px; 
outline-style: dotted; 
outline-color: blue;

13. columns

columns: 3 200px;
معادل: 
column-count: 3; 
column-width: 200px;

14. text-decoration

text-decoration: underline dotted red;
معادل: 
text-decoration-line: underline; 
text-decoration-style: dotted; 
text-decoration-color: red;

15. box-shadow

box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
معادل: 
box-shadow-offset-x: 2px; 
box-shadow-offset-y: 2px; 
box-shadow-blur-radius: 5px; 
box-shadow-color: rgba(0,0,0,0.3);

نکات مهم

• همیشه ترتیب و تعداد مقادیر در shorthand را طبق مستندات بررسی کنید.
• برخی ویژگی‌های shorthand می‌توانند باعث بازنویسی مقادیر دیگر شوند؛ در نتیجه مراقب باشید که ناخواسته مقدار مهمی را از بین نبرید.
• استفاده از shorthand کد را خواناتر و کوتاه‌تر می‌کند اما اگر زیاد پیچیده شود، ممکن است فهم کد را سخت‌تر کند.
• مرورگرهای قدیمی ممکن است بعضی از ویژگی‌های shorthand جدید را پشتیبانی نکنند؛ بهتر است تست و fallback در نظر گرفته شود.

منابع

• مستندات MDN