آموزش CSS مبتدی : لایه‌های آبشاری

هدف این درس آشنایی شما با لایه‌های آبشاری است، یک ویژگی پیشرفته‌تر که بر اساس مفاهیم اساسی آبشاری CSS و ویژگی CSS بنا شده است. اگر در CSS تازه‌کار هستید، ممکن است مطالعه این درس در ابتدا بی‌ربط و کمی آکادمیک‌تر از برخی بخش‌های دیگر دوره به نظر برسد. با این حال، دانستن اصول اولیه لایه‌های آبشاری در صورت مواجهه با آنها در پروژه‌هایتان مفید است. هرچه بیشتر با CSS کار کنید، درک لایه‌های آبشاری و دانستن نحوه استفاده از قدرت آنها، شما را از دردسرهای مدیریت یک کد با CSS از طرف‌های مختلف، افزونه‌ها و تیم‌های توسعه نجات می‌دهد. لایه‌های آبشاری زمانی بیشترین اهمیت را دارند که با CSS از منابع مختلف کار می‌کنید، زمانی که انتخابگرهای CSS متناقض و ویژگی‌های رقابتی وجود دارد، یا زمانی که استفاده از important را در نظر دارید.

برای هر ویژگی CSS که به یک عنصر اعمال می‌شود، فقط یک مقدار می‌تواند وجود داشته باشد. می‌توانید با بررسی عنصر در ابزارهای توسعه‌دهنده مرورگر خود، تمام مقادیر ویژگی اعمال شده به یک عنصر را مشاهده کنید. پنل «Styles» این ابزار، تمام مقادیر ویژگی اعمال شده به عنصر مورد بررسی را به همراه انتخابگر منطبق و فایل منبع CSS نشان می‌دهد. انتخابگر از مبدا با اولویت، مقادیر خود را بر روی عنصر منطبق اعمال می‌کند. علاوه بر سبک‌های اعمال شده، پنل Styles مقادیر خط خورده‌ای را که با عنصر انتخاب شده مطابقت دارند اما به دلیل آبشاری بودن، ویژگی یا ترتیب منبع اعمال نشده‌اند، نمایش می‌دهد. سبک‌های خط خورده ممکن است از همان مبدا با اولویت اما با ویژگی کمتر یا با ویژگی و ویژگی منطبق باشند، اما قبلاً در پایگاه کد یافت شده‌اند. برای هر مقدار ویژگی اعمال شده، ممکن است چندین اعلان خط خورده از منابع مختلف وجود داشته باشد. اگر سبکی را مشاهده کردید که خط خورده و انتخابگر با ویژگی بیشتری دارد، به این معنی است که مقدار فاقد منشأ یا اهمیت است. اغلب، با افزایش پیچیدگی یک سایت، تعداد استایل‌شیت‌ها افزایش می‌یابد که باعث می‌شود ترتیب منبع استایل‌شیت‌ها هم مهم‌تر و هم پیچیده‌تر شود. لایه‌های آبشاری، نگهداری استایل‌شیت‌ها را در چنین پایگاه‌های کدی ساده می‌کنند. لایه‌های آبشاری، محفظه‌های اختصاصی‌سازی صریحی هستند که کنترل ساده‌تر و بیشتری بر اعلان‌های CSS که در نهایت اعمال می‌شوند، ارائه می‌دهند و به توسعه‌دهندگان وب این امکان را می‌دهند که بخش‌های CSS را بدون نیاز به مقابله با اختصاصی‌سازی، اولویت‌بندی کنند. برای درک لایه‌های آبشاری، باید آبشار CSS را به خوبی درک کنید. بخش‌های زیر خلاصه‌ای سریع از مفاهیم مهم آبشاری ارائه می‌دهند.

بررسی مفهوم آبشار

