CSS वर्णों के नाम / चयनकर्ताओं में कौन से वर्ण मान्य हैं?

Question

CSS वर्ण चयनकर्ताओं के भीतर कौन से वर्ण / प्रतीक की अनुमति है ?
मुझे पता है कि निम्नलिखित वर्ण अमान्य हैं , लेकिन क्या वर्ण मान्य हैं ?

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

Comments

संबंधित प्रश्न: stackoverflow.com/questions/2812072/…

— BalusC

utf8 वर्णों के बारे में क्या? जैसे मैं ग्रीक में टाइप कर सकता

— हूं

विशेष वर्ण उन्हें भागने से वर्ग के नाम में इस्तेमाल किया जा सकता है - अपने सीएसएस फ़ाइल में आप एक परिभाषित कर सकते हैं .hello/worldबैकस्लैश से बचने के द्वारा वर्ग: .hello\2fworld, hello\2f worldयाhello\/world

— wyqydsyq

एक अन्य संबंधित प्रश्न, "नामों के सिंटैक्स" के बारे में नहीं, बल्कि कई नामों को व्यक्त करते समय "वर्ग विशेषता के सिंटैक्स" के बारे में ।

— पीटर क्रूस

आप इमोजी का इस्तेमाल भी कर सकते हैं। npmjs.com/package/postcss-modules-emoji-classname

— केविन

Answer 1

आप सीधे सीएसएस व्याकरण पर जाँच कर सकते हैं ।

मूल रूप से ¹ , एक नाम को एक अंडरस्कोर ( _), एक हाइफ़न ( -), या एक अक्षर ( a- z) के साथ शुरू करना चाहिए , इसके बाद किसी भी संख्या में हाइफ़न, अंडरस्कोर, अक्षर, या नंबर। एक पकड़ है: यदि पहला चरित्र एक हाइफ़न है, तो दूसरा वर्ण ² अक्षर या अंडरस्कोर होना चाहिए, और नाम कम से कम 2 वर्ण लंबा होना चाहिए।

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

संक्षेप में, पिछले नियम W3C कल्पना से निकाले गए निम्न में अनुवाद करता है । :

CSS में, पहचानकर्ता (चयनकर्ताओं में तत्व नाम, वर्ग और ID सहित) में केवल वर्ण [a-z0-9] और ISO 10646 वर्ण U + 00A1 और उच्चतर हो सकते हैं, साथ ही हाइफ़न (-) और अंडरस्कोर (_) ; वे अंक के साथ शुरू नहीं कर सकते हैं, या एक अंक के बाद एक हाइफ़न। पहचानकर्ता में एक वर्ण कोड के रूप में बच गए अक्षर और कोई ISO 10646 वर्ण भी हो सकते हैं (अगला आइटम देखें)। उदाहरण के लिए, पहचानकर्ता "B & W?" "B \ & W \" के रूप में लिखा जा सकता है? या "बी \ 26 डब्ल्यू \ 3 एफ"।

एक हाइफ़न या अंडरस्कोर के साथ शुरू होने वाले पहचानकर्ता आमतौर पर ब्राउज़र-विशिष्ट एक्सटेंशन के लिए आरक्षित होते हैं, जैसे कि -moz-opacity।

¹ यह सभी बच गए यूनिकोड वर्णों को शामिल करने से थोड़ा अधिक जटिल हो गया है (जो कोई भी वास्तव में उपयोग नहीं करता है)।

² ध्यान दें कि, व्याकरण I के अनुसार, एक नियम जो TWO हाइफ़न के साथ शुरू होता है, उदाहरण के लिए --indent1, अमान्य है। हालाँकि, मुझे पूरा यकीन है कि मैंने इसे अभ्यास में देखा है।

Comments

NB: W3C कहता है कि एक अग्रणी '-' या '_' का उपयोग विक्रेता-विशिष्ट CSS एक्सटेंशन (जैसे, मोज़िला ब्राउज़र द्वारा कार्यान्वित -moz * कक्षाएं) के लिए आरक्षित होना चाहिए।

— मियादी

