CSS Errors

Browsers Invalid CSS को कैसे Handle करते हैं

जब किसी browser का parser किसी ऐसी declaration से टकराता है जिसे वह समझ नहीं सकता -- कोई misspelled property, कोई missing unit, कोई unmatched brace -- तो वह पूरी stylesheet को fail करने के बजाय सिर्फ उस एक declaration को discard करके अगली पर चला जाता है।

यह fault-tolerant design जानबूझकर है: यह पुराने browsers को उन नए CSS features को नज़रअंदाज़ करने देता है जिन्हें वे नहीं पहचानते, page को तोड़े बिना।

उदाहरण: How Browsers Handle Invalid CSS

<style>
p {
  colr: red;
  font-size: 16px;
}
</style>
<p>The invalid property "colr" is ignored, but font-size still applies.</p>

आम Syntax गलतियाँ

सबसे आम errors हैं declarations के बीच एक missing semicolon (जो चुपचाप दो rules को एक टूटे हुए rule में merge कर सकता है), width: 20 जैसी किसी numeric value पर missing unit width: 20px की जगह, और किसी rule block के आस-पास mismatched या missing curly braces।

इनमें से हर एक browser को असर वाली declaration को, या इससे भी बुरा, अगली valid brace तक बाद की हर चीज़ को drop करने पर मजबूर करता है।

उदाहरण: Common Syntax Mistakes

<style>
p {
  width: 20
  color: red;
}
</style>
<p>The missing semicolon after width breaks both declarations.</p>

DevTools में Errors ढूँढना

Browser DevTools का Styles/Elements panel invalid declarations को strikethrough और warning icon के साथ दिखाता है, जिससे एक बार पता होने पर उन्हें ढूँढना आसान हो जाता है। जिन properties को browser बिल्कुल भी नहीं पहचानता, या जिन values को वह parse नहीं कर सकता, उन्हें इस तरह flag किया जाता है भले ही page में खुद कोई error न दिखे।

उदाहरण: Spotting Errors in DevTools

<style>
p {
  colour: blue;
}
</style>
<p>"colour" is not a valid property, so this text stays default.</p>

Case Sensitivity और Typos

CSS property names और ज़्यादातर keyword values case-insensitive होती हैं, लेकिन class और ID selectors case-sensitive होते हैं और उन्हें HTML के class/id attribute से exactly match करना चाहिए -- 'क्यों मेरा style लागू नहीं हो रहा' जैसे bugs का यह एक आम कारण है जो errors जैसे दिखते हैं लेकिन असल में selector mismatches होते हैं।

उदाहरण: Case Sensitivity and Typos

<style>
.Card {
  color: blue;
}
</style>
<div class="card">class="card" does not match the selector ".Card"</div>

अपनी CSS को Validate करना

W3C CSS Validator और ज़्यादातर code editors के built-in linters किसी browser तक पहुँचने से पहले ही invalid syntax पकड़ लेते हैं, unknown properties, invalid values, और unclosed blocks को flag करके।

Development के दौरान एक validator चलाना उन silent failures को पकड़ लेता है जो वरना सिर्फ 'यह style काम नहीं कर रहा' के रूप में सामने आते बिना किसी visible error के।

उदाहरण: Validating Your CSS

<style>
p {
  colr: red;
  width: 20;
}
</style>
<p>Neither declaration is valid, so the browser ignores them.</p>