حرف «C» در CSS مخفف «Cascading» است. این روشی است که استایل‌ها به صورت آبشاری به هم متصل می‌شوند. عامل کاربر چندین مرحله‌ی کاملاً مشخص را طی می‌کند تا مقادیر اختصاص داده شده به هر ویژگی برای هر عنصر را تعیین کند. ما به طور خلاصه این مراحل را در اینجا فهرست می‌کنیم و سپس به مرحله‌ی ۴، لایه‌های آبشاری، که چیزی است که شما برای یادگیری آن به اینجا آمده‌اید، عمیق‌تر می‌پردازیم: ارتباط: تمام بلوک‌های اعلان را با یک انتخابگر منطبق برای هر عنصر پیدا کنید. اهمیت: قوانین را بر اساس اینکه آیا معمولی هستند یا مهم، مرتب کنید. سبک‌های مهم آنهایی هستند که پرچم روی آنها تنظیم شده است. منشأ: در هر یک از دو سطل اهمیت، قوانین را بر اساس مبدأ نویسنده، کاربر یا مبدأ عامل کاربر مرتب کنید. لایه‌های آبشاری: در هر یک از شش سطل اهمیت مبدأ، بر اساس لایه آبشاری مرتب کنید. ترتیب لایه برای اعلان‌های معمولی از اولین لایه ایجاد شده تا آخرین لایه است و پس از آن سبک‌های معمولی بدون لایه قرار دارند. این ترتیب برای سبک‌های مهم برعکس است، به طوری که سبک‌های مهم بدون لایه کمترین اولویت را دارند. ویژگی: برای سبک‌های رقیب در لایه مبدأ با اولویت، اعلان‌ها را بر اساس ویژگی مرتب کنید. مجاورت محدوده‌بندی: وقتی دو انتخابگر در لایه مبدأ با اولویت، ویژگی یکسانی داشته باشند، مقدار ویژگی در قوانین محدوده‌بندی‌شده با کمترین تعداد جهش در سلسله مراتب DOM به ریشه محدوده‌بندی برنده می‌شود. برای جزئیات بیشتر و یک مثال، به نحوه حل تعارضات

پایگاه‌های کد بزرگ می‌توانند styleهایی از چندین تیم، کتابخانه‌های کامپوننت، چارچوب‌ها و اشخاص ثالث داشته باشند. مهم نیست چند stylesheet گنجانده شده باشد، همه این styleها در یک منبع واحد به صورت آبشاری به هم متصل می‌شوند: stylesheet نویسنده. اینکه styleها از منابع مختلف به صورت آبشاری به هم متصل شوند، به خصوص از تیم‌هایی که با هم کار نمی‌کنند، می‌تواند مشکلاتی ایجاد کند. تیم‌های مختلف ممکن است روش‌های متفاوتی داشته باشند؛ یکی ممکن است بهترین روش کاهش ویژگی را داشته باشد، در حالی که دیگری ممکن است استانداردی برای گنجاندن یک id در هر انتخابگر داشته باشد. تضادهای ویژگی می‌توانند به سرعت تشدید شوند. یک توسعه‌دهنده وب ممکن است با اضافه کردن یک پرچم یک "راه حل سریع" ایجاد کند. اگرچه این ممکن است یک راه حل آسان به نظر برسد، اما اغلب فقط جنگ ویژگی را از اعلان‌های عادی به اعلان‌های مهم منتقل می‌کند. همانطور که ریشه‌های آبشاری تعادل قدرت بین styleهای کاربر، عامل‌های کاربر و نویسنده را فراهم می‌کنند، لایه‌های آبشاری روشی ساختاریافته برای سازماندهی و متعادل کردن نگرانی‌ها در یک منبع واحد ارائه می‌دهند، گویی هر لایه در یک منبع، یک زیرمنبع است. می‌توان برای هر تیم، کامپوننت و شخص ثالث، یک لایه با اولویت style بر اساس ترتیب لایه ایجاد کرد. قوانین درون یک لایه، بدون رقابت با قوانین سبک خارج از لایه، به صورت آبشاری با هم ترکیب می‌شوند. لایه‌های آبشاری، اولویت‌بندی کل stylesheetها را نسبت به سایر stylesheetها امکان‌پذیر می‌کنند، بدون اینکه نگران اختصاصی بودن بین این sub-originها باشند. اولویت لایه همیشه بر اختصاصی بودن انتخابگر برتری دارد. استایل‌ها در لایه‌های دارای اولویت، بر لایه‌هایی با اولویت کمتر "پیروز" می‌شوند. اختصاصی بودن یک انتخابگر در یک لایه بازنده بی‌ربط است. اختصاصی بودن هنوز برای مقادیر ویژگی رقابتی درون یک لایه اهمیت دارد، اما هیچ نگرانی در مورد اختصاصی بودن بین لایه‌ها وجود ندارد زیرا فقط لایه با بالاترین اولویت برای هر ویژگی در نظر گرفته می‌شود.

