12
تشکر

وراثت در CSS3

CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

استفاده از مدل آبشاری در نوشتن کدهای CSS کار راحتی است. بیشتر توسعه دهندگان از با کلمه کلیدی inherit آشنا هستند. اما در این مطلب میخواهیم بیشتر با وراثت در CSS3 آشنا شویم.

مقدار inherit

استفاده از کلمه کلیدی inherit به این معنا است که مرورگر از هر مقداری که برای والد استفاده کرده است برای این عنصر هم استفاده کند. اگر والد دارای مقدار مشخصی نباشد مرورگر از درخت DOM بالا میرود و به هر والدی که دارای مقدار مشخصی بود همان را برای آن عنصر اعمال میکند ولی اگر باز هم مقدار مشخصی پیدا نشد از مقدار پیشفرض استفاده میکند.

#myparent
{
  margin: 10px;
  border: 1px solid #000;
}
  /* use the same border as the parent */
#myparent p
{
  border: inherit;
}

در کد بالا مرورگر مقدار خاصیت border برای عنصر p را از همان عنصر والد آن استفاده میکند. البته بعضی از خاصیت ها مانند font, font-size و color به صورت خودکار برای تمام فرزندان یک عنصر اعمال میشود و نیازی به استفاده از inherit نیست.

این خاصیت در تمام مرورگرها به غیر از IE6 و IE7 پشتیبانی میشود.

مقدار initial

استفاده از مقدار initial باعث میشود که مرورگر از مقدار پیشفرض خود برای آن خاصیت استفاده کند.

body
{
  font-size: 0.5em;
}
  /* reset paragraphs to defualt value */
p
{
  font-size: initial;
}

ممکن است در مورد بعضی از خاصیت ها نتوان از مقدار initial استفاده کرد زیرا هر مرورگر مقدار پیشفرض خودش را دارد و سایت خاصیت cross-browser بودنش را از دست میدهد.

این مقدار در مرورگر های Chrome, Firefox, Safari و +Opera 15 پشتیبانی میشود.

مقدار unset

زمانی که از مقدار unset استفاده میشود در ابتدا مانند inherit عمل میکند اما اگر نتواند مقداری را از روش inherit بدست بیاورد به صورت initial عمل میکند و مقدار پیشفرض مرورگر را اعمال میکند.

این مقدار هنوز پشتبانی قوی ندارد.

خاصیت all

خاصیت all تمام مقدارهای بالا را میپذیرد. برای مثال کد زیرتمام خاصیت های عنصر مربوطه را به مقدار پیشفرض مرورگر تبدیل میکند.

#mywidget
{
  all: initial;
}

متاسفانه استفاده از موارد گفته شده ممکن است در مواردی نتایج متفاوتی در مرورگرهای مختلف داشته باشد. اما در بعضی از خاصیت ها مانند display و position و … استفاده از این مقادیر نتایج یکسانی به همراه دارد

  • رضا می‌گه:

    سلام
    لطفا زود تر مطلب بزارید
    خیلی دید به دیر سایتتون آپدیت می شه
    ممنون


  • نظرات این مطلب بسته است.