"बग" - विशेषता संरेखण = केंद्र के साथ गैर-केंद्रित चित्र के गैर-बग

जैसा कि आप जानते हैं, हैबर "ओल्ड-स्कूल" टैग विशेषताओं का उपयोग करता है जो लेखकों द्वारा लेखों और टिप्पणियों में पाठ और छवियों को प्रारूपित करने की अनुमति देता है। इन टैगों में एक ऐसा था जो W3C मानकों में नहीं है। यह <img align = "center"> है। यह पाया गया कि कुछ लेखक "भोलेपन से" इस विशेषता का उपयोग करते हैं, क्योंकि हब्र संपादक केवल एक और प्रदान नहीं करता है। अजीब लग सकता है, कुछ ब्राउज़रों में यह विशेषता हैबे पर समर्थित है, हालांकि स्वच्छ परीक्षण पृष्ठों के साथ प्रयोगों से पता चलता है कि इसमें कोई चमत्कार नहीं हैं, आईएमजी में यह काम नहीं करता है।

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

वास्तव में, HTML में संरेखित = "केंद्र" विशेषता ब्लॉक तत्वों (div, p, ...) के लिए अभिप्रेत है और उन्हें संदर्भित नहीं करता है, लेकिन तत्व की आंतरिक सामग्री के लिए। इसलिए, अगर हम लिखते हैं

<p align="center"><img src="123.gif"/></p> 

तब केंद्र काम करेगा (यह परीक्षण पृष्ठ पर नीचे दी गई तस्वीरों में ऑल्ट = " पिक-उप-टेस्ट " के साथ दिखाया गया है)।

लेकिन यह Habré पर नहीं लिखा जा सकता है, ये टैग पार्सर के नियम हैं।

यह जांचने के लिए कि यह हबेरी पर कैसे काम करता है, आप टिप्पणी लिखते समय या ड्राफ्ट लेख में पूर्वावलोकन का उपयोग कर सकते हैं। यह बिल्कुल अंतिम रूप से मेल नहीं खाएगा, लेकिन आप इसे परीक्षणों के लिए उपयोग कर सकते हैं।

 <div align="center"><img src="1450823006127547032299"/></div> <img align="center" src="1450823006127547032299"/> 

यहाँ हम देखेंगे:



अधिकांश ब्राउज़रों में, फ़ायरफ़ॉक्स को छोड़कर, दूसरी तस्वीर केंद्रित है (यदि हैबर की शैलियों को अभी तक तय नहीं किया गया है), हालांकि परीक्षण बताते हैं कि यह विशेषता ब्राउज़र द्वारा समर्थित नहीं है (सिवाय अपवादों के दुर्लभ अपवादों को छोड़कर)।
यह गलत पाठ हर जगह काम क्यों नहीं करता है, लेकिन यह Habré पर काम करता है, और फ़ायरफ़ॉक्स में नहीं?

यूपीडी 25 जनवरी 2013 (एक साल बाद): यह पाया गया कि इस गलत विशेषता का समर्थन करने के लिए हैबर की शैलियाँ बंद हो गईं। साइट पर इसका उपयोग करने के लिए, मुझे उसी तरह से उपयोगकर्ता शैली को जोड़ना था जैसे कि फ़ायरफ़ॉक्स के लिए किया गया था।

ड्राइंग शैलियों को देखते हुए, हम इसका कारण ढूंढते हैं।

 img[align="center"] { display: block; margin: 0 auto !important; } 

हां, सभी प्रकार में Habré.css पर फ़ाइल के "सही" में गलत गुण के परिवर्तन के इस संकेत का समर्थन किया गया है। यह ऐसी संपत्तियां हैं जिन्हें केंद्र में शुरू करने के लिए आपके पास एक तस्वीर होनी चाहिए - मार्जिन शैली द्वारा ब्लॉक और केंद्र होने के लिए : 0 ऑटो; ।

