विभिन्न ओएस में वेब फॉर्म प्रदर्शित करें

यह आलेख एक छोटा अध्ययन है कि कैसे ब्राउज़र ऑपरेटिंग सिस्टम में मानक वेब रूपों को प्रस्तुत करते हैं। हम मानक, डिफ़ॉल्ट रूपों के बारे में बात करेंगे और हम उन रूपों पर स्पर्श नहीं करेंगे जो अब पीएनजी-सब्सट्रेट और दृढ़ता से संशोधित सीएसएस और जेएस के साथ व्यापक हैं।



मुझे फ़ायरफ़ॉक्स (क्षणों में जब यह धीमा नहीं होता है) से प्यार है, और इसलिए, उदाहरण के लिए, मैंने इस फॉर्म को डिज़ाइन किया है। फायरफॉक्स को छोड़कर, उदाहरण के लिए, क्या मैंने इसका परीक्षण किया है।



जैसा कि आप देख सकते हैं, मैंने ग्रिड पर सभी इनपुट तत्वों को संरेखित किया, जिसमें कई कक्षाएं शामिल हैं। मैंने अन्य क्षेत्रों के साथ इसकी ऊंचाई को बराबर करने के लिए चयन में पैडिंग बदल दी। मैंने स्टैटिक इनपुट फ़ाइल अपलोड के लिए उन्हें ट्रिम करने के लिए सही पंक्ति में फ़ील्ड की चौड़ाई को थोड़ा बढ़ाया। HTML और CSS इस तरह से निकले:

<div class="wrapper"> <label for="1"></label> <input type="text" id="1"> <label for="2"></label> <input type="text" id="2" class="mail"> <label for="3" class="lbl-msg"></label> <input type="text" id="3"> <label for="4"></label> <select id="4"> <option value="1"></option> <option value="2"></option> <option value="3"></option> </select> <label for="5" class="lbl-msg"></label> <input type="checkbox" id="5"> <input type="checkbox" id="51"> <input type="checkbox" id="52"> <input type="checkbox" id="53"> <label for="6" class="lbl-dwl"></label> <input type="file" id="6"> <label for="7" class="lbl-msg"></label> <textarea id="7"></textarea> <input type="button" value=" "> </div> 

 body { font:16px "Trebuchet MS", Tahoma, Arial, serif; } .wrapper { float:left; margin:50px 0 0 50px; width:740px; } .wrapper input { display:block; float:left; width:200px; } .wrapper input[type=checkbox] { width:10px; margin:6px 7px 0 0; } .wrapper input[type=button] { width:auto !important; margin:20px 0 0 139px; } .wrapper select { display:block; float:left; width:213px; padding:2px; } .wrapper textarea { display:block; float:left; width:553px; height:70px; } .wrapper label { display:block; text-align:right; float:left; width:100px; margin:0 20px 20px; } .lbl-msg { clear:left; } .lbl-dwl { margin-left:146px !important; } .mail { width:207px !important; } 

यह फ़ॉर्म अच्छा लग रहा है और स्क्रीनशॉट से आपको शायद अनुमान हो गया कि मैंने इसे विंडोज 7 पर बनाया है, आइए देखें कि उसी ओएस पर अन्य ब्राउज़र इसे कैसे प्रस्तुत करते हैं।



अंतर देखने के लिए मैंने दो गाइड रखे। जैसा कि आप स्क्रीनशॉट में देख सकते हैं, क्रोम अधिक न्यूनतम फ़ील्ड और छोटे चेकबॉक्स और बटन खींचता है। लेकिन उन्होंने चयन को एक अलग चयन बटन और थोड़ा अलग ऊंचाई के साथ चित्रित किया। फ़ाइल अपलोड फ़ील्ड के लिए, यह पहले से ही अन्य ब्राउज़रों से मौलिक रूप से भिन्न है, और फिर हम देखेंगे कि यह एक प्रकार का वेबकिट (क्रोम और सफारी) मानक है जिसे आपको रखना होगा।

ओपेरा फ़ायरफ़ॉक्स और क्रोम के बीच कहीं मिल गया, और क्रोम की तरह हम में से अधिकांश क्षेत्रों को प्रदान किया, लेकिन चेकबॉक्स और चयन फ़ायरफ़ॉक्स संस्करण की तरह अधिक हैं। यहाँ डाउनलोड क्षेत्र सबसे विस्तृत और सबसे अलग है जो हमने पहले देखा था।

IE एक समझौता भी करता है, यह फ़ायरफ़ॉक्स की तरह अधिक दिखता है, लेकिन क्रोम संस्करण में चेकबॉक्स और चयन समान हैं। और डाउनलोड फ़ील्ड भी अद्वितीय है और कुछ भी नहीं दिखता है।

मैंने सफारी को सूचीबद्ध नहीं किया यह क्रोम से लगभग अलग नहीं है। IE के शुरुआती संस्करणों (6-7-8) में, फॉर्म 9 के रूप में उसी तरह प्रस्तुत किए जाते हैं, हालांकि 6 और 7 में पुराने मानकों से जुड़ी समस्याएं होंगी, लेकिन यह लेख उनके बारे में नहीं है।

उबंटू

मेरे पास वर्चुअल मशीन पर ubuntu 11.10 स्थापित है, आइए देखें कि चीजें कैसी हैं:



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

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

ऑबंटु में ओपेरा ने फ़ायरफ़ॉक्स के समान व्यवहार किया, लेकिन यहां लगभग सभी तत्वों में मतभेद हैं।

सफारी या IE का उपयोग करने वाले लोगों को ubuntu का उपयोग करने की कल्पना करना मुश्किल है, हालांकि शायद ऐसे भी हैं। उन्हें अपने दम पर रूपों के प्रतिपादन की जांच करने दें, मैंने ऐसा नहीं किया।

मैक ओएस एक्स तेंदुआ

यदि आप मैक ओएस एक्स तेंदुए में एक ही रूप को देखते हैं, तो चित्र इस प्रकार है:



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

ऐसी बातें। और यह केवल तीन सबसे लोकप्रिय प्रणालियों पर है, और सोलारिस, बीएसडी, विंडोज़ के संस्करणों का एक गुच्छा, मैक और यूनिक्स सिस्टम की असेंबली भी है। आपको यह समझने की ज़रूरत है कि यदि आपके डिज़ाइन में मानक इनपुट हैं (और यह एक अच्छा स्वर है), तो वे अलग-अलग ओएस में अलग-अलग होंगे और उन्हें ऊपर बनाना होगा ताकि आकृति जाल टूट न जाए और अलग-अलग रेंडरिंग के साथ न गिर जाए। यहां तक ​​कि ग्रिड रखने के लिए, मैं आपको सलाह देता हूं कि किसी भी इनपुट से पहले सख्त और सबसे महत्वपूर्ण रूप से विभिन्न चौड़ाई वाले तत्वों को न डालें। आप उन्हें लाइनों के साथ "पिक्सेल में" पूरी तरह से फिट नहीं कर सकते। आपको फॉर्म को कड़ाई से सिलवाया और उस पर तय पेरेंट ब्लॉक में संलग्न नहीं करना चाहिए, क्योंकि यह व्यापक है कुछ ऑपरेटिंग सिस्टम पर फार्म इनपुट आपकी अपेक्षा से अधिक व्यापक होगा।

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