لایه‌های آبشاری امکان ایجاد لایه‌های تو در تو را فراهم می‌کنند. هر لایه آبشاری می‌تواند شامل لایه‌های تو در تو باشد. به عنوان مثال، یک کتابخانه کامپوننت می‌تواند به یک لایه کامپوننت وارد شود. یک لایه آبشاری معمولی، کتابخانه کامپوننت را به مبدأ نویسنده اضافه می‌کند و هرگونه تضاد ویژگی با سایر سبک‌های نویسنده را از بین می‌برد. در داخل لایه کامپوننت‌ها، یک توسعه‌دهنده می‌تواند تم‌های مختلفی را تعریف کند که هر کدام به عنوان یک لایه تو در تو جداگانه هستند. ترتیب این لایه‌های تم تو در تو را می‌توان بر اساس پرس‌وجوهای رسانه‌ای (به بخش ایجاد لایه و پرس‌وجوهای رسانه‌ای در زیر مراجعه کنید)، مانند اندازه یا جهت نمای دید، تعریف کرد. این لایه‌های تو در تو راهی برای ایجاد تم‌هایی فراهم می‌کنند که بر اساس ویژگی با هم تضاد ندارند. قابلیت تو در تو کردن لایه‌ها برای هر کسی که روی توسعه کتابخانه‌های کامپوننت، چارچوب‌ها، ویجت‌های شخص ثالث و تم‌ها کار می‌کند، بسیار مفید است. قابلیت ایجاد لایه‌های تو در تو همچنین نگرانی از داشتن نام‌های لایه متناقض را از بین می‌برد. ما این موضوع را در بخش لایه تو در تو پوشش خواهیم داد. نویسندگان می‌توانند لایه‌هایی برای نمایش پیش‌فرض‌های عناصر، کتابخانه‌های شخص ثالث، تم‌ها، کامپوننت‌ها، لغوها و سایر موارد مربوط به styleبندی ایجاد کنند - و می‌توانند آبشار لایه‌ها را به روشی صریح، بدون تغییر انتخابگرها یا ویژگی در هر لایه، یا با تکیه بر ترتیب ظاهر برای حل اختلافات بین لایه‌ها، دوباره مرتب کنند.

در CSS بالا، ما پنج لایه ایجاد کردیم: - به همین ترتیب - با یک لایه ششم، ضمنی از استایل‌های بدون لایه که در بلوک استایل بدنه قرار دارد. ترتیب لایه، ترتیبی است که لایه‌ها ایجاد می‌شوند و لایه ضمنی استایل‌های بدون لایه همیشه در آخر قرار می‌گیرد. پس از ایجاد، هیچ راهی برای تغییر ترتیب لایه وجود ندارد. ما چند استایل را به لایه‌ای با نام layout اختصاص دادیم. اگر یک لایه نامگذاری شده از قبل وجود نداشته باشد، مشخص کردن نام در یک at-rule با استفاده از ، با یا بدون اختصاص استایل به لایه، لایه را ایجاد می‌کند. این کار لایه را به انتهای سری نام‌های لایه موجود اضافه می‌کند. اگر لایه نامگذاری شده از قبل وجود داشته باشد، تمام استایل‌های درون بلوک نامگذاری شده به استایل‌های لایه موجود قبلی اضافه می‌شوند - مشخص کردن استایل‌ها در یک بلوک با استفاده مجدد از نام لایه موجود، لایه جدیدی ایجاد نمی‌کند. لایه‌های ناشناس با اختصاص استایل‌ها به یک لایه بدون نامگذاری لایه ایجاد می‌شوند. استایل‌ها را می‌توان فقط در زمان ایجاد یک لایه بدون نام به آن اضافه کرد. استفاده بعدی از بدون نام لایه، لایه‌های بدون نام اضافی ایجاد می‌کند؛ این دستور به لایه بدون نام قبلی که قبلاً وجود داشته، استایل اضافه نمی‌کند. دستور یک لایه، چه با نام و چه بدون نام، ایجاد می‌کند، یا اگر لایه نامگذاری شده از قبل وجود داشته باشد، استایل‌ها را به لایه اضافه می‌کند. ما اولین لایه ناشناس را و دومی را نامیدیم، این فقط برای این است که بتوانیم آنها را توضیح دهیم. اینها در واقع لایه‌های بدون نام هستند. هیچ راهی برای ارجاع به آنها یا اضافه کردن استایل‌های اضافی به آنها وجود ندارد. تمام استایل‌های اعلام شده در خارج از یک لایه در یک لایه ضمنی به هم متصل می‌شوند. در کد مثال بالا، اولین اعلان، ویژگی را روی بدنه تنظیم کرد. این در خارج از هر لایه‌ای اعلام شده است. اعلان‌های بدون لایه معمولی نسبت به اعلان‌های لایه معمولی اولویت دارند، حتی اگر استایل‌های بدون لایه از ویژگی کمتری برخوردار باشند و به ترتیب ظاهر شدن، اول قرار بگیرند. این توضیح می‌دهد که چرا با اینکه CSS بدون لایه ابتدا در بلوک کد اعلام شده است، لایه ضمنی حاوی این استایل‌های بدون لایه، طوری تقدم پیدا می‌کند که انگار آخرین لایه اعلام شده است. در خط ‎ که در آن مجموعه‌ای از لایه‌ها اعلام شده‌اند، فقط لایه‌های theme و utilities ایجاد شده‌اند؛ layout قبلاً در خط اول ایجاد شده است. توجه داشته باشید که این اعلام ترتیب لایه‌های از قبل ایجاد شده را تغییر نمی‌دهد. در حال حاضر هیچ راهی برای مرتب‌سازی مجدد لایه‌ها پس از اعلام وجود ندارد. در مثال زیر، ما استایل‌ها را به دو لایه اختصاص می‌دهیم، آنها را ایجاد می‌کنیم و در این فرآیند نامگذاری می‌کنیم. از آنجایی که آنها از قبل وجود دارند و هنگام اولین استفاده ایجاد می‌شوند، اعلام آنها در خط آخر هیچ کاری انجام نمی‌دهد.

کد بالا دو لایه نامگذاری شده ایجاد می‌کند (styleهای به لایه ضمنی سبک‌های بدون لایه اضافه می‌شوند). فرض می‌کنیم که سه فایل هیچ لایه اضافی درون خود ندارند. لیست زیر نشان می‌دهد که styleهای تعریف شده در داخل و خارج از این فایل‌ها از کمترین (1) اولویت تا بیشترین (10) اولویت مرتب می‌شوند. styleهای معمولی firstLayer styleهای معمولی styleهای معمولی بدون لایه secondLayer styleهای معمولی درون خطی styleهای متحرک‌سازی styleهای مهم بدون لایه styleهای مهم secondLayer styleهای مهم firstLayer styleهای مهم درون خطی styleهای انتقالی styleهای معمولی تعریف شده در داخل لایه‌ها کمترین اولویت را دریافت می‌کنند و بر اساس ترتیب ایجاد لایه‌ها مرتب می‌شوند. styleهای معمولی در اولین لایه ایجاد شده کمترین اولویت را دارند و styleهای معمولی در لایه ایجاد شده آخر بالاترین اولویت را در بین لایه‌ها دارند. به عبارت دیگر، styleهای معمولی که در firstLayer تعریف می‌شوند، در صورت وجود هرگونه تداخل، توسط هر style بعدی در لیست لغو می‌شوند. در مرحله بعد، هر style که خارج از لایه‌ها تعریف شود، قرار دارد. styleهای موجود در به لایه‌ای وارد نشده‌اند و هر style متضادی را از firstLayer و secondLayer لغو می‌کنند. styleهایی که در یک لایه تعریف نمی‌شوند، همیشه اولویت بالاتری نسبت به styleهایی دارند که در داخل یک لایه تعریف می‌شوند (به استثنای styleهای مهم). styleهای درون‌خطی با استفاده از ویژگی style تعریف می‌شوند. styleهای معمولی که به این روش تعریف می‌شوند، نسبت به styleهای معمولی موجود در stylesheetهای بدون لایه و لایه‌ای () اولویت بالاتری دارند. styleهای انیمیشن اولویت بالاتری نسبت به همه styleهای معمولی، از جمله styleهای معمولی درون‌خطی، دارند. styleهای مهم، یعنی مقادیر ویژگی که شامل پرچم هستند، نسبت به هر style که قبلاً در لیست ما ذکر شده است، اولویت دارند. آنها به ترتیب معکوس styleهای معمولی مرتب شده‌اند. هر style مهمی که در خارج از یک لایه تعریف شود، نسبت به styleهایی که در یک لایه تعریف می‌شوند، اولویت کمتری دارد. styleهای مهم موجود در لایه‌ها نیز به ترتیب ایجاد لایه مرتب می‌شوند. برای styleهای مهم، آخرین لایه ایجاد شده کمترین اولویت و اولین لایه ایجاد شده بالاترین اولویت را در بین لایه‌های تعریف شده دارد. styleهای مهم درون‌خطی نیز نسبت به styleهای مهم تعریف شده در جاهای دیگر، اولویت بالاتری دارند. styleهای انتقالی بالاترین اولویت را دارند. هنگامی که یک مقدار ویژگی معمولی در حال انتقال است، بر تمام اعلان‌های مقدار ویژگی دیگر، حتی styleهای مهم درون‌خطی، اولویت دارد؛ اما فقط هنگام انتقال.

