क्या मुझे अपनी वेबसाइट बनाने के लिए HTML5 और / या CSS3 का उपयोग करना चाहिए?


16

नया HTML5 / CSS3 (Web8!) सामान अच्छा लगता है! क्या मुझे इसका उपयोग अभी शुरू करना चाहिए या css / xhtml के साथ रहना चाहिए जब तक कि अधिक ब्राउज़र इसका उपयोग न कर सकें?


वेब 8 के साथ आपका क्या मतलब है?
हारून

3
html5 + css3 = web8!
जेसन

HTTP 1.0 और ECMAScript 5.0 के बारे में क्या?

जवाबों:


13

HTML5 अब सभी ब्राउज़रों द्वारा समर्थित है, यहां तक ​​कि IE5! (यदि आप HTML5shiv स्क्रिप्ट का उपयोग करते हैं)। मैं http://diveintohtml5.org पढ़ने की अत्यधिक सलाह देता हूं। यह वहाँ से बाहर निकले सबसे अच्छे एचटीएमएल 5 संसाधनों में से एक है।

CSS3 के लिए, यदि आप इसका उपयोग करते हैं, तो नियमित रूप से सिंटैक्स के शीर्ष पर, विक्रेता प्रिक्स का भी उपयोग करना सुनिश्चित करें। जैसे

बॉर्डर-त्रिज्या

-moz-बॉर्डर-त्रिज्या

-webkit-बॉर्डर-त्रिज्या

मैं प्रगतिशील वृद्धि में विश्वास करता हूं। IE9 का css3 सपोर्ट बहुत ही आशाजनक लगता है।


2
मुझे लगता है कि आप सीमा-त्रिज्या को तल पर रखने का मतलब है, है ना?
पालिन

1
काश, HTML5 साइट में मूल गोता चला गया। कई दर्पण उपलब्ध हैं। यहाँ एक है: diveintohtml5.info
एम। डुडले

12

शायद।

HTML5 के कुछ हिस्से हैं जिनका उपयोग आप अभी, आज कर सकते हैं। उदाहरण के लिए प्रपत्र। यदि आपके पास <input type="email">एक ब्राउज़र है जो एचटीएमएल 5 (हाँ, यहां तक ​​कि IE6) का समर्थन नहीं करता है, तो आप बस वही चीज़ देखेंगे जो आप उपयोग करते हैं <input type="text">। फिर भी एचटीएमएल 5 फॉर्म एलिमेंट्स को सपोर्ट करने वाले ब्राउजर पर आप emailटाइप के फायदे हासिल करते हैं : अर्थात् क्लाइंट एरर की जांच करेगा जिसमें कोई अतिरिक्त जेएस की आवश्यकता नहीं है। हां, आपको गैर- HTML5 ब्राउज़रों के लिए अभी भी JS की आवश्यकता होगी, आपके पास सहायक ब्राउज़रों में सत्यापन की एक और परत होगी।

इस साइट पर एक और सवाल HTML5 और CSS3 के माध्यम से आपके लिए उपलब्ध नई सुविधाओं का एक अच्छा अवलोकन प्रदान करता है। उस प्रश्न में रूपों पर बहुत अच्छा डेटा है।

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

