विषय
- ख़ाका
- क्लियरफिक्स
- बॉक्स आकार
- बहु कॉलम
- गणना
- अंदाज
- पारदर्शिता
- फिल्टर
- छवि प्रतिस्थापन
- उत्तरदायी वीडियो
- कार्यक्षमता
- आसानी से तत्वों का चयन
- नई सरणियाँ बनाना
- स्वच्छ दस्तावेज़ और विंडो ऑब्जेक्ट
- ये पसंद आया? ये पढ़ सकते हैं!
यह लेख पहली बार .net पत्रिका के अंक 234 में प्रकाशित हुआ - वेब डिज़ाइनरों और डेवलपर्स के लिए दुनिया की सबसे अधिक बिकने वाली पत्रिका।
एक तकनीक, इसके मूल में, एक कार्य को पूरा करने का एक तरीका है और, फ्रंटएंड डेवलपर्स और डिजाइनर होने के नाते, हमारे पास बहुत सारे कार्य हैं। उस ने कहा, हम अक्सर भूल जाते हैं कि यह परिदृश्य कितना बदल गया है। 2002 से 2010 तक हमारा समुदाय कोड और संसाधन ब्लोट के साथ सड़ा हुआ था, प्रदर्शन और रखरखाव में बाधा। इसे दूर करने के लिए, हमने कई टिप्स, ट्रिक्स और हैक्स बनाए जिन्हें हमने 'तकनीक' करार दिया। हम अभी भी कार्यों को पूरा कर रहे थे, बस सबसे कुशल तरीके से नहीं।
360 करते हुए, पिछले कुछ वर्षों में जीवन में बेहतर मानकों और मानकों के कार्यान्वयन को देखा गया है, जो हमें एक समुदाय के रूप में नई और अधिक उन्नत 'तकनीक' विकसित करने में सक्षम बनाता है। इस नए परिदृश्य को 'आधुनिक वेब' माना जाता है।
जैसे-जैसे 'वेब 2.0' स्थिर और भ्रमित होता गया, वैसे ही 'आधुनिक वेब' भी होगा। उसे कुछ टाइम और दो। उस ने कहा, अभी के लिए, हम इस शब्द का उपयोग और दुरुपयोग तब तक कर सकते हैं जब तक कि यह जो दर्शाता है उसकी एक सामान्य समझ है।
2010 में HTML5 विनिर्देश एक नया, अर्ध-मानकीकृत वेब वातावरण प्रदान करते हुए उतरा। ओपेरा, फ़ायरफ़ॉक्स, क्रोम और सफारी जैसे ब्राउज़रों ने इस नई लहर को अपनाया और अपनी देव टीमों को मानकों के कार्यान्वयन और एपीआई अन्वेषण की नई सीमाओं तक धकेल दिया। ये ब्राउज़र कैसे 'ऑनबोर्ड' हैं, इसका अंदाजा लगाने के लिए, HTML5 समर्थन को बदलने के लिए www.html5readiness.com के विज़ुअलाइज़ेशन देखें।
Internet Explorer में समर्थन की कमी के बारे में चिंतित न हों। हम Google Chrome Frame की बदौलत इसका मुकाबला कर सकते हैं। चूंकि Google ने इसे 2010 में पेश किया था, इसलिए यह इंटरनेट एक्सप्लोरर के लिए समर्थन तंत्र बन गया है। IE के सभी संस्करणों को क्रोम फ्रेम के साथ लक्षित किया जा सकता है, जो एक नए उपयोगकर्ता को एक प्लग-इन डाउनलोड करने के लिए प्रेरित करता है जो आईई के अंदर क्रोम के हल्के संस्करण के साथ ऑप्ट-इन वेबसाइटों को प्रस्तुत करता है। क्रोम फ्रेम को लागू करने के लिए हम अपनी साइट के हेड> टैग में निम्नलिखित मेटा> टैग जोड़ते हैं।
मेटा http-equiv="X-UA-संगत" सामग्री = "क्रोम = 1" />
यहां से हम आईई उपयोगकर्ताओं को जावास्क्रिप्ट का उपयोग करके प्लग-इन डाउनलोड करने के लिए संकेत दे सकते हैं, यदि पहले से इंस्टॉल नहीं है:
स्क्रिप्ट प्रकार = "पाठ/जावास्क्रिप्ट" src = "http://ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js">/स्क्रिप्ट>
स्क्रिप्ट>
विंडो.ऑनलोड = फ़ंक्शन () {
CFInstall.check({
मोड: "ओवरले",
गंतव्य: "http://www.yourdomain.com"
});
};
/स्क्रिप्ट>
प्लग-इन स्थापित करने के बाद उपयोगकर्ता को एक निश्चित लिंक पर भेजने के लिए गंतव्य सेट किया जा सकता है। सावधानी का एक शब्द: हालांकि क्रोम फ्रेम हमें वास्तव में आधुनिक ब्राउज़रों के लिए सख्ती से विकसित करने की एक विधि देता है, हमें यह नहीं भूलना चाहिए कि उपयोगकर्ता के पास प्लग-इन डाउनलोड नहीं करने का विकल्प होता है यदि वे नहीं चाहते हैं। यदि वे नहीं करते हैं, और आपको IE के एक या अन्य विभिन्न संस्करणों के लिए समर्थन प्रदान करने की आवश्यकता है, तो आपको अपने अनुभवों, क्रॉस-ब्राउज़र के साथ यह पता लगाने में कुछ और समय देना होगा कि आप क्या प्रदान कर सकते हैं और क्या नहीं।.
इस कोड के साथ आधुनिक वेब स्टैक पर विकसित करने के लिए काफी अधिक स्तर का खेल मैदान प्रदान करने के साथ, हम अपने दिमाग के साथ आराम से आगे बढ़ सकते हैं। आपको याद हो सकता है कि आपको अपनी साइट को सही क्रॉस-ब्राउज़र संरचित करने के लिए कई ब्राउज़र-विशिष्ट हैक बनाने, आपकी कटा हुआ छवियों के साथ उपयोग करने के लिए अनगिनत संख्या में खाली तत्व बनाने, या यहां तक कि अत्यधिक वर्बोज़ या अनावश्यक जावास्क्रिप्ट कोड लिखने के लिए याद रखना होगा। काम करने के लिए सबसे सरल कार्यक्षमता। ये सभी दर्द, कुछ अर्थों में, वही समस्याएं हैं जिनकी हम आज चिंता करते हैं। हम अभी भी लेआउट, शैली और कार्यक्षमता का मुकाबला करने के लिए अधिक नियंत्रण और बेहतर टूल के लिए लड़ रहे हैं, लेकिन उस स्तर पर जो परिपक्व है।
ख़ाका
क्लियरफिक्स
फ़्लोटिंग तत्व को CSS 2.1 में वापस पेश किया गया था, लेकिन कभी भी पूरा समाधान नहीं निकला जिसकी हमने आशा की थी। सबसे बड़ी समस्याओं में से एक मूल तत्व के आयामों को बनाए रखना था जब एक बाल तत्व तैरता था। इसे संबोधित करने के लिए, क्लियरफिक्स तकनीक बनाई गई थी।
निम्नलिखित एचटीएमएल लें:
डिव >
डिव >.../डिव>
डिव >.../डिव>
/div>
इस तकनीक को निकोलस गैलाघेर ने लिखा था:
.clearfix: पहले,
.clearfix: के बाद {
सामग्री: " ";
प्रदर्शन: तालिका;
}
.clearfix: के बाद {
दोनों को साफ करो;
}
.क्लियरफिक्स {
*ज़ूम: 1;
}
यदि आप अपनी परियोजनाओं को शुरू करने के लिए HTML5Boilerplate का उपयोग करते हैं, तो आपके पास पहले से ही क्लियरफिक्स तकनीक का यह संस्करण बेक किया हुआ होगा।
बॉक्स आकार
सालों तक डेवलपर्स ने बहस की कि कौन सा बॉक्स मॉडल कार्यान्वयन अधिक समझ में आता है। Quirks बनाम Standards मोड का वास्तव में मतलब था: 'क्या किसी तत्व का आयाम बदलना चाहिए, सेट होने के बाद, जब बॉर्डर और पैडिंग लागू होते हैं, या नहीं'।
अब यह व्यापक रूप से सहमत है कि यह सीमाओं और पैडिंग के लिए एक तत्व के भीतर उपलब्ध स्थान से दूर ले जाने के लिए और तत्व की चौड़ाई या ऊंचाई में जोड़ने के लिए अधिक समझ में आता है। बॉक्स-साइज़िंग के व्यापक कार्यान्वयन के साथ बहस को अप्रासंगिक बना दिया गया है। इसके विपरीत ब्राउज़र आपसे इसके संकेत लेगा।
क्रिस कॉयर और पॉल आयरिश द्वारा लोकप्रिय, एक सर्वव्यापी तकनीक को निम्नलिखित के साथ लागू किया जा सकता है:
* {
-वेबकिट-बॉक्स-साइज़िंग: बॉर्डर-बॉक्स;
-मोज़-बॉक्स-साइज़िंग: बॉर्डर-बॉक्स;
बॉक्स-साइज़िंग: बॉर्डर-बॉक्स;
}
संभावित प्रदर्शन हिट के कारण सीएसएस में * चयनकर्ता का उपयोग करने पर बहस हुई है। यदि आप अपनी वेबसाइट/ऐप के अन्य सभी पहलुओं को अति-अनुकूलित नहीं कर रहे हैं तो इस प्रकार के दावे निरर्थक हैं। बॉर्डर-बॉक्स का उपयोग करने से ब्राउज़र उपलब्ध स्पेस सेट के अंदर पैडिंग और बॉर्डर जोड़ देगा। बॉक्स-साइज़िंग को सामग्री-बॉक्स में सेट करके 'मानक मोड' का उपयोग किया जा सकता है।
बहु कॉलम
वेब लिखित रूप और प्रकार से बहुत प्रेरित था। दुर्भाग्य से, हम चर्मपत्र चरण में फंस गए। इनमें से कुछ मुद्दे लंबे समय से प्रतीक्षित पेजेड-मीडिया और सीएसएस क्षेत्र विनिर्देशों के साथ आ रहे हैं। उस ने कहा, अधिक पत्रिका-जैसे लेआउट की ओर पहला कदम तब उठाया गया जब ब्राउज़रों ने सीएसएस बहु-स्तंभों को लागू करना शुरू किया। इस आशय को उत्पन्न करने के लिए कोड अपेक्षाकृत सरल है:
पी {
-वेबकिट-कॉलम-गिनती: 2;
-मोज़-कॉलम-गिनती: 2;
कॉलम-गिनती: 2;
}
आप CSS3 के बहु-स्तंभ विनिर्देशन के साथ-साथ एक जावास्क्रिप्ट फ़ॉलबैक के बारे में अधिक जान सकते हैं जिसका उपयोग आप बिना किसी समर्थन के किसी भी ब्राउज़र के लिए कर सकते हैं, ए लिस्ट अपार्ट के ब्लॉग से।
गणना
आयामों की गणना करना कठिन हो सकता है। पुराने दिनों में, हमारे पास किसी भी प्रकार की इकाई गणना करने का कोई तरीका नहीं था, मिश्रित इकाई गणनाओं की तो बात ही छोड़ दें। कैल्क की बदौलत यह सब बदल गया है। एक गद्देदार प्रभाव बनाना जो प्रारंभिक तत्वों की चौड़ाई को प्रभावित नहीं करता है या कुछ का उपयोग नहीं करता है जैसे box-sizing:border-box; हाल तक, केवल अतिरिक्त युक्त तत्वों को जोड़कर ही संभव था।
गद्देदार {
मार्जिन: 0 ऑटो;
स्थिति: रिश्तेदार;
चौड़ाई: -वेबकिट-कैल्क(100% - (20px * 2));
चौड़ाई: -मोज़-कैल्क(100% - (20px * 2));
चौड़ाई: कैल्क(100% - (20px *2));
}
कैल्क () पैडेड की पैरेंट चौड़ाई के आधार पर उचित चौड़ाई की गणना का ख्याल रखता है और एक परिभाषित 20px पैडिंग घटाता है। मैंने अपने तत्व के दोनों ओर 2 से गुणा किया, सापेक्ष स्थिति का उपयोग करने वाले तत्व को केंद्रित किया और बाएं और दाएं मार्जिन ऑटो।
अंदाज
पारदर्शिता
किसी तत्व की सही शैली प्राप्त करना हमेशा उस तरह के टूल पर निर्भर करता है जो हमारे पास CSS में उपलब्ध हैं। पारदर्शिता उन पहले समर्थन प्रकारों में से एक है, जिन्हें आप 2000 के दशक की शुरुआत में चलाएंगे।
HTML5 और अधिक केंद्रित मानकों के प्रयासों के आगमन के साथ, ब्राउज़र में अस्पष्टता संपत्ति का एक मानक कार्यान्वयन है, और नए रंग मॉड्यूल विनिर्देश के अनुसार अल्फा चैनल समर्थन को उजागर किया है। इसमें RGBA और HSLA दिशानिर्देश शामिल हैं।
ए {
रंग: आरजीबीए (0,255,0,0.5);
पृष्ठभूमि: आरजीबीए (0,0,255,0.05);
सीमा: आरजीबीए (255,0,0,0.5);
}
जहाँ भी आपको HEX मान मिले, आप RGBA या HSLA रंगों का उपयोग कर सकते हैं। परिभाषित नामों के साथ मज़ेदार रंगों की एक विस्तृत सूची भी है जिसे आप सीधे विनिर्देश में देख सकते हैं। ये तब काम आते हैं जब आप तत्वों के बीच एक गतिशील मिश्रण बनाना चाहते हैं।
फिल्टर
सीएसएस फिल्टर बेहद रोमांचक हैं। तीसरे पक्ष के प्लग-इन की आवश्यकता के बिना किसी पृष्ठ पर तत्वों के रूप और स्वरूप को गतिशील रूप से बदलने की क्षमता होना अद्भुत है, और फ़ोटोशॉप में आपके समय को काफी कम करने में मदद करेगा।
img src="market.webp">
आईएमजी {
-वेबकिट-फ़िल्टर: ग्रेस्केल(१००%);
}
CSS फ़िल्टर केवल वर्तमान में WebKit ब्राउज़र में समर्थित हैं, इसलिए उनका उपयोग योगात्मक प्रकृति का होना चाहिए, निर्भर नहीं। यहां और पढ़ें।
छवि प्रतिस्थापन
टेक्स्ट को इमेज से बदलने का काम काफी समय से चल रहा है। दुर्भाग्य से, नवीनतम और सबसे परिष्कृत छवि प्रतिस्थापन तकनीकों में अभी भी कमियां हैं, पहुंच-वार। लेकिन हाल ही में दो ऐसे प्रकाश में आए हैं जो बेहद चतुर हैं, और अपने आप में अद्वितीय हैं। पहला स्कॉट केलमैन द्वारा लिखा गया था:
h1 class='hide-text'>मेरी वेबसाइट का लोगो/h1>
.छिपाएं-पाठ {
टेक्स्ट इंडेंट: 100%;
व्हाइट-स्पेस: अब्रैप;
बहुत ज्यादा गोपनीय;
}
दूसरा निकोलस गैलाघर द्वारा लिखा गया था:
.छिपाएं-पाठ {
फ़ॉन्ट: 0/0 ए;
पाठ-छाया: कोई नहीं;
रंग: पारदर्शी;
}
उत्तरदायी वीडियो
एक प्रतिक्रियाशील वातावरण में मीडिया को सही ढंग से स्केल करना चुनौतीपूर्ण हो सकता है। अनुकूली डिज़ाइन का सम्मान करने वाली अधिक से अधिक वेबसाइटों के साथ, तत्वों के आयामों और पहलू अनुपात को ठीक से संभालना आवश्यक है।
जिस तरह से तृतीय-पक्ष सेवाएं सामग्री की सेवा करती हैं, उसके कारण एंबेडेड वीडियो अधिक चुनौतीपूर्ण मीडिया प्रकारों में से एक रहा है। एक सामान्य YouTube एम्बेड कुछ इस तरह दिखता है:
iframe चौड़ाई="640" ऊंचाई="390" src="http:// www.youtube.com/embed/oHg5SJYRHA0" फ्रेमबॉर्डर="0" allowfullscreen="">/iframe>
तब iframe तत्व में एक Flash ऑब्जेक्ट या एम्बेड तत्व होता है। iframe जैसी किसी चीज़ का उपयोग करना {maxwidth: 100%; } काम नहीं करेगा क्योंकि चौड़ाई बदलने पर नेस्टेड तत्व ठीक से आकार नहीं बदलते हैं। तो, हमें कुछ चालबाजी करनी होगी।
डिव >
iframe चौड़ाई="640" ऊंचाई="390" src="http://www.youtube.com/embed/oHg5SJYRHA0" फ्रेमबॉर्डर="0" allowfullscreen="">/iframe>
/div>
आईफ्रेम को किसी अन्य तत्व में लपेटने से हमें वीडियो में उचित प्रतिक्रियाशील कार्यक्षमता जोड़ने के लिए आवश्यक नियंत्रण मिलेगा।
।वीडियो {
स्थिति: रिश्तेदार;
पैडिंग-बॉटम: 56.25%;
ऊंचाई: 0;
बहुत ज्यादा गोपनीय;
}
.वीडियो आईफ्रेम,
.वीडियो वस्तु,
.वीडियो एम्बेड {
स्थिति: निरपेक्ष;
शीर्ष: 0;
बाएं: 0;
चौड़ाई: 100%;
ऊंचाई: 100%;
}
.वीडियो रैपर की पैडिंग-बॉटम सेट करना: 56.25%; इस विधि में जादू है। पैडिंग का उपयोग करने का अर्थ है कि उपयोग किया गया प्रतिशत माता-पिता की चौड़ाई पर आधारित होगा; '56.25%' 16:9 पक्षानुपात बनाएगा। आप चाहें तो गणित स्वयं करें। 9/16 = 0.5625। ०.५६२५ * १०० = ५६.२५ (यह हमारा प्रतिशत है)।
कार्यक्षमता
आसानी से तत्वों का चयन
कई जावास्क्रिप्ट पुस्तकालयों (उदाहरण के लिए jQuery) की लोकप्रियता के साथ, ईसीएमएस्क्रिप्ट समिति और डब्ल्यू 3 सी मानकों ने कार्यक्षमता के मूल टुकड़ों में से एक पर ध्यान दिया, डेवलपर्स में मूल रूप से कमी थी - अच्छे तत्व चयन। getElementByID() और getElementByClassName() जैसे तरीके तेज थे लेकिन उतने लचीले और मजबूत नहीं थे जितने कि डेवलपर समुदाय से आने वाले चयनकर्ता इंजन; querySelectorAll() मूल चयनकर्ता विधि में उस लचीलेपन में से कुछ की नकल करने का मानक निकाय का तरीका था।
वर आइटम = document.querySelectorAll('#header .item');
querySelectorAll() एकाधिक और मिश्रित चयनकर्ताओं को पारित किया जा सकता है। इस पर और पढ़ें।
नई सरणियाँ बनाना
एक सरणी पर इटरेट करना कुछ ऐसा है जो लिखने के लिए थकाऊ हो जाता है। () लूप के लिए लेखन और पुनर्लेखन मजेदार नहीं है। JS संस्करण 1.6 में मानचित्र () विधि एक आसान तरीके से पुनरावृति करने और दूसरे से एक नया सरणी बनाने के लिए समर्थन प्रदान करती है।
वर लोग = ['हीदर', 'जेम्स', 'कारी', 'केविन'];
var स्वागत है = लोग। मानचित्र (फ़ंक्शन (नाम) {
वापसी 'हाय' + नाम + '!';
});
इस कोड को चलाना, यदि हम कंसोल.लॉग (स्वागत) करते तो आप देखेंगे कि स्वागत एक नई सरणी है ['हाय हीदर!', 'हाय जेम्स!', 'हाय कारी!', 'हाय केविन!' ].
स्वच्छ दस्तावेज़ और विंडो ऑब्जेक्ट
तृतीय पक्ष जावास्क्रिप्ट पुस्तकालय मूल दस्तावेज़ और विंडो ऑब्जेक्ट्स के साथ खिलवाड़ करने के लिए प्रवृत्त हैं। यह अन्य तृतीय पक्ष पुस्तकालयों और उनके सहित डेवलपर के लिए एक समस्या हो सकती है। किसी भी पक्ष के रूप में, सुनिश्चित करें कि आप दोनों वस्तुओं का एक नया उदाहरण बनाकर उनके स्वच्छ संस्करण के साथ काम कर रहे हैं। ऐसा करने का सबसे अच्छा तरीका एक आईफ्रेम तत्व बनाना, इसे डीओएम में डालना और उन वस्तुओं के नए उदाहरणों को संग्रहित करना है।
var iframe = document.createElement('iframe');
iframe.style.display = "कोई नहीं";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
वर _दस्तावेज़ = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);
हालांकि वेब स्टैक में बड़े सुधार हुए हैं, फिर भी हमारे प्रोजेक्ट के लेआउट, शैली और कार्यक्षमता में आने वाली चुनौतियों का सामना करने के लिए हमारे तकनीकी सूट को परिष्कृत करना और परिष्कृत करना अभी भी बेहद महत्वपूर्ण है। विकास का एक अच्छा पारिस्थितिकी तंत्र बनाए रखने के लिए हमें मानक निकायों और ब्राउज़र विक्रेताओं को नए विनिर्देशों और नवीन सुविधा कार्यान्वयन के साथ प्रगति जारी रखने के लिए प्रोत्साहित करना चाहिए, जबकि हम अपने स्वयं के ज्ञान को साथी डेवलपर्स और डिजाइनरों के साथ साझा करते हैं। अधिक अंतर्दृष्टि, कम हैक।
डार्सी क्लार्क एक पुरस्कार विजेता डेवलपर, वर्डप्रेस थीम कंपनी Themify के सह-संस्थापक और दैनिक डील एग्रीगेटर डीलपेज और jQuery टीम के सदस्य हैं। वह पोलर मोबाइल में वरिष्ठ UX डेवलपर के रूप में काम करता है।
ये पसंद आया? ये पढ़ सकते हैं!
- ऐप कैसे बनाएं
- सबसे अच्छा मुफ्त फोंट डाउनलोड करें
- मुफ़्त फ़ोटोशॉप ब्रश हर क्रिएटिव के पास होना चाहिए
- इलस्ट्रेटर ट्यूटोरियल: आज आजमाने के लिए अद्भुत विचार!
- डूडल कला के बेहतरीन उदाहरण
- शानदार वर्डप्रेस ट्यूटोरियल चयन
- डिजाइनरों के लिए सर्वश्रेष्ठ मुफ्त वेब फोंट
- मुफ्त बनावट डाउनलोड करें: उच्च रिज़ॉल्यूशन और अभी उपयोग के लिए तैयार ready
