डेवलपर्स के लिए ओपेरा 9.5

संस्करण 9.5 के साथ, ओपेरा ने नए कोर -2 इंजन को पूरी तरह से बदल दिया है। अब ओपेरा Kestrel डेवलपर्स को साइटों पर उपयोग के लिए कई नई सुविधाएँ प्रदान कर सकता है। पहले से ही अब आप नए CSS3, SVG फीचर्स और नए जावास्क्रिप्ट इंजन की सराहना कर सकते हैं।

CSS3 चयनकर्ताओं को नमस्ते कहें

Kestrel CSS3 चयनकर्ताओं की एक पूरी सूची रखता है। उनका उपयोग करना, उदाहरण के लिए, आप अतिरिक्त टैग या वर्ग नाम जोड़े बिना तत्वों के समूह बना सकते हैं।

स्ट्रिप टेबल

तालिकाओं में वैकल्पिक रंग पंक्तिबद्ध करना हाल के वर्षों में काफी लोकप्रिय विचार है। यह आमतौर पर जावास्क्रिप्ट की आवश्यकता होती है, या एक वैकल्पिक रंग के साथ स्टाइल की गई प्रत्येक पंक्ति के लिए एक वर्ग का निर्माण। अब इसे nth-child (या nth-of-type) के साथ किया जा सकता है



उदाहरण के लिए

#playlist tr: nthchild (विषम) td {

पृष्ठभूमि-रंग: # edf3fe;

}

शब्द विषम, विषमता पर ध्यान दें। इसके विपरीत, यहां तक ​​कि उपयोग करें। इसके अलावा, कोष्ठक में आप सूत्र संख्या, या (!) का संकेत कर सकते हैं, उदाहरण के लिए, 2n + 1।

और टोपी हवा में फेंक दी

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

div.article> p: फ़र्स्ट-टाइप :: फ़र्माटून {}

इसमें पैराग्राफ का पहला अक्षर, div.article का प्रत्यक्ष वंश शामिल है।

गतिशील मीडिया प्रश्न

उपयोगकर्ता के सिस्टम के बारे में जानकारी प्राप्त करने के लिए मीडिया क्वेरी का उपयोग किया जाता है। उसे जानने के बाद, आप एक नया डिज़ाइन बना सकते हैं। इस विचार का उपयोग अक्सर मोबाइल डिवाइस के माध्यम से साइट तक पहुंचने के दौरान किया जाता है। Kestrel में, मीडिया क्वेरीज़ गतिशील हैं। इसका मतलब यह है कि उन्हें हर बार एक घटना पर सेट किया जाता है, उदाहरण के लिए, जब खिड़कियों का आकार बदल जाता है।

@मीडिया स्क्रीन और (अधिकतम-चौड़ाई: 730px) {



h1 {फ़ॉन्ट-आकार: 2em; }



.figure {

फ्लोट: कोई नहीं;

मार्जिन: 0 10%;

}



.figure पी {प्रदर्शन: कोई नहीं; }



कॉन्फ़िगर करें img {

अधिकतम-चौड़ाई: 95%;

ऊंचाई: ऑटो;

पैडिंग-बॉटम: 5 पीएक्स;

}

}

गोल कोनों

जैसा कि आप जानते हैं, सीएसएस सीमा-त्रिज्या संपत्ति का उपयोग करते हुए गोलाई का समर्थन करता है। हालांकि यह काम नहीं करता है, ओपेरा एसवीजी का उपयोग करके आउटपुट प्रदान करता है। एक उदाहरण:



सीएसएस:

पृष्ठभूमि: चांदी url ("../ चित्र / राउंडडॉन्सर 2। svg");

-वेबकिट-बॉर्डर-त्रिज्या: 1em; -मोज़-बॉर्डर-रेडियस: 1em; सीमा-त्रिज्या: 1em;

एसवीजी:

<rect fill = "white" x = "0" y = "0" width = "100%" height = "100%" />

<rect fill = "silver" x = "0" y = "0" width = "100%" height = "100%" rx = "1em" />

एक ब्राउज़र जो एसवीजी का समर्थन नहीं करता है, वह सीमा-त्रिज्या का उपयोग करके राउंड का निर्माण शुरू कर देगा, यदि, निश्चित रूप से, यह इसका समर्थन करता है। यदि नहीं, तो सब कुछ वर्गाकार रहेगा।

ढाल

ओपेरा में, अब उसी एसवीजी का उपयोग करके ढाल बनाने का एक तरीका है। यह ज़ूम स्थिति के लिए बहुत अच्छा है। वैक्टर बचाओ :)।



उदाहरण इस तरह से असमर्थित ब्राउज़र के लिए एक पृष्ठभूमि के रूप में आरजीबी रंग का उपयोग करता है, और ओपेरा के लिए एसवीजी:

सीएसएस

#playlist tr: firstof-type {बैकग्राउंड: आरजीबी (187,187,187) url ("../ चित्र / gradient.svg"); }

एसवीजी:

<Defs>

<linearGradient id = "grad" X1 = "0%" y1 = "0%" x2 = "0%" y2 = "100%">

<स्टॉप ऑफ़सेट = "30%" शैली = "स्टॉप-कलर: आरजीबी (219,219,219);" />

<स्टॉप ऑफ़सेट = "90%" शैली = "स्टॉप-कलर: आरजीबी (187,187,187);">>

</ LinearGradient>

</ Defs>



<rect fill = "url (#grad)" x = "0" y = "0" चौड़ाई = "100%" ऊँचाई = "100%" />

नई जावास्क्रिप्ट

जावास्क्रिप्ट इंजन एक बार फिर तेज, कम महत्वपूर्ण और अधिक कार्यात्मक हो गया है। उदाहरण के लिए, टाइप किए गए पाठ के साथ कुछ समस्याओं का समाधान किया गया है। DOM3 से Node.compareDocumentPosition का समर्थन और गेको डोम से Range.comparePoint दिखाई दिया। वे दोनों Google पेज द्वारा उपयोग किए जाते हैं। जोड़े गए और जावास्क्रिप्ट 1.5 को व्यवस्थित करता है, जो याहू के साथ काम में सुधार करता है! मेल और माइक्रोसॉफ्ट लाइव।



अब आप HTML5 से लोकप्रिय getElementsByClassName फ़ंक्शन का भी उपयोग कर सकते हैं, जो आपकी खुद की लाइब्रेरी लिखने की आवश्यकता को समाप्त करता है।

निष्कर्ष

काम जोरों पर है! ;)

मूल