सुविधा समर्थन की कमी के साथ समस्याओं को कम करने के लिए, क्या आपको यह तय करना चाहिए कि ये नई सुविधाएँ इसके लायक हैं, निम्नलिखित संसाधनों का उपयोग करें:

  • HTML5shiv: IE को HTML5 तत्वों को पहचानने और स्टाइल करने के लिए एक जावास्क्रिप्ट शिव।
  • CSS3 पाई: एक IE संलग्न व्यवहार (एक.htcफ़ाइल) जो इंटरनेट एक्सप्लोरर 6-8 को सबसे उपयोगी CSS3 सजावट सुविधाओं में से कई को प्रस्तुत करने में सक्षम बनाता है। एक तत्व के लिए आवेदन किया है, यह आईई समझते हैं और प्रदर्शित करने के लिए अनुमति देता हैborder-radius,box-shadow,border-image, कई पृष्ठभूमि छवियों, औरlinear-gradientपृष्ठभूमि छवि के रूप।
  • Modernizr: एक जावास्क्रिप्ट लाइब्रेरी जो आगामी CSS3 / HTML5 सुविधाओं के खिलाफ वर्तमान ब्राउज़र का परीक्षण करने के लिए फीचर डिटेक्शन का उपयोग करती है, जो समर्थित हैं उनके लिए <html> तत्व में कक्षाएं जोड़ते हैं। साथ ही एक स्व-शीर्षक वाली वैश्विक जावास्क्रिप्ट ऑब्जेक्ट बनाता है जिसमें प्रत्येक सुविधा के लिए बूलियन संपत्ति होती है,trueयदि समर्थित है औरfalseयदि नहीं। HTML5 तत्वों को स्टाइल करने और प्रिंट करने के लिए समर्थन जोड़ता है ताकि आप ऐसे तत्वों का उपयोग कर सकें<section>,<header>और<nav>
  • ie-css3.js: इंटरनेट एक्सप्लोरर CSS3 के छद्म श्रेणी के चयनकर्ताओं की पहचान करने और उनके साथ परिभाषित किसी भी शैली के नियमों को प्रस्तुत करने की अनुमति देता है। ऐसी विभिन्न CSS3 चयनकर्ताओं का समर्थन करता है जिनके आधार पर जावास्क्रिप्ट लाइब्रेरी आपकी साइट का उपयोग करती है।
  • DD_belatedPNG: एक जावास्क्रिप्ट लाइब्रेरी जो IE6 में PNG इमेज सपोर्ट जोड़ता है। आप पीएनजी का उपयोगsrcएक<img />तत्व के रूप में याbackground-imageसीएसएस मेंएकसंपत्ति केरूप में कर सकतेहैं। इसके विपरीतAlphaImageLoader,background-positionऔरbackground-repeatइरादा के अनुसार काम करते हैं, और तत्वa:hoverछद्म वर्ग काजवाब देंगे।
  • ट्विनहेलिक्स आईई पीएनजी फिक्स: एक आईई संलग्न व्यवहार (एक.htcफ़ाइल) जो आईई 6. अल्फा ओपेसिटी के साथ पीएनजी समर्थन जोड़ता है। पूर्ण सीएसएस पृष्ठभूमि स्थिति और दोहराने अतिरिक्त (शामिल) जावास्क्रिप्ट के साथ सीएसएस स्प्राइट सहित समर्थन कर रहे हैं।
  • जो भी: होवर: एक IE संलग्न व्यवहार (एक.htcफ़ाइल) जो स्वचालित रूप से पैच: होवर,: सक्रिय और: IE6, IE7 और IE8 quirks के लिए फ़ोकस करता है, जिससे आप उन्हें उपयोग करते हैं जैसे आप किसी अन्य ब्राउज़र में करेंगे। AJAX समर्थन भी शामिल है, जिसका अर्थ है कि जावास्क्रिप्ट के माध्यम से दस्तावेज़ में डाला गया कोई भी HTML भी ट्रिगर करेगा:hover,:activeऔर:focusIE में शैलियाँ।

यह ध्यान रखना दिलचस्प है कि DD_belatedPNG जो कुछ भी संबोधित करता है, दोनों को हल करता है: hover और TwinHelix का IE PNG शुद्ध जावास्क्रिप्ट के साथ फिक्स, जबकि जो भी: hover और TwinHelix का IE PNG Fix जावास्क्रिप्ट और IE के व्यवहारों के संयोजन का उपयोग करता है ( .htc files)।

आम तौर पर जो लोग गैर-IE ब्राउज़रों का उपयोग करते हैं, उन्हें पूछे जाने पर अपग्रेड करते हैं और इसलिए IE का खामियाजा भुगतना पड़ता है "लेकिन कुछ ब्राउज़र इस सुविधा का समर्थन नहीं करते हैं!" शिकायतों। Modernizr HTML5 / CSS3 का उपयोग करने की क्षमता को किसी भी ब्राउज़र में जोड़ देगा जिसे आप देख सकते हैं और सिर्फ IE नहीं। यानी- css3.js एक ही काम करेंगे, आपको बस इसे IE सशर्त टिप्पणी के बिना लागू करना होगा (जिसका अर्थ है कि सभी ब्राउज़र इसे समाप्त कर देंगे जब तक कि आप इसे सर्वर-साइड उपयोगकर्ता-एजेंट चेक के साथ शामिल नहीं करते हैं - यह प्रदर्शन को बहुत कम कर देगा केवल आपके IE उपयोगकर्ताओं के बजाय आपके सभी आगंतुकों के लिए।)


