CSS At-Rules

ज़्यादातर CSS elements को style करने के बारे में है, लेकिन मुट्ठी भर special rules -- जो हमेशा @ symbol से शुरू होते हैं -- इसके बजाय खुद stylesheet को instructions देते हैं: कौन-सा character encoding expect करनी है, किसी XML namespace को कैसे नाम देना है, rules के किसी block को कैसे scope करना है, या custom counter symbols कैसे define करने हैं। इन at-rules को अपने regular styling rules के साथ बैठे हुए configuration directives की तरह सोचें।

In this page:

@charset से File Encoding Declare करना
@namespace से XML Namespaces को नाम देना
@scope से Rule Scope को Limit करना
@starting-style से Entrances Animate करना
@counter-style से Custom Counters बनाना

Syntax

css

@media (condition) { }
@import url("file.css");
@font-face { }
@keyframes name { }
@supports (property: value) { }

@charset से File Encoding Declare करना

@charset browser को बताता है कि कोई stylesheet file कौन-सी character encoding इस्तेमाल करती है, जो तब मायने रखता है जब आपकी CSS में content: strings के अंदर curly quotes या accented letters जैसे non-ASCII characters हों।

यह file के literal पहले characters होने चाहिए -- यहाँ तक कि कोई comment भी इसके पहले नहीं आ सकता -- वरना browser इसे चुपचाप नज़रअंदाज़ कर देता है।

Note:

अपनी CSS file को खुद UTF-8 के रूप में save करें और @charset "UTF-8"; declare करें; साथ में, ताकि declared encoding हमेशा file के असली bytes से match करे।
Accepted values:
@charset "UTF-8"; — एकमात्र widely supported encoding
पहला होना चाहिए — इससे पहले कुछ भी नहीं आ सकता, यहाँ तक कि कोई comment भी नहीं
double quotes — ज़रूरी, single quotes valid नहीं हैं
exactly one — सिर्फ पहले वाले का सम्मान किया जाता है

Warning: file में @charset से पहले कोई भी character, comment, या whitespace browsers को declaration को पूरी तरह नज़रअंदाज़ करने पर मजबूर करता है।

उदाहरण: Declaring File Encoding with @charset

css

<style>
p { font-size: 1.2rem; }
@charset "UTF-8";
p::before {
  content: "“";
}
</style>
<p>The opening quote before this text comes from CSS.</p>

@namespace से XML Namespaces को नाम देना

@namespace मुख्य रूप से SVG या XHTML जैसे XML-based documents में एक CSS prefix को एक XML namespace URI से जोड़ने के लिए इस्तेमाल होता है, svg|circle जैसे selectors को सिर्फ एक specific namespace से elements target करने देते हुए। plain HTML documents में इसकी शायद ही कभी ज़रूरत पड़ती है, क्योंकि HTML का सिर्फ एक implicit namespace है।

Note:

@namespace की तरफ़ मुख्य रूप से तब जाएँ जब inline SVG elements को style कर रहे हों जो standard SVG markup के साथ custom XML namespaces मिलाते हैं।
Accepted values:
@namespace url(<uri>); — default namespace set करता है
@namespace <prefix> url(<uri>); — एक prefix declare करता है
prefix|element — एक prefix इस्तेमाल करने वाला selector
|element — कोई भी namespace

Warning: @namespace को किसी भी @charset या @import rules के बाद लेकिन बाकी सभी style rules से पहले declare किया जाना चाहिए, वरना इसे नज़रअंदाज़ किया जाएगा।

उदाहरण: Naming XML Namespaces with @namespace

css