The -escapes का आमतौर पर उपयोग किया जाता है, लेकिन आमतौर पर CSS हैक्स के प्रयोजनों के लिए, उन ब्राउज़रों को अलग करना जो उनका समर्थन नहीं करते हैं।

— 23

दो साल बाद @Pim Jager की टिप्पणी को अपडेट करने के लिए, w3counter.com/globalstats.php IE6 के अनुसार, अब 3% से कम उपयोगकर्ताओं द्वारा उपयोग किया जाता है, 4% पर IE9 के पीछे, 9% पर IE7, 22% पर IE8। फ़ायरफ़ॉक्स के सभी संस्करणों में 28%, क्रोम के सभी संस्करणों में 17% हैं।

— डैनियल इयरविकर

मुझे पता है कि यह एक पुराना उत्तर है, लेकिन CSS (कम से कम 2+) पहचानकर्ताओं में किसी भी {Non-ASCII} चरित्र की अनुमति देता है ।

— user2864740

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F"। इसलिए - --indent1अमान्य है और \--indent1( --उदाहरण के लिए, आईओएस पर कक्षाएं टूटने) से बच निकलने की जरूरत है

— eithed

Answer 2

मेरे आश्चर्य के लिए यहां अधिकांश उत्तर गलत हैं। परिणाम यह निकला:

NUL को छोड़कर किसी भी वर्ण को CSS में CSS वर्ग के नामों की अनुमति है। (यदि CSS में NUL है (बच गया या नहीं), तो परिणाम अपरिभाषित है। [ CSS-characters ])

मैथियास ब्येनेंस ने इन नामों का उपयोग करने का तरीका बताते हुए स्पष्टीकरण और डेमो के लिंक का जवाब दिया । CSS कोड में नीचे लिखा गया है, एक वर्ग नाम से बचने की आवश्यकता हो सकती है , लेकिन इससे वर्ग नाम नहीं बदलता है। उदाहरण के लिए, अनावश्यक रूप से ओवर-एस्कैप्ड प्रतिनिधित्व उस नाम के अन्य अभ्यावेदन से अलग दिखेगा, लेकिन यह अभी भी उसी वर्ग के नाम को संदर्भित करता है।

अधिकांश अन्य (प्रोग्रामिंग) भाषाओं में परिवर्तनशील नामों ("पहचानकर्ता") से बचने की अवधारणा नहीं होती है, इसलिए किसी चर के सभी निरूपणों को समान दिखना होता है। CSS में ऐसा नहीं है।

ध्यान दें कि HTML में वर्ग नाम विशेषता में अंतरिक्ष वर्ण (स्पेस, टैब, लाइन फीड, फॉर्म फीड और कैरिज रिटर्न) को शामिल करने का कोई तरीका नहीं है , क्योंकि वे पहले से ही एक दूसरे से कक्षाएं अलग करते हैं।

इसलिए, यदि आपको सीएसएस वर्ग नाम में एक यादृच्छिक स्ट्रिंग को चालू करने की आवश्यकता है: एनयूएल और स्थान का ध्यान रखें, और बचना (सीएसएस या एचटीएमएल के अनुसार)। किया हुआ।

Comments

आपके उत्तर की पहली पंक्ति "अधिकांश उत्तर यहां पुराने हैं / केवल CSS2 पर लागू होते हैं" होना चाहिए।

— सलमान ए

@SalmanA मेरे द्वारा शुरू किए गए उत्तर गलत थे। वे न तो CSS2.1, CSS2 और न ही CSS1 पर लागू होते हैं।

— रॉबर्ट सीमर

@RobertSiemer अच्छी बात है, मैंने अपनी टिप्पणी को stackoverflow.com/questions/50812118/… (जो इस विषय से संबंधित कभी कम नहीं है) में स्थानांतरित किया

— पीटर टी।

और जावास्क्रिप्ट कार्यान्वयन: github.com/mathiasbynens/CSS.escape/blob/master/css.escape.js

— Duarte Cunha Leão

Answer 3

मैंने आपके प्रश्न का गहराई से उत्तर दिया है: http://mathiasbynens.be/notes/css-escapes

