CSS `@` বিধিসমূহ

Articles

CSS `@` বিধিসমূহ

এই প্রবন্ধটি CSS এর @ নিয়মগুলি ব্যাখ্যা করে।

আপনি @import এবং @media এর মতো @ নিয়ম ব্যবহারের পদ্ধতি এবং কিভাবে লিখতে হয় তা শিখতে পারেন।

YouTube Video

প্রিভিউর জন্য HTML

css-at-rule.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS At Rules</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-at-rule.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS At(@) Rules</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS At(@) Rules</h2></header>
 19        <article>
 20            <h3>@import</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24@import url('styles.css');
 25</pre>
 26            </section>
 27        </article>
 28        <article>
 29            <h3>@media</h3>
 30            <section>
 31                <header><h4>CSS</h4></header>
 32<pre class="sample">
 33@media screen and (max-width: 600px) {
 34    body {
 35        background-color: lightblue;
 36    }
 37}
 38</pre>
 39            </section>
 40        </article>
 41        <article>
 42            <h3>@media Example(Screen Width)</h3>
 43            <section>
 44                <header><h4>CSS</h4></header>
 45<pre class="sample">
 46@media (min-width: 600px) {
 47    body {
 48        background-color: lightblue;
 49    }
 50}
 51@media (max-width: 599px) {
 52    body {
 53        background-color: lightpink;
 54    }
 55}
 56</pre>
 57            </section>
 58        </article>
 59        <article>
 60            <h3>@media Example(Orientation)</h3>
 61            <section>
 62                <header><h4>CSS</h4></header>
 63<pre class="sample">
 64@media (orientation: portrait) {
 65    body {
 66        font-size: 18px;
 67    }
 68}
 69@media (orientation: landscape) {
 70    body {
 71        font-size: 16px;
 72    }
 73}
 74</pre>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>@media Example(Resolution)</h3>
 79            <section>
 80                <header><h4>CSS</h4></header>
 81<pre class="sample">
 82@media (min-resolution: 2dppx) {
 83    body {
 84        background-image: url('high-res-image.png');
 85    }
 86}
 87</pre>
 88            </section>
 89        </article>
 90        <article>
 91            <h3>@media Example(AND Condition)</h3>
 92            <section>
 93                <header><h4>CSS</h4></header>
 94<pre class="sample">
 95@media (min-width: 600px) and (orientation: portrait) {
 96    body {
 97        background-color: lightgreen;
 98    }
 99}
100</pre>
101            </section>
102        </article>
103        <article>
104            <h3>@media Example(OR Condition)</h3>
105            <section>
106                <header><h4>CSS</h4></header>
107<pre class="sample">
108@media (max-width: 400px), (orientation: landscape) {
109    body {
110        color: gray;
111    }
112}
113</pre>
114            </section>
115        </article>
116        <article>
117            <h3>@media Example(NOT Condition)</h3>
118            <section>
119                <header><h4>CSS</h4></header>
120<pre class="sample">
121@media not all and (min-width: 600px) {
122    body {
123        font-size: 14px;
124    }
125}
126</pre>
127            </section>
128        </article>
129        <article>
130            <h3>@font-face</h3>
131            <section>
132                <header><h4>CSS</h4></header>
133<pre class="sample">
134@font-face {
135  font-family: 'CustomFont';
136  src: url('customfont.woff2') format('woff2'),
137       url('customfont.woff') format('woff');
138}
139</pre>
140            </section>
141        </article>
142        <article>
143            <h3>@keyframes</h3>
144            <section>
145                <header><h4>CSS</h4></header>
146<pre class="sample">
147@keyframes slidein {
148    from {
149        transform: translateX(100%);
150    }
151    to {
152        transform: translateX(0%);
153    }
154}
155
156div {
157    animation: slidein 2s ease-in-out;
158}
159</pre>
160            </section>
161        </article>
162        <article>
163            <h3>@supports</h3>
164            <section>
165                <header><h4>CSS</h4></header>
166<pre class="sample">
167@supports (display: grid) {
168    .container {
169        display: grid;
170    }
171}
172</pre>
173            </section>
174        </article>
175        <article>
176            <h3>@page</h3>
177            <section>
178                <header><h4>CSS</h4></header>
179<pre class="sample">
180@page {
181    size: A4;
182    margin: 2cm;
183}
184</pre>
185            </section>
186        </article>
187        <article>
188            <h3>@charset</h3>
189            <section>
190                <header><h4>CSS</h4></header>
191<pre class="sample">
192@charset "UTF-8";
193</pre>
194            </section>
195        </article>
196        <article>
197            <h3>@layer</h3>
198            <section>
199                <header><h4>CSS</h4></header>
200<pre class="sample">
201@layer reset {
202    h1 {
203        margin: 0;
204    }
205}
206@layer base {
207    h1 {
208        font-size: 24px;
209        color: blue;
210    }
211}
212@layer theme {
213    h1 {
214        color: red;
215    }
216}
217</pre>
218                <header><h4>HTML</h4></header>
219<pre>
220&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
221&lt;p&gt;
222    This page demonstrates how to apply styles to
223    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
224&lt;/p&gt;
225</pre>
226                <header><h4>HTML+CSS</h4></header>
227                <section class="sample-view">
228                    <h1>CSS Layer Test</h1>
229                    <p>
230                        This page demonstrates how to apply styles to
231                        the <code>&lt;h1&gt;</code> element using CSS layers.
232                    </p>
233                </section>
234            </section>
235        </article>
236        <article>
237            <h3>@layer with order</h3>
238            <section>
239                <header><h4>CSS</h4></header>
240<pre class="sample">
241@layer theme, base, reset;
242
243@layer reset {
244    h1 {
245        margin: 0;
246    }
247}
248@layer base {
249    h1 {
250        font-size: 24px;
251        color: blue;
252    }
253}
254@layer theme {
255    h1 {
256        color: red;
257    }
258}
259</pre>
260                <header><h4>HTML</h4></header>
261<pre>
262&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
263&lt;p&gt;
264    This page demonstrates how to apply styles to
265    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
266&lt;/p&gt;
267</pre>
268                <header><h4>HTML+CSS</h4></header>
269                <section class="sample-view">
270                    <h1>CSS Layer Test</h1>
271                    <p>
272                        This page demonstrates how to apply styles to
273                        the <code>&lt;h1&gt;</code> element using CSS layers.
274                    </p>
275                </section>
276            </section>
277        </article>
278        <article>
279            <h3>@import &amp; @layer</h3>
280            <section>
281                <header><h4>CSS</h4></header>
282<pre class="sample">
283@import url('css/reset.css') layer(reset);
284@import url('css/base.css') layer(base);
285@import url('css/theme.css') layer(theme);
286</pre>
287                <header><h4>HTML</h4></header>
288<pre>
289&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
290&lt;p&gt;
291    This page demonstrates how to apply styles to
292    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
293&lt;/p&gt;
294</pre>
295                <header><h4>HTML+CSS</h4></header>
296                <section class="sample-view">
297                    <h1>CSS Layer Test</h1>
298                    <p>
299                        This page demonstrates how to apply styles to
300                        the <code>&lt;h1&gt;</code> element using CSS layers.
301                    </p>
302                </section>
303            </section>
304        </article>
305    </main>
306</body>
307</html>

CSS `@` বিধিসমূহ

CSS @ নিয়মগুলি (at-rules) বিশেষ নির্দেশিকা যা স্টাইলশীটের ব্যবহার এবং প্রয়োগের শর্তগুলি নিয়ন্ত্রণ করতে ব্যবহৃত হয়। সাধারণ CSS প্রোপার্টির থেকে ভিন্ন, @ নিয়ম শর্তসাপেক্ষে স্টাইল প্রয়োগ বা বাহ্যিক সংস্থান আমদানি করে। উল্লেখযোগ্য @ নিয়মগুলির মধ্যে রয়েছে @media, @import, এবং @keyframes, ইত্যাদি।

উদাহরণস্বরূপ `@` বিধিসমূহের প্রকারভেদ

`@import`

1@import url('styles.css');

@import বর্তমান স্টাইলশীটে অন্য CSS ফাইলগুলি আমদানি করতে ব্যবহৃত হয়। এটি বাহ্যিক CSS ফাইলগুলি সহজ পুনঃব্যবহার করতে সক্ষম করে।

বিঃদ্রঃ:

@import স্টাইলশীটের শুরুতেই লেখা উচিত।
এর কর্মক্ষমতা প্রভাবের কারণে বড় প্রকল্পগুলিতে এটি এড়ানো উচিত।

`@media`

