HTML और CSS पहलू

इस सामग्री में ऐसे पहलुओं को शामिल किया गया है जो HTML डेवलपर को जानना और याद रखना उपयोगी है। कुछ प्रश्न IE के लिए समर्पित हैं - मैंने खुद IE6 का समर्थन करने से इनकार कर दिया है, हालांकि, यह जानने के लिए कि इसके व्यवहार की विशेषताएं अतिसुधार नहीं होगी।

1. ब्राउज़र मोड

मानक:
मानक मोड - दस्तावेज़ में मौजूद स्टाइलशीट सीएसएस 2.1 विनिर्देश (नवीनतम संस्करण) का अनुपालन करती है

कस्टम मोड (पिछड़े संगतता मोड):
क्विरक्स मोड - ब्राउज़र पुराने नियमों के व्यवहार का अनुकरण करते हुए, सीएसएस नियमों के हिस्से की अनदेखी करता है।

मानक मोड के करीब:
लगभग मानक मोड - ओपेरा, फ़ायरफ़ॉक्स, सफारी, जिसमें तालिका कोशिकाओं में चित्रों का स्थान संगतता मोड में प्रदर्शित होता है।

2. चयनकर्ता, छद्म वर्ग, छद्म तत्व

1) चयनकर्ता:

• टैग चयनकर्ता - कोई भी HTML टैग जिसके लिए प्रारूपण नियमों को परिभाषित किया गया है, चयनकर्ता के रूप में कार्य कर सकता है।
  tagName {
property1: value1;
property2: value2;
…
}
  टैग का नाम - मामला मायने नहीं रखता
  
  
• वर्गों का चयनकर्ता - दस्तावेज़ में चयनकर्ता कोई भी संख्या हो सकती है।
  .className {
…
}
  क्लासनेम - केस सेंसिटिव
  
  
• आईडी चयनकर्ता - पहचानकर्ता तत्व के अद्वितीय नाम की पहचान करता है।
  #idName {
…
}
  idName - मामला संवेदनशील
  
  
• प्रासंगिक चयनकर्ता - टैग चयनकर्ताओं, वर्ग चयनकर्ताओं, आईडी चयनकर्ताओं आदि के होते हैं, जो रिक्त स्थान से अलग होते हैं।
  sel1 sel2 … {
…
}
  
  
• पड़ोसी चयनकर्ता एक दस्तावेज के तत्व होते हैं जब वे कोड में एक दूसरे का अनुसरण करते हैं। CSS सिंटैक्स में, मान निम्नलिखित तत्वों के गुणों पर लागू होता है +
  <p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>
  बी, var - पड़ोसी
  sel1 + sel2 {
…
}
  
  
• बाल चयनकर्ता - सीधे मूल तत्व के अंदर स्थित हैं। CSS सिंटैक्स में, शैली मान केवल एक बच्चे पर लागू होता है।
  
  <p><em> लोरेम इप्सम डोलर अमेट </em> , कंसेटेट्युर adipiscing
  एलीट, सेड डायम नोनमी निब युरिस्मोड टिंसीडंट यूट लैक्ट्री डोलोर मैग्ना एलीगाम एराट विल्लेट। </p>
  em, p का एक बच्चा है
  sel1 > sel2 {
…
}
  
  sel1 - माता-पिता चयनकर्ता
  sel2 - बच्चे का चयनकर्ता
  
  
• गुण का चयन करें:
  [attribute] {
…
}
  
  
• यूनिवर्सल चयनकर्ता - दस्तावेज़ के सभी तत्वों के लिए शैली को परिभाषित करता है।
  * {
…
}
  

2) छद्म वर्ग:

sel: pClass {
...
}

• • लिंक - अनवीकृत लिंक (वैकल्पिक)
• - दौरा किया - दौरा लिंक
• - होवर - एक लिंक पर होवर करें
• - सक्रिय - लिंक पर क्लिक करें
• ध्यान - एक तत्व पर ध्यान देना (ए, इनपुट, चयन, टेक्सारिया)
• - पहला बच्चा - चयनकर्ता के पहले बच्चे पर लागू होता है
•: लैंग (लैंग)

3) छद्म तत्व:

छद्म तत्व आपको उन तत्वों की शैली सेट करने की अनुमति देते हैं जो तत्व पेड़ में परिभाषित नहीं हैं, साथ ही ऐसी सामग्री उत्पन्न करते हैं जो दस्तावेज़ पाठ के स्रोत कोड में नहीं है।

• - पहली पंक्ति - पहली पंक्ति की शैली
• - पहला अक्षर - पहले चरित्र की शैली
• {सामग्री के बाद: "..."; } - तत्व के बाद असाइन की गई सामग्री डालने के लिए उपयोग किया जाता है
• {सामग्री से पहले: "..."; } - तत्व से पहले नियत सामग्री डालने के लिए उपयोग किया जाता है

3. कैस्केडिंग और विशिष्टता

कैस्केडिंग नियम निम्नलिखित प्राथमिकताएं निर्धारित करते हैं:
1) कस्टम शैली चिह्नित! महत्वपूर्ण
2) लेखक शैलियों के साथ चिह्नित! महत्वपूर्ण ध्वज
3) लेखक की शैली
4) कस्टम शैलियों
5) ब्राउज़र डिफ़ॉल्ट शैलियों

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