लेख यह भी बताता है कि सीएसएस (और जावास्क्रिप्ट) में किसी भी चरित्र से कैसे बचा जाए, और मैंने इसके लिए एक उपयोगी उपकरण भी बनाया । उस पेज से:

यदि आप किसी तत्व को एक आईडी मान देते हैं ~!@$%^&*()_+-=,./';:"?><[]{}|`#, तो चयनकर्ता इस तरह दिखाई देगा:

सीएसएस:

<style>
  #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#
  {
    background: hotpink;
  }
</style>

जावास्क्रिप्ट:

<script>
  // document.getElementById or similar
  document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#');
  // document.querySelector or similar
  $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
</script>

Comments

@ डारिल बेशक, यह एक बहुत चरम उदाहरण है, लेकिन सामान जैसे class="404-error"उपयोगी हो सकते हैं।

— मैथियास ब्यनेंस

मेरे पास एक उदाहरण है: मैं एक सिंटैक्स हाइलाइटिंग सिस्टम के आउटपुट को CSS में परिवर्तित करता हूं। इसमें "आईएसओ सी ++: प्रकार ( _t / _type)" जैसे वर्ग नाम हैं । यदि मैं केवल व्हाट्सएप को प्रतिस्थापित करता हूं तो मेरे पास मान्य वर्ग नाम हैं।

— फ्लाइंग भेड़

अपनी वेबसाइट पर, आप कहते हैं कि अंतरिक्ष चरित्र बैकस्लैश बच सकता है। जब मैं इसे एक वर्ग के नाम पर आज़माता हूं, तो मैं इसे काम पर नहीं ला सकता। मैंने देखा कि इस उदाहरण में कोई जगह नहीं है। क्या यह संभव है?

— एडमरला

@ अदमारला तत्व में <p class="foo bar">दो वर्ग जोड़ता है p: fooऔर bar। एक HTML तत्व में व्हॉट्सएप युक्त क्लासनाम जोड़ने के लिए कोई रास्ता नहीं है (कि मैं सोच सकता हूं)। व्हाट्सएप पात्रों से कैसे बचा जाए, इस बारे में जानकारी शामिल थी क्योंकि अन्य पहचानकर्ता संदर्भों में ऐसे पात्रों से बचने के लिए उपयोगी है, जैसे कि फ़ॉन्ट परिवार के नाम।

— मथियास ब्यनेंस

जैसा कि जीवन की अधिकांश चीजों के साथ सीएसएस में लगता है कि "तकनीकी रूप से कानूनी चरम" और "समझदार" में अंतर है।

— वोक्समैन

Answer 4

W3C कल्पना पढ़ें । (यह सीएसएस 2.1 है, ब्राउज़रों की अपनी धारणा के लिए उपयुक्त संस्करण ढूंढें)

संपादित करें: प्रासंगिक पैराग्राफ इस प्रकार है:

CSS में, पहचानकर्ता (चयनकर्ताओं में तत्व नाम, वर्ग और ID सहित) में केवल वर्ण [a-z0-9] और ISO 10646 वर्ण U + 00A1 और उच्चतर हो सकते हैं, साथ ही हाइफ़न (-) और अंडरस्कोर (_) ; वे अंक के साथ शुरू नहीं कर सकते हैं, या एक अंक के बाद एक हाइफ़न। पहचानकर्ता में एक वर्ण कोड के रूप में बच गए अक्षर और कोई ISO 10646 वर्ण भी हो सकते हैं (अगला आइटम देखें)। उदाहरण के लिए, पहचानकर्ता "B & W?" "B \ & W \" के रूप में लिखा जा सकता है? या "बी \ 26 डब्ल्यू \ 3 एफ"।

2 संपादित करें: जैसा कि @mipadi Triptych के उत्तर में बताते हैं, यह एक चेतावनी है , उसी वेबपृष्ठ में भी:

CSS में, पहचानकर्ता '-' (डैश) या '_' (अंडरस्कोर) से शुरू हो सकता है। '-' या '_' से शुरू होने वाले कीवर्ड और संपत्ति के नाम विक्रेता-विशिष्ट एक्सटेंशन के लिए आरक्षित हैं। ऐसे विक्रेता-विशिष्ट एक्सटेंशनों में निम्न में से एक प्रारूप होना चाहिए:

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

उदाहरण):

उदाहरण के लिए, यदि XYZ संगठन ने प्रदर्शन के पूर्व की ओर सीमा के रंग का वर्णन करने के लिए एक संपत्ति जोड़ी, तो वे इसे -xyz-border-East-color कह सकते हैं।

अन्य ज्ञात उदाहरण:

 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey

एक प्रारंभिक डैश या अंडरस्कोर की गारंटी है कि किसी संपत्ति या कीवर्ड में सीएसएस के किसी भी वर्तमान या भविष्य के स्तर का उपयोग नहीं किया जाए। इस प्रकार विशिष्ट सीएसएस कार्यान्वयन ऐसे गुणों को नहीं पहचान सकते हैं और पार्सिंग त्रुटियों से निपटने के नियमों के अनुसार उन्हें अनदेखा कर सकते हैं। हालाँकि, क्योंकि शुरुआती डैश या अंडरस्कोर व्याकरण का हिस्सा है, CSS 2.1 कार्यान्वयनकर्ताओं को हमेशा सीएसएस-कंफर्मिंग पार्सर का उपयोग करने में सक्षम होना चाहिए, चाहे वे किसी भी विक्रेता-विशिष्ट एक्सटेंशन का समर्थन करते हों या नहीं।

लेखकों को विक्रेता-विशिष्ट एक्सटेंशन से बचना चाहिए

Comments

मैं अग्रणी डैश और अंडरस्कोर के बारे में आपके दूसरे संपादन का उल्लेख कर रहा था, लेकिन यह स्पष्ट करना भूल गया। गलतफहमी के लिए खेद है।

— एल्बिन

Answer 5

पूर्ण नियमित अभिव्यक्ति है:

-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

तो "सूचीबद्ध -" और " _" को छोड़कर आपके सभी सूचीबद्ध वर्णों को अनुमति नहीं है अगर सीधे उपयोग किया जाता है। लेकिन आप उन्हें बैकस्लैश foo\~barका उपयोग करके या यूनिकोड संकेतन का उपयोग करके सांकेतिक शब्दों में बदलना कर सकते हैं foo\7E bar।

Comments

क्यों [\200-\377]? [\178-\1114112]सीएसएस 3 में unescaped अनुमति दी है

— उड़ान भेड़

\377यहाँ वास्तव में गलत है। CSS2.1 के लेक्सिकल स्कैनर अनुभाग के व्याकरण पर एक नोट है जिसमें कहा गया है: "द \ _" 377 उच्चतम वर्ण संख्या का प्रतिनिधित्व करता है जो कि फ्लेक्स के मौजूदा संस्करणों से (दशमलव 255) से निपट सकती है। इसे "\ 417777" के रूप में पढ़ा जाना चाहिए। दशमलव 1114111), जो यूनिकोड / आईएसओ-10646 में उच्चतम संभव कोड बिंदु है। " यह भी \240साथ ही होना चाहिए , नहीं \377। मुझे लगता है कि यह 7 साल का है, हालांकि तब से चीजें शायद थोड़ी बदल गई हैं।

— जेम्स डोनली