(लेकिन जो लोग जानते हैं कि ऐसी कोई विशेषता नहीं है, यह अनुमान नहीं लगा सकता है कि यह Habré पर काम करता है - कोई प्रलेखन नहीं है, Fx में परीक्षण पास नहीं होता है। उदाहरण के लिए, मैंने गलती से अपने अस्तित्व के बारे में पता लगा लिया जब मैंने नोटों में aleksandrIt देखा। प्रत्येक एनोटेशन में) क्रोम के माध्यम से देखकर।)

यह समझ में आता है कि फ़ायरफ़ॉक्स में केंद्र क्यों काम नहीं करता है।

बिंदु छोटा है - शैलियों को भी देखें (फायरबग का उपयोग करके)। यहां हमें पता चलता है कि विशेषता चमत्कारिक रूप से संरेखित = "मध्य" में बदल गई है और यहां तक ​​कि मैनुअल रीनेमिंग भी इसे ठीक करने में मदद नहीं करता है। ब्राउज़र खुद ही गलत विशेषता को बदल देता है, उसकी राय में, सबसे उपयुक्त एक (लाइन तत्वों की धारा में ऊर्ध्वाधर संरेखण)। इसलिए, शैली नियम img [संरेखित करें = "केंद्र"] काम करना बंद कर देता है।

इसलिए, हैबे पर पूर्ण ब्राउज़र समर्थन के लिए, नियम गायब है:

 img[align="center"], img[align="middle"]{ display: block; margin: 0 auto !important; } 

विशेषताओं के साथ रिक्त पृष्ठ का परीक्षण करें

विभिन्न ब्राउज़रों में img align = "center" विशेषता की जाँच के लिए परीक्षण पृष्ठ देखने के लिए, spmbt.kodingen.com/habrahabr/testImgAlignCenter.htm पर जाएँ। फ़ायरफ़ॉक्स में यह कुछ इस तरह दिखेगा, अन्य ब्राउज़रों में यह थोड़ा अलग होगा। चित्रों और ब्लॉकों को बेहतर अंतर करने के लिए रंगा हुआ है। ALT में हस्ताक्षर देखने के लिए कोई वास्तविक चित्र नहीं हैं।

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

तकनीकी नोट। AddRules () शैली फ़ंक्शन के विशेष रूप से प्रदर्शित उपस्थिति IE8 ब्राउज़र में स्क्रिप्ट शामिल करने की इच्छा के कारण होती है। (यह IE9 में परीक्षण नहीं किया गया था, लेकिन इसे बाकी हिस्सों की तरह काम करना चाहिए।) एक सिद्धांत के बिना, मार्जिन: 0 ऑटो नियम IE8 में काम नहीं करेगा, लेकिन संरेखित: दाएं और बाएं गुण काम करेंगे।

क्या करें?

इस तरह के नियम को विशेष रूप से हबर ज़ेनमेंट शैलियों में त्रुटि को ठीक करने के लिए लिखा गया था और, उनकी परवाह किए बिना, हबरअजैक्स स्क्रिप्ट (हबर-एडजैक्स) में, जिसके बाद संरेखित = "केंद्र" विशेषता के साथ सभी ब्राउज़रों में सही ढंग से काम करना शुरू हो गया।

सामान्य रूप से निष्कर्ष के लिए , मुझे कहना होगा कि हमें वेबमास्टर्स के बीच इस राय का समर्थन नहीं करना चाहिए कि यह विशेषता IMG टैग में काम कर सकती है। बता दें कि विशेषताओं का समय बीत चुका है और हर कोई शैलियों का उपयोग कर रहा है, कुछ अनुभवहीन वेब निर्माता इस राय के लिए गिर सकते हैं कि ऐसी विशेषता मौजूद है।

यूपीडी 25 जनवरी 2013 (एक साल बाद): यह पाया गया कि इस गलत विशेषता का समर्थन करने के लिए हैबर की शैलियाँ बंद हो गईं। साइट पर इसका उपयोग करने के लिए, मुझे उसी तरह से उपयोगकर्ता शैली को जोड़ना था जैसे कि फ़ायरफ़ॉक्स के लिए किया गया था।