क्षमा करें ब्रायसन लेकिन इंटरनेट एक्सप्लोरर में एचटीएमएल 5 समर्थन को जोड़ने वाली वे चीजें व्यावहारिक उद्देश्यों के लिए बुरे सपने हैं।

1
मैंने अपनी पोस्ट को जानकारी के कुछ और बिट्स के साथ अपडेट किया है, और इन जेएस लाइब्रेरी का उपयोग करके प्रदर्शन हिट्स को स्वीकार किया है। हालांकि, मैं आपसे असहमत हूं कि उनका उपयोग एक बुरा सपना है। मैंने कम से कम एक बार इन सभी का उपयोग किया है, और वे सभी एक उद्देश्य की सेवा करते हैं। उन्होंने मुझे कोई अतिरिक्त सिरदर्द नहीं दिया है। आप क्या कहते हैं कि वे बुरे सपने हैं?
ब्रायनसन

ठीक है, "पूरी तरह से बुरे सपने" चीजों को पुन: व्यवस्थित करने का एक बहुत मजबूत तरीका हो सकता है, लेकिन प्रदर्शन अक्सर इतना बुरा होता है कि पृष्ठ अनुपयोगी हो जाता है, इसलिए मुझे लगता है कि आप मामले को खत्म कर रहे हैं।

5

अपनी जरूरतों के हिसाब से जो भी टेक्नोलॉजी सूट करे उसका इस्तेमाल करें।

एरिक मेयर ने एक अच्छा लेख लिखा कि सीएसएस नियमों पर विक्रेता-विशिष्ट उपसर्गों का उपयोग करना क्यों शुरू किया गया है, यह ऐसा नहीं है जैसे सीएसएस फिल्टर हैक्स का उपयोग किया जाता है।

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


2

कुछ अन्य उपयोगी लिंक, जब यह तय करना कि CSS3 के फीचर्स क्या आप उपयोग करना चाहते हैं: http://caniuse.com/ (किस प्लेटफॉर्म पर कौन से तत्व और चयनकर्ता उपयोग करने योग्य हैं, इसका एक अच्छा ब्रेकडाउन देता है)

http://css3please.com/ (CSS3 सुविधाओं के साथ खिलवाड़ करने के लिए एक इन-पेज-संपादन योग्य खेल का मैदान, यह कुछ सलाह भी देता है कि किन तकनीकों और सुविधाओं का समर्थन किया जाता है, जो आमतौर पर अनुरोधित स्टाइलिंग के लिए प्लेटफ़ॉर्म जैसे गोल कोनों, ग्रेडिएंट बैकग्राउंड, आदि।)


1

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


1

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

http://www.initializr.com/

यह बैकएंड पर HTML5 बॉयलरप्लेट का उपयोग करता है, और आपको एक टेम्पलेट देने के लिए अपने स्वयं के कुछ विकल्प जोड़ता है जिसे आप अपनी साइट पर तैनात कर सकते हैं। इसमें जावास्क्रिप्ट लाइब्रेरी (जैसे HTML शिव या मॉडर्निज़र) शामिल हैं, जो आपकी साइट को पुराने ब्राउज़रों के साथ संगत बनाएगा।


0

यह निर्भर करता है कि दर्शक क्या है और आप किन विशेषताओं का उपयोग करना चाहते हैं। मुझे उम्मीद है कि औसत परियोजना के लिए ie6 का समर्थन छोड़ने से पहले कई और साल हो जाएंगे :(


0

यदि आपकी साइट एक निजी इंट्रानेट है और आप या तो ब्राउज़र को नियंत्रित करते हैं, या इससे निपटने के लिए सीमित सीमा तक ब्राउज़र हैं, तो तकनीक के रक्तस्राव के किनारे पर काम करने के लिए स्वतंत्र महसूस करें।

यदि नहीं, तो कोई फर्क नहीं पड़ता कि आप क्या उपयोग करते हैं, आपको हमेशा सबसे कम आम भाजक को ध्यान में रखना होगा। इस मामले में यह शायद IE 6 और मोबाइल ब्राउज़रों की एक श्रृंखला का कुछ संयोजन है। इसलिए, यदि आप HTML 5 के साथ आगे बढ़ते हैं, तो आपके पास अपनी साइट को 'नीचा दिखाने' का सुनिश्चित मुद्दा है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.