اتصال درون خطی (inline) و اولویت تاثیرگذاری

اتصال درون خطی یا Inline
در جلسه قبلی از بین روش های موجود اتصال کد های CSS با روش اتصال داخلی آشنا شدیم، روش پایانی برای مرتبط ساختن کدهای HTML و CSS، روش اتصال درون خطی هست. همونطور که در مقدمهی این فصل گفته شد، روش جلسهی قبل و این جلسه، نسبت به روش اول، استفاده کمتری داره. در این روش، نیازی به استفاده از عنصر خاصی مثل style نیست. در این روش، style نقش صفت رو ایفا میکنه و به شکل زیر، کدهای HTML و CSS رو به هم مرتبط میکنه:
<tag style ="...">...</tag>
به جای کلمه tag، نام هر عنصری میتونه قرار بگیره، و در قسمت style، به جای سه نقطه، کدهای CSS نوشته میشن. این کدها به صورت مستقیم، روی عنصر مربوطه تاثیر میزارن و اون رو تغییر میدن. برای مثال:
<div style="font-size: 30px; color: blue;">...</div> <button style="position: absolute; display: flex;">
با اینکه این روش، نسبت به دو روش دیگه کاربرد بسیار کمتری داره، اما میتونیم از اون زمانی استفاده کنیم که تمایلی به ساخت کلاس و آیدی برای استایل دادن به یک عنصر خاص نداریم. در غیر این صورت، با استفاده از این روش تعداد خطوط کد بسیار زیادی خواهیم داشت که عملیات کدنویسی رو برای ما مبهم میکنه.
مزایای اتصال درون خطی در CSS
همانطور که دو روش قبل مزایا و معایبی داشتند، اتصال درون خطی هم مزایا و معایب خود را دارد که در ادامه با آنها آشنا میشویم.
- آزمایش کد ها، خیلی از طراحان وب از اتصال درون خطی CSS زمانی که میخواهند بر روی یک پروژه جدید کار کنند، استفاده میکنند. این به علت است که به راحتی میتوانند در سورس ها اسکرول کنند و خیلی راحت در بخش مورد نظر سورسشان تغییرات ایجاد کنند. همچنین بعضی از آنها برای دیباگ کردن صفحات از این راه استفاده میکنند تا مشکلاتی که به راحتی حل نمیشوند را پیدا کنند.
- تعمیر سریع کد ها، زمانی که میخواهید خیلی سریع یک بخش از کد های HTML خود را تعمیر کنید، میتوانیم از این روش استفاده کنیم و هر موقع هم که کارمان تمام شد و تصمیم گرفتیم میتوانیم آنها را به روشهای دیگر انتقال دهیم.
- برای وب سایت های کوچک، برای وب سایتهای کوچک یا بلاگها که تنها تعداد محدودی صفحه دارند، استفاده از اتصال درون خطی میتواند خیلی مفید باشد.
- کم شدن درخواست های HTTP، با استفاده از اتصال درون خطی درخواست های HTTP برای بازگشایی سایت کاهش مییابد و این به معنی لود سریعتر وب سایت نسبت به حالت استفاده از اتصال خارجی میباشد.
معایب اتصال درون خطی در CSS
- برجسته بودن، در اتصال درون خطی ویژگی های تعریف شده CSS برجسته میشوند و اگر در جایی آنها را تعیین کنید بر روی تمامی عناصر اولویت خواهند داشت.
- در تمامی تگ ها، در اتصال درون خطی برای گرفتن یک ویژگی باید آن را برای هر تگ تعریف کنید. برای مثال اگر میخواهید تگهای <p> شما از خانواده فونت “IRANSans” استفاده کند، شما میبایست در هر تگ <p> یکبار ویژگی font-family را ارائه کنید که باعث میشود که یک کار اضافه برای طراح ایجاد شود و همچنین زمانی برای دانلود از بازدید کننده گرفته شود.
- امکان معرفی شبه عناصر یا شبه ویژگیها در این روش امکان پذیر نمیباشد. برای مثال شما در اتصال خارجی و داخلی میتوانید، از شبه ویژگی های Visited، Hover، Active و … استفاده کنید ولی در روش اتصال درون خطی امکان استفاده از این شبه ویژگی ها نیست.
اولویت تاثیرگذاری
در مقدمهی این فصل، خلاصهی کوتاهی از این موضوع گفته شد. فرض کنید کد HTML ای رو در اختیار داریم که از هر سه روش در اون استفاده شده. مانند کد زیر:

نمونه کد اولویتبندی فراخوانی ها
در اینطور مواقع، برای ما سوال پیش میاد، عنصر h1 دقیقا کدوم استایل رو قبول میکنه؟ رنگ اون قرمز میشه؟ آبی؟ سبز؟ یا شاید هم هیچکدوم؟
نتیجه کد به فرم زیر هست:

خروجی نمونه کد اولویت فراخوانی ها
بنابراین مشاهده میشه که در صورت استفاده از چند روش، اولویت همیشه با روش “اتصال درونخطی” هست!
بعد از اون روش اتصال داخلی، و سپس روش اتصال خارجی.
دیدگاهتان را بنویسید