پراپرتی‌های اختصاری

آموزش جامع CSS

مقدمه

در پایان درس قبلی، به مناسبت مواجهه با پراپرتی all، توضیح مختصری در مورد پراپرتی‌های اختصاری (shorthand properties) ارائه دادیم و گفتیم که با استفاده از این دست پراپرتی‌ها می‌توانیم چندین پراپرتی را در قالب تنها یک استایل، مقداردهی کنیم. اما در مورد پراپرتی‌های اختصاری و استفاده از آنها نکاتی وجود دارد که کمتر به آنها پرداخته شده است. در این درس، در مورد این نکات و باید و نبایدهای استفاده از پراپرتی‌های اختصاری صحبت می‌کنیم.

مهمترین پراپرتی‌های اختصاری

همانطور که گفته شد، یک پراپرتی اختصاری در واقع، پراپرتی جدیدی نیست؛ بلکه روشی است برای مقداردهی هم‌زمان به چند پراپرتی دیگر. پراپرتی‌های font، background و border مهمترین و پرکاربردترین پراپرتی‌های اختصاری هستند که در ادامه آنها را بررسی می‌کنیم.

پراپرتی اختصاری font

یکی از پرکاربردترین پراپرتی‌های اختصاری font نام دارد که می‌توان با استفاده از آن، چندین پراپرتی مربوط به فونت متون را مقداردهی کرد. فرم کلی این پراپرتی اختصاری به صورت زیر است:

font: font-style font-variant font-weight font-stretch font-size/line-height font-family

بنابراین، پراپرتی font می‌تواند برای مقداردهی هم‌زمان به شش پراپرتی فوق به کار رود. به مثال زیر توجه کنید:

Copy Icon CSS 
p{
  font: italic normal bold normal 18px/2 "Helvetica", "Arial", sans-serif;
}

البته از بین این پراپرتی‌ها، تنها پراپرتی‌های font-size و font-family اجباری هستند و مابقی اختیاری محسوب می‌شوند.

پراپرتی اختصاری Background

یکی دیگر از پراپرتی‌های اختصاری پرکاربرد، پراپرتی background است که برای مقداردهی هم‌زمان به چندین پراپرتی مربوط به پس‌زمینه‌ی عناصر کاربرد دارد. این پراپرتی دارای فرم کلی زیر است:

background: background-color background-image background-size background-repeat background-position background-origin background-clip background-attachment

بنابراین، پراپرتی اختصاری background را می‌توان برای مقداردهی هم‌زمان به هشت پراپرتی فوق به کار برد.

پراپرتی اختصاری border

border نام یکی دیگر از پراپرتی‌های اختصاری CSS است که برای مقداردهی هم‌زمان به سه پراپرتی مربوط به قاب یا فریم عناصر کاربرد دارد. این پراپرتی دارای فرم کلی زیر است:

border: border-width border-style border-color

نکته‌ی جالب در مورد پراپرتی border این است که هر یک از پراپرتی‌هایی که مقداردهی می‌کند، یعنی border-width، border-style و border-color به نوبه‌ی خود یک پراپرتی اختصاری هستند. در حقیقت، هر یک از این سه پراپرتی می‌تواند چهار پراپرتی دیگر را به صورت هم‌زمان مقداردهی کند. برای نمونه، پراپرتی اختصاری border-width دارای فرم کلی زیر است:

border-width: border-top-width border-right-width border-bottom-width border-left-width

پراپرتی‌های اختصاری border-style و border-color نیز ساختار مشابهی دارند؛ یعنی به ترتیب، برای تعیین استایل و رنگ فریم‌های بالا، راست، پایین و چپ کاربرد دارند.

نکات مربوط به پراپرتی‌های اختصاری

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

نکته‌ی اول: پراپرتی‌های اختصاری، استایل‌های مقداردهی نشده را بدون سر و صدا لغو می‌کنند.

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

Copy Icon CSS 
h1{
  font-weight: bold;
}

.title{
  font: 32px Helvetica, Arial, sans-serif;
}

مثال بالا شرایطی را نشان می‌دهد که عدم توجه به نکته‌ی گفته شده در مورد پراپرتی‌های اختصاری، می‌تواند باعث بروز نتیجه‌ای غیرقابل انتظار شود. در اینجا پراپرتی اختصاری font برای مقداردهی به پراپرتی‌های font-size و font-family به کار گرفته شده و سایر پراپرتی‌های ممکن رها شده‌اند. از بین این پراپرتی‌ها، پراپرتی font-weight قبلاً مقداردهی شده و مقدار bold را دریافت کرده اما از آنجایی که مقداردهی نکردن این پراپرتی در قاعده‌ی مربوط به font به معنای بازنشانی آن به مقدار اولیه یعنی normal است، در نهایت، محتوای هدینگ نه به صورت bold بلکه به صورت normal نمایش داده می‌شود. در حقیقت، کد بالا با کد زیر معادل است:

