आवश्यक एचटीएमएल, सीएसएस आणि जावास्क्रिप्ट तंत्र

सामग्री

• लेआउट
• क्लियरफिक्स
• बॉक्स आकार बदलणे
• एकाधिक स्तंभ
• गणिते
• शैली
• पारदर्शकता
• फिल्टर
• प्रतिमा बदलणे
• प्रतिसाद व्हिडिओ
• कार्यक्षमता
• घटक सहजपणे निवडत आहे
• नवीन अ‍ॅरे तयार करत आहे
• कागदजत्र आणि विंडो ऑब्जेक्ट्स साफ करा
• हे आवडले? हे वाचा!

हा लेख प्रथम .नेट मासिकाच्या 234 अंकात प्रकाशित झाला - वेब डिझायनर्स आणि विकसकांसाठी जगातील सर्वाधिक विक्री होणारी मॅगझिन.

तंत्र म्हणजे मुख्य म्हणजे कार्य करणे हा एक मार्ग आहे आणि आघाडीचे विकसक आणि डिझाइनर असल्याने आपल्याकडे बर्‍याच कामे आहेत. म्हणाले की, हे लँडस्केप किती बदलले आहे हे आम्ही नेहमीच विसरतो. 2002 ते 2010 पर्यंत आमचा समुदाय कोड आणि रिसोर्स ब्लोटसह सडलेला होता, कामगिरी आणि देखभाल करण्यामध्ये अडथळा आणत होता. यावर मात करण्यासाठी आम्ही ‘तंत्र’ म्हणून ओळखल्या जाणार्‍या अनेक टिपा, युक्त्या आणि हॅक्स तयार केल्या. आम्ही अद्याप सर्वात कार्यक्षम पद्धतीने नव्हे तर कार्ये करीत होतो.

Do 360० करत असताना, गेल्या काही वर्षांमध्ये चांगल्या मानके आणि मानक अंमलबजावणीमुळे जीवन प्राप्त होते आणि आम्हाला नवीन आणि अधिक प्रगत ‘तंत्र’ विकसित करण्यास समुदाय म्हणून सक्षम केले. हे नवीन लँडस्केप म्हणजेच 'आधुनिक वेब' मानले जाते.

‘वेब २.०’ जसा स्थिर आणि गोंधळात टाकत गेला, तसतसा ‘आधुनिक वेब’ देखील होईल. वेळ द्या. ते म्हणाले की, आत्तापर्यंत आपण हा शब्द वापरु आणि दुरुपयोग करू शकतो जोपर्यंत हे प्रतिनिधित्त्व काय आहे याबद्दल सामान्य ज्ञान आहे.

२०१० मध्ये एचटीएमएल. तपशील उतरला, अगदी नवीन, अर्ध-प्रमाणित वेब वातावरण प्रदान करतो. ऑपेरा, फायरफॉक्स, क्रोम आणि सफारी या ब्राउझरनी ही नवीन लाट स्वीकारली आणि त्यांच्या डेव्ह टीमला मानक अंमलबजावणी आणि एपीआय एक्सप्लोरेशनच्या नवीन मर्यादांकडे ढकलले. हे ब्राउझर ‘ऑनबोर्ड’ कसे आहेत याची कल्पना देण्यासाठी, एचटीएमएल 5 समर्थन बदलण्याच्या www.html5readiness.com चे दृश्ये पहा.

इंटरनेट एक्सप्लोररमध्ये पाठिंबा नसल्याबद्दल काळजी करू नका. आम्ही गुगल क्रोम फ्रेमच्या या आभारांचा मुकाबला करू शकतो. २०१० मध्ये गुगलने याची सुरूवात केल्यापासून ते इंटरनेट एक्सप्लोररला जाण्यासाठी मदत करणारी यंत्रणा बनली आहे. आयई च्या सर्व आवृत्त्यांना क्रोम फ्रेमसह लक्ष्य केले जाऊ शकते, जे नवीन वापरकर्त्यास आयई मधील क्रोमच्या हलके आवृत्तीसह ऑप्ट-इन वेबसाइट प्रस्तुत करणारे प्लग-इन डाउनलोड करण्यास प्रवृत्त करते. क्रोम फ्रेमची अंमलबजावणी करण्यासाठी आम्ही आमच्या साइटच्या प्रमुख> टॅगमध्ये खालील मेटा> टॅग जोडतो.

मेटा एचटीपी-सम = "एक्स-यूए-सुसंगत" सामग्री = "क्रोम = 1" />

येथून आम्ही IE वापरकर्त्यांना जावास्क्रिप्ट वापरुन, आधीपासून स्थापित नसल्यास, प्लग-इन डाउनलोड करण्यास प्रवृत्त करू शकतो:

स्क्रिप्ट प्रकार = "मजकूर / जावास्क्रिप्ट" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / स्क्रिप्ट>
स्क्रिप्ट>
विंडो.ऑनलोड = फंक्शन () {
CFInstall.check ({
मोड: "आच्छादन",
गंतव्य: "http://www.yourdomain.com"
});
};
/ स्क्रिप्ट>

प्लग-इन स्थापित केल्यानंतर वापरकर्त्यास एका विशिष्ट दुव्यावर पाठविण्यासाठी गंतव्यस्थान सेट केले जाऊ शकते. सावधगिरीचा शब्दः ख Chrome्या अर्थाने आधुनिक ब्राउझरसाठी Chrome फ्रेम आम्हाला कठोरपणे विकसित करण्याची एक पद्धत देते, परंतु वापरकर्त्याला ते नको असल्यास प्लग-इन डाउनलोड न करण्याचा पर्याय आहे हे विसरू नये. ते नसल्यास आणि आपल्याला आयईच्या एक किंवा इतर भिन्न आवृत्त्यांसाठी समर्थन प्रदान करणे आवश्यक असल्यास, क्रॉस-ब्राउझरसह आपण आपल्या अनुभवांसह आपण काय देऊ शकता आणि काय देऊ शकत नाही हे शोधण्यासाठी आपल्याला आणखी काही वेळ घालवावा लागेल..

हा कोड आधुनिक वेब स्टॅकवर विकसित करण्याकरिता बर्‍यापैकी स्तरीय प्लेइंग फील्ड प्रदान करून, आम्ही सहजपणे आपल्या मनासह पुढे जाऊ शकतो. आपल्या साइटला योग्य क्रॉस-ब्राउझर संरचित करण्यासाठी आपल्या ब्राउझर-विशिष्ट हॅक्सची संख्या तयार करुन आपल्या चिरलेल्या प्रतिमांसह वापरण्यासाठी असंख्य रिक्त घटक तयार करणे किंवा अती प्रमाणात वर्बोज किंवा अनावश्यक जावास्क्रिप्ट कोड लिहिणे आपल्या लक्षात असू शकते. कार्य करण्यासाठी सोपी कार्यक्षमता. या सर्व व्यथा काही अर्थाने आपण आज ज्या समस्यांबद्दल काळजी घेतो त्या आहेत. लेआउट, शैली आणि कार्यक्षमता सोडविण्यासाठी परंतु अद्याप परिपक्व असलेल्या स्तरावर आम्ही अधिक नियंत्रण आणि चांगल्या साधनांसाठी संघर्ष करीत आहोत.

लेआउट

क्लियरफिक्स

फ्लोटिंग एलिमेंटचा परिचय सीएसएस २.१ मध्ये परत आला पण आम्ही अपेक्षेने पूर्ण निराकरण होऊ शकले नाही. सर्वात मोठी समस्या म्हणजे मूल घटकाची माहिती दिलेली असताना पालक घटकाचे परिमाण राखणे. यावर उपाय म्हणून, क्लिअरफिक्स तंत्र तयार केले गेले.

खालील HTML घ्या:

div>
Div> ... / div>
Div> ... / div>
/ div>

हे तंत्र निकोलस गॅलाघर यांनी लिहिलेः

.clearfix: आधी,
.clearfix: नंतर
सामग्री: "";
प्रदर्शन: सारणी;
}
.clearfix: नंतर
स्पष्ट: दोन्ही;
}
.clearfix {
* झूम: 1;
}

आपण आपले प्रकल्प बंद करण्यासाठी HTML5Boilerplate वापरत असल्यास आपल्याकडे आधीपासूनच क्लीअरफिक्स तंत्राची ही आवृत्ती आहे.

बॉक्स आकार बदलणे

वर्षानुवर्षे विकासकांनी वादविवाद केला की कोणत्या बॉक्स मॉडेलच्या अंमलबजावणीत अधिक अर्थ आहे. क्विर्क्स वि स्टँडर्ड्स मोडचा खरोखर अर्थ असा होता: ‘बॉर्डर्स आणि पॅडिंग लागू केली जाते की नाही,’ सेट केल्यावर घटकाचे परिमाण बदलले पाहिजेत. '

हे आता व्यापकपणे मान्य झाले आहे की ते घटकांमधील उपलब्ध जागेवरून सीमा आणि पॅडिंग काढून घेण्यास आणि घटकाच्या रुंदी किंवा उंचीमध्ये जोडू नये यासाठी अधिक अर्थ प्राप्त करतात. बॉक्स-सायझिंगच्या व्यापक अंमलबजावणीमुळे वादविवाद अप्रासंगिक ठरला आहे. ब्राउझर त्याऐवजी उलट त्याचे संकेत आपल्याकडून घेईल.

ख्रिस कोयर आणि पॉल आयरिश यांनी लोकप्रिय, एक सर्व-तंतोतंत तंत्र पुढील गोष्टींसह लागू केले जाऊ शकते:

* {
-वेबकिट-बॉक्स-सायझिंग: बॉर्डर बॉक्स;
-मोझ-बॉक्स-सायझिंग: बॉर्डर बॉक्स;
बॉक्स-आकार: बॉर्डर बॉक्स;
}

संभाव्य कामगिरीच्या हिटमुळे CSS मध्ये * सिलेक्टर वापरुन वादविवाद झाले आहेत. आपण आपल्या वेबसाइट / अ‍ॅपच्या इतर सर्व बाबींना अति-अनुकूलित करत नसल्यास या प्रकारचे दावे फालतू आहेत. बॉर्डर बॉक्स वापरल्याने ब्राउझर उपलब्ध स्पेस सेटमध्ये पॅडिंग आणि बॉर्डर्स जोडेल. 'मानक मोड' बॉक्स-आकार बदलून सामग्री बॉक्समध्ये सेट करुन वापरला जाऊ शकतो.

एकाधिक स्तंभ

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

पी
-वेबकिट-कॉलम-गणना: 2;
-मोझ-कॉलम-मोजणी: 2;
स्तंभ-गणना: 2;
}

आपण सीएसएस 3 मल्टि-कॉलम स्पेसिफिकेशन, तसेच जावास्क्रिप्ट फॉलबॅक बद्दल अधिक जाणून घेऊ शकता जे आपण कोणत्याही ब्राउझरसाठी समर्थनाशिवाय वापरू शकता, ए लिस्ट अपार्टमेंटच्या ब्लॉग वरून.

गणिते

परिमाणांची गणना करणे कठिण असू शकते. जुन्या दिवसात, आमच्याकडे कोणत्याही प्रकारचे युनिट कॅल्क्युलेशन करण्याचा कोणताही मार्ग नव्हता, मिश्र युनिटची गणना करू या. हे सर्व बदलल्याबद्दल धन्यवाद. सुरुवातीच्या घटकांच्या रूंदीवर परिणाम होणार नाही किंवा बॉक्स-सायझिंग सारखे काहीतरी वापरणार नाही अशा पॅड प्रभाव तयार करणे: बॉर्डर बॉक्स; अलीकडे पर्यंत, केवळ अतिरिक्त घटक समाविष्ट करुन शक्य होते.

.पाडेड {
समास: 0 ऑटो;
स्थिती: सापेक्ष;
रुंदी: -वेबकिट-कॅल्क (100% - (20px * 2));
रुंदी: -मोझ-कॅल्क (100% - (20px * * 2));
रुंदी: कॅल्क (100% - (20px * * 2));
}

कॅल्क (). पॅडेडच्या मूळ रूंदी आणि वजा परिभाषित 20 पीएक्स पॅडिंगच्या आधारावर योग्य रूंदीची गणना करते. मी माझ्या घटकाच्या दोन्ही बाजूंसाठी 2 ने गुणाकार केला आणि संबंधित स्थान आणि डाव्या आणि उजव्या समास ऑटोचा वापर करून घटक मध्यभागी ठेवले.

शैली

पारदर्शकता

सीएसएसमध्ये आमच्यासाठी उपलब्ध असलेल्या प्रकारच्या साधनांवर तत्त्वाची योग्य शैली मिळविणे नेहमीच अवलंबून असते. 2000 च्या दशकाच्या सुरुवातीच्या काळात आपण पार पाडल्या जाणार्‍या पहिल्या समर्थन रूप्यांपैकी एक पारदर्शकता आहे.

एचटीएमएल 5 च्या आगमनाने आणि अधिक केंद्रित मानकांच्या प्रयत्नांसह, ब्राउझरमध्ये अस्पष्टतेच्या मालमत्तेची मानक अंमलबजावणी होते आणि नवीन कलर मॉड्यूल स्पेसिफिकेशननुसार अल्फा चॅनेल समर्थन उघड केले. यात आरजीबीए आणि एचएसएलए मार्गदर्शकतत्त्वे समाविष्ट आहेत.

अ {
रंग: rgba (0,255,0,0.5);
पार्श्वभूमी: rgba (0,0,255,0.05);
सीमा: आरजीबा (255,0,0,0.5);
}

आपण जेथे जेथे हेक्स मूल्ये शोधू शकता तेथे आपण आरजीबीए किंवा एचएसएलए रंग वापरू शकता. निर्दिष्‍ट नावांसह मजेदार रंगांची विस्तृत सूची देखील आहे जी आपण तपशीलमध्येच तपासू शकता. जेव्हा आपल्याला घटकांमध्ये डायनॅमिक मिश्रण तयार करायचे असते तेव्हा हे कार्यक्षम ठरतात.

फिल्टर

सीएसएस फिल्टर अत्यंत रोमांचक आहेत. तृतीय पक्षाच्या प्लग-इनशिवाय एखाद्या पृष्ठावरील घटकांचे स्वरुप बदलण्याची क्षमता आश्चर्यकारक आहे आणि फोटोशॉपमध्ये घालवलेला आपला वेळ कमी करण्यास मदत करेल.

img src = "बाजार .webp">
img
-वेबकिट-फिल्टर: ग्रेस्केल (100%);
}

सीएसएस फिल्टर्स सध्या केवळ वेबकिट ब्राउझरमध्ये समर्थीत आहेत म्हणून त्यांचा वापर व्यसनात्मक स्वरूपाचा असावा, अवलंबून नसावा. अधिक येथे वाचा.

प्रतिमा बदलणे

प्रतिमांसह मजकूर पुनर्स्थित करणे बर्‍याच काळापासून आहे. दुर्दैवाने, अद्याप अद्ययावत आणि अत्याधुनिक प्रतिमा बदलण्याच्या तंत्रात कमतरता आहेत. परंतु अलीकडेच दोन जण अत्यंत प्रकाशक आणि त्यांच्या स्वतःच्या हक्कांपेक्षा अद्वितीय असल्याचे समोर आले आहे. प्रथम स्कॉट केल्मन यांनी लिहिले:

h1 वर्ग = ’लपवा-मजकूर’> माझ्या वेबसाइटचा लोगो </ h1>
.क्षेत्र-मजकूर {
मजकूर-इंडेंट: 100%;
पांढरा-जागा: nowrap;
ओव्हरफ्लो: लपलेले;
}

दुसरा निकोलस गॅलाघर यांनी लिहिले:

.क्षेत्र-मजकूर {
फॉन्ट: 0/0 ए;
मजकूर-सावली: काहीही नाही;
रंग: पारदर्शक;
}

प्रतिसाद व्हिडिओ

एक प्रतिसाद योग्य वातावरणात योग्यरित्या मोजण्यासाठी मीडिया मिळवणे एक आव्हानात्मक असू शकते. जास्तीत जास्त वेबसाइट्स अनुकूली डिझाइनचा आदर करतात, घटकांचे परिमाण आणि पैलू गुणोत्तर व्यवस्थित हाताळणे आवश्यक आहे.

तृतीय-पक्षाच्या सेवा ज्या प्रकारे सामग्री पुरविते त्याद्वारे एम्बेड केलेला व्हिडिओ झगडायला एक आव्हानात्मक माध्यम प्रकार आहे. एक सामान्य YouTube एम्बेड असे दिसते:

iframe रुंदी = "640" उंची = "390" src = "http: // www.youtube.com/e એમ્બેડ/oHg5SJYRHA0" फ्रेमबर्ड = "0" परवानगीफुलस्क्रीन = ""> / iframe>

नंतर iframe घटकात फ्लॅश ऑब्जेक्ट किंवा एम्बेड घटक असतो. इफ्रेम {मॅक्सविड्थ सारखे काहीतरी वापरणे: 100%; work कार्य करणार नाही कारण रुंदी बदलल्यास नेस्टेड घटक योग्य आकारात बदलत नाहीत. तर, आम्हाला काही फसवे करावे लागेल.

div>
iframe रुंदी = "640" उंची = "390" src = "http://www.youtube.com/e એમ્બેડ/oHg5SJYRHA0" फ्रेमबर्ड = "0" परवानगीफुलस्क्रीन = ""> / iframe>
/ div>

दुसर्‍या घटकामध्ये इफ्रेम लपेटणे आम्हाला व्हिडिओमध्ये योग्य प्रतिसादात्मक कार्यक्षमता जोडण्यासाठी आवश्यक नियंत्रण देते.

.वीडियो {
स्थिती: सापेक्ष;
पॅडिंग तळाशी: 56.25%;
उंची: 0;
ओव्हरफ्लो: लपलेले;
}
.वीडिओ इफ्रेमे,
.video ऑब्जेक्ट,
.वीडिओ एम्बेड {
स्थिती: परिपूर्ण;
शीर्ष: 0;
डावा: 0;
रुंदी: 100%;
उंची: 100%;
}

.Video आवरण च्या पॅडिंग-तळाशी सेट करीत आहे: 56.25%; या पद्धतीत जादू आहे. पॅडिंग वापरणे म्हणजे वापरलेली टक्केवारी पालकांच्या रूंदीवर आधारित असेल; ‘56 .25% ’एक 16: 9 आस्पेक्ट रेशियो तयार करेल. आपल्याला हवे असल्यास गणित स्वतः करा. 9/16 = 0.5625. 0.5625 * 100 = 56.25 (हा आमचा टक्के आहे).

कार्यक्षमता

घटक सहजपणे निवडत आहे

बर्‍याच जावास्क्रिप्ट लायब्ररी (jQuery, उदाहरणार्थ) च्या लोकप्रियतेसह, ECMAScript समिती आणि डब्ल्यू 3 सी मानकांनी कार्यक्षमता विकसकांच्या मूळ तुकड्यांपैकी एकाची नोंद घेतली - मूळ घटकांची निवड चांगली नाही. GetElementByID () आणि getElementByClassName () यासारख्या पद्धती विकसक समुदायाकडून येणार्‍या निवडक इंजिनांपेक्षा वेगवान परंतु लवचिक आणि मजबूत नव्हत्या; मुळ निवडकर्ता पद्धतीत त्या लवचिकतेची नक्कल करण्याचा क्वेरीसिलेक्टरऑल () हा मानकाचा शरीराचा मार्ग होता.

var आयटम = डॉक्युमेंट.क्वेरीसिलेक्टर सर्व (’# हेडर .item’);

क्वेरीसिलेक्टरऑल () अनेक आणि मिश्र निवडक पास केले जाऊ शकतात. यावर अधिक वाचा.

नवीन अ‍ॅरे तयार करत आहे

अ‍ॅरेवर आयटेरिट करणे ही एक गोष्ट लिहायला कंटाळवाणी बनली आहे. () पळवाटांसाठी लिहिणे आणि पुनर्लेखन करणे मजेदार नाही. जे.एस. आवृत्ती १.6 मध्ये नकाशा () पध्दती पुनरावृत्ती होण्याचा सोपा मार्ग आणि दुसर्‍याकडून नवीन अ‍ॅरे तयार करण्यासाठी आधार प्रदान केली.

var लोक = [’हेदर’, ’जेम्स’, ’कारी’, ’केविन’];
var स्वागत = people.map (कार्य (नाव) {
परत ‘हाय’ + नाव + ’!’;
});

हा कोड चालविणे, जर आम्ही कन्सोल केले तर. ब्लॉग (आपले स्वागत आहे) असे दिसते आपण स्वागत ही एक नवीन अ‍ॅरे आहे [‘हाय हेदर!’, ‘हाय जेम्स!’, ‘हाय करी!’, ‘हाय केविन!’ ].

कागदजत्र आणि विंडो ऑब्जेक्ट्स साफ करा

थर्ड पार्टी जावास्क्रिप्ट लायब्ररी मूळ कागदजत्र आणि विंडो ऑब्जेक्टसह गोंधळात पडण्याची शक्यता असते. इतर तृतीय पक्षाच्या लायब्ररी आणि त्यांच्यासह विकसकांसाठी ही समस्या असू शकते. एकतर पक्ष म्हणून, याची खात्री करून घ्या की आपण दोन्ही वस्तूंचे नवीन आवृत्ती तयार करुन स्वच्छ आवृत्तीसह कार्य करीत आहात. यासाठी सर्वात चांगला मार्ग म्हणजे आयफ्रेम घटक तयार करणे, त्यास डीओएममध्ये समाविष्ट करून आणि त्या वस्तूंचे नवीन उदाहरण संग्रहित करणे.

var iframe = document.createElement (’iframe’);
iframe.style.display = "काहीही नाही";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _docament = iframe.contentDocament ||
iframe.contentWindow.docament;
document.body.removeChild (iframe);

जरी वेब स्टॅकमध्ये मोठ्या प्रमाणात सुधारणा झाल्या आहेत, तरीही आमच्या प्रकल्पाच्या रूपरेषा, शैली आणि कार्यक्षमतेत आम्हाला सामोरे जाणा .्या आव्हानांचा सामना करण्यासाठी आमच्या तंत्रज्ञानाचा विस्तार करणे आणि अत्याधुनिक करणे अजूनही आवश्यक आहे. वाढीची चांगली परिसंस्था टिकवून ठेवण्यासाठी आम्ही सहकारी डेव्हलपर आणि डिझाइनर्ससह आपले स्वतःचे ज्ञान सामायिक करताना नवीन मानक आणि नवीन वैशिष्ट्य अंमलबजावणीसह प्रगती सुरू ठेवण्यासाठी मानक संस्था आणि ब्राउझर विक्रेत्यांना प्रोत्साहित केले पाहिजे. अधिक अंतर्दृष्टी, कमी हॅक्स.

डार्सी क्लार्क हा पुरस्कारप्राप्त डेव्हलपर, वर्डप्रेस थीम कंपनी थिमिफाचा सह-संस्थापक आणि डेली डील अ‍ॅग्रीगेटर डीलपेज आणि जेक्यूरी टीमचा सदस्य आहे. तो पोलर मोबाईलमध्ये वरिष्ठ यूएक्स विकासक म्हणून काम करतो.

हे आवडले? हे वाचा!

• अ‍ॅप कसा तयार करायचा
• सर्वोत्तम विनामूल्य फॉन्ट डाउनलोड करा
• प्रत्येक फोटो क्रिएटिव्हकडे नि: शुल्क फोटोशॉप ब्रश करते
• इलस्ट्रेटर ट्यूटोरियल: आज प्रयत्न करण्यासाठी आश्चर्यकारक कल्पना!
• डूडल आर्टची उत्कृष्ट उदाहरणे
• चमकदार वर्डप्रेस ट्यूटोरियल निवड
• डिझाइनरसाठी सर्वोत्तम विनामूल्य वेब फॉन्ट
• विनामूल्य पोत डाउनलोड करा: उच्च रिझोल्यूशन आणि आता वापरण्यास सज्ज