मैं एक सीएसएस आधारित लेआउट कैसे विकसित कर सकता हूं जो 100% ब्राउज़र संगत है?

Question

हम विभिन्न बाहरी और आंतरिक वेबसाइटों के लिए कुछ लेआउट बनाने की प्रक्रिया में हैं।

डेवलपर्स में से एक उपयोगकर्ता उपयोगकर्ता एजेंट के आधार पर अपनी सीएसएस फ़ाइल (एफएफ के लिए एक और आईई के लिए एक) को स्विच करने का सबसे अच्छा अभ्यास नहीं कर रहा है। :/ अन्य टेबल आधारित लेआउट के साथ चिपके हुए हैं क्योंकि वे ब्राउज़र संगत हैं।

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

उदाहरण के लिए, अगर हमें बाहरी डिजाइन फर्म से 9 0 पिक्सल चौड़ी छवियां दी गई हैं, तो हम उन्हें 60px चौड़ाई ग्रिड सेल में फिट नहीं कर पाएंगे। और हम फिट करने के लिए उन्हें आकार देने के लिए नहीं जा रहे हैं। यदि फर्म मुख्य पृष्ठ को डिज़ाइन करता है तो यह लिंक पर क्लिक करने के लिए मूर्खतापूर्ण लगेगा और सभी फिलर लोगो/ग्राफिक्स आकार में कम दिखाई देगा।

मुझे सही दिशा में इंगित करने के लिए किसी प्रकार का संसाधन या सलाह चाहिए।

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

संपादित 2: हम इसे प्रस्तुत करने से पहले HTML में शैलियों और विशेषताओं को जोड़ सकते हैं। बस ध्यान रखें कि कोई .html फ़ाइल नहीं है जिसे हम संपादित कर रहे हैं, यह घटकों द्वारा उत्पन्न किया जा रहा है।

Answer 1

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

अच्छे अर्थपूर्ण वैध HTML के साथ शुरू करें और लेआउट के साथ बहुत जटिल कोशिश न करें और आप ठीक होंगे।

यदि आप एक सीएसएस पुस्तकालय/ढांचे का उपयोग नहीं करना चाहते हैं, तो यह अनुभव और परीक्षण के लिए नीचे आता है।

Answer 2

जहां तक ​​लेआउट आप देख सकते हैं कि यह साइट एक अच्छा संदर्भ हो सकती है या नहीं। http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

इसके अलावा ढांचे जैसे Blueprint हैं।

याहू में css framework भी अधिक जटिल है।

Answer 3

इन दिनों एक आम दृष्टिकोण अपने सीएसएस को लिखना है ताकि यह फ़ायरफ़ॉक्स (और अन्य आधुनिक गैर-आईई ब्राउज़र) के लिए काम करे, और फिर IE conditional comments का उपयोग करके आईई-विशिष्ट फिक्स जोड़ें।

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

और दिन के अंत में, आपको अपने द्वारा लक्षित सभी ब्राउज़रों में अपने HTML/CSS का परीक्षण करना होगा; इसके लिए वास्तव में कोई विकल्प नहीं है।

Answer 4

100% ब्राउज़र संगतता? लगता है जैसे आपको कुछ प्रकार के अपवित्र शैतान जादू और/या बहुत शाप और रोना चाहिए।

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

आपके प्रयास में शुभकामनाएँ। आपको इसकी आवश्यकता होगी

Answer 5

100% ब्राउज़र संगत वेबसाइट शायद अधिकतर परीक्षण और त्रुटि के साथ संयुक्त अनुभव से आता है - ज्यादातर। आईई 8 के लॉन्च के साथ यह आसान हो गया है, क्योंकि यह (कम से कम) पूरी तरह से सीएसएस 2-अनुरूप है। हालांकि, आप अभी भी आईई 7 और आईई 6 को उचित रूप से अच्छी तरह से काम करना चाहते हैं। अच्छा परीक्षण महत्वपूर्ण है।

ध्यान रखें कि 100% ब्राउज़र संगत का मतलब यह नहीं है कि उन्हें समान दिखना है (Should websites look the same in all browsers?)। एक जटिल लेआउट के लिए मामूली मतभेद स्वीकार किए जाने चाहिए, और शायद कुछ समय के लिए वहां रहना होगा।

• Little Boxes
• Containing floats
• HTMLdog Advanced CSS
• http://layouts.ironmyers.com/

Answer 6

केवल एक चीज मैं जोड़ सकते हैं:

यहाँ कुछ लिंक है कि इस पर एक नज़र लेने के लिए लायक हो सकता है @Edeverett और @ Dev.e.loper की प्रतिक्रियाओं के लिए है उन्हें गठबंधन करने के लिए सुझाव।