1@media screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}

@media নির্দিষ্ট শর্তগুলির (যেমন স্ক্রিন চওড়া, রেজোলিউশন ইত্যাদি) উপর ভিত্তি করে স্টাইল প্রয়োগ করতে মিডিয়া কোয়েরি ব্যবহার করে। এটি প্রায়ই রেসপন্সিভ ডিজাইন বাস্তবায়নে ব্যবহৃত হয়।

সাধারণভাবে ব্যবহৃত শর্তাবলী

নীচের শর্তসমূহ মিডিয়া কোয়েরিজে প্রায়শই ব্যবহৃত হয়।

প্রস্থ নির্ভর শর্তসমূহ

 1@media (min-width: 600px) {
 2    body {
 3        background-color: lightblue;
 4    }
 5}
 6@media (max-width: 599px) {
 7    body {
 8        background-color: lightpink;
 9    }
10}

ন্যূনতম প্রস্থ (min-width) শৈলী প্রয়োগ করে যখন প্রস্থ নির্দিষ্ট মানের সমান বা তার চেয়ে বেশি হয়।
সর্বাধিক প্রস্থ (max-width) শৈলী প্রয়োগ করে যখন প্রস্থ নির্দিষ্ট মানের সমান বা তার কম হয়।

যন্ত্রের অভিমুখন (`orientation`)

 1@media (orientation: portrait) {
 2    body {
 3        font-size: 18px;
 4    }
 5}
 6@media (orientation: landscape) {
 7    body {
 8        font-size: 16px;
 9    }
10}

যন্ত্রের অভিমুখন (orientation) সেট করা যেতে পারে উলম্ব (portrait) বা অনুভূমিক (landscape) প্যাটার্নে।

রেজোলিউশন (`resolution`)

1@media (min-resolution: 2dppx) {
2    body {
3        background-image: url('high-res-image.png');
4    }
5}

শৈলী রেজোলিউশন (resolution) এর উপর ভিত্তি করে প্রয়োগ করা যেতে পারে।
এই উদাহরণে, উচ্চ-রেজোলিউশন ডিসপ্লের জন্য একটি উচ্চ-রেজোলিউশন ব্যাকগ্রাউন্ড চিত্র নির্ধারণ করা হয়েছে।

শর্তগুলি একত্রিত করা

মিডিয়া কোয়েরিগুলি একাধিক শর্তও একত্রিত করতে পারে।

এবং শর্ত (`and`)

1@media (min-width: 600px) and (orientation: portrait) {
2    body {
3        background-color: lightgreen;
4    }
5}

এবং শর্ত তখন শৈলী প্রয়োগ করে যখন সব শর্ত পূর্ণ হয়।
এই উদাহরণে, যখন স্ক্রিনের প্রস্থ 600px বা তার বেশি এবং উলম্ব অভিমুখে থাকে, তখন body এর ব্যাকগ্রাউন্ড রঙ হালকা সবুজে সেট করা হয়।

অথবা শর্ত (`,`)

1@media (max-width: 400px), (orientation: landscape) {
2    body {
3        color: gray;
4    }
5}

অথবা শর্ত তখন শৈলী প্রয়োগ করে যখন যেকোনো শর্ত পূর্ণ হয়।
এই উদাহরণে, যখন স্ক্রিনের প্রস্থ 400px বা কম থাকে, অথবা অনুভূমিক অভিমুখে থাকে, তখন body এর টেক্সটের রঙ ধূসর করা হয়।

না শর্ত (`not`)

1@media not all and (min-width: 600px) {
2    body {
3        font-size: 14px;
4    }
5}

না শর্ত তখন শৈলী প্রয়োগ করে যখন শর্ত পূরণ হয় না।
এই উদাহরণে, সমস্ত যন্ত্রের জন্য, যখন স্ক্রিন প্রস্থ 600px বা তার বেশি হয় না, তখন body এর ফন্ট সাইজ 14px সেট করা হয়।

`@font-face`

1@font-face {
2  font-family: 'CustomFont';
3  src: url('customfont.woff2') format('woff2'),
4       url('customfont.woff') format('woff');
5}

@font-face ওয়েব ফন্ট সংজ্ঞায়িত করতে ব্যবহৃত হয়। এই নিয়মের সাহায্যে বাহ্যিক ফন্টগুলি ডাউনলোড করে ওয়েবপৃষ্ঠায় প্রয়োগ করা যেতে পারে।