در این مثال، دو لایه (A و B) در ابتدا با استفاده از دستور at-rule با کد و بدون هیچ استایلی تعریف می‌شوند. استایل‌های لایه در دو بلوک at-rule با کد تعریف می‌شوند که پس از دستور CSS با کد h1 که خارج از هر لایه‌ای تعریف شده است، ظاهر می‌شوند. styleهایی درون‌خطی اضافه شده به عنصر h1 با استفاده از ویژگی style، یک رنگ معمولی و یک رنگ پس‌زمینه مهم را تنظیم می‌کنند. استایل‌های درون‌خطی معمولی، تمام استایل‌های معمولی لایه‌ای و بدون لایه را لغو می‌کنند. استایل‌های درون‌خطی مهم، تمام استایل‌های معمولی لایه‌ای و بدون لایه و استایل‌های مهم نویسنده را لغو می‌کنند. هیچ راهی برای استایل‌های نویسنده وجود ندارد که استایل‌های درون‌خطی مهم را لغو کنند. تزئین متن معمولی و سایه کادر مهم، بخشی از استایل‌های درون‌خطی استایل نیستند و بنابراین می‌توانند لغو شوند. برای استایل‌های غیرخطی معمولی، استایل‌های بدون لایه اولویت دارند. برای استایل‌های مهم، ترتیب لایه نیز مهم است. در حالی که استایل‌های بدون لایه معمولی، تمام استایل‌های معمولی تنظیم شده در یک لایه را لغو می‌کنند، با استایل‌های مهم، ترتیب اولویت معکوس می‌شود. استایل‌های مهم بدون لایه اولویت کمتری نسبت به استایل‌های لایه‌ای دارند. دو style که فقط درون لایه‌ها تعریف می‌شوند عبارتند از font-style با اهمیت معمولی و font-weight با پرچم . برای styleهای معمولی، لایه B که آخر از همه تعریف شده است، styleهای لایه A که قبلاً تعریف شده است را لغو می‌کند. برای styleهای معمولی، لایه‌های بعدی نسبت به لایه‌های قبلی اولویت دارند. ترتیب اولویت برای styleهای مهم برعکس است. برای اعلان‌های مهم font-weight، لایه A که اول تعریف شده است، نسبت به آخرین لایه B که قبلاً تعریف شده است، اولویت دارد. می‌توانید با تغییر خط اول از به ترتیب لایه‌ها را برعکس کنید. این را امتحان کنید. کدام styleها با این تغییر می‌کنند و کدام‌ها ثابت می‌مانند؟ چرا؟ ترتیب لایه‌ها با ترتیب نمایش لایه‌ها در CSS شما تعیین می‌شود. در خط اول، ما لایه‌ها را بدون اختصاص هیچ style با استفاده از و به دنبال آن نام لایه‌هایمان که با یک نقطه ویرگول خاتمه می‌یابند، تعریف کردیم. اگر این خط را حذف می‌کردیم، نتایج یکسان می‌بود. چرا؟ ما قوانین style را در بلوک‌های نامگذاری شده به ترتیب A و B تعیین کردیم. دو لایه در آن خط اول ایجاد شدند. اگر نبودند، این بلوک‌های قانون آنها را به آن ترتیب ایجاد می‌کردند. ما آن خط اول را به دو دلیل اضافه کردیم: اول اینکه بتوانید به راحتی خط را ویرایش کنید و ترتیب را تغییر دهید، و دوم اینکه اغلب متوجه خواهید شد که اعلام لایه ترتیب از قبل، بهترین روش برای مدیریت ترتیب لایه‌های شماست. به طور خلاصه: ترتیب اولویت لایه‌ها، ترتیبی است که لایه‌ها ایجاد می‌شوند. پس از ایجاد، هیچ راهی برای تغییر ترتیب لایه وجود ندارد. اولویت لایه برای styleهای معمولی، ترتیبی است که لایه‌ها ایجاد می‌شوند. styleهای معمولی بدون لایه، نسبت به styleهای معمولی لایه‌بندی شده اولویت دارند. اولویت لایه برای styleهای مهم معکوس می‌شود، به طوری که لایه‌های ایجاد شده قبلی دارای اولویت هستند. همه styleهای مهم لایه‌بندی شده نسبت به styleهای مهم (و معمولی) بدون لایه اولویت دارند. styleهای درون‌خطی معمولی نسبت به همه styleهای معمولی، چه لایه‌بندی شده باشند و چه نباشند، اولویت دارند. styleهای درون‌خطی مهم نسبت به همه styleهای دیگر، به استثنای styleهایی که در حال انتقال هستند، اولویت دارند. هیچ راهی برای استایل‌های نویسنده وجود ندارد که استایل‌های درون‌خطی مهم را نادیده بگیرند (به جز انتقال آنها که موقتی است).