ठोस, वैध, अर्थपूर्ण (सार्थक) (एक्स) एचटीएमएल मार्कअप के साथ शुरू करें। इसे मार्कअप परिप्रेक्ष्य से सरल रखें। एक प्रसिद्ध सीएसएस लाइब्रेरी/फ्रेमवर्क का प्रयोग करें। टेस्ट, टेस्ट, टेस्ट।

Answer 7

सीएसएस आधारित लेआउट बनाने का कोई तरीका नहीं है जो सभी ब्राउज़रों में 100% संगत है क्योंकि ऐसे ब्राउज़र हैं जो ACID test पास नहीं करते हैं। वास्तव में, अधिकांश ब्राउज़र इस परीक्षा को पास नहीं करते हैं।

आप केवल उन सभी चीज़ों के लिए आशा कर सकते हैं जो सभी ब्राउज़रों पर अच्छा दिखते हैं (या जो बग और/या "फीचर्स" के साथ ब्राउज़र पर गहराई से घटता है)।

यह डिज़ाइन द्वारा है: सीएसएस का मतलब कभी भी सभी ब्राउज़रों पर समान दिखने के लिए नहीं था, यह ब्राउज़र को बताने का एक तरीका है जो आप चाहते हैं। ब्राउज़र डेवलपर्स बहुत ही स्वतंत्र हैं कि उन्हें आपकी इच्छाओं के साथ क्या करना चाहिए।

Answer 8

ब्राउज़र अपने प्रतिपादन में अलग हैं। प्रत्येक ब्राउज़र में "बस-लगभग-काम" वाली एक फ़ाइल को हैक करने के बजाय स्वच्छ, अलग सीएसएस फ़ाइलों को रखना एक बुरी बात नहीं है।

हालांकि दुर्लभ, टेबल और टेबल के लिए एक जगह है, और आपको बस यह चुनना होगा कि वह कब है। जब देव समय और यूआई "सर्वोत्तम अभ्यास नहीं कर रहे हैं" के लिए उचित बलिदान लेते हैं, तो आप जरूरी नहीं कि विजेता पर हों।

प्रत्येक लेआउट इसकी बारीकियों में इतना अलग है कि ब्राउज़र कीड़े (/ अंतर) सटीक भविष्यवाणी करना असंभव है - हालांकि कुछ दूसरों की तुलना में अधिक आम हैं।

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

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

जितना संभव हो उतना ब्राउज़र इंस्टॉल करें (एफएफ, क्रोम, आईई, सफारी, फ्लॉक, ओपेरा इत्यादि)। लेकिन यह एक साथ चल रहे विभिन्न ब्राउज़रों के विभिन्न संस्करणों को रखने में मुश्किल हो जाता है। यह वह जगह है जहां browsercam.com (वाणिज्यिक) और browserhots.org (फ्री) जैसी वेबसाइटें आसान होती हैं। वे आपकी वेबसाइट के स्नैपशॉट्स को जितना ब्राउज़र सोच सकते हैं उतने ब्राउज़र/ओएस संयोजनों में ले सकते हैं।

Browseercam.com वास्तव में आपको मशीनों में लॉग इन करने और साइट्स के साथ खेलने के लिए अनुमति देता है, जो इंटरैक्टिव सीएसएस और जेएस को आसान डिबगिंग कर सकता है।

मेरी सलाह होगा:

• सीएसएस पर पुस्तकों के एक जोड़े पढ़ें
• चेक करें कि आप प्रयोग नहीं कर रहे कुछ भी ब्राउज़र विशिष्ट (यदि आप अनिश्चित हैं, गूगल पर सब कुछ की जाँच करें) बनाने के लिए - उदाहरण के लिए "-moz" शुरू करने के लिए किसी भी सीएसएस गुण, मोज़िला आधारित ब्राउज़र (फ़ायरफ़ॉक्स की तरह)
• टेस्ट, परीक्षण के लिए विशिष्ट हैं परीक्षण

अंत में, यह सुनिश्चित करना याद रखें कि आप DocTypes समझते हैं और वे आपके सीएसएस को कैसे प्रभावित करते हैं; एक ही ब्राउज़र में बिल्कुल वही सीएसएस एक अलग डॉकटाइप के साथ अलग होगा। यह परिभाषित करता है कि ब्राउजर आपके (एक्स) एचटीएमएल और सीएसएस का कैसा व्यवहार करता है। तो जब आप सोच रहे हों कि "यह xyz.com पर क्यों काम करता है लेकिन यहां नहीं!"

