Inline CSS এবং Custom Styles হলো দুটি আলাদা পদ্ধতি যা ওয়েব পেজের ডিজাইন এবং লেআউট কাস্টমাইজ করার জন্য ব্যবহৃত হয়। AMP (Accelerated Mobile Pages) প্রযুক্তির মাধ্যমে ওয়েব পেজ তৈরি করার সময় কিছু নির্দিষ্ট বিধি এবং কৌশল অনুসরণ করতে হয়। AMP এর মধ্যে Inline CSS এবং Custom Styles ব্যবহারেরও কিছু নির্দিষ্ট নিয়ম রয়েছে, যা ওয়েব পেজের লোডিং টাইম কমানোর জন্য গুরুত্বপূর্ণ।
Inline CSS কী?
Inline CSS হল একটি পদ্ধতি যেখানে CSS কোড সরাসরি HTML ট্যাগের মধ্যে লেখা হয়। এটি সাধারণত HTML ট্যাগের style অ্যাট্রিবিউটের মাধ্যমে লেখা হয়, যেমন:
<p style="color: blue; font-size: 16px;">This is an inline style paragraph.</p>এখানে, <p> ট্যাগের মধ্যে style অ্যাট্রিবিউটের মাধ্যমে CSS শৈলী দেওয়া হয়েছে। Inline CSS হল খুব সহজ এবং ছোট টুকরো CSS কোডের জন্য উপযুক্ত, কিন্তু যদি ওয়েব পেজে বড় আকারের CSS কোড থাকে, তবে এটি পরিচালনা করা কঠিন হতে পারে।
Inline CSS AMP-তে ব্যবহার
AMP পেজে inline CSS ব্যবহার করার ক্ষেত্রে কিছু নিয়ম রয়েছে:
- CSS এর আকার সীমাবদ্ধ করা:
- AMP পেজে inline CSS এর আকার ৫০ KB এর মধ্যে সীমাবদ্ধ থাকতে হবে। এর বেশি হলে AMP পেজটি বৈধ হবে না এবং এটি AMP প্রকল্পের নিয়ম অনুসরণ করবে না।
- স্টাইল শুধুমাত্র HTML ফাইলে:
- AMP পেজে
styleট্যাগটি<head>সেকশনে থাকতে হবে, এবং এতে শুধুমাত্র সেই স্টাইল থাকতে হবে যা HTML পেজে রেন্ডার হতে হবে। এই স্টাইলের মধ্যে ডিভ বা অন্যান্য উপাদানগুলির জন্য সিএসএস কোড থাকতে পারে।
- AMP পেজে
- শুধুমাত্র নির্দিষ্ট CSS বৈশিষ্ট্য:
- AMP কিছু CSS বৈশিষ্ট্যকে অনুমোদন করে, যেমন
font-size,color,padding, ইত্যাদি। তবে, কিছু CSS বৈশিষ্ট্য এবং JavaScript কোড ব্যবহার করার ক্ষেত্রে সীমাবদ্ধতা রয়েছে।
- AMP কিছু CSS বৈশিষ্ট্যকে অনুমোদন করে, যেমন
<head>
<style amp-custom>
p {
color: blue;
font-size: 16px;
}
</style>
</head>Custom Styles কী?
Custom Styles হল সেই CSS শৈলী যা আপনি নিজের প্রয়োজন অনুযায়ী ডিজাইন এবং কাস্টমাইজ করেন। ওয়েব পেজের সাধারণ বা ইউনিক ডিজাইন তৈরির জন্য Custom Styles ব্যবহার করা হয়।
AMP পেজে Custom Styles-এর ক্ষেত্রে কিছু সীমাবদ্ধতা রয়েছে:
- AMP Custom Styles:
- AMP পেজে custom styles ব্যবহারের জন্য CSS কোডটি
<style amp-custom>ট্যাগের মধ্যে রাখতে হবে। তবে, CSS কোডের আকার ৫০ KB-এর বেশি হওয়া উচিত নয়।
- AMP পেজে custom styles ব্যবহারের জন্য CSS কোডটি
- AMP ও CSS মিডিয়া কুয়েরি:
- AMP-তে CSS মিডিয়া কুয়েরি ব্যবহার করা সম্ভব, তবে আপনাকে নিশ্চিত করতে হবে যে কোডটি AMP-এর নির্দিষ্ট বিধির মধ্যে পড়ে।
<head>
<style amp-custom>
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>এখানে, @media কুয়েরির মাধ্যমে ছোট স্ক্রীন সাইজে (যেমন মোবাইল ডিভাইস) একটি নির্দিষ্ট ব্যাকগ্রাউন্ড রঙ দেওয়া হয়েছে।
- CSS ট্রানজিশন এবং অ্যানিমেশন:
- AMP CSS কাস্টম স্টাইলস-এর মধ্যে কিছু জটিল অ্যানিমেশন বা ট্রানজিশন ব্যবহার করার অনুমতি দেয় না। AMP শুধুমাত্র সাদামাটা অ্যানিমেশন স্টাইল এবং CSS ট্রানজিশন গ্রহণ করে, যাতে লোডিং টাইম এবং পারফরম্যান্সে সমস্যা না হয়।
AMP-এ Inline CSS এবং Custom Styles এর ব্যবহার
AMP পেজে inline CSS এবং custom styles ব্যবহারের জন্য কিছু গুরুত্বপূর্ন বিষয়:
- CSS এর আকার সীমাবদ্ধ:
- AMP পেজের CSS কোড সাধারণত ৫০ KB এর মধ্যে থাকতে হবে। তাই inline CSS এবং custom styles ব্যবহারের সময় এই সীমা মাথায় রাখতে হবে।
- Performance Optimization:
- AMP পেজে CSS এর আকার সীমিত রাখার কারণ হল পেজের লোডিং টাইম দ্রুত করা। বেশি CSS কোড থাকলে পেজ লোড হতে বেশি সময় নেবে, যা AMP-এর মূল উদ্দেশ্য বিরোধী।
- স্টাইলস ব্যবহারযোগ্যতা:
- AMP পেজে Custom Styles ব্যবহার করার সময় কিছু বৈশিষ্ট্য সীমাবদ্ধ থাকে। তাই সঠিকভাবে AMP-এর নিয়ম মেনে CSS কাস্টমাইজেশন করা উচিত।
উপসংহার
AMP পেজে Inline CSS এবং Custom Styles ব্যবহারের মাধ্যমে পেজের ডিজাইন এবং লেআউট কাস্টমাইজ করা যায়, তবে AMP-এর নির্দিষ্ট বিধি মেনে চলতে হয়। CSS কোডের আকার সীমিত রাখতে হবে, এবং কিছু CSS বৈশিষ্ট্য ও JavaScript ব্যবহারের ক্ষেত্রে সীমাবদ্ধতা থাকতে পারে। AMP পেজ তৈরির সময় দ্রুত লোডিং নিশ্চিত করতে এই বিষয়গুলো মাথায় রাখা অত্যন্ত গুরুত্বপূর্ণ।
Read more