मेरा मानना ​​है कि एक अधिक सटीक नियमित अभिव्यक्ति होगी -?(?:[_a-z]|(?![\u0000-\u0239]).*|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|(?![\u0000-\u0239]).*|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*।

— जेम्स डोनली

@JamesDonnelly यदि आपको लगता है कि कुछ अद्यतन की आवश्यकता है, तो कृपया मेरे उत्तर को संपादित करने के लिए स्वतंत्र महसूस करें।

— गम्बू

Answer 6

वर्कअराउंड की तलाश करने वालों के लिए, आप एक विशेषता चयनकर्ता का उपयोग कर सकते हैं, उदाहरण के लिए, यदि आपकी कक्षा एक संख्या से शुरू होती है। परिवर्तन:

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

इसके लिए:

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

इसके अलावा, अगर कई वर्ग हैं, तो आपको उन्हें चयनकर्ता में निर्दिष्ट करने की आवश्यकता होगी जो मुझे लगता है।

सूत्रों का कहना है:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. क्या सीएसएस कक्षाओं को उन नामों के साथ बनाने के लिए वर्कअराउंड किया गया है जो संख्याओं के साथ मान्य हैं?

Answer 7

मेरी समझ यह है कि अंडरस्कोर तकनीकी रूप से मान्य है। चेक आउट:

https://developer.mozilla.org/en/underscores_in_class_and_id_names

"... 2001 की शुरुआत में प्रकाशित विनिर्देश के लिए इरेटा ने पहली बार अंडरस्कोर को कानूनी बना दिया।"

उपरोक्त लेख में कहा गया है कि उनका उपयोग कभी नहीं किया जाता है, फिर उन ब्राउज़रों की एक सूची देता है जो उनका समर्थन नहीं करते हैं, जिनमें से सभी, कम से कम, लंबे-निरर्थक उपयोगकर्ताओं की संख्या के संदर्भ में हैं।

Answer 8

HTML5 / CSS3 के लिए कक्षाएं और आईडी संख्याओं के साथ शुरू हो सकती हैं।

Comments

क्या इसके लिए आपके पास स्रोत है? हो सकता है कि मुझे कुछ याद आ रहा हो, लेकिन CSS3 के चयनकर्ता सीएसएस 2.1 युक्ति में पहचानकर्ताओं की परिभाषा के लिए लिंक की कल्पना करते हैं जो अग्रणी संख्या की अनुमति नहीं देता है।

— रयान

w3.org/TR/2003/WD-css3-syntax-20030813/#characters <- फिर भी अग्रणी संख्या आदि की अनुमति नहीं देता (भले ही यह काम करता है)

— जेमी पाट

एचटीएमएल 5 एक नंबर (जैसे class="1a") से कक्षाएं और आईडी शुरू करने की अनुमति देता है । हालाँकि, एक सीएसएस पहचानकर्ता एक संख्या से शुरू नहीं हो सकता (जैसे .1aकाम नहीं करेगा)। आप इसे बच सकते हैं, कठिन (जैसे .\31 aया .\000031a)।

— ओरिऑल

हालाँकि यह सामान्य रूप से CSS में भी काम करता है, लेकिन लगता है कि यह अभी भी आधिकारिक नहीं है। "संपत्ति के नाम और नियम के नाम हमेशा पहचानकर्ता होते हैं, जिन्हें एक पत्र या एक पत्र के बाद एक हाइफ़न के साथ शुरू करना पड़ता है, और फिर पत्र, संख्या, हाइफ़न या अंडरस्कोर हो सकते हैं।" - w3.org/TR/css3-syntax/#syntax-description

— स्टिकर

@Pangloss वर्ग के नाम संपत्ति के नाम या नियम के नाम नहीं हैं।

— बेनेट मैकलेवे जुले

Answer 9

@ Triptych के उत्तर से दूर जाकर, आप एक स्ट्रिंग को वैध बनाने के लिए निम्नलिखित 2 रेगेक्स मैचों का उपयोग कर सकते हैं:

[^a-z0-9A-Z_-]

यह एक रिवर्स मैच है जो किसी भी चीज़ का चयन करता है जो आसान हटाने के लिए अक्षर, संख्या, डैश या अंडरस्कोर नहीं है।

^-*[0-9]+

यह एक स्ट्रिंग की शुरुआत में 1 या अधिक संख्याओं के बाद 0 या 1 डैश से मेल खाता है, आसान हटाने के लिए भी।

मैं इसे PHP में कैसे उपयोग करूँ:

//Make alphanumeric with dashes and underscores (removes all other characters)
$class = preg_replace("/[^a-z0-9A-Z_-]/", "", $class);
//Classes only begin with an underscore or letter
$class = preg_replace("/^-*[0-9]+/", "", $class);
//Make sure the string is 2 or more characters long
return 2 <= strlen($class) ? $class : '';