ABCD

1) यदि शैली इनलाइन है, तो एक = 1
2) बी पहचानकर्ता चयनकर्ताओं की कुल संख्या के बराबर है
3) c, वर्गों, छद्म वर्गों और विशेषता चयनकर्ताओं की कुल संख्या के बराबर है
4) डी टाइप चयनकर्ताओं और छद्म तत्वों की संख्या के बराबर है

4. हैलआउट

hasLayout एक IE संपत्ति है जो यह निर्धारित करती है कि किसी तत्व को एक धारा, उसके आकार, स्थिति, घटनाओं की प्रतिक्रिया और अन्य तत्वों पर कैसे प्रभाव डाला जाता है। मूल रूप से, इंटरनेट एक्सप्लोरर में तत्व स्वयं को व्यवस्थित करने के लिए जिम्मेदार नहीं हैं। एक टैग या एक स्थिति हो सकती है, जैसा कि स्रोत कोड और दस्तावेज़ प्रवाह में है, लेकिन उनकी सामग्री एक लेआउट (आमतौर पर) के साथ निकटतम पूर्वज को व्यवस्थित करती है। ऐसे तत्व माप के आकार और इकाइयों को निर्धारित करने में उनके लिए पूरे कठिन हिस्से को करने के लिए पूर्वज पर भरोसा करते हैं।

तत्व जो डिफ़ॉल्ट रूप से है:
• html, शरीर
• टेबल, ट्र, थ, टीडी
• img
• घंटा
• इनपुट, बटन, चयन, textarea, क्षेत्र, किंवदंती
• iframe, एम्बेड, ऑब्जेक्ट, एप्लेट
• मार्की
सूचीबद्ध गुणों के निम्नलिखित मान लेआउट तत्व देते हैं (hasLayout = true):
• स्थिति: निरपेक्ष
• फ्लोट: बाएं या दाएं
• ऊंचाई, चौड़ाई: ऑटो के अलावा कोई भी मूल्य
• प्रदर्शन: इनलाइन-ब्लॉक
• ज़ूम: सामान्य (अमान्य संपत्ति) के अलावा कोई भी मूल्य
• लेखन-विधा: tb-rl
• अतिप्रवाह, अतिप्रवाह-एक्स, अतिप्रवाह-य: ऑटो | स्क्रॉल | छिपा हुआ (केवल IE7 में)
• स्थिति: निश्चित (केवल IE7 में)
• न्यूनतम चौड़ाई, न्यूनतम ऊंचाई: कोई भी मूल्य (केवल IE7 में)
• अधिकतम-चौड़ाई, अधिकतम-ऊँचाई: किसी के अलावा कोई भी मान (केवल IE7 में)

हैलआउट को फेंकने के लिए, आपको ऊपर सूचीबद्ध लोगों के अलावा एक मूल्य निर्दिष्ट करने की आवश्यकता है (उदाहरण के लिए: चौड़ाई: ऑटो या फ्लोट: कोई नहीं)।
संभावित समस्याएं:
• फ्लोटिंग तत्वों में हैलेयूट होने वाले तत्वों को स्वचालित रूप से साफ़ किया जाता है
• अपेक्षाकृत तैनात तत्व hasLayout प्राप्त नहीं करते हैं
• आसन्न तत्वों के बाहरी मार्जिन जिनके पास हैलआउट है विलय नहीं करता है
हैलआउट के बिना ब्लॉक हाइपरलिंक का क्लिक क्षेत्र एक पाठ क्षेत्र तक सीमित है

5. आईई कीड़े और उनके समाधान

1) सशर्त टिप्पणियाँ:
<!--[if IE 6]>content for IE 6<![endif]-->
<!--[if gt IE 7]>content for greater than IE 7<![endif]-->
<!--[if gte IE 8]>content for greater or equal than IE 8<![endif]-->
<!--[if lt IE 6]>content for later than IE 6<![endif]-->
<!--[if lte IE 7]>content for later or equal than IE 7<![endif]-->

2) अस्थायी तत्वों के दोहरे मार्जिन के साथ त्रुटि:

समस्या: IE 6 में, फ्लोटिंग तत्व एक डबल मार्जिन बनाते हैं।
समाधान: प्रदर्शन जोड़ें: इनलाइन।

3) एक कंटेनर में पूर्ण स्थिति के सापेक्ष तैनात:

समस्या: बिल्कुल तैनात तत्व एक कंटेनर में होते हैं जो अपेक्षाकृत तैनात होता है। नतीजतन, मूल कंटेनर में कोई हैलैटआउट नहीं होता है और व्यूपोर्ट के सापेक्ष बिल्कुल स्थित कंटेनर रखे जाते हैं।
समाधान: माता-पिता कंटेनर hasLayout सेट करें। उदाहरण: ऊंचाई: 1%।

4) बिल्कुल / पूरी तरह से तैनात अंदर कंटेनरों तैनात:

समस्या: IE में, सुपरिंपोज्ड z- इंडेक्स के अनुसार संरेखित नहीं होने पर अपेक्षाकृत तैनात लोगों के अंदर बिल्कुल तैनात कंटेनर।
समाधान: मूल रूप से / अपेक्षाकृत तैनात तत्वों के लिए z-index जोड़ें।