新しい安定版リリースの作業は止まりません。今週は、Opera 12.50のアセンブリに新しいカラフルな機能と改善の完全な束を提示できることを嬉しく思います。 いつものように、私たちはそれらから開発者にとって最も興味深いものを選択し、共有を急いでいます。
拡張機能のコンテキストメニューAPI
拡張機能の新しいAPIですか? もちろん! 今回は、コンテキストメニュー(右クリックで呼び出される)にアイテムを追加するのに便利な方法です。 これは、ページまたはそのコンテンツとの対話に役立ちます。
APIは、たとえば、リンクのみまたは特定のドメイン内のみなど、コンテキストメニューの操作を正確に制御します。 また、サブメニューを追加して、メニュー項目をクリックしたときの動作を制御し、リンクアドレスまたはユーザーが現在選択しているテキストにアクセスできます。
一般に、このAPIは、パネル上のボタンとは異なる方法で拡張機能を常に有効にすることを望む開発者にとって理想的です。 そのため、最新のコンテキストメニューAPIドキュメントの詳細をお読みください。
フルスクリーンAPI
フルスクリーンAPIは、JavaScriptメソッドの簡単なセット(
element.requestFullscreen()
や
document.exitFullscreen()
)と、次のような新しい擬似クラスです
:fullscreen
キャンバス、全画面モードに終了します。
最も簡単なデモとして、HTMLコントロールを備えたシンプルなビデオプレーヤーを作成し、新しいフルスクリーン機能を追加しました。HTML5ビデオ-フルスクリーンAPIのサポートを含むJavaScriptを使用したビデオのクールなコントロール 。 このデモでは、ビデオ自体が全画面モードになるだけでなく、自分で作成したHTMLコントロールも使用することに注意してください。
しかし、いつものように、新しい永遠に生きるHTML5標準では、何かを導入してから仕様が変更されていないことを確信することはできません。 そのため、このアセンブリでは、2012年2月7日付のフルスクリーンAPIのバージョンが導入されましたが、標準が部分的に変更され、最新バージョンの日付は2012年7月からです。
HTMLからの<ol reverse>
このアセンブリには 、 常に存在するHTML5
<ol reversed>
標準の非常に優れた機能が追加されました。 仕様では 、「...属性は反転されたブール値です。 その存在は、リストが減少していることを示します(...、3、2、1)。 存在しない場合、リストは大きくなります(1、2、3、...) "
ところで、
reversed
属性と
start
属性(HTML 4では非常に不当に禁止されていましたが、HTML5では完全にその権利に復元されていました)と組み合わせると、ゼロ以下のアイテムが続くリストを取得できます。 10進数以外のリストマーカー(たとえば、ローマ数字)を使用する場合、リストの番号は1に達した後に10進数になります。 仕様には次のように書かれています:
ゼロ以下の数値では、示されているタイプに関係なく、常に10進法を使用する必要があります。
reversed
属性をサポートしていないブラウザには、非常に興味深く、意味的に正しいLuis Lazaris polyphileがあります。
SPDYサポート
ああ、どれだけ速く成長するか... SPDYをサポートするOpera Labsのアセンブリをリリースしたのはわずか1か月前です。この機能はすでにメインブランチに組み込まれ、最終リリースに登場する準備ができているからです。
嬉しいボーナスとして、このアセンブリにはプリインストールされた拡張SPDYインジケーターが装備されています。これは、サイトがこの新しいプロトコルを使用する場合にオンになります。 つまり、 Opera DragonflyネットワーククエリパネルでSPDYサインをキャッチする必要がなくなります。
以前にOpera Nextに拡張機能をインストールした場合、このアセンブリに組み込まれた拡張機能が自動的に表示されない場合があります。 新しいOpera Nextビルドをクリーンなプロファイルで再インストールするか、拡張ディレクトリからSPDYインジケーターをダウンロードするだけです。
@Mediaネスト構造
CSS 3条件付きルール仕様を実装する最初のステップとして、このアセンブリでは、
@media
ネスト構造のサポートを提供します。 機能の長い繰り返しリストをコンパイルする代わりに:
@media only screen and (orientation: portrait) and (min-width: 480px) { … } @media only screen and (orientation: portrait) and (min-width: 600px) { … } @media only screen and (orientation: portrait) and (min-width: 768px) { … }
...これで、
@media
を相互に埋め込むだけで、よりクリーンで便利で理解しやすいコードを作成できます。
@media only screen { @media (orientation: portrait) { @media (min-width:480px) { … } @media (min-width: 600px) { … } @media (min-width: 768px) { … } } }
ICCプロファイルイメージのサポート
画像データ自体に加えて、多くの形式(JPG、PNG、TIFFなど)を使用して、カラープロファイルを埋め込むことができます。 これらの
この美しくアクセスしやすい例: Digital Image Color Spacesで
Bruceが両方の写真で青である(一方の写真で暖かくて血色が悪い)場合、ブラウザは
両方の写真は、元の画像データに関して完全に同一です。 これらは、説明した原理を説明するために過度に歪んだカラーシフトを使用して作成されました。 ただし、最初の写真には必要な補正