স্ট্যান্ডার্ড ফন্টের উপর নির্ভর করার পরিবর্তে কাস্টম ফন্ট ব্যবহার করা যেতে পারে।
ফন্ট ফাইলের আকারের প্রতি মনোযোগ দেওয়া প্রয়োজন।

`@keyframes`

 1@keyframes slidein {
 2  from {
 3    transform: translateX(100%);
 4  }
 5  to {
 6    transform: translateX(0%);
 7  }
 8}
 9
10div {
11  animation: slidein 2s ease-in-out;
12}

@keyframes CSS অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। অ্যানিমেশনের প্রতিটি ধাপে স্টাইল নির্দিষ্ট করা যেতে পারে।

এটি অ্যানিমেশনগুলির উপর বিস্তারিত নিয়ন্ত্রণ প্রদান করে।
এটি animation প্রোপার্টির সাথে একত্রে ব্যবহৃত হয়।

`@supports`

1@supports (display: grid) {
2  .container {
3    display: grid;
4  }
5}

@supports পরীক্ষা করে যে নির্দিষ্ট CSS বৈশিষ্ট্যগুলি ব্রাউজার দ্বারা সমর্থিত কিনা এবং ফলাফলের উপর ভিত্তি করে স্টাইল প্রয়োগ করে।

এটি পুরোনো এবং নতুন ব্রাউজারগুলোর মধ্যে সামঞ্জস্য বজায় রাখতে সহায়তা করে।
ফিচার ডিটেকশন এর মাধ্যমে বিকল্প সমাধান প্রয়োগ করা যেতে পারে।

`@page`

1@page {
2  size: A4;
3  margin: 2cm;
4}

@page প্রিন্ট করার জন্য স্টাইল নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এটি পৃষ্ঠার আকার এবং মার্জিন সেট করার জন্য উপকারী।

বিঃদ্রঃ:

এটি প্রিন্ট মিডিয়ার জন্য স্টাইল সেট করার জন্য ব্যবহৃত হয়।
আপনি হেডার এবং ফুটারের মতো নির্দিষ্ট পৃষ্ঠার উপাদানগুলির স্টাইলও কাস্টমাইজ করতে পারেন।

`@charset`

1@charset "UTF-8";

@charset একটি CSS ফাইলের ক্যারেক্টার এনকোডিং নির্ধারণ করে। মূলত UTF-8 নির্ধারিত হয়।

এটি স্টাইল শীটের শুরুতেই নির্ধারণ করতে হবে।
এটি বিশেষত বহুভাষিক ওয়েবসাইটের জন্য ব্যবহৃত হয়।

`@layer`

@layer একটি নতুন @ নিয়ম যা CSS-এ স্টাইলশিটগুলির অগ্রাধিকার সংগঠিত করতে ব্যবহৃত হয়, যাতে একাধিক CSS নিয়ম স্তর দ্বারা গোষ্ঠীবদ্ধ ও পরিচালিত হতে পারে। এই নিয়মটি বিশেষভাবে বড় স্টাইলশিট বা একাধিক বাহ্যিক স্টাইলশিট সংযুক্ত প্রকল্পগুলিতে উপকারী, যাতে CSS সংঘর্ষ এড়ানো সহজ হয়।

CSS স্টাইলশিটে, অগ্রাধিকার সাধারণত 'ক্যাসকেড' দ্বারা নির্ধারিত হয়, তবে @layer ব্যবহার করে আপনি স্টাইলের অগ্রাধিকার আরও নমনীয় এবং সুনির্দিষ্টভাবে নিয়ন্ত্রণ করতে পারেন।

মূল সিনট্যাক্স

1@layer <layer-name> {
2  /* Styles within this layer */
3}

@layer ব্যবহার করে স্টাইল নির্ধারণ করার সময় সিনট্যাক্স এইরকম হবে।

 1@layer reset {
 2    h1 {
 3        margin: 0;
 4    }
 5}
 6@layer base {
 7    h1 {
 8        font-size: 24px;
 9        color: blue;
10    }
11}
12@layer theme {
13    h1 {
14        color: red;
15    }
16}

