新しいOpera Mobile 12.1およびBeta Opera 12.10（Flexbox！）

昨日、2つの新しいリリースをリリースしました。Android用のOpera Mobile 12.1の安定バージョンと、デスクトップ用の新しいベータ12.10ビルドです 。 開発者向けの変更リストは非常に興味深いものであることが判明したため、開発者についてこれ以上説明しないことを避けられませんでした。

Opera Mobile 12.1

Opera Mobile 12.1のこのアップデートは主にエンジンに関連しているため、これまでのところインターフェースの変更を探しているわけではありません。



Operaは常に最速のブラウザとして知られているため、デスクトップ用のベータ12.10でSPDYプロトコルのサポートが導入された後、この技術をさらに重要な場所、つまりモバイルに持ち込むことは理にかなっています。 したがって、このリリースでは、Opera MobileはそれをサポートするサイトのSPDYサポートを受け取ります。



以前にデスクトップに表示されていた他の新製品のうち、新しいOpera MobileはWebSockets APIのサポートを導入し、登場しただけでなく、最終的にデフォルトで有効になりました！ 以前にオフにしたのはそれほど怒っていなかったため、セキュリティの問題が解決するのを待っていました。 さらに、 contenteditable and designMode 、 Drag and Drop 、 Clipboard API 、 Page Visibility API 、 CSS Animationsなどの新製品がデスクトップ版からモバイル版に移行しました。

そして最も重要なのは、Flexbox！

Opera Mobile 12.1の最終バージョンおよびデスクトップ向けのベータ版Opera 12.10は、 CSS仕様の最新バージョンであるフレキシブルボックスレイアウトをサポートします。一般的に呼ばれるように、Flexboxは100％- プレフィックスなしです。 特に、Opera Mobileはこれを行う安定版の最初のモバイルブラウザです。



以前のバージョンのFlexboxに興味があったり、試したことがない場合は、 Dev.OperaのFlexboxの概要を読むと役立ちます。



仕様の最新バージョンを実装したという事実に加えて、-webkitプレフィックスを含む古いバージョンに依存するコードとの互換性を追加しました。 詳細については、以下をご覧ください。

UAラインの変更

デスクトップ版と同様、Opera MobileのUA行には不要なゴミ、特にサブストリング「U;」とシステム言語へのポインターが含まれなくなりました。 ここで、例えば、HTC One Sで発売されたOpera Mobile 12.1のUA：

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

誰かが再び言います： 「あなたは悪であり、部分文字列を削除しました。今どのように言語を決定しますか？」そしてそれは間違っているでしょう。 UA文字列は、ロケールを定義するための信頼できる正しい場所ではありませんでした。 これを行うには、ブラウザが送信するAccept-Language



ヘッダーを使用することをおAccept-Language



ます。 IE、Firefox、Chrome、SafariがUAでも同じように変更したのは、私たちだけではありません。 より便利にするためのすべて。



そして、あなたがあなたのサイトがどの電話で動作しているかを本当に知りたいなら、ブラウザシステムに組み込まれたUAを含むDevice-Stock-UA



ヘッダーというもう一つの目新しいものがあります。 同じHTCの例では、このタイトルは次のようになります。

 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
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、組み込みブラウザUAには、モデルに関するデバイスに関する情報も含まれています。 したがって、この情報を使用して、WURFLやDeviceAtlasなどのデータベースに基づいてサイトやアプリケーションを微調整し、必要なコンテンツのみをレンダリングし、たとえば、特別な方法でグラフィックを最適化できます。 しかし、率直に言って、このようなUAのスニッフィングや、既存のすべての携帯電話の膨大な範囲を掘り下げることを実際に促すことはありません。 それが見た目ほど信頼性が低いという理由だけでしたら。 しかし、あなたが何をしているのか確信があるなら、 Device-Stock-UA



ヘッダーが役に立ちます。



開発者として気付かない可能性がありますが、Opera Mobileと多くの西側サイトとの互換性を改善する別の変更は、他のブラウザの組み込みの変装です。 もちろん、デフォルトでは、Opera Mobileは正直なところノルウェーの深刻なブラウザとして存在しています。 しかし、サイト全体を完全に破壊するコードのみを提供できるサイトがあります。 Amazonを例に取ると、モバイル版はOpera Mobileの言及を満たしてからバスケットから製品を取り出すことができなくなるまで有効です。 しかし、モバイルChromeに変装すると、すべてが正常になります。 ユーザーが問題を起こさないように、このようなトリックを行う必要があります。

CSSの互換性

Opera Mobile 12.1は、接頭辞なしのたくさんのCSSプロパティをサポートしています： transition



、 transform



、 linear-gradient



およびradial-gradient



、 @keyframe



とanimation



そしてもちろんflexbox



プロパティflexbox



。 CSSアニメーションとFlexboxについては、プロパティ自体のみをサポートしていますが、 transition



、 transform



、 linear-gradient



、 radial-gradient



については、しばらくの間、互換性を高めるために-o-prefixesを含むバージョンもサポートします。



このリリースでは、Opera Mobileは-webkit-propertiesの新しいセットもサポートしています。これは、WebKitエンジンに基づいており、プレフィックスのないプロパティに言及しないブラウザ用の愚かなWeb開発者が作成したコードとの互換性を向上させるためのものです。



もちろん、変更はCSSだけでなく、JavaScriptの対応するAPIにも影響するため、このoTransitionEnd



は仕様どおりに小文字のtransitionend



に変わります。 覚えやすくするために、次の表を参照してください。

物件	-o-	-webkit-	接頭辞なし
線形勾配	はい古い構文	はい古い構文	はい
繰り返し線形勾配	いや	いや	はい
放射状勾配	いや	いや	はい
放射状グラデーションの繰り返し	いや	いや	はい
アニメーション	いや	いや	はい
変換する	はい （望ましくない）	はい	はい
移行	はい （望ましくない）	はい	はい
境界半径	存在しない	はい	はい
背景サイズ	いや	はい	はい
箱影	存在しない	はい	はい
フレックスボックスのプロパティ	存在しない	はい古い構文	はい

線形グラデーションの場合、「古い構文」というマークは、グラデーションの方向がbottom left



の形式のキーワードを使用する必要があることを意味しますが、同じ結果の仕様によると、 to top right



に書き込む必要があります-このオプションは、プレフィックスなしのグラデーションでサポートされています。



Flexboxの場合、「古い構文」とは、廃止予定の古いbox-flex



プロパティを指し、単にflex



を記述する必要があります。 「望ましくない」とは、Operaの将来のバージョンでは削除されるため、使用しない方が良いことを意味します。

@supports

最後に、ベータ版Opera 12.10は真の条件付きCSSをサポートするようになりました。これにより、非常に互換性のあるスタイルを作成できます。 このような構造が、サポートするブラウザーまたはサポートしないブラウザーでの作業をどのように簡素化するかを想像してください。

 @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%; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに、条件付き構成では、メディア式からおなじみの演算子のフルパワーを使用できます。 このすべての機能はCSS条件付きルールと呼ばれ、さらにwindow.supportsCSS



メソッドを使用してスクリプトから同じ条件で作業するためのJavaScript APIがあります。