اجتناب از روش import@ برای فراخوانی CSS
عاطفه دسته: طراحی وبسایت تگ ها: روش های فراخوانی فایل css , روش ایمپورت css با import@ , How to avoid CSS @ import
import@ چیست؟
import@ یک روش برای ایمپورت یک فایل سی اس اس از داخل فایل سی اس اس دیگر است.
@import url("style.css")
چرا از این روش استفاده نکنیم؟
روش import@ که برای فراخوانی فایلهای CSS استفاده میشود، مشکلاتی را به وجود میآورد که بر روی سرعت صفحات شما تأثیر میگذارد. بزرگترین مشکل این است که باعث میشود فایلها بهجای اینکه بهصورت موازی (همزمان) بارگزاری شوند بهصورت پیدرپی (یکی در انتظار دیگری) لود شوند؛ و این اتلاف وقت و رفتوبرگشت، بارگزاری صفحات شمارا کندتر میکند.
چگونه از روش فراخوانی CSS با import@ اجتناب کنیم؟
به فایلهای CSS و html تان نگاه کنید و فراخوانی import@ را در آنها پیدا کنید. شما همچنین میتوانید از ابزار CSS Delivery بهصورت آنلاین استفاده کنید. از طرف دیگر آنها به این کد شبیه هستند و در بالای فایل قرار میگیرند.
@import url("style.css")
ترجیحاً بهجای استفاده از متد ايمپورت، بهتر اين است كه CSS هاي اضافي را در يك فايل قرار دهید (كپي كردن CSS هاي ايمپورت شده در فايل CSS اورجينال) اگر بنا به دلايلي نمیتوانید اين كار را انجام دهيد (مخلوط کردن فایلهای CSS باهم)، فایلهای CSS را از طريق كد زير در HTML قرار دهيد.
<link rel="style.css" href="style.css" type="text/css">
مطمئن شوید که "style.css" را با محل و نام فایل CSS تان جایگزین کردهاید.
همه فایلهای CSS تان را چک کنید.
نکته: اگر شما در صفحاتتان import@ دارید از ابزار CSS Tool برای پیدا کردن آنها استفاده کنید.
بسیاری از وبسایتها چندین فایل CSS دارند (شما باید سعی کنید که آنها را باهم ترکیب کنید) اگر شما بیشتر از یک فایل CSS دارید همه فایلها را برای پیدا کردن import@ در صفحه چک کنید.
اگر یک فایل CSS جدا از فایلهای CSS دیگر با روش import@ فراخوانی شود، این روش برای سرعت صفحه بد است. چراکه این روش یک مرحله به بارگذاری صفحه وب شما توسط مرورگر اضافه میکند. میتوان از این روش بهوسیله استفاده از روش Link که در بالا نشان داده شده است اجتناب کرد و خیلی بهتر است که import@ را بهکاربرده نشود.