درک ویژگی های CSS: چیست و چگونه کار می کند

ek3nk4r 2023-04-24

0 37 خواندن این مطلب 7 دقیقه زمان میبرد

درک ویژگی های CSS: چیست و چگونه کار می کند

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

هنگامی که صحبت از ایجاد سبک برای صفحات وب می شود، Cascading Style Sheets (CSS) ابزار ترجیحی بسیاری از توسعه دهندگان است. با این حال، یک جنبه از CSS وجود دارد که می تواند منبع سردرگمی باشد: اختصاصی.

به طور خاص، چگونه CSS تعیین می‌کند که وقتی چندین قانون برای یک عنصر اعمال می‌شود، کدام قوانین سبک اعمال می‌شود؟ اینجاست که مشخص بودن مطرح می شود.

فهرست مطالب

ویژگی CSS چیست؟

CSS Specificity به مجموعه قوانینی اشاره دارد که تعیین می کند کدام قانون CSS برای یک عنصر در یک صفحه وب اعمال می شود. ویژگی یک انتخابگر با میزان جزئیات آن اندازه گیری می شود. به طور کلی، هر چه یک قانون خاص تر باشد، وزن بیشتری دارد.

نحوه محاسبه ویژگی CSS

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

سبک های درون خطی
شناسنامه ها
کلاس ها، ویژگی ها و شبه کلاس ها
عناصر و شبه عناصر

از نظر ویژگی، هر دسته وزن بیشتری نسبت به قبل دارد. به عنوان مثال، #id خاص تر از .class در نظر گرفته می شود که خاص تر از عنصر است.

برای تعیین ویژگی یک قانون خاص، تعداد وقوع هر یک از این انتخابگرها را در قانون جمع می‌کنید. مثلا:

div .myclass p {
  font-size: 24px;
}

این قانون ویژگی font-size را برای همه عناصر p که فرزندان یک عنصر با class=”myclass هستند” اعمال می کند، که به نوبه خود از نسل یک عنصر div است. ویژگی CSS این مثال عبارت است از:

انتخابگر عنصر: 1
انتخابگر کلاس: 1
ترکیب کننده تبار (فضا): 1
ویژگی کل: 1-1-1

چهار سطح ویژگی

چهار سطح متمایز از ویژگی در CSS وجود دارد:

انتخابگر جهانی. این انتخابگر دارای ویژگی 0 است، به این معنی که اصلاً تأثیری در محاسبات ویژگی ندارد. با یک ستاره – * نشان داده می شود.
انتخابگرهای نوع و شبه عناصر. انتخابگرهای نوع برای عناصر یک نوع خاص مانند div، p یا a اعمال می شوند. آنها دارای ویژگی 1 هستند. عناصر شبه ::before و ::after نیز می توانند در این دسته قرار گیرند زیرا از نظر فنی “انتخابگر” نیستند اما بر ویژگی تاثیر می گذارند. آنها همچنین دارای ویژگی 1 هستند.
انتخابگرهای کلاس، انتخابگرهای ویژگی و شبه کلاسها. انتخابگرهای کلاس با نقطه (.) شروع می شوند، انتخابگرهای ویژگی از براکت استفاده می کنند (.[ ]) و قبل از کلاس های کاذب علامت دو نقطه (:) قرار می گیرد. همه آنها دارای ویژگی 10 هستند.
انتخابگرهای شناسه. شناسه ها با استفاده از هش (#) انتخاب می شوند و بالاترین سطح ویژگی 100 را دارند.

برای درک این موضوع، قوانین CSS زیر را در نظر بگیرید:

#menu a {...} /* specificity: 100 + 1 = 101 */
.main-nav a {...} /* specificity: 10 + 1 = 11 */
a {...} /* specificity: 1 */

در اینجا، انتخابگر #menu دارای بالاترین ویژگی، در 101 است. در همین حال، a برای همه عناصر اعمال می شود، بنابراین قوانین آن در آخر اعمال خواهد شد.

ویژگی و استفاده از ترکیب کننده ها

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

ترکیب زاده – که با یک فاصله نمایش داده می شود – که عناصری را انتخاب می کند که فرزندان عنصر اول هستند.
ترکیب‌کننده کودک – که با نماد بزرگتر از > نشان داده می‌شود – که فقط عناصر فرزند مستقیم عنصر اول را انتخاب می‌کند.
ترکیب کننده خواهر و برادر مجاور – که با علامت + – نشان داده می شود که اولین خواهر و برادر را بلافاصله بعد از اولین عنصر انتخاب می کند.
ترکیب کننده خواهر و برادر عمومی – نشان داده شده توسط یک tilde ~ – که تمام خواهر و برادرهایی را که از عنصر اول پیروی می کنند انتخاب می کند.

برای درک این موضوع، مثال های زیر را بررسی کنید:

ترکیب کننده نسل – 0 امتیاز اضافه می کند

body p { /* 0 points */ }

Child Combinator > – 1 امتیاز اضافه می کند

nav > ul { /* 1 point */ }

ترکیب کننده خواهر و برادر مجاور + – 1 امتیاز اضافه می کند

h2 + p { /* 1 point */ }

ترکیب کننده خواهر و برادر عمومی ~ – 0 امتیاز اضافه می کند

h2 ~ p { /* 0 points */ }

توجه به این نکته مهم است که ترکیب‌کننده‌ها می‌توانند امتیازاتی را به ویژگی انتخابگر اضافه کنند، اما بر اولویت انتخابگرهایی با مقادیر ویژگی بالاتر تأثیر نمی‌گذارند.

ویژگی CSS با سبک های جاسازی شده و درون خطی

ویژگی CSS نیز می تواند بسته به محل تعریف استایل ها و نحوه تعریف آنها متفاوت باشد.

مثلا:

سبک های تعبیه شده

<head>
  <title>CSS Specificity Example</title>
  <style>
    h1 {
      color: red; /* specificity: 1 */
    }

    #header h1 {
      color: blue; /* specificity: 101 */
    }
  </style>
</head>
<body>
  <div id="header">
    <h1>CSS Specificity Example</h1>
  </div>
</body>

در اینجا دو قانون برای تگ های h1 داریم – یکی با ویژگی 1 و دیگری با ویژگی 101. قانون #header h1 باید خاص تر باشد و قانون h1 را لغو کند، اما هر دو در یک stylesheet تعبیه شده در head تعریف شده اند. بخش سند HTML

سبک های درون خطی

<body>
  <div id="header">
    <h1 style="color: green;">CSS Specificity Example</h1>
  </div>
</body>

در این مثال، رنگ عنصر h1 در یک سبک درون خطی تعریف شده است. با توجه به سلسله مراتب اختصاصی ما، یک سبک درون خطی دارای ویژگی 1000 است. بنابراین، به طور پیش فرض هر سبک متضاد دیگری را لغو می کند.

نادیده گرفتن ویژگی CSS

چندین راه برای نادیده گرفتن قوانین اختصاصی CSS وجود دارد. در اینجا دو مورد رایج وجود دارد:

استفاده از مهم

p {
  color: red !important; /* specificity: 1 */
}

.text-italic {
  color: blue; /* specificity: 10 */
}

در این مثال، رنگ تمام عناصر p قرمز خواهد بود، زیرا کلمه کلیدی !important به قانون اضافه شده است.

استفاده از انتخابگرها

p#paragraph {
  color: blue;
}

.text-italic p {
  color: red;
}

در اینجا، تمام پاراگراف های دارای id=”paragraph” آبی خواهند بود، اما تمام پاراگراف هایی که از نوادگان عناصر با کلاس text-italic هستند قرمز خواهند بود.

نمونه های پیشرفته

به عنوان یک قاعده کلی، انتخابگرهای سمت راست دارای ویژگی بالاتری نسبت به سمت چپ هستند، بنابراین a.special خاص تر از .special است، اما کمتر از p#large.special است.

در اینجا چند مثال دیگر وجود دارد که نشان می دهد ویژگی CSS چگونه کار می کند:

رنگ پاراگراف در هر مثال چیست؟

مثال 1/2

<p class="red">
  I'm a red paragraph!
</p>

<style>
  p.red {
    color: red;
  }

  .red {
    color: blue;
  }
</style>

عنصر پاراگراف دارای متن قرمز خواهد بود زیرا انتخابگر CSS .red خاص تر از انتخابگر کلاس p.red است. انتخابگر p.red دارای ویژگی 11 است، زیرا انتخابگرهای کلاس ده امتیاز و انتخابگر عنصر یک امتیاز دارند.

مثال 2/2

<div>
 <p id="green">
   I'm a green paragraph!
 </p>
</div>

<style>
  div #green {
    color: green;
  }

  #green {
    color: blue;
  }
</style>

در این مثال، عنصر پاراگراف دارای متن سبز است زیرا انتخابگر CSS div #green از انتخابگر ID #سبز خاص‌تر است. انتخابگر div #سبز دارای ویژگی 12 است، در حالی که انتخابگر #سبز دارای ویژگی 100 است. در اینجا، انتخابگر خاص div #green بر انتخابگر ID کمتر خاص #سبز پیروز می شود.

نکاتی که باید به خاطر بسپارید

در اینجا 3 نکته وجود دارد که باید قبل از شروع به طراحی صفحه خود به خاطر بسپارید:

1️⃣ ویژگی های سبک درون خطی نسبت به هر نوع انتخابگر دیگری ارزش ویژه ای دارند.

<p id="my-id" class="my-class" style="color: red;">Inline styles win!</p>

در مثال بالا، رنگ پاراگراف قرمز خواهد بود، حتی اگر انتخابگر ID دارای مقدار ویژگی بالاتر باشد.

2️⃣شبه کلاس ها و شبه عناصر ارزش ویژه خود را دارند.

.my-class:focus { /* 1 point */ }

.my-class::before { /* 1 point */ }

در مثال بالا، هر دو شبه کلاس :focus و شبه عنصر ::prefore دارای مقدار ویژگی 1 نقطه هستند.

3️⃣ مقادیر Specificity را می توان با استفاده از بسته npm اختصاصی یا ماشین حساب آنلاین محاسبه کرد.

const getSpecificity = require('specificity');

const selectors = [
  'p',
  '.my-class',
  '#my-id',
  'body p',
  'nav > ul',
  'h2 + p',
  'h2 ~ p',
  '.my-class:focus',
  '.my-class::before'
];

selectors.forEach(selector => {
  console.log(getSpecificity(selector)[0].specificity);
});

در مثال بالا، می‌توانیم مقادیر ویژگی هر انتخابگر را با استفاده از بسته npm اختصاصی محاسبه کنیم.

با در نظر گرفتن این نکات اضافی، می توانید درک عمیق تری از نحوه عملکرد اختصاصی بودن در CSS و نحوه استفاده موثر از آن در کد خود به دست آورید.

نتیجه

ویژگی CSS در ابتدا می تواند پیچیده به نظر برسد، اما یک مفهوم ضروری برای هر توسعه دهنده وب است. با درک نحوه عملکرد انتخابگرهای خاص و ترکیب‌کننده، می‌توانید مطمئن شوید که سبک‌های شما به طور مداوم بر روی عناصر HTML اعمال می‌شوند، بدون اینکه دچار تضاد ویژگی یا سایر مسائلی شوید که می‌تواند باعث نمایش نادرست وب‌سایت شما شود.

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