नया ओपेरा मोबाइल 12.1 और बीटा ओपेरा 12.10 (फ्लेक्सबॉक्स!)

कल हमने दो नए रिलीज़ जारी किए: एंड्रॉइड के लिए ओपेरा मोबाइल 12.1 का स्थिर संस्करण और डेस्कटॉप के लिए नया बीटा 12.10 बिल्ड। डेवलपर्स के लिए परिवर्तनों की सूची इतनी दिलचस्प निकली कि हम उनके बारे में अधिक बताने के लिए विरोध नहीं कर सके।

ओपेरा मोबाइल 12.1

ओपेरा मोबाइल 12.1 का यह अपडेट मुख्य रूप से इंजन की चिंता करता है; अभी तक इंटरफ़ेस में बदलाव नहीं दिखता है।

ओपेरा को हमेशा सबसे तेज़ ब्राउज़र के रूप में जाना जाता है, इसलिए डेस्कटॉप के लिए बीटा 12.10 में SPDY प्रोटोकॉल के समर्थन के बाद, इस तकनीक को उस स्थान पर लाना तर्कसंगत होगा जहां यह और भी महत्वपूर्ण है - मोबाइल के लिए। इसलिए, इस रिलीज़ में, ओपेरा मोबाइल उन साइटों के लिए SPDY समर्थन प्राप्त करता है जो इसका समर्थन करते हैं ।

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

और सबसे महत्वपूर्ण: फ्लेक्सबॉक्स!

डेस्कटॉप के लिए ओपेरा मोबाइल 12.1 और बीटा ओपेरा 12.10 का अंतिम संस्करण सीएसएस विनिर्देश फ्लेक्सिबल बॉक्स लेआउट के नवीनतम संस्करण का समर्थन करता है या, जैसा कि इसे लोकप्रिय कहा जाता है, फ्लेक्सबॉक्स 100% - बिना उपसर्ग के । विशेष रूप से, ओपेरा मोबाइल स्थिर संस्करण में पहला मोबाइल ब्राउज़र है जो ऐसा करता है।

यदि आप पहले फ्लेक्सबॉक्स के पुराने संस्करण में रुचि रखते हैं, या यहां तक ​​कि कभी कोशिश नहीं की है, तो यह आपके लिए उपयोगी होगा। आप Dev.Opera पर फ्लेक्सबॉक्स का परिचय पढ़ सकते हैं।

विनिर्देश के नवीनतम संस्करण को लागू करने के अलावा, हमने कोड के साथ संगतता जोड़ी जो कि पुराने संस्करण पर निर्भर थी -webkit उपसर्गों के साथ। इसके बारे में नीचे पढ़ें।

यूए लाइन में बदलाव

डेस्कटॉप संस्करण की तरह, ओपेरा मोबाइल में अब यूए स्ट्रिंग में अनावश्यक कचरा नहीं होता है, विशेष रूप से, सिस्टम भाषा के लिए "यू" और एक सूचक। यहाँ, उदाहरण के लिए, ओपेरा मोबाइल 12.1 के लिए यूए, एचटीसी वन एस पर लॉन्च किया गया:

Opera/9.80 (Android 4.0.4; Linux; Opera Mobi/ADR-1210081231) Presto/2.11.355 Version/12.10 

कोई फिर से कहेगा: "आप बुराई कर रहे हैं, प्रतिस्थापन को हटा दिया है, अब मैं भाषा कैसे निर्धारित करूंगा?" और यह गलत होगा। UA स्ट्रिंग लोकेल को परिभाषित करने के लिए एक विश्वसनीय और सही जगह नहीं है। ऐसा करने के लिए, ब्राउज़र द्वारा भेजे जाने वाले Accept-Language हेडर का उपयोग करना बेहतर होता है। और यह केवल हम ही नहीं हैं जो इतने स्मार्ट हैं, IE, फ़ायरफ़ॉक्स, क्रोम और सफारी ने UA में समान परिवर्तन किए हैं। आपके लिए इसे और अधिक सुविधाजनक बनाने के लिए सब कुछ।

और यदि आप वास्तव में यह निर्धारित करना चाहते हैं कि आपकी साइट किस फोन के साथ काम कर रही है, तो हमारे पास एक और नवीनता है: Device-Stock-UA हेडर, जिसमें यूए निर्मित ब्राउज़र सिस्टम शामिल है। उसी एचटीसी के उदाहरण पर, यह शीर्षक इस तरह दिखेगा:

 Mozilla/5.0 (Linux; U; Android 4.0.4; en-no; HTC One S Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 

जैसा कि आप देख सकते हैं, एम्बेडेड ब्राउज़र यूए में मॉडल के नीचे डिवाइस के बारे में भी जानकारी है। इसलिए, आप केवल आवश्यक सामग्री और उदाहरण के लिए, विशेष रूप से ग्राफिक्स का अनुकूलन करने के लिए, इस जानकारी का उपयोग WURFL या DeviceAtlas जैसे डेटाबेस पर आधारित अपनी साइटों और अनुप्रयोगों को ठीक करने के लिए कर सकते हैं। लेकिन, स्पष्ट रूप से, हम वास्तव में यूए के ऐसे सूँघने या सभी मौजूदा फोन की विशाल रेंज में खुदाई करने का आग्रह नहीं करते हैं। यदि केवल इसलिए कि यह उतना विश्वसनीय नहीं है जितना लगता है। लेकिन अगर आप यह सुनिश्चित कर रहे हैं कि आप क्या कर रहे हैं, तो Device-Stock-UA हेडर काम में आएगा।

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

सीएसएस संगतता

ओपेरा मोबाइल 12.1 अब उपसर्गों के बिना CSS संपत्तियों के एक समूह का समर्थन करता है: transition , transform , linear-gradient और radial-gradient , @keyframe और animation और निश्चित रूप से flexbox संपत्ति flexbox । सीएसएस एनिमेशन और फ्लेक्सबॉक्स के लिए हम केवल गुणों का समर्थन करते हैं, लेकिन transition , transform , linear-gradient और radial-gradient लिए कुछ समय के लिए हम बेहतर संगतता के लिए -o-उपसर्गों के साथ संस्करणों का भी समर्थन करेंगे।

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

बेशक, परिवर्तन न केवल CSS को प्रभावित करेगा, बल्कि जावास्क्रिप्ट में संबंधित एपीआई को भी प्रभावित करेगा, इसलिए यह oTransitionEnd विनिर्देशन के अनुसार एक oTransitionEnd , लोअरकेस में बदल जाएगा। आपके लिए याद रखना आसान बनाने के लिए, आप मदद के लिए इस तालिका की ओर रुख कर सकते हैं:

संपत्ति	-O-	-webkit-	उपसर्ग के बिना
रैखिक ढाल	हाँ पुराना वाक्यविन्यास	हाँ पुराना वाक्यविन्यास	हां
दोहरा रेखीय-ढाल	नहीं	नहीं	हां
रेडियल ढाल	नहीं	नहीं	हां
दोहराई जाने-रेडियल-ढाल	नहीं	नहीं	हां
एनीमेशन	नहीं	नहीं	हां
परिवर्तन	हाँ (अवांछनीय)	हां	हां
संक्रमण	हाँ (अवांछनीय)	हां	हां
बॉर्डर-त्रिज्या	मौजूद नहीं है	हां	हां
पृष्ठभूमि आकार	नहीं	हां	हां
बॉक्स-छाया	मौजूद नहीं है	हां	हां
फ्लेक्सबॉक्स गुण	मौजूद नहीं है	हाँ पुराना वाक्यविन्यास	हां

लीनियर ग्रेडिएंट्स के लिए, "ओल्ड सिंटैक्स" को चिह्नित करने का अर्थ है कि ग्रेडिएंट की दिशा में bottom left दिए गए फॉर्म के कीवर्ड का उपयोग करना चाहिए, जबकि उसी परिणाम के लिए विनिर्देश के अनुसार आपको to top right आवश्यकता है - यह विकल्प उपसर्ग के बिना ग्रेडिएंट के लिए समर्थित है।

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

@supports

और अंत में: बीटा ओपेरा 12.10 अब सही सशर्त सीएसएस का समर्थन करता है, जो आपको शैलियों को सुपर संगत लिखने की अनुमति देता है। कल्पना करें कि ऐसे निर्माण कैसे ब्राउज़र के साथ काम को सरल बनाएंगे जो या तो समर्थन करते हैं या समर्थन नहीं करते हैं:

 @supports ( display: flexbox ) { body, #navigation, #content { display: flexbox; } #navigation { background: blue; color: white; } #article { background: white; color: black; } } @supports not ( display: flexbox ) { body { width: 100%; height: 100%; background: white; color: black; } #navigation { width: 25%; } #article { width: 75%; } } 

इसके अलावा, सशर्त निर्माणों में, आप मीडिया अभिव्यक्तियों से परिचित ऑपरेटरों की पूरी शक्ति का उपयोग कर सकते हैं। इस सभी सुंदरता को सीएसएस सशर्त नियम कहा जाता है और इसके अतिरिक्त window.supportsCSS विधि का उपयोग करके स्क्रिप्ट से समान शर्तों के साथ काम करने के लिए जावास्क्रिप्ट एपीआई है।