Answer 9

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

इसे छोड़कर, यह सुनिश्चित करने का एकमात्र तरीका है कि आपके मार्कअप/शैलियों प्रत्येक ब्राउज़र में काम करते हैं (वैसे, "हर" परिभाषित करते हैं - क्या हम हर 6 आईई बात कर रहे हैं?) आपके पास कोई रास्ता नहीं है, लेकिन, लोगों के रूप में पहले ही संकेत दिया है, उन सभी ब्राउज़रों में इसका परीक्षण करें। मैंने लोगों को इसके लिए कुछ तृतीय-पक्ष साइट्स का उपयोग देखा है, सीमित सफलता के लिए browsershots.org कहें। शायद वह आपकी मदद करेगा।

Answer 10

सबसे पहले, आपको एक पद्धति चुनने और इसके साथ चिपकने की आवश्यकता है। एक डेवलपर होने से चीजें एक तरह से होती हैं और दूसरों को इसे विपरीत तरीके से करने में भी मदद मिलती है इससे पहले कि आप शुरू भी करें।

दूसरी बात आपको हर ब्राउज़र में एक समान अनुभव के विचार को फेंकने की जरूरत है - अगर इसे समझना मुश्किल है तो इस बारे में सोचें: ब्राउज़र आपके उपयोगकर्ताओं को आपकी सामग्री का उपभोग करने का एकमात्र तरीका है। क्या आप मोबाइल ब्राउज़र का उपयोग करके अपनी साइट पर आने वाले प्रत्येक व्यक्ति को समान अनुभव देने की भी योजना बना रहे हैं? या एक पाठ आधारित ब्राउज़र? या एक स्क्रीन रीडर? आईई 5 के बारे में क्या? आपके उपयोगकर्ताओं के लिए उपलब्ध हजारों और हजारों उपयोगकर्ता-एजेंटों के बारे में क्या?

यह सभी बुरी खबर नहीं है। वहां बहुत से संसाधन हैं जो सीएसएस का उपयोग करके लेआउट सही करने में मदद कर सकते हैं और धीरे-धीरे अधिक जो आईई में अंतर्निहित बग्स में मदद कर सकते हैं।कुछ आप उपयोगी लग सकते हैं:

• Position is everything
• PPK's QuirksMode
• A List Apart

Answer 11

मेरा सुझाव है कि पहला कदम रीसेट स्टाइलशीट के कुछ फार्म का उपयोग किया जाएगा (एरिक मेयेर के संस्करण यहाँ है : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ और YUI यहाँ संस्करण: जो ब्राउज़र विसंगतियों से कुछ के लिए आधार हो रहा है http://developer.yahoo.com/yui/reset/) की दूरी पर 'ब्राउज़रों डिफ़ॉल्ट शैलियों लेने के लिए। यह पूरी तरह से क्षेत्र को स्तरित नहीं करता है, लेकिन यह क्लीनर प्रारंभ बिंदु के रास्ते से बाहर कुछ बाधाओं को सुचारू बनाता है।

Answer 12

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

Answer 13

मेरी सलाह यह 100% पार ब्राउज़र संगत बनाने की कोशिश कर बंद करने के लिए किया जाएगा। अपने लड़कों और संसाधनों को बड़े लड़कों के लिए डिजाइन करना - आईई 7/8, एफएफ, सफारी, (क्रोम?), और मेबे ओपेरा क्योंकि वे आपके देखने वाले दर्शकों के 98% से अधिक का प्रतिनिधित्व करते हैं। आप वहां भी आईई 6 शामिल कर सकते हैं, लेकिन कॉमन, यह 200 9 पहले से ही है और हम दो ब्राउज़र संस्करण दूर हैं। आईई 6 के लिए डिजाइनिंग आईई 4 के लिए डिजाइनिंग की तरह था जब आईई 6 बाहर आया था। लेकिन यह तुम्हारा फोन है।

मेरे अनुभव में, गैर मानक ब्राउज़र का उपयोग कर उपयोगकर्ताओं का 1-2% के लिए, यह नहीं लायक अपना समय (जो पिछले मैं जाँच की है, पैसे की बराबरी की) कोशिश करते हैं और हर किसी को खुश करने के लिए है। हालांकि, अगर समय और पैसा असीमित हैं, तो अपने बालों को खींचने में मज़ा लें।

ओह, और उस पैसे से कुछ मुझे भेज है, क्योंकि यह असीमित और सब है: डी

संपादित करें - शुरू Firefox में अपने को विकसित करने और वहाँ से tweak। यह प्रतीत हो रहा है सबसे "सही"