ویژگی های خلاصه در CSS

ویژگی های خلاصه یا Shorthand properties در CSS به چه ویژگی هایی گفته می‌شود؟

ویژگی های خلاصه یا مختصر (Shorthand properties) در CSS به ویژگی‌هایی گفته می‌شود که امکان تعیین مقدار متناظر با چند ویژگی مرتبط دیگر را در قالب یک ویژگی فراهم می‌کنند.

برای مثال، ویژگی margin یک ویژگی خلاصه است که می‌تواند مقادیر چهار حاشیه پیرامون یک المان (یعنی مقادیر متناظر با ویژگی های margin-top و margin-right و margin-bottom و margin-left) را به طور همزمان مشخص کند. به این ترتیب قانون CSS:

p {
  margin: 5px 8px 6px 10px;
}

معادل با قانون زیر خواهد بود:

p {
  margin-top: 5px;
  margin-right: 8px;
  margin-bottom: 6px;
  margin-left: 10px;
}

به عنوان مثالی دیگر، ویژگی border نیز یک ویژگی خلاصه است که می‌تواند مقادیر سه ویژگی border-width یا ضخامت خط مرزی، border-style یا استایل خط مرزی و border-color یا رنگ خط مرزی المان را مشخص کند. به این ترتیب قانون CSS:

p {
  border: 2px solid red;
}

نیز معادل با قانون زیر خواهد بود:

p {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

ویژگی های background, font, margin, border, padding, animation, text-decoration, transition و overflow از جمله رایج‌ترین ویژگی‌های خلاصه در CSS محسوب می‌شوند.

مزایای ویژگی های خلاصه نویسی شده

خلاصه نویسی ویژگی ها در سی‌اس‌اس مزایای متنوعی دارد. استفاده از ویژگی‌های خلاصه باعث می‌شود شیوه نامه ها یا استایل شیت هایی کوتاه و مختصر داشته باشید. این موضوع، حجم فایل های CSS را کاهش می‌دهد و در نتیجه به لود سریع‌تر صفحات وب کمک می‌کند.

از طرف دیگر استفاده از ویژگی های Shorthand، نگارش و تغییر استایل‌شیت‌ها را ساده‌تر می‌کند و باعث خوانایی بیشتر آن‌ها می‌شود. همچنین با وجود این ویژگی ها، در زمان نگارش استایل‌ها صرفه‌جویی می‌شود.

چند نکته در مورد ویژگی های خلاصه در CSS

ترتیب مقادیر در ویژگی های Shorthand

در مورد اغلب ویژگی های خلاصه، ترتیب خاصی برای درج مقادیر ویژگی های معمولی متناظر وجود ندارد. به عبارت دقیق‌تر، اگر ویژگی‌های معمولی که در یک ویژگی خلاصه شده‌اند مقادیری با انواع مختلف داشته باشند ترتیب آن‌ها اهمیتی ندارد. برای مثال تمام حالت‌های زیر برای ویژگی border یکسان هستند:

border: 2px solid red;
border: solid 2px red;
border: red solid 2px;

با این حال در مورد مقادیری که ممکن است نوع یکسانی داشته باشند ترتیب درج مقادیر در ویژگی خلاصه اهمیت دارد. برای مثال در ویژگی margin، برای تعیین چهار مقدار مختلف برای حاشیه‌های پیرامون المان لازم است به ترتیب مقدار حاشیه بالا، راست، پایین و سپس چپ مشخص شود.

margin: 5px 8px 6px 10px;

حذف یا عدم درج مقادیر در ویژگی های Shorthand

در ویژگی های Shorthand، لازم نیست مقادیر تمام ویژگی‌های متناظر درج شود. با این حال معمولا ذکر مقدار متناظر با برخی ویژگی ها لازم است. برای مثال در ویژگی border می‌توانید برای یک، دو یا سه مورد از ویژگی‌های border-width, border-style و border-color مقداری را متناسب با نیاز خود مشخص کنید. اما معمولا درج استایل خط (یا مقدار ویژگی border-style) لازم است. (در واقع اگر استایل خط مرزی را مشخص نکنید این خط قابل مشاهده نخواهد بود).

اگر در CSS برای یک ویژگی متناظر در ویژگی خلاصه مقداری مشخص نشده باشد آن ویژگی روی مقدار ابتدائی یا پیشفرض خود تنظیم می‌شود. با توجه به این موضوع در مثال زیر هرچند ابتدا ویژگی border-width ضخامت 1px را برای خط مرزی مشخص کرده است اما عدم درج ضخامت در ویژگی خلاصه border باعث می‌شود ضخامت خط مرزی روی مقدار پیشفرض یعنی medium تنظیم شود. (در واقع مقدار قبلی ویژگی border-width با مقدار جدید پیشفرض جایگزین می‌شود).

p {
  border-width: 1px;
  border: solid red;
}

بازگشت به فهرست مجموعه آموزشی CSS