اختصاصی بودن در سی اس اس- قسمت سوم(مثال های تکمیلی)
در دو قسمت قبل (اینجا و اینجا) بسیار از اسپسیفیسیتی گفتیم. در قسمت سوم و پایانی باز هم مثال های بیشتری از این مبنا را آورده ایم. در صورتی که فکر می کنید مبحث اسپسیفیسیتی را درک کرده اید، دیگر نیازی به خواندن مقاله حاضر ندارید، هر چند در ادامه مطلب نکات آموزشی جالبی خواهید یافت.
در صورت تمایل می توانید خودتان هم دست به کار شوید، کدهای مقاله را در کامپیوترتان کپی و نتیجه آنها را ببینید (کدها را در مرورگر باز کنید).
برای این کار ابتدا یک فایل index.html با محتوای زیر می سازیم.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://learning-web-design.rozblog.com/main.css" type="text/css">
</head>
<body>
<div id="page" class="page">
<p id="content" class="content texts" style="height:200px"></p>
</div>
</body>
</html>
قسمت اصلی متن اچ تی ام ال بالا اینجاست:
<div id="page" class="page">
<p id="content" class="content texts" style="height:200px"></p>
</div>
در این کد، یک دیو (div) داریم که یک المنت p داخلش است. برای ارتفاع گرفتن به p استایل داده ایم که ۲۰۰ پیکسل ارتفاع داشته باشد. حالا فرض کنید می خواهیم p را رنگ پس زمینه (background) بدهیم. برای این کار ابتدا یک فایل سی اس اس با نام main.css (که در اچ تی ام ال آدرسش داده ایم) را کنار فایل index.html می سازیم و عبارات پایین را در آن کپی می کنیم:
p {
background:red;
}
p {
background:blue;
}
خب. فکر می کنید p به چه رنگی در می آید؟
آبی، چون هر دو سلکتور دارای یک المنت هستند و یک امتیاز دارند. پس دستور دوم (مربوط به بکگراند آبی) چون پایین تر نوشته شده، وزن بیشتری دارد و اعمال می شود.
div p {
background:red;
}
p {
background:blue;
}
حالا چطور؟
قرمز (۲ امتیاز)، چون اکنون دو استایل تفاوتی مهم تر از پایین یا بالا بودن دارند.
استایل بالایی دقیق تر است. او توضیح داده که p هایی که داخل دیو هستند. در حالی که استایل پایینی به تمام p ها اشاره دارد.
div p {
background:red;
}
div p {
background:blue;
}
حالا چطور؟
آبی.
مشخص است. چون دو استایل مشابه اند و آبی پایین تر است.
.content {
background:red;
}
body div p {
background:blue;
}
قرمز (۱۰ امتیاز).
.texts {
background:red;
}
.content {
background:blue;
}
آبی. اگر به متن اچ تی ام ال اولیه نگاه کنید می بینید که المنت p دو کلاس مختلف
(content texts) دارد که با اسپیس از هم جدا شده اند. حال ما در اینجا به این دو کلاس، دو استایل مخالف داده ایم. طبعا آنی که پایین تر است وزن بیشتری داشته و اعمال می شود.
div .content {
background:red;
}
.content {
background:blue;
}
قرمز (۱۱ امتیاز).
p.content {
background:red;
}
div .content {
background:blue;
}
آبی. در اینجا هر دو یک کلاس و یک المنت دارند. پس پایینی وزن بیشتری دارد. توجه کنید در بالایی p به کلاس چسپیده است و می گوید که استایل مخصوص آنهایی است که هم p باشند و هم کلاس content داشته باشند. پایینی به معنی آنهایی است که کلاس content دارند و داخل یک div هستند.
.page .content {
background:red;
}
body div p.content {
background:blue;
}
قرمز (۲۰ امتیاز). می بینید که زور دو کلاس از یک کلاس و سه المنت هم بیشتر است. پس اگر در جایی به استایلی برخوردید و هر کار کردید نتوانستید تعداد المنت هایتان را به حدی برسانید که استایل شما سنگین تر از آن باشد، تعداد کلاس ها را افزایش دهید. حتی یک کلاس بیشتر کفه ترازو را به سمت شما برمی گرداند.
#content {
background:red;
}
body div.page p.content {
background:blue;
}
قرمز (۱۰۰ امتیاز). id بالاترین دستوری است که در حالت عادی، مجاز به استفاده از آن هستید. همان طور که در تصویر می بینید به تنهایی دو کلاس و سه المنت را حریف است.
پس اگر مثلا در سیستم وردپرس، جوملا، دروپال یا جای دیگری در حال کار هستید و خود سیستم استایلی داده که در آن id به کار رفته، شما هم باید به دنبال یک id بگردید. شاید دیوی که شما قصد دادن استایل به آن را دارید id نداشته باشد، اما مطمئنا یکی از دیوهای بالاتر (دیوهای پدر = دیوهایی که دیو مورد نظر شما داخل شان قرار گرفته) id دارد. برای توضیح یک مثال پیچیده تر می زنیم:
<div class="page main-content">
<div id="block-system-main" class="block block-system">
<div class="region region-content">
<div class="content">
<p>Id is so powerful</p>
</div>
<div class="content2">
<p>power of Class is moderate</p>
</div>
</div>
</div>
</div>
در اچ تی ام ال بالا دو المنت پی (p) داریم. قصد داریم عبارت Id is so powerful را رنگی کنیم اما عبارت power of Class is moderate تغییری نکند. عبارت اول داخل دیوی با کلاس content و دومی داخل دیوی با کلاس content2 است. مشخص است که باید از کلاس content استفاده کنیم تا استایل ما فقط به عبارت بالایی اعمال شود. پس به صورت زیر استایل می نویسیم:
.content {
color:red;
}
اما می بینیم که استایل ما اعمال نمی شود، چون استایل زیر که وزنش از استایل ما بیشتر است، رنگ را تعیین کرده و اجازه تغییر به ما نمی دهد.
.main-content .block .content {
color:blue;
}
لطفا دست به اسلحه important نبرید! هنوز خیلی زود است.
برای حل مشکل باید یک id برای خودتان پیدا کنید. نگاه به دیوهای بالاتر از content می کنیم.
بله، یکی از آنها id=block-system-main دارد. استایل مان را به صورت زیر باز نویسی می کنیم:
#block-system-main .content {
color:red;
}
و هورا. ما برنده شدیم. با همین کار ساده وزن استایل ما افزایش یافت.
نکته: به همین دلیل است که توصیه می کنیم همیشه از کلاس استفاده کنید. به این ترتیب در مواقع ضروری می توانید به دیو موردنظرتان id بدهید و دستور سنگین تری اعمال کنید. در حالی که اگر تمام استایل ها با id داده شده باشند، تنها گزینه های سنگین تر Style attribute (دادن استایل در داخل اچ تی ام ال) است که بسیار غیر استاندارد است و important که لعنت بسیار بر او باد!
گفتیم که important قوی ترین دستور است. حالا به مثال زیر توجه کنید:
div#content {
background:red !important;
}
#content {
background:blue;
}
فرض کنید که از شما می خواهند دستور پایینی را آنقدر قوی کنید که اعمال شود و بکگراند آبی گردد. طبق توضیحات قبلی، تنها راه استفاده دوباره از important و در نهایت سنگین تر کردن آن با آی دی ها است. مانند زیر:
div#content {
background:red !important;
}
#page #content {
background:blue !important;
}
حاصل این جنگ بزرگ با تلفات بسیار آن رنگ آبی است (۱۰۲۰۰). در اینجا برای غلبه بر دستور بالایی که یک important ، یک id ، یک المنت دارد، یک important و دو آی دی نوشته ایم. حالا اگر بعدا بخواهید دستور پایینی را تغییر دهید، به یک important و سه id و یا یک important و دو id به شرطی که دستور سوم پایین تر از دستور دوم نوشته شده باشد، نیاز دارید.
مشکل استفاده مداوم از important
همان طور که می بنید، اگر زیاد از important استفاده کنید، در زمانی که تداخل پیش بیاید و شما بخواهید از دستوری سنگین تر استفاده کنید، باز هم مجبور به استفاده از important هستید. به عبارت دیگر، زمانی که اولین important به فایل سی اس اس شما راه یابد، کم کم مجبور به استفاده بیشتر و بیشتر از آن می شوید. این فرایند تشدید می شود و در آخر می بینید که هیچ یک از دستورات شما در حالت عادی اجرا نمی شوند و مجبورید به همه important بدهید.
نصیحت های پایانی و تکراری
در این مقالات بسیار از بدی های ایمپورتنت (important) گفتیم، برای جلوگیری از تکرار بیشتر، سخن را با تشبیه و تمثیل به پایان می بریم.
بیایید المنت ها را مانند مورچه، کلاس ها را مانند گربه و آی دی را مانند پلنگ فرض کنیم. هیچ گاه برای شکار یک مورچه از RPG استفاده نمی کنیم. RPG را برای زمانی نگه می داریم که دست تان بسته است و می خواهید با یک مورچه به جنگ پلنگ بروید. این RPG همان ایمپورتنت است.
لطفا سعی بکنید در زمان هایی که تحت فشار زمانی هستید، بر عجله خود غلبه کنید و به دنبال روشی استاندارد بگردید. اگر لازم است برای سنگینی هر چیزی شش تا آی دی کنار هم ردیف کنید اما دست به important نشوید. زیرا در آن صورت دیگر نمی توانید دستوری سنگین تر از آن خلق کنید. در واقع باید important را به عنوان یک سلاح مخفی که هیچ وقت استفاده نمی شود، برای روز مبادا نگه دارید.
در بالا گفتم که شخصا توصیه می کنم در هنگام نوشتن اچ تی ام ال به جای آی دی فقط از کلاس استفاده کنید. زیرا وقتی می توانید از کلاس استفاده بکنید و آی دی را برای خود نگه دارید، چرا چنین نکنید. آی دی را برای روزی نگه دارید تا با آن بقیه دستورات را تغییر دهید. (این توصیه کاملا شخصی است و شاید دلایل بسیار فراوانی وجود داشته باشد که آی دی را بهتر از کلاس بدانند).
و در آخر، قبول داریم که در همیشه روی پاشنه نمی چرخد و گاهی مجبور می شوید آن را با important از جا در آورید. اما حداکثر سعی خود را بکنید تا در همیشه روی پاشنه اش بچرخد. معمولا با کمی تلاش، راه حل های بهتری پیدا می شوند. با آرزوی موفقیت.
</ins>
دردسرهای اینترنت اکسپلورر برای طراحان وب کمتر می شود: راه اندازی سایت Modern.IE