<style>
@namespace svg url(http://www.w3.org/2000/svg);
svg|circle {
  fill: red;
}
</style>
<!-- @namespace svg targets SVG elements; it must precede other rules -->
<svg width="120" height="120"><circle cx="60" cy="60" r="50" /></svg>

@scope से Rule Scope को Limit करना

@scope CSS rules के एक block को wrap करता है ताकि उनके selectors सिर्फ एक specific DOM subtree के अंदर के elements को match करें, एक scoping root और एक optional scoping limit से defined।

यह एक बहुत पुरानी समस्या solve करता है: हर एक selector को एक unique class name से prefix किए बिना किसी rule को सिर्फ "इस card के अंदर" लागू करना।

Note:

component-style CSS के लिए @scope इस्तेमाल करें जहाँ आप चाहते हैं कि "p { color: red; }" जैसा एक rule सिर्फ किसी specific card के अंदर लागू हो, पूरे page में globally नहीं।
Accepted values:
@scope (<root>) — styles root के अंदर लागू होते हैं
@scope (<root>) to (<limit>) — एक lower boundary वाला donut scope
:scope — scope root को refer करता है
proximity — specificity ties पर सबसे नज़दीकी scope जीतता है

Warning: आपने जो scoping limit set किया है (to:) उस point से आगे के elements को exclude कर देता है, जो गलती से उस nested content को exclude कर सकता है जिसे आप फिर भी style करना चाहते थे।

उदाहरण: Limiting Rule Scope with @scope

css

<style>
.card { border: 2px solid #1e6fd9; padding: 8px; }
@scope (.card) {
  p {
    color: red;
  }
}
</style>
<div class="card"><p>Inside @scope: red</p></div>
<p>Outside the scope: unaffected</p>

@starting-style से Entrances Animate करना

@starting-style वे "before" values define करता है जिनसे एक transition animate होता है जब कोई element जो पहले display: none था (या नया DOM में जोड़ा गया था) पहली बार visible होता है।

नार्मल रूप से CSS transitions किसी element की बिल्कुल पहली appearance को animate नहीं कर सकते, क्योंकि transition करने के लिए कोई prior state नहीं होती -- @starting-style वह missing starting point provide करता है।

Note:

display जैसी properties को animate करते समय @starting-style को transition-behavior: allow-discrete के साथ जोड़ें, ताकि entrance transition की एक defined starting point हो।
Accepted values:
@starting-style { ... } — पहले render से पहले की style define करता है
transition: opacity 0.3s — starting style से animate करता है
display: none से block — allow-discrete transitions के साथ काम करता है

Warning: @starting-style सिर्फ किसी discrete property change (जैसे display: none से block) के बाद बिल्कुल पहले render को असर करता है; यह ordinary hover या class-toggle transitions पर लागू नहीं होता।

उदाहरण: Animating Entrances with @starting-style

css

<style>
.box { padding: 20px; background: #cfe8ff; border: 2px solid #1e6fd9; }
@starting-style {
  .box {
    opacity: 0;
  }
}
.box {
  opacity: 1;
  transition: opacity 0.3s;
}
</style>
<div class="box">Fades in when inserted</div>

@counter-style से Custom Counters बनाना

@counter-style आपको built-in list (decimal, roman, disc, वगैरह) से आगे एक पूरी तरह custom counter symbol system define करने देता है -- उदाहरण के लिए, custom bullet glyphs, एक specific prefix और suffix, या एक repeating custom symbol set।

यह ordered और unordered lists को styling control का एक level देता है जिस तक अकेले list-style-type नहीं पहुँच सकता।

Note:

अपने @counter-style को एक descriptive नाम दें और sitewide consistent custom bullets के लिए list-style-type के ज़रिए इसे कई lists में reuse करें।
Accepted values:
system: cyclic | numeric | alphabetic | symbolic | additive | fixed | extends — counters कैसे generate होते हैं
symbols: <symbol> — इस्तेमाल होने वाले markers
suffix: <string> — marker के बाद का text
prefix: <string> — marker से पहले का text
range: <lower> <upper> | auto — counter range

Warning: @counter-style को एक system descriptor (जैसे cyclic या fixed) declared होना चाहिए, वरना browser को नहीं पता होगा कि आपके custom symbols के through कैसे cycle करना है।

उदाहरण: Building Custom Counters with @counter-style

css

<style>
@counter-style thumbs {
  system: cyclic;
  symbols: "👍";
  suffix: " ";
}
ul {
  list-style: thumbs;
}
</style>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Live Example

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS @property Next Lesson → CSS Cursor

CSS At-Rules

@charset से File Encoding Declare करना

@namespace से XML Namespaces को नाम देना

@scope से Rule Scope को Limit करना

@starting-style से Entrances Animate करना

@counter-style से Custom Counters बनाना

Chapter Quiz — Complete all 25 topics to unlock

Login to run this code