উদাহরণস্বরূপ, আপনি বিভিন্ন লেয়ারে স্টাইলগুলি এইভাবে নির্ধারণ করতে পারেন:
এই ক্ষেত্রে, reset স্তর, base স্তর এবং theme স্তর যথাক্রমে নির্ধারণ করা হয়েছে, এবং চূড়ান্ত h1 স্টাইলটি theme স্তরের বিষয়বস্তুর দ্বারা নির্ধারিত হয়, ফলে color: red; প্রয়োগ করা হয়।

একাধিক লেয়ারের প্রাধান্য

@layer-এর শক্তিশালী বৈশিষ্ট্য হল এটি স্তরগুলির মধ্যে স্টাইলের অগ্রাধিকার পরিচালনার অনুমতি দেয়। উপরের উদাহরণে, কারণ theme স্তরটি সর্বশেষে নির্ধারণ করা হয়েছে, এটি অন্যান্য স্তরে নির্ধারিত স্টাইলগুলি ওভাররাইট করে।

এছাড়াও, @layer বাহ্যিক স্টাইলশিট বা অন্যান্য লাইব্রেরি থেকে লোড করা CSS ফাইলগুলিতে অগ্রাধিকার ক্যাসকেড পরিচালনা করতে ব্যবহার করা যেতে পারে।

গ্লোবাল প্রাধান্য

 1@layer theme, base, reset;
 2
 3@layer reset {
 4    h1 {
 5        margin: 0;
 6    }
 7}
 8@layer base {
 9    h1 {
10        font-size: 24px;
11        color: blue;
12    }
13}
14@layer theme {
15    h1 {
16        color: red;
17    }
18}

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

`@layer` সহ `@import` ব্যবহার

1@import url('css/reset.css') layer(reset);
2@import url('css/base.css') layer(base);
3@import url('css/theme.css') layer(theme);

@import এবং @layer একত্রিত করে বাহ্যিক স্টাইলশিটে স্তর পরিচালনাও সম্ভব।
এটি বাহ্যিক স্টাইলশিটকে বিভিন্ন স্তরে রাখার অনুমতি দেয়, তাদের অগ্রাধিকার পরিচালনা করে।

`@layer` এর মূল পয়েন্টগুলি

@layer CSS স্টাইল পরিচালনায় একটি শক্তিশালী উপায়, যা বড় প্রকল্পে স্টাইল সংঘর্ষ এড়ানোর একটি সুবিধাজনক পদ্ধতি প্রদান করে। এটি বিশেষভাবে উল্লেখযোগ্য যখন একাধিক স্টাইল উৎসের সাথে কাজ করার সময় স্টাইল অগ্রাধিকার সংক্ষিপ্তভাবে পরিচালনা করা হয়। নিম্নলিখিত বিষয়গুলি মাথায় রাখা ভালো হবে।

স্তরগুলির মাধ্যমে স্টাইল পৃথক করে, আপনি ক্যাসকেড অগ্রাধিকার নিয়ন্ত্রণ করতে পারেন।
@import-এর সাথে এটি ব্যবহার করে, আপনি স্তর ব্যবস্থাপনায় বাহ্যিক CSS ফাইল অন্তর্ভুক্ত করতে পারেন।
একাধিক স্তর সংজ্ঞায়িত করা স্টাইল সংঘর্ষ প্রতিরোধ করতে পারে।

এটি স্টাইল সংঘর্ষ হ্রাস করে এবং জটিল স্টাইল ব্যবস্থাপনার প্রয়োজনীয় প্রকল্পগুলিতে কার্যকর ডিজাইন নিশ্চিত করে।

`@layer` ব্যবহারের উদাহরণ

@layer ব্যবহারের সময়, আপনি স্তরের নামকরণ নিয়মাবলী, ইমপোর্টের ক্রম এবং প্রকল্পের স্কেলের উপর নির্ভর করে স্তরের সংখ্যার মতো দিকগুলি বিবেচনা করতে পারেন।

স্তরের নামকরণ

স্তরের নাম প্রকল্পের কাঠামো এবং উদ্দেশ্যের উপর ভিত্তি করে নির্ধারিত হয়। স্তরের নামকরণের সাধারণ উদাহরণগুলি নিম্নরূপ:।

1@layer base, layout, components, utilities;

