tutorial - what is css in english




शुद्ध सीएसएस लेआउट के लिए प्रयास करने का कोई व्यावसायिक कारण है? (14)

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

यह वास्तव में सच नहीं है; स्क्रीन पाठकों जैसे जेएडब्ल्यूएस, विंडो आइज़ और एचएएल लेआउट टेबलों की उपेक्षा करते हैं। असली वेब से निपटने में वे वास्तव में अच्छी तरह से काम करते हैं

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

मेरा प्रश्न:

ये कुछ टेबल कौन चोट लगी हैं?

टेबल्स डेटा पर टेबल्स विशेष रूप से अच्छी तरह से काम करने लगते हैं - इस दिन और उम्र में उन्हें इतनी निराश क्यों कर रहे हैं? Google.com में इसके स्रोत कोड में एक तालिका है, इसलिए कई अन्य साइटें (stackoverflow.com जिस तरह से नहीं है) करें।


सिर्फ 1 फ़ाइल को अपडेट करके एक 15 पेज वेब साइट का पूरी तरह से सुधार करना स्वर्ग है

यह सच है। दुर्भाग्य से, 15,000 जटिल और व्यापक रूप से भिन्न पृष्ठों द्वारा उपयोग की जाने वाली एक सीएसएस फाइल होने पर आपका सबसे बुरा सपना सच हो गया है। कुछ परिवर्तन करें - क्या यह एक हजार पृष्ठों को तोड़ा? कौन जानता है?

सीएसएस हमारे जैसी बड़ी साइटों पर दोहरे तलवार है।


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


एक और चीज जिसे मैंने अभी याद किया, आप मुद्रण बनाम डिस्प्ले के लिए किसी पेज पर एक अलग स्टाइलशीट असाइन कर सकते हैं।

अपनी सामान्य स्टाइलशीट परिभाषा के अतिरिक्त, आप निम्न टैग जोड़ सकते हैं

<link rel="stylesheet" type="text/css" media="print" href="PrintStyle.css" />

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


कुछ अतिरिक्त कारण यह क्यों अच्छा अभ्यास है:

  • पहुंच - वेब को आदर्श रूप से सभी के द्वारा सुलभ होना चाहिए
  • प्रदर्शन - बैंडविड्थ को बचाएं और मोबाइल डिवाइस पर तेज़ी से लोड करें (ये कुछ हद तक बैंडविड्थ की कमी और जटिल जटिल तालिकाओं को जल्दी से नहीं कर सकते हैं)। तेजी से लोड करने के अलावा हमेशा एक अच्छी बात है ...

मुझे लगता है कि संभव के रूप में संभव के रूप में कुछ तालिकाओं के साथ CSS लेआउट क्लीनर और बेहतर है, लेकिन मैं मानता हूं कि कभी-कभी आपको सिर्फ एक तालिका का उपयोग करना होगा

व्यावसायिक रूप से, यह आमतौर पर "यह सबसे तेज़ और सबसे विश्वसनीय तरीके से किया जाता है।" मेरे अनुभव में, कुछ तालिकाओं का उपयोग आम तौर पर उस श्रेणी में पड़ता है

मैंने पाया है कि सीएसएस रेंडरिंग में क्रॉस-ब्राउज़र अंतर को कम करने का एक बहुत प्रभावी तरीका है कि आपके पृष्ठ के शीर्ष पर "सख्त" सिद्धांत का उपयोग करना है:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

इसके अलावा, खतरनाक IE6 सीएसएस मुद्दों के लिए, आप इस हैक का उपयोग कर सकते हैं:

.someClass {
    background-color:black; /*this is for most browsers*/
    _background-color:white; /*this is for IE6 only - all others will ignore it*/
}

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

डीआईवी प्लस सीएसएस! = सिमेंटिक, या तो एसईओ और पहुंच के लिए अच्छी HTML अच्छी तरह से सार्थक है, चाहे टेबल या सीएसएस लेआउट के लिए उपयोग किया जाता है आप कुछ अच्छे सीएसएस के साथ वास्तव में सरल तालिकाओं को जोड़कर वास्तव में कुशल, तेज वेब डिज़ाइन प्राप्त कर सकते हैं।

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

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

यह कई सालों से, वेब एक्सेसबिलिटी के लिए प्रयोक्ता परीक्षण चलाना, सुलभ साइट डिज़ाइन में विशेषज्ञता, और एक साल के लिए इस विषय पर एक ऑनलाइन बैंक, एक ऑनलाइन बैंक के लिए परामर्श से अनुभव करता है।

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


सिमेंटिक एचटीएमएल डिज़ाइन का इस्तेमाल करना उन चीजों में से एक है जहां पर आप यह नहीं जानते हैं कि जब तक आप इसका अभ्यास नहीं करते तब तक आप क्या याद कर रहे हैं। मैंने कई साइटों पर काम किया है जहां साइट को साइड-साइड कोड पर बहुत कम या कोई असर नहीं डालने के बाद इस साइट को पुनर्स्थापित किया गया था।

Restyling साइटों एक बहुत ही आम अनुरोध है, कुछ है जो मैंने अब और अधिक ध्यान दिया है कि मैं "हां" कहने में सक्षम हूं, इसके बजाय मेरे रास्ते से बात करने की कोशिश करें।

