به کارگاه ترجمه ی سینا2 خوش آمدید!

تبلیغات شما در اینجا بالا

گروه بندی اعلان ها در CSS

چونکه ما می توانیم سلکتورها را در داخل یک دستور(rule) گروه بندی کنیم، میتوانیم اعلان ها(declarations) را نیز گروه بندی کنیم.

تعریف اعلان ها در CSS

فرض کنید که ما می خواهیم تمام عناصر h1 به رنگ متن بنفش(purple) در بیایند و اندازه فونت 18 پیکسل داشته باشند و متن آنها از فونت Helvetica استفاده کند و رنگ پس زمینه ی آنها aqua  باشد؛ برای این کار می توانید از استایل زیر استفاده کنید: 

h1 {font: 18px Helvetica;}
h1 {color: purple;}
h1 {background: aqua;}

اما این روش، ناکارآمد است-زیرا فرض کنید یک عنصر داریم که 10 یا 15 استایل داشته باشد، در این صورت آیا ما باید 10 یا 15 دستور برای آن بنویسیم؟ به جای این کار، ما می توانیم اعلان های(declarations) خود را گروه بندی کنیم:

h1 {font: 18px Helvetica; color: purple; background: aqua;}

 کد بالا دقیقا همان کاری را می کند که سه خط کد بالا تر انجام می دهند. توجه کنید که استفاده از سمی کالن(;) در انتهای هر اعلان(declaration) در گروه بندی ضروی است. مرورگرها، فاصله های سفید را در برگه های استایل نادیده می گیرند،چون که user agent باید برای تجزیه ی برگه ی استایل، به سینتکس صحیح تکیه کند. ما می توانیم بدون هیچ ترسی، استایل های خود را به روش های زیر فرمت دهی کنیم:

h1 {
font: 18px Helvetica;
color: purple;
background: aqua;
}

 همچنین می توانیم کدهای CSS خود را با حذف تمام فاصله های غیر ضروری، خلاصه سازی(minimize) کنیم.

h1{font:18px Helvetica;color:purple;background:aqua;}

ممکن است شما به خاطر کارایی شبکه(network performance) بخواهید فایل CSS خود را فشرده سازی کنید، اما این کار معمولا توسط یک اسکریپت سمت سرور یا شبکه دخیره سازی(caching network) یا دیگر سرویس ها انجام می شود. اگر سمی کالن را در دومین عبارت ننویسیم، user agent این برگه ی استایل را به صورت زیر تفسیر می کند:

h1 {
font: 18px Helvetica;
color: purple background: aqua;
}

 چون که background یک مقدار معتبر برای color نیست و چونکه می توانیم به  color تنها یک کلمه ی کلیدی بدهیم، user agent اعلان color را به همراه عبارت background: aqua  کاملا نادیده می گیرد. ممکن است فکر کنید که مرورگر می توانست رنگ متن h1 را به رنگ بنفش(purple ) در بیاورد، بدون اینکه background را به رنگ aqua در بیاورد؛ اما این طور نیست. اما به جای این کار، عناصر h1 به رنگ(color) پیش فرض (که معمولا مشکی یا balck است) در می آیند و یک پس زمینه ی(background) شفاف خواهند داشت(که این هم یک پیش فرض است). اما اعلان font: 18px Helvetica هنوز هم تاثیر گذار است، زیرا به درستی با یک سمی کالن به این دستور خاتمه داده شده است.

 

نکته:

با اینکه از نظر تکنیکی ضروری نیست که در انتهای آخرین اعلان(declaration) از یک دستور(rule) در CSS، از یک سمی کالن استفاده کنیم، اما به طور کلی تمرین خوبی است که این کار را انجام دهیم. اولا  باید عادت کنید تا در پایان اعلان های CSS از سمی کالن استفاده کنید زیرا فقدان سمی کالن یکی از مهمترین دلایل ایجاد خطاها است. دوما اگر بخواهید یک اعلان دیگررا به دستورات(rule) اضافه کنید، در مورد اینکه ممکن است سمی کالن را فراموش کرده باشید یا نه، نگرانی نخواهید داشت.  سوما اگر شما از یک پیش پردازنده مانند Sass استفاده می کنید، اغلب به سمی کالن های پایانی برای تمام اعلان ها نیاز داریم. برای اجتناب از این مسائل، سعی کنید همواره در انتهای یک اعلان، از سمی کالن استفاده کنید.

درست مانند گروه بندی کردن سلکتورها، گروه بندی کردن اعلان ها نیز یک راه ساده برای کوتاه کردن برگه های استایل و نگهداری بهتر آنها محسوب می شود.

!Donate

نوشتن دیدگاه

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


تصویر امنیتی
تصویر امنیتی جدید

ستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعال