اگر در فضای توسعه وب frontend هستید، CSS یکی از مسائل کلیدی است که باید بلد باشید. چه ترجیح میدهید با CSS خالص کار کنید، یا چه با CSS در JavaScript، دانستن نحوه کار CSS برای کدنویسی کارآمد یک امر حیاتی است. در این پست، به یک ویژگی که معمولا اشتباه درک می‌شود وارد می‌شویم: cascade (حالت آبشاری)
Cascade می‌تواند یک ابزار قدرتمند باشد، اما استفاده نامناسب از آن می‌تواند به stylesheetهای ناپایدار ختم شود که باعث می‌شوند هر زمان که توسعه دهندگان می‌خواهند تغییری ایجاد کنند، ترسی در آن‌ها به وجود بیاید. جدا از وارد شدن به جزئیات cascade، برخی راه‌ها برای جلوگیری از اجبار به استفاده از آن را نیز معرفی خواهیم کرد.
تعریف cascade
در اینجا، تعریفی از cascade را مشاهده می‌کنید:
Cascade لیستی نامرتب از مقادیر یک ویژگی بر روی یک عنصر را می‌گیرد، آن‌ها را بر حسب اولویت تعریفشان مرتب می‌کند، و یک مقدار cascade (آبشاری) تکی را بر می‌گرداند.
Cascade الگوریتمی است که مرورگر با استفاده از آن تصمیم می‌گیرد چه CSSای را به یک عنصر اعمال کند.
برای درک بهتر cascade، بهتر است اینگونه فکر کنید که تعریفات CSS دارای «صفات» هستند. این صفات می‌توانند بخش‌های مختلفی از تعریفات باشند؛ مثلا انتخاب کننده یا ویژگی‌های CSS، یا می‌توانند نمایانگر این باشند که تعریفات CSS در «کجا» قرار دارند. (مثلا منبع آن یا موقعیت آن در سورس کد)
Cascade برخی از این صفات را می‌گیرد و به هر کدام یک وزن اختصاص می‌دهد و الگوریم به cascade کردن (پایین آمدن به صورت آبشاری) ادامه می‌دهد تا صفات با اولیت پایین‌تر را بررسی کند و برنده را پیدا کند.
این‌ها صفاتی هستند که الگوریتم cascade بررسی می‌کند، و از بالاترین سطح به پایین‌ترین سطح چیده شده‌اند:
- منشا و اهمیت
- خصوصیت انتخاب کننده
- ترتیب ظاهر شدن
- ویژگی‌های اولیه وراثتی
نگران نباشید! به هر کدام از این موارد به صورت عمقی وارد خواهیم شد.
منشا و اهمیت
سطح بالاترین صفتی که cascade بررسی می‌کند، ترکیبی از منشا و اهمیت یک مقدار داده شده است.
با توجه به قوانین CSS در زمینه منشا، یک قانون می‌تواند از سه جا بیاید:
- User-Agent: این‌ها استایل‌های پیشفرضی هستند که توسط مرورگر برای عنصر فراهم شده‌اند. به همین علت است که ورودی‌ها می‌توانند در مرورگر‌های مختلف کمی متفاوت باشند، و همچنین به همین علت است که همه دوست دارند از بازنشانی‌های CSS (CSS resets) استفاده کنند تا مطمئن شوند که استایل‌های user-agent بازنویسی شده‌اند.
- User: این‌ها توسط کاربر مرورگر تعریف شده و کنترل می‌شوند. همه کدها یک مورد از آن‌ها را در خودر ندارند، اما وقتی که یک مورد اضافه می‌شود، اکثرا برای بازنویسی وبسایت‌ها و اضافه کردن دسترسی به آن‌ها است.
- Author: این CSSای است که توسط سند HTML تعریف شده است. وقتی که به عنوان توسعه دهندگان frontend شروع به کدنویسی می‌کنیم، این تنها منشا تحت کنترل ما است.
اهمیت تعریفات CSS توسط سینتکس !important تعیین شده است. اضافه کردن !important به یک قانون، به طور خودکار آن را به جلوی الگوریتم cascade می‌فرستد. بازنویسی استایل‌هایی که از !important استفاده می‌کنند، فقط از طریق دیگر قوانینی که از !important استفاده می‌کنند ممکن است، که در گذر زمان می‌تواند CSS شما را ناپایدار کند. اکثرا پیشنهاد می‌شود که از !important به عنوان یک دریچه فرار برای وقتی که همه چیز با شکست مواجه می‌شود استفاده کنید.
الگوریتم cascade در هنگام تعیین این که کدام تعریف برنده می‌شود، ترکیب این ۲ صفت را در نظر می‌گیرد. به هر ترکیب یک سطح داده می‌شود، و تعریفی که بالاترین سطح را دارد پیروز می‌شود. در اینجا، ترکیبات مختلف منشا و اهمیت را که مرورگر در نظر می‌گیرد، چیده شده از سطح بالاترین به سطح پایین‌ترین می‌بینید.
- User-Agent و !important
- User و !important
- Author و !important
- انیمیشن‌های CSS و @keyFrameها
- Author، سطح معمولی
- User، سطح معمولی
- User Agent، سطح معمولی
وقتی که مرورگر با ۲ (یا چند) تعریف CSS در اختلال با یکدیگر مواجه می‌شود و یکی از آن‌ها در سطح منشا و اهمیت پیروز می‌شود، cascade از آن قانون پیروی می‌کند. گرچه اگر تعریفات در اختلال یکدیگر، سطح منشا و اهمیت مشابهی داشته باشند، cascade تصمیم می‌گیرد که خصوصیت انتخاب کننده را در نظر بگیرد.
خصوصیت انتخاب کننده
دومین سطح در cascade، خصوصیت انتخاب کننده است. در این درجه، مرورگر به انتخاب کننده‌های استفاده شده در تعریفات CSS نگاه می‌کند.
شما به عنوان یه توسعه دهنده frontend، فقط بر روی منشا author در وبسایت خود دسترسی دارید؛ پس نمی‌توانید کار زیادی برای تغییر منشا یک قانون انجام دهید. گرچه اگر از استفاده از !important در کد خود جلوگیری کنید، می‌بینید که کنترل خوبی در زمینه خصوصیت cascade خود دارید.
درست به مانند ترکیبات منشا و اهمیت که سطح خود را دارند، انواع مختلف انتخاب کننده‌های CSS نیز اولیوت بندی شده‌اند. وقتی که خصوصیت آن‌ها را ارزیابی می‌کنید، شماره انتخاب کننده‌ها و اولویت آن‌ها در نظر گرفته می‌شود. انتخاب کننده‌های CSS می‌توانند به یکی از این رده‌ها مربوط باشند:
- استایل‌های خطی (هر چیزی داخل یک تگ style)
- انتخاب کننده‌های ID
- کلاس‌ها / شبه انتخاب کننده‌ها
- انتخاب کننده‌های نوع (مثلا h1) و شبه عنصرها (::before)
اگر ۲ تعریف CSS با تعداد انتخاب کننده اولویت بالای مشابه دارید، الگوریتم تفکیک تعداد انتخاب کننده‌ها را در سطح بعدی خصوصیت در نظر خواهد گرفت. برای مثال، اگر هر دو قانون CSS یک عنصر مشابه را هدف قرار می‌دهند، رنگ آن قرمز خواهد بود. علت این است که هر دوی آن‌ها یک انتخاب کننده id دارند، اما قانون دوم دو انتخاب کننده class دارد.
#first .blue h1 {
color: blue;
}
#second .red.bold h1 {
color: red;
}
تعداد زیادی از افراد دوست دارند خصوصیت را به سادگی و با تکیه نکردن به آن مدیریت کنند. پایین نگه داشتن خصوصیت انتخاب کننده خود، تضمین می‌کند که قوانین CSS شما منعطف باقی می‌مانند.
ترتیب منبع
رده بعدی الگوریتم cascade، تفکیک بر حسب ترتیب منبع است. وقتی که دو انتخاب کننده خصوصیت مشابهی دارند، آخرین تعریفی که در سورس کد می‌آید، پیروز می‌شود.
از آنجایی که CSS ترتیب منبع را در cascade در نظر می‌گیرد، ترتیبی که در آن stylesheetهای خود را بارگذاری می‌کنید، اهمیت دارد. اگر دو stylesheet را در بالای سند HTML خود لینک کرده‌اید، stylesheet دوم قوانین stylesheet اول را بازنویسی می‌کند. همچنین علت این که در هنگام استفاده از بازنشانی CSS یا یک فریم‌وورک CSS می‌خواهید آن را قبل از استایل‌های سفارشی خود بارگذاری کنید نیز، همین است.
ویژگی‌های اولیه و وراثتی
با این که مقادیر اولیه و وراثتی در واقع بخشی از cascade نیستند، اما تعیین می‌کنند که اگر هیچ تعریف CSSای نباشد که عنصر مد نظر را هدف قرار دهد، چه اتفاقی می‌افتد. به این صورت، آن‌ها مقدار پیشفرض یک عنصر را تعیین می‌کنند.
ویژگی‌های وراثتی از عناصر والد به عناصر فرزند می‌آیند. برای مثال، ویژگی‌های font-family و color به وراثت می‌رسند. وقتی که مردم کلمه cascade را می‌بینند، این رفتاری است که به ذهن آن‌ها می‌آید؛ زیرا استایل‌ها به فرزندان آن‌ها می‌رسند.
در مثال زیر، تگ <p> با یک فونت یکپارچه و متن قرمز رندر می‌شود، زیرا والد آن شامل آن استایل‌ها است.
<div style="font-family: monospace; color: red;">
<p>inheritance can be super useful!</p>
</div>
برای ویژگی‌های غیر وراثتی، هر عنصر مجموعه‌ای از مقادیر اولیه دارد. این مقادیر در CSS برای یک قانون داده شده تعریف شده‌اند. برای مثال، مقدار اولیه برای ویژگی background-color برابر با transparent است. اگر هیچ تعریف CSSای برای background-color بر روی یک عنصر مقداری تعیین نکند، به طور پیشفرض برابر با transparent خواهد بود.
به علاوه، میتوانید به صراحت استفاده از مقادیر وراثتی یا اولیه در یک تعریف CSS را با استفاده از کلمات کلیدی inherit یا initial در قانون CSS خود تعیین کنید.
div {
background-color: initial;
color: inherit;
}
درک cascade چگونه به ما در نوشتن CSS بهتر کمک می‌کند؟
از آنجایی که cascade یکی از به اشتباه درک شده‌ترین بخش‌های CSS است، دانستن نحوه کار آن بهبود خوبی در نگهداری stylesheetهای خود به شما خواهد داد. دانستن نحوه استفاده از خصوصیت انتخاب کننده CSS به نفع خود، یک مهارت بزرگ است.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید