Articles

11 November 2016 by Bruce Lawson, Shwetank Dixit in Articles

Want to get started with progressive web apps, but not sure where to start? This page will list the best resources we know of to help you understand Progressive Web Apps (PWAs), get started and learn things in depth.

26 July 2016 by Vlad Filippov in Articles

Progressive Web Apps are getting ready for desktop.

16 June 2016 by Andreas Bovens, Bruce Lawson in Articles

I came across a number of conversations about progressive web apps between web developers in Nigeria and Kenya. Intrigued, I got in touch with them to hear their thoughts, resulting in this double interview.

2 March 2016 by Shwetank Dixit in Articles

There is an explosion of electronic devices nowadays. What if we could communicate with them through a web browser? The Web Bluetooth API allows you to interact with many Bluetooth Low Energy (BLE) enabled devices.

15 February 2016 by Shwetank Dixit in Articles

From Opera 36, we are introducing a brand new look for the start page. Let’s take a look at what this means for theme developers and what you can do to tweak your theme even further.

19 January 2016 by Tal Ater in Articles

ServiceWorkers allow us to build sites that work even when the user is offline. See how UpUp makes it as easy as running one command.

8 October 2015 by Bruce Lawson in Articles

Norway is the nation that gave the world the paperclip and the cheese slicer, so it’s easy to see that R&D is a national tradition here. Today, Opera R&D released a labs build of Opera for Android with URL beacon detection.

23 September 2015 by Andreas Bovens, Bruce Lawson in Articles

Opera 32 for Android begins to bridge the gap between the native and web apps’ user experience, letting users add apps to the home screen.

4 September 2015 by Bruce Lawson in Articles

The Houdini Task Force met in Paris to discuss how to make CSS extensible. Here’s my meeting report.

3 August 2015 by Bruce Lawson in Articles

Developer PPK called for a moratorium on new browser features. We explain why we disagree.

24 July 2015 by Shwetank Dixit in Articles

You can now make animated themes in Opera. This guide tells you how.

3 June 2015 by Bruce Lawson in Articles

How to make websites that work well on Opera Mini—and everywhere else!

2 June 2015 by Andreas Bovens in Articles

The Opera browser is available on a wide range of platforms, in a number of flavors with different modes, engines and levels of standards support. As things can get somewhat confusing, we decided to create a simple product overview that details some of these technical differences.

26 May 2015 by Chris Lowis in Articles

Learn the basics of the Web Audio API by creating some classic electronic drum sounds.

20 May 2015 by Simon Pieters in Articles

Which element scrolls the viewport when using scrollTop? This article explains what “the scrollTop bug” is and what we need to do to get it fixed. Your help is needed!

18 May 2015 by Shwetank Dixit in Articles

Worldreader is a non-profit organization providing free digital book people in developing countries. I got to ask their team a few questions regarding their fascinating work in developing countries

11 May 2015 by Brian Kardell in Articles

To evolve the web and compete with native, we need a way to innovate and iterate faster — the Extensible Web principles, which have brought us Service Worker and Web Components. Project Houdini looks at how we can bring extensibility to CSS, too.

22 April 2015 by Sayanee Basu in Articles

The Internet of Things is gaining momentum in the recent years as more embedded devices are being connected to the Internet. What does this mean for the web developers? This article explores 2 common wireless protocol, Wi-Fi and BLE, and gives practical examples to start playing with them with JavaScript and some sensors.

9 April 2015 by Heydon Pickering in Articles

aria-label is a useful tool to ensure a good user experience for assistive technology users, elevating your design from merely technically compliant to well signposted and usable.

23 March 2015 by Patrick H. Lauke in Articles

You can check input device capabilities with Media Queries Level 4… but first, you should understand their current limitations

3 March 2015 by Bram Stein in Articles

Typography has a long and rich history, but much has been lost in the transition to the web. Let’s take a look at some of the features we need for an optimal and beautiful reading experience.

24 February 2015 by Tomomi Imura in Articles

In this article, Tomomi explores how to build a simple notification web app using PubNub’s Data Stream Network and the W3C Web Notifications API.

28 January 2015 by Andreas Bovens in Articles

In early December 2014, we invited the team behind the fantastic WebRTC-powered appear.in video chat service for a 1-day workshop in Opera’s Oslo office, and, among other things, we came up with three cool appear.in extensions.

28 October 2014 by Krasimir Tsonev in Articles

Krasimir Tsonev dreams about the perfect JavaScript framework, and shares his thoughts on what it would look like and how it would be designed.

14 October 2014 by Vlad Filippov in Articles

Vlad Filippov found a way to run the Opera Mini Android application on Chrome OS.

10 October 2014 by Bruce Lawson in Articles

Håkon Wium Lie proposed CSS on 10 October 1994 — twenty years ago today. Bruce interviewed him about the past, present and future of the Web’s styling language.

26 September 2014 by Zach Leatherman in Articles

Zach Leatherman explains common pitfalls with @font-face and how to fix them using font load events.

19 August 2014 by Yoav Weiss in Articles

Yoav Weiss, the implementor of <picture> in Blink, explains how we got the new responsive images spec and how you can use it.

22 July 2014 by Andreas Bovens in Articles

A handy list of documented examples of responsive images markup, to make you familiar with its different combined use cases.

17 July 2014 by Andreas Bovens in Articles

This article describes how you can install Opera Mini on your computer for debugging or testing purposes.

10 June 2014 by Sara Soueidan in Articles

CSS will-change is a new property that allows you to let a browser know ahead of time that an element may change, so that it can make any preparatory optimisations. Sara Soueidan shows you how to put an end to cargo-cult hacks, and speed up your animations.

27 May 2014 by Shwetank Dixit in Articles

CSS Blend Modes provide a way to specify how one layer will interact or “blend” with the one underneath. Until now, this was the domain of photo editing applications, but now they are available on the web using CSS itself!

8 May 2014 by Tiffany Brown in Articles

IndexedDB offers a powerful way to store and retrieve data in the browser. As with server-side databases, IndexedDB allows us to generate keys, search data, or sort it by a particular field. In this article, we’ll dig into the IndexedDB API by building a to-do list manager. But first, let’s look at some of the concepts around databases and IndexedDB.

26 March 2014 by Rich Tibbett in Articles

The W3C device orientation API allows us to determine the orientation of a device in physical space. In this advanced tutorial we cover some of the pitfalls and propose some new ways of working with this data for developing practical device-orientation-aware web applications on mobile devices.

24 February 2014 by Andreas Bovens in Articles

We sat down with Zach from Abine, and asked him all about the DoNotTrackMe extension, which was recently submitted to the Opera extensions catalog.

23 October 2013 by Andreas Bovens in Articles

We sat down with Ben from Adblock Plus, and asked him all about the product, how it started, how it’s different, how the company behind it makes money, whether ad blocking is hurting the internet or not, and more.

18 October 2013 by Elli Bishop in Articles

Ready to enter the world of parallax scrolling websites? Yes, scrolling sites are absolutely everywhere. Sadly, sometimes they do little more than distract and disorient a user in an attempt to show off, but when done correctly, they can make the web a more exceptional place. At its best, parallax scrolling can help users explore content in an immersive and engaging way.

17 October 2013 by Andreas Bovens in Articles

Due to the major architectural changes we’ve been going through recently, the first versions of our Chromium/Blink based Opera browser (versions 15, 16 and 17) do not support themes. However, from Opera 18 onward, themes are supported again! This article explains you how to create themes for Opera 18+.

26 September 2013 by Francesco Iovine in Articles

Media Capture is one of the most interesting features in web applications, especially for mobile devices. Surprisingly capturing media on the spot is quite a new thing for browsers in general, until recently always being delegated to browser plugins such as Flash or Silverlight. In this article we will explore how to use the Media Capture APIs, their compatibility across mobile browsers and the current state of the W3C specifications that define them.

17 September 2013 by Andreas Bovens in Articles

We sat down with Ulla from Web of Trust, and asked her what makes WOT special, how the service makes money, which extension development tools the WOT developers use, and much more.

9 September 2013 by Samuel Irons in Articles

Opera Coast takes advantage of mobile browsing by supporting and encouraging development for touch-based web design. There are many resources available online for developers to optimize their sites to this end.

6 September 2013 by Tiffany Brown in Articles

In this article, Tiffany Brown has a look at mutation observers, how they are different from mutation events, and how you can use them in your web applications.

27 August 2013 by Andreas Bovens in Articles

We sat down with Brian from Disconnect, and asked him about his team, extension development tools and UX processes, where the service’s revenue comes from, and much more.

3 July 2013 by Chris Mills in Articles

CSS regions is a nascent CSS feature that provides a way for us to completely decouple our content from our layout, flowing specified content containers into layout containers to give us a lot of flexible power. This article provides a basic introduction to using regions and serving fallbacks to non-supporting browsers.

3 July 2013 by Chris Mills in Articles

CSS viewport units allow us to size lengths on web pages relative to the viewport size, which has some interesting applications for responsive design. In this article we’ll explore the fundamentals of this topic.

2 July 2013 by Andreas Bovens in Articles

We sat down with the developers behind the novel cottonTracks extension, and asked them some questions over a (virtual) coffee. We talked about what the cottonTracks extension is all about, what their development workflow is, what they have learned thus far, and much more.

12 June 2013 by Tiffany Brown in Articles

In this article we’ll dig in to 3D transforms in detail, looking at the fundamental differences between 3D and 2D transforms, the 3D transforms available, and some demos that show how these work.

12 June 2013 by Luz Caballero in Articles

This article discusses how you can (and should) improve the performance of your animations, using the requestAnimationFrame API instead of the old setInterval/setTimeout methods, and how requestAnimationFrame is used.

28 May 2013 by Andreas Bovens in Articles

With Opera switching from Presto to Chromium and a complete UI remake, our extensions infrastructure has also gotten a major overhaul: from Opera 15 onward, Opera 11 & 12’s extension format is no longer supported, and instead, we’ve switched to Chromium’s extension model.

21 May 2013 by Bruce Lawson, Chris Mills in Articles

Now that Opera for Android is out, you’ll sometimes need to debug it, as there are differences in Standards support between Opera and Chrome for Android and Chrome on Android 4+. Here’s how to connect Opera for Android to Chromium-based desktop browsers for remote debugging.

17 April 2013 by Chris Mills in Articles

In this article, Chris Mills explores what can be achieved by using animations and transitions — along with a little JavaScript — in conjunction with Flexbox.

10 April 2013 by Chris Mills in Articles

The CSS Flexible box module level 3 brings with it a lot of power and some very exciting possibilities for web development, allowing us to put together complex site layouts easily and rapidly, and dispensing with some of the illogical hacks and kludges that we’ve traditionally used. In this article Chris Mills goes beyond the basics, showing some more interesting uses of Flexbox, and how Modernizr can be employed to serve different styles to browsers with differing levels of Flexbox support to provide the best level of cross browser support available.

5 March 2013 by Shwetank Dixit in Articles

This article covers Web Storage, a new W3C specification supported in Opera 10.50+ that allows data to be saved on the client-side in a much more powerful, more secure fashion than before. Here Shwetank Dixit discusses both facets of Web Storage - Local Storage and Session Storage - and how to use them to store web application data on the client, along with some simple examples to get you started.

21 December 2012 by Chris Mills in Articles

We have practised feature detection to allow us to provide appropriate code to browsers with differing levels of standards support for a while now, but we’ve always needed 3rd party libraries to handle it. But not for much longer: the CSS3 Conditional Rules Module Level 3 provides the @supports at-rule and associated JavaScript API, providing a native mechanism for doing CSS feature detection. In this article we’ll give you the lowdown on how this rule works, looking at a real example in the process.

5 December 2012 by Esteban Manchado Velázquez in Articles

In the first article in this series, we looked at the basics of RoboHydra, the flexible test server tool for testing client-server interactions. In this — the second article — we are taking this knowledge further, looking at more complex examples that utilize RoboHydra as a mock server to send customized test responses back to your client applications.

5 December 2012 by Chris Mills, Erik Möller in Articles

In this fourth part of Erik’s raw WebGL tutorial series, we will turn our attention to importing textures from an image file into the canvas.

23 October 2012 by Daniel Davis, Rich Tibbett in Articles

The Network Service Discovery API enables web pages to communicate with devices advertising themselves on the network via different discovery protocols in a peer-to-peer configuration. Now you can use JavaScript to find a UPnP server locally, browse its content and send that content to a UPnP client. This article, with links to experimental builds, shows you how.

17 October 2012 by Nicolas Garcia Belmonte in Articles

This article looks at what image post-processing is and how to use the raw WebGL API to apply real-time post-processing effects to images and other media like video, canvas, etc.

17 October 2012 by Remy Bach, Rob Miller in Articles

This article shows how to handle client-side error logging, a very useful practice that helps you better understand and discover issues that your users are having.

9 October 2012 by Chris Mills in Articles

This article provides a basic introduction to Flexbox, the gifted new kid on the block with respect to CSS layouts. Here we’ll show you how the most exciting new features of Flexbox work.

26 September 2012 by Rachel McCollin in Articles

This article presents a case study that specifically details solutions to some responsive design problems encountered when developing sites with WordPress, including responsive images, responsive video, and site planning.

26 September 2012 by Siddharth Rao in Articles

JavaScript has allowed us to create animations on our web pages for a number of years, with JavaScript libraries making such code easier to create and more reliable cross-browser. CSS3 animations, a more recent contender, also allow us to create animations on web pages, although they are currently not quite as reliably supported cross-browser. Which one should you use? This article compares the two approaches in terms of performance and other benefits.

12 September 2012 by Esteban Manchado Velázquez in Articles

In the first article in this series, we looked at the basics of Robohydra, the flexible test server tool for testing client-server interactions. In this — the second article — we are taking this knowledge further, looking at more complex examples that utilize Robohydra as a mock server to send customized test responses back to your client applications.

12 September 2012 by Karl Dubost in Articles

This article takes you in detail through HTTP response codes: how they work, what their purpose is, and what the most common ones mean.

5 September 2012 by Tiffany Brown in Articles

Opera Mini is one of the world’s foremost mobile browsers, which runs on pretty much any device, even low-powered ones. It is a proxy-based browser, which has many advantages, including reducing the size of pages downloaded onto the user’s phone by up to 90%. On the downside, JavaScript can behave in unexpected ways when requested by Opera Mini. In this article we’ll discuss exactly what this means for your development work, in detail.

29 August 2012 by Tiffany Brown in Articles

XMLHttpRequest is the primary technology that allows us to do Ajax-style updates to our pages — essentially, more dynamic content updates that don’t require page reloads. The XHR1 spec (and earlier versions) worked okay but had a number of shortcomings. The new version — XHR2 — addresses many of those shortcomings; in this article we’ll look at how, providing an overview and explanatory examples of all the main features.

2 August 2012 by Andreas Tolf Tolfsen in Articles

Opera Mobile brings the Web to millions of people through their mobile phones and other non-desktop devices. Opera believes in giving people access to the full Web, and not making the distinction of a “mobile web”. To help automated mobile testing, we’ve updated the Opera Mobile Emulator so it can talk to our browser automation library, OperaPrestoDriver.

25 July 2012 by Esteban Manchado Velázquez in Articles

RoboHydra is a web server designed to help you write and test software that uses HTTP as a communication protocol. This article will take you through the basics of how RoboHydra works and how to install and use it at a basic level. You’ll see how to use it as a proxy for an existing site, and how you can make changes to local files and see those changes immediately reflected on the live site!

25 July 2012 by Chris Mills, Erik Möller in Articles

In this — the third part of Erik’s raw WebGL series — we will walk you through the creation of a more advanced shader example, culminating in a rather colourful fractal.

18 July 2012 by Audun Mathias Øygard in Articles

The WebRTC standard allows supporting browsers to stream video and audio content directly from native devices such as a webcam. One rather exciting use case for WebRTC is head tracking — detecting the movement of your head (or other appendages) in relation to a webcam — which in turn allows us to create gesture-based controls. This article looks in depth at how head tracking can be implemented.

12 July 2012 by Shwetank Dixit in Articles

Using the W3C’s device orientation API, we can determine the orientation of the device as well as gather information about its movement. This information is valuable in certain types of applications, such as games that require the user to tilt the device in some way. In this article we’ll look at the basics of how device orientation works, along with some simple examples.

6 July 2012 by Chris Mills in Articles

Opera is proud to present an experimental labs release that includes support for SPDY, Google’s new networking protocol that enables performance increases across the web. Please try it out, and let us know what you think!

27 June 2012 by Chris Mills, Erik Möller in Articles

This article picks up where the previous article in the series left off, looking at creating a simple shader to apply a gradient to a sample shape and offset it.

20 June 2012 by Karl Dubost in Articles

The second part of a series of HTTP tutorials written by Karl Dubost. This article explores how HTTP is used to communicate between clients and servers.

20 June 2012 by Ian Devlin in Articles

The HTML5 specification includes two features for improving media accessibility — the WebVTT format, for marking up external text tracks such as subtitles and captions, and the <track> element, for applying those text tracks alongside HTML5 <video> and <audio>. This article provides a detailed introduction to both features, showing how you can make use of them in your projects today.

13 June 2012 by Matt Wilcox in Articles

Responsive images is a surprisingly complicated topic, and one that’s been steadily gaining attention over the last year as more developers discover they need them and then discover there’s no good solution yet. This article aims to give an overview of the problem itself, and show the different proposals in the works to address it.

23 May 2012 by Tiffany Brown in Articles

In this article we explain how transform matrices work — these involve some rather complicated math, but they are not so hard to understand when you sit down and check out a few examples! Once you understand how to put together matrices, you can use them inside the CSS transform: matrix(); and transform: matrix3d(); functions to apply transform effects to your web pages.

16 May 2012 by Chris Mills in Articles

We’ve been working hard recently to improve the functionality available inside Opera extensions, and today we are proud to reveal some of the fruits of our labours. In this article we’ll share with you some new experimental desktop builds that feature three new extension APIs: the screenshot API, the resource loader API, and several updates to the URL filter API.

27 April 2012 by Bruce Lawson in Articles

Through our site compatibility work, we have experienced that many site authors only use -webkit- prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on non-WebKit browsers, as they don’t receive the same shiny effects, even although they support them. To tackle this problem, we are releasing an experimental Opera Mobile Emulator build with experimental support for selected -webkit- prefixes.

25 April 2012 by Mike Taylor in Articles

HTML5 includes the Drag and Drop API, which gives us the ability to natively drag, drop, and transfer data to HTML elements. Up until now, JavaScript libraries have commonly been used to achieve something similar. What libraries such as jQuery UI or Dojo can’t do, however, is interact with other windows, frames, and applications (to and from the file system) or access a rich drag data store.

25 April 2012 by Chris Mills in Articles

CSS animations allow us to animate our web content, by declaring property values at different keyframes, and then applying the animations you’ve declared to the elements you want to animate. And what’s more is that they’re available in Opera 12+! In this article, we’ll walk you through the basics and look at some examples along the way.

12 April 2012 by Rudy Rigot, Sophie Taboni in Articles

The challenges of responsive web design go way beyond media queries and screen widths. In this article we look at some of the key issues you need to explore when embarking on a complicated web project, considering if, how and why the project should be made responsive.

3 April 2012 by Andreas Bovens in Articles

When adding extensions support to our Presto engine, a lot of time was spent behind the scenes so as to make our extensions framework very versatile and lightweight, with the aim of using it on other platforms as well. Today, we’re happy to present you with an early preview of extensions running on Opera Mobile!

29 February 2012 by Rachel McCollin in Articles

Responsive design is quite easy when you control everything to do with the page, and you’re working on a small and manageable site. But what about a sprawling CMS? In such circumstances, you’ll often have to rely on plugins or extensions. WordPress developer Rachel McCollin shares some of her wisdom on this very subject.

29 February 2012 by Chris Mills, Erik Möller in Articles

WebGL allows you to create real 3D content and render it in a web browser. This article series provides a gentle introduction to writing raw WebGL, rendering 3D creations without relying on libraries. In this part we aim to get you set up and started, concluding by running through a simple example.

27 February 2012 by Chris Mills in Articles

Opera is proud to unveil a labs build of Opera Mobile 12, for devices built on Intel x86 architectures, which has already been run successfully on top of Android Ice Cream Sandwich.

27 February 2012 by Chris Mills in Articles

Opera is proud to unveil a labs build of Opera Mobile 12, for devices built on MIPS architecture, which has already been run successfully on top of Android Ice Cream Sandwich.

21 February 2012 by Mostyn Bramley-Moore in Articles

Since our previous releases of Opera Mobile for MeeGo, we have noticed that a lot of our users have been hanging out for an official Opera Mobile build for the Nokia N9 and N950 Harmattan phones. Well, today is your lucky day – we’re happy to announce that a Labs release of Opera Mobile 11.5 for Harmattan is available for download now.

9 February 2012 by Chris Mills in Articles

Originally published just before Christmas 2011, and now updated with a new set of builds on February 9th 2012, Opera is proud to present a new labs release featuring 64-bit builds and out-of-process plug-ins.

1 February 2012 by Tiffany Brown in Articles

HTML5 web messaging provides a way for documents to share data without exposing the DOM to malicious cross-origin scripting. This article provides an introductory guide to using this new functionality, and some simple examples to get you started.

1 February 2012 by Karl Dubost in Articles

This is the first of a series of articles to teach HTTP basics, and how we can use it more effectively. In this article we will look at where HTTP cog fits in the Internet machine. HTTP is an application-level protocol on top of the TCP/IP, a communication protocol.

10 January 2012 by Bruce Lawson in Articles

getUserMedia alllows access to a device’s camera and microphone. This article shows how to access the camera and demonstrates a Privacy User Interface that Opera is experimenting with. Includes moustaches and exploding cameras.

24 December 2011 by Luz Caballero in Articles

This article explores importing existing 3D models into WebGL — a much easier way to go than creating them from scratch in WebGL! The steps include exporting models from 3D packages (including Blender, SketchUp and Shade) into .obj format, converting them from there into JSON, then rendering them from there using the Three.js WebGL library.

24 December 2011 by Chris Mills in Articles

In this article Chris Mills takes a look at techniques and technologies that we can adopt to create adaptive (or responsive) web sites, including percentage units, media queries and viewport. He also discusses some recent happenings in the area, such as considerations for display on tablet browsers, object-fit, and the @viewport CSS rule.

14 December 2011 by Tiffany Brown in Articles

This article provides an introductory guide to cross origin resource sharing, or CORS, a technology allowing you to control communication and access between resources residing at different origins in a secure manner, getting around problems associated with the traditional same-origin security policy.

14 December 2011 by Karl Dubost in Articles

In this article we will look at when and how to use window.onerror, a new programmatic error handling mechanism available in JavaScript, including some examples to get you started.

6 December 2011 by Mike Taylor in Articles

The newest version of ECMAScript to get widespread browser support, ES5, brings with it many useful changes from ES3 and new additions to the language. In this introductory article we’ll review these, showing what is available.

6 December 2011 by Mike Taylor in Articles

This article introduces the HTML5 custom scheme and content handlers, showing how you can employ them to allow use of custom content types on your sites.

16 November 2011 by Domenico Strazzullo in Articles

Mapping applications are very popular, and it is easy to embed a simple map on a page using something like the Google Maps API. In this article we are going to show how to build a fully fledged SVG-based, windowed mapping application using the Pergola framework and its libraries, with the Polymaps library plugged in, and tiles imported from Bing.

19 October 2011 by Daniel Davis in Articles

Building on the famous exploding video demo by Sean Christmann, we’re going to see how we can explode the video stream from a camera. With a few performance tweaks, this works surprisingly well both in desktop browser and on mobile devices.

13 October 2011 by Luz Caballero in Articles

This is the first in our series of articles about WebGL. The objective of this series is to provide the information and resources you’ll need to get started learning WebGL. In this piece, we will discuss how WebGL works, what you need to create WebGL applications, and what a simple example looks like.

7 October 2011 by Chris Mills in Articles

This article covers the basics of CSS3 radial gradients, a great CSS feature that allows for much more flexible design work.

29 August 2011 by DevRel Team in Articles

Opera Mini uses a number of custom, unregistered HTTP headers. Most of these are specific to Mini, and are sent in addition to the regular HTTP headers sent by Opera on any platform. “But what are they, and what can I do with them?” I hear you cry… Let’s find out.

10 August 2011 by Chris Mills in Articles

One of the main problems HTML5 set out to solve was consistency, and therefore machine-readability, of markup. This article explains how the microdata DOM API helps with that.

28 June 2011 by Chris Mills, Mike Taylor in Articles

The HTML5 history API - supported in Opera 11.50+ - provides a means to perform tasks such as moving forward and backward in the session history, adding new entries into the history, and so on. In this article we’ll look at the API’s basic syntax along with a simple example to show you what’s possible.

31 May 2011 by Divya Manian in Articles

HTML5 includes a means to set custom attributes on elements using the data- prefix. Called “data attributes”, they can be scripted to define and store data as well as increase options for attribute selection when styling with CSS.

25 May 2011 by Andreas Bovens, Chris Mills, Patrick H. Lauke in Articles

This article introduces the Opera Mobile Emulator for Windows, Linux and Mac, covering the Profile Selector, command line hooks, input modes and more.

12 April 2011 by Bruce Lawson in Articles

The W3C file API provides a way to load files into the browser and find out information about them, such as size, type, etc., as well as manipulating their contents. In this article Bruce Lawson takes you through the current partial implementation of the File API available in Opera 11.10 final.

22 March 2011 by Shwetank Dixit in Articles

To make applications run fully offline, we should make ourselves familiar with three very interesting technologies: The HTML5 Application Cache, Web Storage and WebSQL Databases. This article looks at al three, showing how they can be used together to create an effective offline application.

22 March 2011 by Andreas Bovens in Articles

Support for the viewport <meta> tag in Opera’s mobile products has been around for quite some time — in Opera Mobile 11, we have made our viewport implementation more robust, added support for new mechanisms to deal with different screen densities, and included an implementation of our own @viewport rule proposal. So, what better time than now to give you an introduction to the various viewport related mechanisms you can use to optimize your site for mobile.

17 March 2011 by Molly E. Holzschlag in Articles

Multiple column design that allows text to flow naturally from column to column depending on width and other parameters has proven invaluable in print design, crossing languages, cultures and a range of media. The good news is that now it is coming to web design, courtesy of the CSS3 Multi-column Layout Module. In this article we show you how to get to grips with it.

17 March 2011 by Chris Mills in Articles

This article shows you how to use CSS3 linear gradients, newly supported in Opera 11.10, to add special effects to your design work.

9 March 2011 by Zi Bin Cheah in Articles

This article introduces the new Web Open Font Format or WOFF, explaining the benefits of WOFF, showing where to download and create WOFF font packages and presenting two WOFF demos.

23 February 2011 by Dmitry Soshnikov in Articles

In this article we’ll look at the functionality made available by the new methods of array objects standardized in ECMAScript 5.

17 February 2011 by Bruce Lawson, Vadim Makeev in Articles

Want to put video onto your web page? HTML5 enables us to do this as easily as placing images with an <img> element – and in this tutorial, we’ll show you how the magic is done.

11 February 2011 by DevRel Team in Articles

This article presents a detailed set of guidelines for optimizing web content for viewing on Opera Mini. It covers a complete range of topics, including HTML, CSS, JavaScript, design considerations and more.

6 January 2011 by Chris Mills in Articles

An introduction to the new object-fit and object-position CSS3 properties from the CSS Image Values and Replaced Content module working draft.

21 December 2010 by Bruce Lawson, Chris Mills in Articles

HTML5 brings two new things to the table: new APIs that add essential new features to the open standards web development model, and new structural elements that define specific web page features with much more accurate semantics than were available in HTML 4. This article looks at how the new semantic elements were chosen, what the main new features are and how they are used, how headings work in HTML5, and browser support for these new elements, including how you can support them in older browsers.

16 December 2010 by Chris Mills, Patrick H. Lauke in Articles

HTML5 includes many new features to make web forms a lot easier to write, and a lot more powerful and consistent across the Web. This article gives a brief overview of some of the new form controls and functionalities that have been introduced.

11 December 2010 by Ionuț Colceriu in Articles

Cristian returns this week with another detailed look at custom HTML5 <video> players! Following on from his last article, he shows us how to make a much more accessible, while still visually appealing, video player including WAI-ARIA support, captions, transcripts, and more.

22 November 2010 by Bruce Lawson, Mike Taylor in Articles

The beta release of Opera 11 debuts our support for Web Sockets. In this article we will explain the background to Web Sockets, show why it is a cool feature, and give you some simple usage examples to get you up to speed.

27 October 2010 by Corey Mwamba in Articles

In this article, Corey Mwamba shows you how to create an inspiring horizontally scrolling interface using only CSS, with some clever use of CSS3 transitions and the :target pseudo-class.

6 October 2010 by Simon Pieters in Articles

If you play around with the HTML5 <video> element for any significant length of time, you may well run into a problem with inconsistently firing events: sometimes you don’t seem to get some events, and sometimes it behaves differently depending on whether you’re testing locally or over the network. This article explores the problem, and puts forward some solutions.

4 August 2010 by Ian Pouncey in Articles

The number of people with cognitive disabilities using the Web is comparable to those with visual impairments using the Web, yet the factors involved in making sure a web site is accessible to those with cognitive disabilities are much less well understood. In this article well will redress the balance, giving you a gentle introduction to the area of web accessibility for cognitive disabilities.

28 July 2010 by Bruce Lawson in Articles

Everyone wants to make their sites “mobile friendly” these days — the mobile web market is becoming big business. This article takes you through the different available strategies for making your websites mobile browser compatible, sharing many tips and tricks along the way.

28 July 2010 by Ionuț Colceriu in Articles

In this article we make full use of the HTML5 video element and associated media elements API — along with jQuery and some CSS3 magic — to make a fully-customizable, themeable HTML5 video player. To round things off, the player is encapsulated as a jQuery plugin for easier reuse.

15 July 2010 by Rustam Gaffanov in Articles

CSS3 box-shadow is a very useful property — creating drop shadows programmatically can save web designers a lot of time in image editing software. However we have a problem if we need to replicate those shadows in Internet Explorer, which does not support this property. In this article, we present a cross-browser solution that uses box-shadow in supporting browsers, and IE filters to fake the drop shadows in IE.

6 July 2010 by Trygve Lie in Articles

In this article Trygve Lie takes you through the basics of the HTML5 <audio> element, then uses jQuery and jPlayer to build a cross-browser radio player based on <audio> with a Flash fallback. As a final step, he converts the player into an Opera Widget for added cross-device appeal.

1 July 2010 by Daniel Davis in Articles

In this article you will meet Web Workers, one of many technologies that, together with HTML5, are forming the next generation of the open web. Web Workers allow you to create separate processes in your JavaScript to deal with number crunching, while your main process remains as responsive as possible for the users of your applications.

1 July 2010 by Shwetank Dixit in Articles

In this article Shwetank Dixit explains how to use the HTML5 application cache feature to make your web apps run offline.

16 June 2010 by Shwetank Dixit in Articles

In this article, Opera Web Evangelist Shwetank gives you a guide to the W3C Geolocation API, which is newly-supported in our Opera 10.60 beta release. Find out how to add location awareness to your Web apps for a lot of interesting possibilities!

9 June 2010 by Corey Mwamba in Articles

Creating expanding and collapsing (or show and hide) content on websites used to be the domain of JavaScript, but in modern times we can recreate such functionality without JavaScript, using a combination of :focus, and CSS3 opacity and transitions. In this article, Corey Mwamba shows you how.

19 May 2010 by Chris Mills in Articles

Today is a very significant day for the Web. WebM, a new, high-quality, free, and open video format is now available, and Opera has released Labs builds that support this format in HTML5 <video>. In this article, we look at some examples, how this came about, why it is such a good thing, and what the technical details look like.

27 April 2010 by Henrik Helmers in Articles

CSS3 shadows and rounded corners are easy to understand at a basic level, but what if you want to start using them in more advanced UI styling, such as textured buttons and semi-transparent glass effects? In this article Opera designer Jan Henrik Helmers hows you how to create these UI features and more, using CSS3 features, and no images whatsoever.

1 April 2010 by Divya Manian in Articles

With generated content, developers can easily add decorative text and images to their pages directly via CSS. In this article we look at the basics of CSS generated content and give a few interesting examples of where it can be used.

10 March 2010 by Simon Pieters in Articles

This article builds on our previous HTML5 <video> publications by offering deep coverage of the functionality available in the <video>/<audio> API, a detailed reference of <video> and <audio> attributes, and guidance on codecs, and creating video/audio suitable for use with these elements.

11 February 2010 by Bruce Lawson, Patrick H. Lauke in Articles

This article gives you an introduction to <video> and some of its associated APIs. We look at why native video support in browsers is important, give an overview of the element’s markup, and outline the most important ways in which video can be controlled via JavaScript.

4 February 2010 by Mihai Sucan in Articles

In this article Mihai Sucan explores the differences between SVG and Canvas and presents a few examples to help you decide which one is best for the functionality you are trying to implement.

13 January 2010 by Bruce Lawson in Articles

The HTML5 <video> element provides a fantastic way to embed video into web pages without relying on plugins, and it is now supported in Opera, Firefox and Chrome, so things are looking up. One burning question however is “how do we provide alternative content for users that either can’t see, or can’t hear the video?” In this article, Bruce Lawson looks at the issue and suggests a solution.

22 December 2009 by David Storey in Articles

In this article, you’ll learn about CSS3 transitions and transforms (as well as their SVG and SMIL corollaries), all of which are supported by Opera versions 10.50 and later.

22 December 2009 by David Storey, Vadim Makeev, Zi Bin Cheah in Articles

Opera 10.50+ comes with support for the CSS3 Backgrounds and Borders specification. Amongst them are border-radius, border-image, multiple backgrounds and box-shadow. Opera 10.60+ updates this support with box-decoration-break and an updated background shorthand. We’ll showcase all these and more through examples and explanations.

23 September 2009 by Stuart Colville in Articles

The default HTTP error pages served up by a web server such as Apache will not be very helpful to your site’s visitors, should they ever be unlucky enough to stray across them. In this article, Stuart Colville shows you how to add custom error pages to your web site, and design them so that they draw your site visitors back into your site, for example to related articles.

1 September 2009 by Molly E. Holzschlag in Articles

This guide explains how the RGB (Red, Green, Blue) and HSL (Hue, Saturation, Lightness) color models work, and how web designers can make clever use of them in CSS to improve their designs, and make more logical color scheme choices. It also looks at the alpha channel, and how that can also be beneficial.

6 August 2009 by R Blank in Articles

In this - the third article of his series on the business of software development - R Blank lifts the lid on scheduling with a detailed look at creating task- and resource- based project plans, buffering in case unexpected surprises crop up, and more.

8 July 2009 by Gez Lemon in Articles

There is increasing interest in, and importance being laid upon, making modern dynamic web applications more accessible. New specifications such as WAI-ARIA and HTML5 provide the means by which to do this; in this article Gez Lemon presents a solution for implementing accessible drag and drop functionality using JavaScript and WAI-ARIA. Some discussion of HTML5 drag-and-drop features is also included for good measure.

22 April 2009 by Gareth Heyes in Articles

In this article, security expert Gareth Heyes details some of the more interesting JavaScript hacks he has uncovered while focusing on browser security. The knowledge presented here should give you some insights on making your web applications more secure.

27 March 2009 by Christopher Schmitt in Articles

In this article, Christopher Schmitt follows up his hCard introduction by showing us how add some style to hCards, to make them fit nicely into a page design.

17 March 2009 by Mihai Sucan in Articles

Looking for some practical implementations of HTML5 Canvas? Look no further. This article takes you through Mihai Sucan’s first development steps at creating a Canvas-powered online painting application. In this article he sets up the basic environment, shows how to make the event interactions work and implements some of the basic drawing tools.

13 March 2009 by Jacob Seidelin in Articles

In this, the second part of Jacob Seidelin’s series on creating games using HTML 5, JavaScript, canvas and raycasting, he takes the game put together in Part 1, and adds better collision detection, performance improvements, scenery and enemies to chase you!

6 March 2009 by Christian Heilmann in Articles

Writing a best practice article is quite a tricky business. To a number of you, what you are about to read will appear to be very obvious and just the sensible thing to do. However, looking around the web and getting code handed over to me from other developers for years has taught me that common sense is actually quite a rarity in live code on the web.

6 March 2009 by Christopher Schmitt in Articles

In this article, Christopher Schmitt follows up his hCard introduction by showing us how add some style to hCards, to make them fit nicely into a page design.

3 February 2009 by Christian Heilmann in Articles

As an experienced developer you’ll sooner or later have to face people that are just not technical and will consider whatever you do as black magic. This article explains in simple terms what programming is about and hopefully will help both parties involved to steer these non-conversations into more productive waters.

15 January 2009 by Dmitry Baranovskiy in Articles

In this article, we have the pleasure of introducing you to Raphaël, a JavaScript API for SVG that not only allows you to write SVG functionality using JavaScript code, but also provides support for SVG in IE, by emulating it in VML. This is a great tool for introducing more people to the power of SVG, and we’d like to wish it every success.

8 January 2009 by Mihai Sucan in Articles

HTML5 canvas is a powerful, flexible way to create two dimensional graphics on web pages using scripting, and a number of previous dev.opera.com articles have demonstrated usage of it already. This article goes back to basics, giving beginners a starting point to work from and explaining the basics. Get drawing!

28 December 2008 by Jacob Seidelin in Articles

Jacob Seidelin has a lot of exciting tricks up his sleeve, with regards to creating games using HTML5 <canvas>. This week we are lucky enough to have him sharing some of his techniques with us, in the shape of some code for creating pseudo-3D first-person perspective games using canvas and raycasting.

7 December 2008 by Patrick H. Lauke in Articles

Google Maps is a fantastic API for adding powerful mapping functionality to your web applications quickly, but the accessibility leaves a little bit to be desired. In this article, Patrick Lauke shows how to construct a solution to improve things, adding keyboard accessibility to Google Maps.

21 November 2008 by Brian Suda in Articles

Barcodes are becoming vastly more interesting in recent times, with 2D barcodes allowing you to represent anything from URLs to invoices, which in turn allows us to connect physical images to applications in all kinds of interesting ways. In this article Brian Suda discusses the history of barcodes, what’s available today for creating and reading barcodes, and real-world use cases.

1 October 2008 by David Storey in Articles

In this article David Storey looks at how to use CSS counters to provide robust sequential numbering for reoccuring HTML elements such as list items or paragraphs.

26 September 2008 by Christian Heilmann in Articles

In the earlier tutorials of this course we talked about the content of web sites and how to structure content using HTML. This is very important as it means that we give our documents meaning and structure for other technologies to tie into seamlessly. The most important web technology to discuss next is CSS (Cascading Style Sheets), which is used to style our HTML, and position it on the web page. In this article I’ll introduce you to CSS — what it is, how to apply it to HTML, and what basic CSS syntax looks like.

10 September 2008 by Chris Mills in Articles

In this article Chris Mills gives the lowdown on OBML, the one of the main technologies behind Opera Mini, which is also available in the Opera Devices SDK 9.6.

28 August 2008 by Christopher Schmitt in Articles

In this article Christopher Schmitt gives a succinct overview of how to use the nth-child CSS3 property to easily create zebra-striped HTML tables.

21 August 2008 by Christopher Schmitt in Articles

In this article, Christopher Schmitt carries on his detailed exploration of what CSS3 has to offer us, looking at CSS3 attribute selectors that allow us to write selectors matching strings of text inside attribute values.

15 August 2008 by Craig Grannell in Articles

In this article, Craig Grannell builds on his previous article to take us through the basics of actually laying out pages on a grid. It’s packed with essential tips.

7 August 2008 by Craig Grannell in Articles

Another article in Craig Grannell’s fabulous series on design basics. In this article Craig gives us the lowdown on grid design basics - how to create a baseline grid in CSS, and how to position text on screen using it, with distances measured in both pixels and ems.

1 August 2008 by Gez Lemon in Articles

The elephant in the corner of modern web development has been Ajax accessibility.The W3C has been working on a new technology called ARIA - Accessible Rich Internet Applications - that provides a way for “Web 2.0” developers to bridge the gap between desktop-like interaction and accessibility.When I was reading up on ARIA, I found that I couldn’t see the big picture because the specifications focus on the detail. So we asked Gez Lemon of The Paciello Group, Juicy Studio and the Web Standards Project’s Accessibility Task Force to write us an overview that would help developers understand what ARIA is, why it’s important, and how they can use it right now to help users with disabilities.

24 July 2008 by R Blank in Articles

This is the second in a series of articles written by R Blank giving practical advice on the business side of freelancing, including project management, contracts, budgeting and more. In this part he discusses budgeting, hot root vegetables and why working with new tech is similar to being a test pilot.

8 July 2008 by Mark Norman Francis in Articles

In this article you will learn the basics of HTML — what it is, what it does, its history in brief, and what the structure of an HTML document looks like. The articles that follow this one will look at each individual part of HTML in much greater depth.

3 July 2008 by Hallvord R. M. Steen in Articles

In this article Hallvord Steen provides a warning about browser sniffing and why it is such a bad thing, by examining a recent bug discovered in Opera relating to compatibility with the TinyMCE editor. He also suggests a fix to this problem, involving “bug detection”, a useful technique that can be applied to many other situations.

29 May 2008 by R Blank in Articles

This is the first in a series of articles written by R Blank giving practical advice on the business side of freelancing, including project management, contracts, budgeting and more. In this part he discusses pricing.

29 February 2008 by Erik Dahlström in Articles

Wanna add some polish to your site, the standards way? In this article Erik shows how you can save time and money on creating graphics and effects programmatically using SVG instead of doing them all manually using Photoshop.

21 February 2008 by Christopher Schmitt in Articles

In this article Christopher Schmitt explores a couple of great new CSS design properties available in CSS3 — text-shadow for creating drop shadows, and background-size for automatically resizing background images as the browser window changes size. Exciting stuff indeed!

19 December 2007 by Brian Suda in Articles

Adding Microformats to your markup is great for adding semantic value, and then performing tasks like pulling out hCards and adding them to address books, but is that all there is to them? Certainly not! In this article, Brian Suda shares some ideas for doing so much more with them.

6 December 2007 by Gareth Rushgrove in Articles

If you’re working in a web development team with developers alongside designers, and you want to give the designers an easy way to change the variable parts of the application without the risk of breaking things, an external configuration file is a great idea, and JSON (JavaScript Object Notation) is a perfect format in which to store this data. In this article, Gareth Rushgrove shows you how.

7 November 2007 by DevRel Team in Articles

To really make a splash on the Web, video needs an open solution that can easily be integrated into web pages without the need for proprietary plugins. The HTML5 <video> element and Ogg Theora can provide this, and Opera is proud to announce an experimental build that supports it. So read this article, and download and play with it today.

17 October 2007 by Björn Lindberg in Articles

Blob Sallad is a fun little experiment put together to show some of the capabilities of the HTML5 canvas element, when combined with some JavaScript physics simulation. You can play with it at blobsallad.se, and read about how it works in this exclusive double-length article, written by its creator, Björn Lindberg.

27 November 2006 by Hallvord R. M. Steen in Articles

Browser name sniffing, using scripts figure out which browser is used and then provide different content to them, is a widespread practice with a long history. Unfortunately these scripts are usually static, while browsers keep evolving. Simply put: sniffing browser names can seriously damage the future health of your script.

2 November 2006 by Mark Wilton-Jones in Articles

Traditionally, a Web page would not contain much scripting, or at least, not much that would affect the performance of that Web page. However, as Web pages become more like applications, the performance of scripts is having a bigger effect. With more and more applications being developed using Web technologies, improving the performance of scripts is becoming increasingly important.