Copy Icon CSS 
h1{
  font-weight: bold;
}

.title{
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  line-height: normal;
  font-size: 32px;
  font-family: Helvetica, Arial, sans-serif;
}

از بین همه‌ی پراپرتی‌های اختصاری، پراپرتی font برای ایجاد مشکلاتی از این دست، مستعدتر است؛ علت این موضوع، تعدد پراپرتی‌هایی است که با استفاده از font قابل مقداردهی هستند. بنابراین، توصیه می‌کنم از پراپرتی اختصاری font جز در مواردی مانند تعیین استایل‌های کلی در عنصر body اجتناب کنید.

نکته‌ی دوم: ترتیب مقادیر پراپرتی‌های اختصاری گاهی مهم است و گاهی خیر.

در مورد برخی از پراپرتی‌های اختصاری، ترتیب مقادیر اهمیتی ندارد و لذا می‌توانیم مقادیر را به هر ترتیبی وارد کنیم. علت این امر، عدم وجود ابهام در مورد مقادیر است. برای مثال، مقادیر پراپرتی border را می‌توان به صورت border: 1px solid black یا به صورت border: solid black 1px یا به هر ترتیب دیگری وارد کرد. عدم وجود ابهام در اینجا به این معناست که روشن است که هر مقدار به کدام پراپرتی متعلق است. ما نمی‌تونیم مقداری مثل 1px را برای یکی از پراپرتی‌های border-color یا border-style در نظر بگیریم. بنابراین، چون ابهامی در مورد اینکه هر مقدار به کدام پراپرتی متعلق است، وجود ندارد، ترتیب وارد کردن مقادیر مهم نیست.

اما قضیه در مورد پراپرتی‌هایی مانند padding و margin یا برخی از پراپرتی‌های مربوط به border که مقادیری را برای هر یک از چهار سمت عنصر تعیین می‌کنند، فرق دارد؛ در مورد این پراپرتی‌ها ترتیب وارد کردن مقادیر مهم است و با شروع از بالا (top) در جهت حرکت عقربه‌های ساعت در نظر گرفته می‌شود. بنابراین، مقدار اول به سمت بالا، مقدار دوم به سمت راست، مقدار سوم به سمت پایین و مقدار چهارم به سمت چپ مربوط می‌شود. مثال زیر را ببینید:

Copy Icon CSS 
.nav a{
  color: white;
  background-color: #13a4a4;
  padding: 10px 15px 0 5px;
  border-radius: 2px;
  text-decoration: none;
}

در اینجا لینک‌های مورد نظر با فاصله‌ی 10px از بالا، 15px از راست، صفر پیکسل از پایین و 5px از سمت چپ نسبت به فریم خود نمایش داده می‌شوند. البته لزومی هم ندارد که هر چهار مقدار را وارد کنیم؛ بلکه می‌توان از یک تا چهار مقدار را برای این پراپرتی‌ها وارد کرد. برای درک معنای یک، دو یا سه مقدار، یک نکته‌ی کلیدی وجود دارد که از این قرار است:

در صورت تخصیص کمتر از چهار مقدار، هر جهت یا سمتی که مقداری دریافت نکرده، مقدارش را از جهت مخالف خود دریافت می‌کند.

بنابراین، اگر سه مقدار وارد شده باشد، مقدار چهارم که به سمت چپ مربوط است، از روی مقدار دوم که به سمت راست مربوط است، دریافت می‌شود. به همین ترتیب، اگر دو مقدار وارد شود، مقدار اول به سمت بالا و پایین و مقدار دوم به سمت چپ و راست اختصاص داده می‌شود. همچنین، اگر فقط یک مقدار وارد شود، همان مقدار برای همه‌ی جهت‌ها در نظر گرفته می شود.

گروه دیگری از پراپرتی‌ها هستند که حداکثر دو مقدار را دریافت می‌کنند. برای مثال، می‌توانیم از پراپرتی‌های background-position و box-shadow یا text-shadow نام ببریم (دقت داشته باشید که اینها پراپرتی‌های اختصاری نیستند). در مورد این پراپرتی‌ها، دستگاه مختصات دکارتی را ملاک تعیین ترتیب قرار می‌دهیم و لذا مقدار اول را برای x یا افقی و مقدار دوم را برای y یا عمودی در نظر می‌گیریم. با این پراپرتی‌ها در فصل‌های آینده آشنا خواهیم شد.