और, पेज लेआउट सिस्टम के साथ काम करना सीखने के बाद, यह आम तौर पर टेबल आधारित लेआउट की तुलना में कठिन नहीं होता है


* मैं उसे उसके WYSIWYG संपादक के बाहर spits जो भी उपयोग करने दें होगा
मैं थोड़ा फेंक दिया ...
* आह हैलो? आपको नहीं लगता कि ग्राफिक डिजाइनर सीएसएस को हाथ से लिख रहे हैं?

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

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


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


आसानी से अद्यतन करने योग्य और आज्ञाकारी होने के अलावा ...

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

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

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

इसके अलावा, अपनी वेबसाइट के सभी पुन: प्रयोज्य भागों को एम्बेड / शामिल करने के लिए सुनिश्चित करें: शीर्ष लेख, उप-शीर्षक, पादलेख

एक बार जब आप कूड़े पर आ जाएंगे, तो वहां से नीचे की पहाड़ी हो जाएगी। सौभाग्य!


मुख्य कारण है कि हमने अपने वेब पेज को डीआईवी / सीएसएस आधारित लेआउट में बदल दिया था, तालिका आधारित पृष्ठों को प्रस्तुत करने में देरी थी।

हमारे पास एक सार्वजनिक वेब साइट है, इसके अधिकांश उपभोक्ता आधार भारत जैसे देशों में हैं, जहां इंटरनेट बैंडविड्थ अभी भी एक मुद्दा है (इसकी दिन-प्रतिदिन में सुधार हो रहा है, लेकिन अभी भी बराबर नहीं है)। ऐसी परिस्थितियों में, जब हम टेबल आधारित लेआउट का इस्तेमाल करते थे, तो उपयोगकर्ताओं को लंबे समय तक रिक्त पृष्ठ पर घूरना पड़ता था। फिर पूरे पृष्ठ को एक टिक के रूप में प्रदर्शित किया जाएगा। हमारे पृष्ठों को डीआईवी में बदलने के द्वारा, हमने ब्राउज़र को कुछ सामग्रियां लगभग तुरन्त लाने में कामयाब रहे, जैसे उपयोगकर्ता हमारे वेब साइट पर प्रवेश करते थे, और उस सामग्री में जहां उपयोगकर्ता को तब तक शामिल करने के लिए पर्याप्त होता है जब तक ब्राउज़र पृष्ठ की पूरी सामग्री डाउनलोड नहीं करता।

तालिका आधारित कार्यान्वयन के साथ प्रमुख दोष यह है कि, ब्राउज़र हम तालिका की सामग्री को प्रदर्शित करने के बाद ही उस तालिका के पूरे एचटीएमएल को डाउनलोड करेंगे। समस्या जब हम एक मुख्य तालिका है, जो पृष्ठ की पूरी सामग्री को लपेटता है, और जब हमारे पास बहुत से नेस्टेड तालिकाओं हैं तो हम उड़ा देंगे। 'लचीली तालिकाओं' (बिना किसी निश्चित चौड़ाई के) के लिए, संपूर्ण टेबल टैग डाउनलोड करने के बाद, ब्राउज़र को प्रत्येक कॉलम की चौड़ाई जानने के लिए तालिका की आखिरी पंक्ति तक पार्स करना होगा, फिर उसे सामग्री प्रदर्शित करने के लिए फिर से पार्स करना होगा । ये सब तब तक होता है जब उपयोगकर्ताओं को रिक्त स्क्रीन पर घूरना पड़ता है, तब सब कुछ एक टिक में स्क्रीन पर आता होगा।


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

स्क्रीनरीडर्स का इस्तेमाल करने वाले उपयोगकर्ता अपने स्वयं के उच्च-कंट्रास्ट, बड़े-फ़ॉन्ट स्टाइलशीट (यदि आपकी साइट स्वयं की आपूर्ति नहीं करती है) रखती है, जिससे स्क्रीन रीडरर्स को पृष्ठ को पार्स करने में आसान हो जाता है।

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

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

जब मुझे लगता है कि रखरखाव कुछ चीजों के लिए आसान बना है, जब आपकी साइट पूरी तरह सीएसएस के साथ रखी जाती है, मुझे नहीं लगता कि यह सभी तरह के रखरखाव के लिए मामला है - खासकर जब आप क्रॉस-ब्राउज़र सीएसएस के साथ काम कर रहे हैं जाहिर है एक दुःस्वप्न हो सकता है

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

चीयर्स!

[संपादित करें - इस उत्तर के गलत या भ्रामक हिस्सों से जोड़ा गया स्ट्राइकथ्रू - टिप्पणियां देखें]


वहाँ निश्चित रूप से है यदि आप अभी भी इसके लिए प्रयास कर रहे हैं, तो आप इसे सही नहीं मिल रहे हैं।

DIV + सीएसएस लेआउट वास्तव में रखरखाव और उत्पादकता के मामले में टेबल लेआउट से ज्यादा आसान है। इससे पहले कि यह कहने के लिए बहुत जल्दी है, इससे पहले ही अभ्यास करना जारी रखें।

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





css