ক্যাসকেডিং স্টাইল শীটগুলিতে @ ইমপোর্ট ব্যবহার করে

বহিরাগত স্টাইল শীট বা এমনকি ইনলাইন শৈলী সহ একটি ওয়েবপেজে আপনি CSS শৈলীগুলি প্রয়োগ করতে পারেন এমন অনেকগুলি উপায় রয়েছে। যদি আপনি একটি বহিরাগত স্টাইল শীট ব্যবহার করেন, যা একটি HTML নথির চেহারা এবং অনুভূতি নির্দেশ করার প্রস্তাবিত উপায়, একটি পদ্ধতি ব্যবহার করা হয়

@import।

দ্য

@import নিয়মটি আপনাকে আপনার নথিতে গুরুত্বপূর্ণ বহিরাগত স্টাইল শীটগুলিতে অনুমতি দেয় - হয় HTML পৃষ্ঠাতে বা এমনকি অন্যান্য CSS নথিতেও। কয়েকটি ছোট, ফোকাস করা ফাইল (লেআউটের জন্য একটি, টাইপোগ্রাফির জন্য, চিত্রগুলির জন্য একটি, ইত্যাদি) শৈলীগুলি অনেকগুলি ভেঙ্গে ফেলার সময় কখনও কখনও সেই ফাইলগুলি এবং তাদের মধ্যে থাকা বিভিন্ন স্টাইলগুলি পরিচালনা করা সহজ হতে পারে। আপনি যদি সেই উপভোগটি উপভোগ করতে চান তবে বিভিন্ন ফাইলগুলি আমদানি করুন আপনার ওয়েব পৃষ্ঠার প্রদর্শনের জন্য তাদের সমস্ত কাজ করার জন্য আপনাকে যা করতে হবে তা করতে হবে।

এইচটিএমএল এ আমদানি করা হচ্ছে

ব্যবহার করতে

@import আপনার এইচটিএমএল নিয়ম, আপনি নিম্নলিখিত যোগ হবে

নথির

:

এই কোডটি এখন এই HTML পৃষ্ঠাটিতে ব্যবহারের জন্য এই স্টাইল শীটটি আমদানি করবে এবং আপনি সেই ফাইলটিতে আপনার সমস্ত শৈলী পরিচালনা করতে পারবেন। এই পদ্ধতির গুরুত্বপূর্ণ স্টাইলশীটগুলির বিপরীত দিকটি হল এই পদ্ধতিটি সমান্তরাল ডাউনলোডের জন্য অনুমতি দেয় না। এই পদ্ধতিটি ব্যবহার করে আপনি যে কোনও সিএসএস ফাইল আমদানি করছেন তা সহ পৃষ্ঠাটি বাকি পৃষ্ঠায় চলে যাওয়ার আগে একটি সম্পূর্ণ স্টাইলশীট ডাউনলোড করতে হবে। এটি আপনার পৃষ্ঠার গতিতে নেতিবাচক প্রভাব ফেলবে এবং কর্মক্ষমতা ডাউনলোড করবে। পেজের সাফল্য কতটুকু গুরুত্বপূর্ণ তা বিবেচনা করে ওয়েবসাইটের সাফল্যের জন্য, এই ত্রুটিটি একমাত্র কারণ হতে পারে যে আপনি @ ইমপোর্ট ব্যবহার করে এড়াতে চান।

বিকল্প পথ বা পন্থা

ব্যবহার করার জন্য একটি বিকল্প হিসাবে

@import আপনার এইচটিএমএল, আপনি এই মত সিএসএস ফাইল লিঙ্ক করতে পারেন:

এই খুব অনুরূপ কাজ করে

@import এটি একটি কেন্দ্রীয় অবস্থান / ফাইল থেকে আপনার সমস্ত সিএসএস পরিচালনা করার অনুমতি দেয় তবে এই পদ্ধতিটি ডাউনলোড দৃষ্টিকোণ থেকে আরও ভাল। আপনি যদি এখনও বিভিন্ন ধরণের শৈলীগুলিকে আলাদা ফাইলগুলিতে ভাগ করতে চান তবে আপনি তা করতে এবং আপনার মাস্টার CSS ফাইলের মধ্যে @ ইমপোর্ট কার্যকারিতাটি ব্যবহার করতে পারেন। এর অর্থ হল যে আপনার বহিরাগত CSS ফাইলগুলি পৃথকভাবে পরিচালিত হতে পারে, কিন্তু যেহেতু তারা সমস্ত একটি মাস্টার CSS এ আমদানি করে, কর্মক্ষমতা উন্নত হয়।

সিএসএস এ আমদানি করা হচ্ছে

ব্যবহার করে

উপরের কোড উদাহরণটি আপনার HTML পৃষ্ঠাতে "ডিফল্ট.css" ফাইলটি ব্যবহার করবে। সিএসএস ফাইলের ভিতরে আপনার বিভিন্ন পৃষ্ঠা শৈলী থাকবে। আপনি এক পৃষ্ঠাতে বিশদ সমস্ত শৈলী থাকতে পারেন, অথবা আপনি সহজ পরিচালনার জন্য তাদের পৃথকভাবে ভাঙ্গতে @ ইমপোর্ট ব্যবহার করতে পারেন। আবার, বলুন আমরা 4 টি পৃথক সিএসএস ফাইল ব্যবহার করছি - লেআউটের জন্য এক, টাইপোগ্রাফির জন্য, এবং চিত্রগুলির জন্য একটি। চতুর্থ ফাইল আমাদের "মাস্টার" ফাইল যা আমাদের পাতা লিঙ্ক করে (এই উদাহরণের জন্য, এটি "ডিফল্ট.css")। যে মাস্টার সিএসএস ফাইলের খুব উপরে আমরা নীচে দেখানো নিয়ম যোগ করতে পারি:

@ ইমপোর্ট URL ('/ শৈলী / layout.css'); @ ইমপোর্ট url ('/ শৈলী / টাইপ.css'); @ ইমপোর্ট url ('/ শৈলী / images.css');

উল্লেখ্য যে এই নিয়ম অবশ্যই তাদের সিএসএস ফাইলের সমস্ত অন্যান্য সামগ্রী আগে কাজ করার জন্য। আপনি এই আমদানি নিয়ম আগে অন্য কোন CSS শৈলী থাকতে পারে না।

সেই আমদানি নিয়মগুলির নীচে, আপনি আপনার ডিফল্ট শীটে যে কোনও সিএসএস শৈলী যোগ করতে চান তা যোগ করতে পারেন। যে প্রধান সিএসএস ফাইল লোড করা হয়, এটি প্রথম এই পৃথক ফাইল আমদানি এবং স্টাইলশীট খুব শীর্ষে তাদের শৈলী যোগ হবে। এরপরে এই আমদানিগুলির নীচে আপনার সমস্ত অন্যান্য শৈলী থাকবে, সম্পূর্ণ CSS ফাইল তৈরি করবে যা ওয়েব ব্রাউজার আপনার সাইটটি প্রদর্শনের জন্য ব্যবহার করবে। HTML এ লিঙ্কযুক্ত এক স্টাইলশীট থাকা সত্ত্বেও ছোট, আরো বেশি ফোকাস করা ফাইলগুলি পরিচালনা করার সুবিধা পাবেন।

মিডিয়া ক্যোয়ারী জন্য @ ইমপোর্ট ব্যবহার করে

এক জিনিস যা আপনি প্রতিক্রিয়াশীল ওয়েবসাইট শৈলীগুলির জন্য একটি পৃথক ফাইলের মধ্যে আপনার ওয়েবসাইটের মিডিয়া প্রশ্নগুলি আলাদা করার বিষয়ে বিবেচনা করতে পারেন। কারণ আপনার প্রতিক্রিয়াশীল শৈলীগুলি আপনার সাইটের অন্যান্য স্টাইলের নিয়মগুলির পাশাপাশি দেখলে বিভ্রান্তিকর হতে পারে, তাদের নিজস্ব ফাইলটিতে তাদের নিজস্ব থাকার আকর্ষণীয় হতে পারে। এই পদ্ধতির সঙ্গে এক উদ্বেগ যে, আপনার থেকে

@import নিয়মগুলি অবশ্যই প্রথম হতে হবে, এর অর্থ হল আপনার মিডিয়া ক্যোয়ারীগুলি আপনার সাইটের বাকি শৈলীগুলির আগে লোড করা হবে। যখন একটি মোবাইল-প্রথম প্রতিক্রিয়াশীল সাইট তৈরি করা হয় যা অ্যাকাউন্টে কর্মক্ষমতা নেয়, তখন এটি একটি সমস্যা হতে পারে। এই কারণে, এটি প্রস্তাব করা হয়েছে যে আপনি আপনার সাইটের প্রতিক্রিয়াশীল শৈলীগুলি আলাদাভাবে বিভাগে ব্যবহার করবেন না এবং ব্যবহার করবেন

@import আপনার সাইটে তাদের আনতে। হ্যাঁ, এটি করার সুবিধাগুলি মনে হতে পারে, কিন্তু ত্রুটিগুলি সেই সুবিধাগুলিকে অতিক্রম করে।

আমি কি @ ইমপোর্ট ব্যবহার করতে হবে?

না, তুমি কর না. অনেক সাইট কেবলমাত্র একটি ফাইলের মধ্যে তাদের প্রধান শৈলীগুলি প্রদর্শন করে এবং যে ফাইলটি বড় আকার ধারণ করে, সেটি পরিচালিত হয় (এইভাবে আমি নিজের কাজতে এটি করি)। যদি তুমি খুজে পাও

@import সহায়ক, তারপর এটি আপনার কর্মপ্রবাহ অংশ হতে পারে। অন্যথা, আপনি নিরাপদে ওয়েবপৃষ্ঠা তৈরি করতে পারেন আপনার সিএসএস নিয়ম আপনার একক স্টাইলশীট।

ব্রাউজার সমর্থন

খুব, খুব পুরানো ব্রাউজারগুলির এই @ ইমপোর্ট নিয়মগুলির মধ্যে কিছু সমস্যা রয়েছে, তবে এই ব্রাউজারগুলি আপনার জন্য আজকের দিনগুলির সমস্যা হতে পারে না। এটি এখন বিশেষ করে সত্য যে ইন্টারনেট এক্সপ্লোরারের পুরানো সংস্করণগুলির জন্য জীবনকাল শেষ হওয়ার শেষ হয়েছে। অবশেষে, আপনি ব্যবহার করার সিদ্ধান্ত নিয়েছে

@import আপনার এইচটিএমএল বা সিএসএসের নিয়মগুলি, আপনি যদি ইন্টারনেটের অবিশ্বাস্য পুরানো সংস্করণগুলি সমর্থন করার জন্য কিছু অদ্ভুত প্রয়োজন না থাকে তবে আপনাকে ওয়েব ব্রাউজারগুলির লিগ্যাসি সংস্করণগুলির সাথে সমস্যাগুলিতে চালানো উচিত নয়।

জেরেমি গিরার্ড দ্বারা সম্পাদিত