base: একটি স্তর যা রিসেট এবং টাইপোগ্রাফির মতো মৌলিক স্টাইল সংজ্ঞায়িত করে।
layout: একটি স্তর যা পৃষ্ঠার লেআউট এবং গ্রিড সিস্টেমের জন্য স্টাইল সংজ্ঞায়িত করে।
components: একটি স্তর যা বোতাম এবং কার্ডের মতো পুনঃব্যবহারযোগ্য UI উপাদানগুলির জন্য স্টাইল সংজ্ঞায়িত করে।
utilities: একটি স্তর যা ইউটিলিটি ক্লাসগুলির জন্য স্টাইল সংজ্ঞায়িত করে (যেমন, margin, padding, text-center)।

ধারাবাহিক ইমপোর্টের ক্রম

1@import url('base.css') layer(base);
2@import url('layout.css') layer(layout);
3@import url('components.css') layer(components);
4@import url('utilities.css') layer(utilities);

একাধিক CSS ফাইল পরিচালনার সময়, @import ব্যবহার করে একটি ধারাবাহিক ক্রম সেট করা গুরুত্বপূর্ণ। এই ক্রমটি নিশ্চিত করে যে কাঙ্ক্ষিত অগ্রাধিকার বজায় থাকে।

স্তর সংহতকরণ এবং সরলীকরণ

 1@layer common {
 2  body {
 3    margin: 0;
 4    padding: 0;
 5    box-sizing: border-box;
 6  }
 7
 8  .container {
 9    max-width: 1200px;
10    margin: 0 auto;
11  }
12}

ছোট স্কেলের প্রকল্পগুলিতে, স্তরের সংখ্যা সীমিত করলে জটিলতা কমে যেতে পারে।

সারসংক্ষেপ

CSS @ নিয়মগুলি শক্তিশালী সরঞ্জাম যা ওয়েব ডিজাইনে নমনীয় স্টাইল প্রয়োগ এবং পারফরম্যান্স বৃদ্ধিতে সহায়ক হয়। @media, @keyframes, এবং @supports ডিভাইসের পার্থক্য এবং ব্রাউজার সামঞ্জস্য বিবেচনায় স্টাইল করা সহজ করে। অতিরিক্তভাবে, @import এবং @font-face আরও বিস্তৃত প্রকাশের জন্য বাহ্যিক সম্পদ কার্যকরভাবে অন্তর্ভুক্ত করতে সহায়তা করে।

এই @ নিয়মগুলি বোঝা এবং সঠিকভাবে ব্যবহার করা আরও দক্ষ CSS কোডিং সক্ষম করে।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

CSS ছদ্ম-ক্লাস এবং ছদ্ম-উপাদান ফন্ট সম্পর্কিত CSS প্রপার্টি

CSS `@` বিধিসমূহ

YouTube Video

প্রিভিউর জন্য HTML

CSS @ বিধিসমূহ

উদাহরণস্বরূপ @ বিধিসমূহের প্রকারভেদ

@import

বিঃদ্রঃ:

@media

সাধারণভাবে ব্যবহৃত শর্তাবলী

প্রস্থ নির্ভর শর্তসমূহ

যন্ত্রের অভিমুখন (orientation)

রেজোলিউশন (resolution)

শর্তগুলি একত্রিত করা

এবং শর্ত (and)

অথবা শর্ত (,)

না শর্ত (not)

@font-face

@keyframes

@supports

@page

বিঃদ্রঃ:

@charset

@layer

মূল সিনট্যাক্স

একাধিক লেয়ারের প্রাধান্য

গ্লোবাল প্রাধান্য

@layer সহ @import ব্যবহার

@layer এর মূল পয়েন্টগুলি

@layer ব্যবহারের উদাহরণ

স্তরের নামকরণ

ধারাবাহিক ইমপোর্টের ক্রম

স্তর সংহতকরণ এবং সরলীকরণ

সারসংক্ষেপ

YouTube Video

CSS `@` বিধিসমূহ

উদাহরণস্বরূপ `@` বিধিসমূহের প্রকারভেদ

`@import`

`@media`

যন্ত্রের অভিমুখন (`orientation`)

রেজোলিউশন (`resolution`)

এবং শর্ত (`and`)

অথবা শর্ত (`,`)

না শর্ত (`not`)

`@font-face`

`@keyframes`

`@supports`

`@page`

`@charset`

`@layer`

`@layer` সহ `@import` ব্যবহার

`@layer` এর মূল পয়েন্টগুলি

`@layer` ব্যবহারের উদাহরণ