サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
都知事選
dev.opera.com
Opera 50 (based on Chromium 63) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog post. Here’s what it means for web developers. Dynamic module imports New JavaScript module import syntax allows developers to dynamically load code into modules and scripts at runtime. This makes it possible to load parts of an application lazily, which can be used to improve app
Opera 46 (based on Chromium 59) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog post. Here’s what it means for web developers. Animated PNG Opera now supports animated PNG, or APNG for short. APNG is a file format that works similarly to GIF. The difference is that APNG is smaller and supports both 24-bit images and 8-bit transparency. It has become quite pop
Opera 42 (based on Chromium 55) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog. Here’s what it means for web developers. Built-in currency converter Opera is now the first of the major browsers to add a built-in currency converter. The user select the price they want to convert on the page and Opera will automatically show it in their local currency. Opera 4
Progressive Web Apps are getting ready for desktop If you follow the Progressive Web App scene you’ve probably already seen multiple examples of the Air Horner app in mobile browsers such as Opera Mobile and Chrome for Android. However it is not easy to get your favorite PWA (such as Air Horner) to be a primary citizen on your favorite desktop operating system. Browser makers are working on gettin
Opera 38 (based on Chromium 51) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog. Here’s what it means for web developers. ES6 Symbol.hasInstanceConstructors can now implement their own Symbol.hasInstance method, which is used by instanceof to determine whether a constructor object recognizes an object as its instance. ES6 subclassing using Symbol.speciesThe S
Opera 37 (based on Chromium 50) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog. Here’s what it means for web developers. ES6: RegExp Unicode flagES6 specifies the u flag which enables more Unicode-friendly features and behavior in regular expressions. For example, it allows using astral symbols in character class ranges: // Match any symbol from U+1F4A9 PILE
On April 1st, I spoke at the very first Fronteers Spring Conference. The theme of the whole conference was performance. For my presentation, I decided to try something a little bit different: instead of talking about techniques that lead to better client-side performance, I focused on security-sensitive situations in which performance can actually be a bug rather than a feature. View the slides he
IntroductionThere is an explosion of electronic devices nowadays, and with many of them, it’s possible to interact with them via Bluetooth Low Energy, or BLE. However, installing a separate app for interacting with every single bluetooth gadget is impractical. What if we could communicate with them through a web browser? The Web Bluetooth API aims to do exactly that with a promise-based API, which
includes is also available for typed arrays such as Int16Array or Float64Array. ES6 rest parametersThe ES6 rest parameters syntax allows functions to have a variable number of arguments without using the arguments object. Unlike arguments, the rest argument is a proper array, meaning array methods can be called on it directly: // ES5: function sort() { var sortedArgs = [].sort.call(arguments); ret
The two-day Chrome Dev Summit at Google’s headquarters in Mountain View is a wrap! Vadim and I had a great time attending the summit, and this year, I even had the pleasure to share the stage with Alex Russell (thank you!) to speak about Progressive Web Apps, and specifically web manifests, which we’ve recently shipped support for in Opera for Android. (Since this was first published, Firefox anno
Opera 33 (based on Chromium 46) for Mac, Windows, and Linux and Android is out! To find out what’s new for users, see our Desktop and Mobile blogs. Here’s what it means for web developers. <link rel=preconnect>The Resource Hints standard defines <link rel="preconnect" href="…"> as a hint that the browser should predictively open a connection to the supplied server for resources that will be needed
Opera 32 (based on Chromium 45) for Mac, Windows, and Linux and Android is out! To find out what’s new for users, see our Desktop and Mobile blogs. Here’s what it means for web developers. ES6 arrow functionsArrow functions enable a more succinct way of defining functions. const numbers = [1, 2, 3]; // Let’s use the so-called fat arrow syntax: const squares = numbers.map(x => x * x); // This is eq
Notes: : these modes (powered by our Opera Turbo servers) also have a Video Boost compression option.† : when in High mode and connected to Wi-Fi, data savings are disabled, unless the user has explicitly opted in by activating the Wi-Fi data savings option in Settings.Opera Turbo mode compresses data up to 80%. Opera Mini mode compresses data up to 90%.If you’re doing IP-based geo-detection, you
The Web Audio APIThe Web Audio API is a new way of working with audio on the web. It provides a way to playback pre-recorded audio, synthesise arbitrary new sounds and control the precise moment of sound generation accurately and reliably, irrespective of what else is happening in your application. In this article, we’re going to learn more about the API by building a simple drum machine. We’ll le
The CSSOM View specification has a handful of widely-implemented properties on the Element interface related to scrolling: scrollTop, scrollLeft, scrollWidth, scrollHeight. These give the current scroll position of the element, and the size of the scrolling area. scrollTop and scrollLeft can also be set to cause a scroll. When these are used on the root element, they instead reflect the scroll pos
The backstoryWhen the Web was created, it was a really big idea: Tim Berners-Lee proposed (it wasn’t a standard yet) a worldwide system to retrieve documents coded in such a way that one document could link to another document. Although the idea was big, it was really simple. It was declarative and forgiving and had a clear, familiar mental model. Nearly everyone was familiar with a book, nearly e
WAI-ARIA, the accessibility extension technology for HTML, has a reputation for being complex — if not entirely impenetrable — in its specification. How WAI-ARIA’s suite of attributes relate to one another, the underlying HTML and the circumstances under which they are set or mutated is not a trivial affair. And that’s before you try to establish the differing interaction conventions of desktop ve
Opera 28 (based on Chromium 41) for Mac, Windows, Linux and Android is out! To find out what’s new for users, see our Desktop and Mobile blogs. Here’s what it means for web developers. Element.prototype.closest(selector)The DOM standard defines the closest method for elements. It accepts a single selector argument, and returns the closest ancestor of the current element (or the current element its
Typography has a long and rich history, but much has been lost in the transition to the web. While browser support for typography has advanced a lot in the last couple years, we still have a long way to go. Features print designers take for granted are either nonexistent on the web or have insufficient browser support in order to be useful. Challenges unique to web browsers such as responsive desi
Opera 27 (based on Chromium 40) for Mac, Windows, and Linux is out! To find out what’s new for consumers, see our Desktop Team blog. Here’s what it means for web developers. Service WorkersService Workers provide event-driven scripts that run independent of web pages. They are similar to Shared Workers except that their lifetime is different and they have access to domain-wide events such as netwo
Opera 26 (based on Chromium 39) for Mac, Windows — and, now, Linux too — is out! To find out what’s new for consumers, see our Desktop Team blog. Here’s what it means for web developers. rebeccapurpleThanks to a Chromium patch by Opera, the new CSS color rebeccapurple (equivalent to #639) is now supported. A demo is available. The Beacon APIThe Beacon API makes it possible to asynchronously transf
Opera Mini running on a ChromebookOpera Mini installing on Chrome OSThis summer Google previewed a way to run Android applications on Chromebooks using ARC — App Runtime for Chrome. At this time there are only a handful of applications that work on Chrome OS through official channels. However, there are tools and workarounds that allow users to run their favorite Android applications on Chromebook
Opera 25 (based on Chromium 38) for Mac and Windows is out! To find out what’s new for consumers, see our Desktop Team blog. Here’s what it means for web developers. The <picture> HTML elementYes, <picture> is now available in Opera (and Chrome) by default! This new HTML element can be wrapped around any good ol’ <img> element to enable art direction, different images types, high-DPI images, chang
はじまり物語はその昔、WURFL(Wireless Universal Resource File、モバイル端末を検出するためのデータベース) が幅を利かせており、またモバイル専用 Web サイトが流行りだったときから始まります。この時代、開発者は「本物」の Web サイトのシンプルで低レベルななバージョンを作り、UA 判別をしてモバイルユーザーに提供していました。 みなさんも知っているように、ビューポートの大きさを始め異なる特徴を持つデバイスの急激な増加によって、より良いモバイルユーザー(もしくは非モバイルユーザー)の判別が急務とされました。レスポンシブ Web デザイン(「Responsive Web Design」「レスポンシブデザイン」とも)は、新しいブラウザに搭載された機能と CSS のテクニックを組み合わせデバイスに応じた表示を提供し、どのような環境でも理想的な見た目にするとい
はじめについに、本物のレスポンシブイメージが Web で使えるようになりました。HTML だけで完結し、面倒なハックはありません。新しい <picture> 要素と、<img> に追加された新しい属性が Chrome 38 から使えます(なので Opera でも使えます)。他のブラウザは、Firefox のナイトリービルドで実装されており、WebKit では実装中です。 <picture> はいくつかのユースケースに対して作られた要素のため、コードがごちゃごちゃすることがあります。提供したいレスポンシブイメージの書き方がどれか調べられるように、この記事ではそれぞれのケースに対応するサンプルコードを紹介します。 4つの質問レスポンシブイメージを使う前には、次の問いに答えるようにしましょう。 サイトのデザインが変化するのに応じて、画像のサイズも変化させたいか高 DPI のディスプレイに最適な画
CSS: It was twenty years ago today — an interview with Håkon Wium Lie Opera’s CTO Håkon Wium LieTwenty years ago today, Opera’s CTO Håkon Wium Lie published Cascading HTML style sheets – a proposal. If Paul McCartney were a web developer, and writing ‘Sergeant Pepper’s Lonely Hearts Club Band’ today, he would almost certainly write: It was twenty years ago today That Håkon wrote a doc to say That
@font-face is an established staple in the diet of almost half of the web. According to the HTTP Archive, 47% of web sites make a request for at least one custom web font. What does this mean for a casual browser of the web? In this article, I make the argument that current implementations of @font-face are actually harmful to the performance and usability of the web. These problems are exacerbate
はじめにCSS でよくある問題に、<img> や <video> などの置換要素のアスペクト比を制御するというものがあります。たとえば、アスペクト比の違うものが混ざってもそれが変形されないように、ページに画像を同じ大きさで並べたいという場合を考えてみましょう。画像を切り抜いたり無理やり変形させるよりも、アスペクト比を保ちながらリサイズし、レターボックス表示にするほうがずっとエレガントです。あるいは逆に、レターボックスを持つ HTML5 の <video> などのコンテンツを特定の幅と高さにあわせることや、全てのビデオをあるアスペクト比に整形したいかもしれません。異なるアスペクト比を持つコンテンツを自動的に意図した通りに見せる方法はないものでしょうか。 現在、こういった事をするのはとても難しく、JavaScript から画像サイズをオンザフライで操作するか、とても多くの CSS を書く必要が
Opera 24 (based on Chromium 37) for Mac and Windows is out! For users, it includes tab preview, better hi-res support and more obvious Private Windows. Here’s what the new release means for web developers. Improved font renderingOn Windows, Opera now uses DirectWrite instead of GDI whenever possible. This results in much better rendering of OpenType (*.otf) fonts. (Note that font rendering on OS X
次のページ
このページを最初にブックマークしてみませんか?
『Opera Developer Community』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く