code:

a.icon.good2 {
	background: #215387 url(test-sprite@2x.png) 4px -6px / 40px 82px no-repeat;
	}

Note: Including the size in the background property is not supported in older browsers. See example 2 below for a more backwards compatible solution.

Issue:

The W3C spec for the background shorthand property specifies that when declared without a size property it initializes size to ‘background-size: auto auto;’. Previously there was quirk with WebKit where if size was omitted it just didn’t initialize the size property for the background. This allowed for a previously declared background-size declaration to remain intact, displaying the image at its proper size. This quirk has since been removed and the latest release of WebKit now follows the W3C spec.

Bad code

a.icon {
	background-size: 40px 82px;
	}
a.icon.bad {
	background: #215387 url(test-sprite@2x.png) 4px -6px no-repeat;
	}

Produces

Solution

1. Add size to the background short-hand property and eliminate the background-size property

Code

a.icon.good2 {
     background: #215387 url(test-sprite@2x.png) 4px -6px / 40px 82px no-repeat;
}

Produces

2. If you must resize a background-image via a background-size property declare background size after the background property so it isn’t overridden.

Code

a.icon.good {
	background: #215387 url(test-sprite@2x.png) 4px -6px no-repeat;
	}
a.icon.good {
	background-size: 40px 82px;
	}

Produces

References:

http://www.w3.org/TR/css3-background/#the-background
https://bugs.webkit.org/show_bug.cgi?id=97761
http://lists.w3.org/Archives/Public/www-style/2012Oct/0112.html
http://caniuse.com/#search=background-size

When we first released our porting guide for webOS developers, it was admittedly more focused on migrating from Enyo to standard HTML5. However, since both Enyo 1.0 and 2.0 are open source and run on the BlackBerry® WebKit Browser, it’s actually even easier to get Enyo applications running on the BlackBerry platform, and we’ll be updating our guide in the next couple weeks as well. All you need to get started is available right now though, so let’s take a look.

Enyo 1.0 comes directly from the webOS platform and is designed specifically for that OS, but its main requirement is WebKit, so it’s possible to make it work with BlackBerry 6 OS and up, including the BlackBerry PlayBook™ tablet and BlackBerry 10. At approximately 7MB, Enyo 1.0 is pretty large, and this can be a problem on our OS 6 and BlackBerry 7 OS phones as it’s approaching the size limit for an application install on those phones. However, that’s not an issue on the BlackBerry PlayBook tablet and BlackBerry 10. View this sample on Github to see how to create a BlackBerry® WebWorks™ config.xml for the Enyo Style Matters sample.

Enyo 2.0 is a new framework based on the ideas behind Enyo 1.0, but now built with cross-platform and mobile targets in mind first. It’s light-weight, highly extensible, and works great on BlackBerry. See this sample on Github for the Enyo Onyx Sampler as a BlackBerry WebWorks application.

Besides running Enyo itself, it’s quite easy to integrate BlackBerry WebWorks extensions into Enyo Applications for native capabilities. The final sample on Github shows how to use BlackBerry WebWorks APIs to capture Application information, show Battery status, track device motion, and interact with the native file system.

If you have an Enyo application and you are looking for a profitable market place, the BlackBerry App World™ storefront should be top of your list. Enyo based applications are well received and BlackBerry App World is a marketplace where developers do well, with 13% making more than $100,000. I’d love to hear from you if you have any questions and to take a look at your applications. Drop me a line at twindsor at rim dot com, or @timothywindsor on Twitter.

BlackBerry PlayBook tablet users who have installed the OS 2.0 beta may have already seen the improved WebKit engine, as it was upgraded starting with version 2.0.0.7262 of the BlackBerry Tablet OS software. The current version of WebKit on the BlackBerry PlayBook tablet comes from a November 2011 branch of the upstream WebKit code base. A complete list of all changes can be found in the Trac for WebKit issue tracking system.

Wait, do you mean HTML5 development on BlackBerry is designed to be even better now?

Yes I do, and you’re in for a treat.

In general, BlackBerry web developers will see enhanced stability and performance in their web applications running on BlackBerry PlayBook tablet OS 2.0. However, some of the more significant improvements include the following:

• Support for WebGL, including 3D context and native binary data. Take advantage of Open GL ES technology and 3D graphics in your BlackBerry application content.
• Updated Web Inspector is now designed with better debugging support. New features such as settings menu, network panel, contextual menus and pretty print JavaScript® make it easier for developers to debug and optimize their web content.
• HTML5 canvas is now hardware accelerated, meaning it is designed for faster performance and higher frame-per-second (FPS) rendering of 2D graphics content.
• CSS3 accelerated animations and transforms are now smoother thanks to high quality service improvements to graphics rendering for the engine.
• Added FileReader API, which is designed to search, retrieve and display files from the BlackBerry Tablet OS shared folder, and helps integrate camera pictures, videos, music and documents from the BlackBerry PlayBook tablet into your web applications.
• Improved HTML5 support including new form fields (keygen, output, meter) and input types (text, search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range).
• Enhanced XmlHttpRequest object adds support for text and array buffer response type

Show me!

I know you’d much rather see some of these awesome improvements yourself instead of just reading about them, so here are some examples. Using the browser application on a BlackBerry PlayBook tablet running Tablet OS 2.0, open the following pages:

• HTML5 Test – Tablet OS 2.0 currently scores 354 on the HTML5 test, ranking it at the top of the results for tablet browsers. Created by Niels Leenheer.
• TunnelTilt game – Try out the WebGL sample which was demonstrated onstage for the first time at BlackBerry DevCon Americas. Created by Jonathan Feldstein.
• Craftymind GUIMark3 – Performance test from CraftyMind that measures the frames-per-second the HTML5 canvas element can handle under load. Created by Sean Christmann.
• File Reader API – pPge from the kitchenSink BlackBerry WebWorks sample application that demonstrates how to use the file reader API. Created by Adam Stanley.
• Holiday DOM tree – Uses 3D transforms and HTML form elements to display an animated tree of various holiday greetings. Created by Hakim El Hattab.

Meet the Web team

Recently, I asked members of the BlackBerry® Browser team to share their thoughts about the meaning behind the high-quality improvements they have delivered to developers as part of the Tablet OS 2.0 web platform. Here is some of their feedback:

“I know many web developers who now use the BlackBerry PlayBook tablet as their mobile development and testing environment of choice. The support for remote Web Inspector is simply awesome, and a year after we introduced it, remains a defining aspect of our approach to mobile web development. We have made it even better!”

- Laurent Hasson, Technical Director, Web platform

“Personally I’m most excited about all the graphics and animation improvements (CSS3, HTML, canvas, WebGL). I think we’re most proud about being able to bring the full web to tablet – proper implementation of the standards and specifications coupled with a rich, touch-friendly user experience.”

- George Staikos, Vice President, Web Technologies

How do I get started with BlackBerry web development?

I’m glad you asked. Visit the BlackBerry HTML5 WebWorks developer site to learn more about developer tools, such as the Ripple emulator or the BlackBerry WebWorks SDK. See the developer documentation and reference guides for techniques on how to transform samples into fully-featured BlackBerry applications.

Most importantly, tell us if you create something awesome! We want to hear from you.

Hope you enjoy BlackBerry PlayBook tablet OS 2.0.

In a Flash Platform blog posted earlier today, Adobe® laid out their plans for Adobe Flash® Player on mobile devices. Many of our developers may be asking themselves whether and how they are going to be affected by Adobe’s decision to no longer adapt Adobe Flash Player for mobile devices to new browser, OS version or device configurations.

What I would like our developer community to know is that RIM will continue to support developers who have built Adobe Flash-based apps on our platform. As an Adobe source code licensee, we have a lot of leverage through our own integration and support of Adobe Flash and will continue to provide our desktop-class Flash experience to our customers. On its end, Adobe will continue to support the current BlackBerry® PlayBook™ tablet configuration.

We are excited to see Adobe focusing their efforts on HTML5, and on bringing their world class development and design expertise to HTML5 and mobile. As many of you noted, at BlackBerry DevCon Americas this year we strongly emphasized HTML5 development, and all of our platforms include best-in-breed HTML5 browsing capability, based on the WebKit engine. We believe that HTML5 is the future of mobile, and are delighted to be aligned with Adobe on this.

If you have a question, don’t hesitate to send it over.
– Alec Saunders, VP of Developer Relations and Ecosystem Development

On August 3rd, 2011 Research In Motion® (RIM®) announced the arrival of three new BlackBerry® Torch™ smartphones. A few months ago, we explained the impact of the BlackBerry® Bold™ 9900 and BlackBerry® Bold™ 9930 smartphones to developers; today we’re doing the same for the next three smartphones that will be running BlackBerry® 7 OS: the BlackBerry® Torch™ 9810 smartphone and the all-touch BlackBerry® Torch™ 9850 and 9860 smartphones.

Common features to the newly announced smartphones running BlackBerry 7 OS are:

• 32-bit color (24 bits of color and 8 bits of transparency)
• 1.2 GHz Processor
• Magnetometer / Digital Compass, enabling augmented reality and advanced mapping solutions
• Dedicated 3D OpenGL ES 1.1/2.0 and dedicated 2D OpenVG 1.1 graphics hardware (41 million triangles/sec, 245 million 3D pixels/sec)
• 5 MP camera with support for 720p HD video recording
• JIT (Just-In-Time) JavaScript® compiler, yielding faster page download time than BlackBerry® 6
• Support for additional HTML5 elements, such as HTML5 Video

Key features for developers (BlackBerry Torch 9810 smartphone):

• VGA (640 x 480) screen resolution
• 8 GB of onboard memory, with microSD support for up to 32GB
• User agent: Mozilla/5.0 (BlackBerry; U; BlackBerry 9810; en-US) AppleWebKit/534.11+ (KHTML, like Gecko) Version/7.0.0 Mobile Safari/534.11+

Key features for developers (BlackBerry Torch 9850 and 9860 smartphones):

• WVGA (800 x 480) screen resolution
• 4 GB of onboard memory, with microSD support for up to 32GB
• User agent (9850): Mozilla/5.0 (BlackBerry; U; BlackBerry 9850; en-US) AppleWebKit/534.11+ (KHTML, like Gecko) Version/7.0.0 Mobile Safari/534.11+
• User agent (9860): Mozilla/5.0 (BlackBerry; U; BlackBerry 9860; en-US)AppleWebKit/534.11+ (KHTML, like Gecko) Version/7.0.0 Mobile Safari/534.11+

Whether you’re a BlackBerry® Java® developer or a BlackBerry® WebWorks™ developer, the tools are available, the simulators are available, and the BlackBerry App World™ vendor portal is accepting submissions for all BlackBerry 7 OS smartphones. If you haven’t submitted your apps yet, now is the time!

If you have any questions about developing for BlackBerry 7 OS smartphones, let us know in the comments!

The latest version 2.1.1 of the BlackBerry® WebWorks™ SDK for Smartphones (release notes) is now available for download. Known as the Echo release, this update provides new features that can be used by developers to build even better capabilities into their BlackBerry WebWorks applications.

What’s new in this release?

• BlackBerry® 7 OS simulator – a BlackBerry® Bold™ 9930 simulator running BlackBerry 7 OS device software is now included in the WebWorks SDK download.
• Web Inspector – As promised in a previous blog post, developers can now use WebKit Web inspector to debug, test and profile Web browser or BlackBerry WebWorks application content running on a live device or simulator.
• Microphone API – The same API that was recently made available for the BlackBerry WebWorks SDK for Tablet OS can now be used to record WAV audio files in BlackBerry WebWorks applications running on BlackBerry smartphones.
• Auto injection of Gears-to-HTML5 shim – BlackBerry WebWorks developers that wish to use HTML5 features on BlackBerry 5.0 smartphones no longer need to manually add the Gears-to-HTML JavaScript toolkit to their projects. The BlackBerry WebWorks SDK automatically does this for you.

Microphone API code sample

Use the microphone to record audio and immediately save it as a WAV file to the BlackBerry smartphone file system or a removable SDCard.

]]> http://devblog.blackberry.com/2011/08/blackberry-webworks-sdk-for-smartphones-update/feed/ 0 adamstan1 BlackBerry WebWorks SDK for Smartphone v2.1.1 Update http://devblog.blackberry.com/2010/10/blackberry-style/ http://devblog.blackberry.com/2010/10/blackberry-style/#comments Fri, 29 Oct 2010 20:46:49 +0000 Brian Z. http://devblog.blackberry.com/?p=2602 ]]>

With the recent announcement of the new BlackBerry® Style™ 9670 smartphone, I wanted to provide an overview of the device from the developer perspective, in order to give our developers a better understanding of what this new smartphone means to them.

The BlackBerry Style 9670 smartphone features the BlackBerry® 6 operating system, which has been featured in a series of posts on BlackBerry® Developer Zone over the past few months. BlackBerry® 6 on the BlackBerry Style 9670 continues the same great development platform as the BlackBerry® Torch™ 9800 smartphone, enabling richer Java® applications, advanced graphical capabilities, and of course, the highly touted web experience with BlackBerry® WebWorks™ platform and a browser supporting HTML5 and CSS3.

So if you’re already an expert in BlackBerry 6, what do you need to think about when developing for the BlackBerry Style 9670 smartphone? Primarily, you need to think about the fact that it’s a flip phone:

• Use the Sensor class to detect when it’s open or closed
• Recognize that it follows the same design paradigm as the BlackBerry® Pearl™ Flip series smartphone, where the internal screen behaves just like a traditional display area and the external screen takes on functions for representing clock, incoming call information, album art, and banner notifications for new messages, calendar reminders, etc.
• The supported banner notifications also include third party ApplicationIndicators.
• Even when flipped closed, media events are sent to third party apps via MediaActionHandler.

To coincide with the enhancements to the BlackBerry® Browser in BlackBerry 6 with the inclusion of the new WebKit rendering engine, we are continuing the new User Agent header definitions from the BlackBerry Torch 9800 smartphone to the BlackBerry Style 9670 smartphone. This User Agent definition reflects the type of web content supported by the browser, ensuring that your mobile and desktop websites are providing the best possible content and experience.

Mozilla/5.0 (BlackBerry; U; BlackBerry 9670; en) AppleWebKit/534.3+ (KHTML, like Gecko) Version/6.0.0.286 Mobile Safari/534.3+

Other hardware features:

• The first BlackBerry smartphone with flip and a full QWERTY keyboard
• The first BlackBerry smartphone to support OpenGL ES 1.1
• Support for OpenVG 1.1
• Dual-Band: 800/1900 MHz CDMA/EVDO Rev A networks
• 360 x 400 internal screen resolution
• 240 x 320 external display resolution
• 5.0 MP Camera with Flash, Auto Focus, Image Stabilization, and 640 x 480 video recording
• Location Support through Assisted and Autonomous GPS
• Wi-Fi® Support – 802.11 b/g/n
• Storage: 8 GB microSD included, with support for up to 32 GB
• App memory space: 512MB onboard memory

Get started with the BlackBerry Style now by downloading the simulator here!

]]> http://devblog.blackberry.com/2010/10/blackberry-style/feed/ 2 brianzub1 BlackBerry Style http://devblog.blackberry.com/2010/09/blackberry-webworks-and-the-open-source-community/ http://devblog.blackberry.com/2010/09/blackberry-webworks-and-the-open-source-community/#comments Wed, 29 Sep 2010 22:06:02 +0000 Douglas Soltys http://devblog.blackberry.com/?p=2491 ]]>

Following this week’s BlackBerry WebWorks announcement, I thought it would be a good idea to speak with fellow Inside BlackBerry Developer’s Blog bloggers, Adam and Prosanta about WebWorks and the open source community initiative. Check out the links below to visit the webpages mentioned in the video and to download the (free!) Hollywood Bowl app demoed. REMINDER: We need your help to name our github community! Post your suggestions in the comments.

BlackBerry github Community
BlackBerry WebWorks Developer Page
Hollywood Bowl app

]]> http://devblog.blackberry.com/2010/09/blackberry-webworks-and-the-open-source-community/feed/ 2 dsoltys http://devblog.blackberry.com/2010/08/blackberry-browser-detect/ http://devblog.blackberry.com/2010/08/blackberry-browser-detect/#comments Fri, 27 Aug 2010 15:10:08 +0000 Adam S. http://devblog.blackberry.com/?p=2086 ]]>

Hey web developers! We’ve been talking a lot about WebKit, the rendering engine used by the web platform on BlackBerry® 6, and I wanted to provide a few more details for our developer community about working with WebKit. This engine is designed to provide a very high level of support for web standards, greatly improved performance and superior rendering fidelity. What this means is many of the web pages rendered on the BlackBerry® 6 browser can look as good as desktop browsers!

Do you have a web site that provides an optimized version of your mobile web content to specific browsers? If so, I want to make sure you are including BlackBerry 6 in your browser detection logic. Doing so will ensure that these users will be provided with the best possible browsing experience when viewing your mobile web content.

The format of the user agent header changed in BlackBerry 6 to better reflect the type of web content supported by the new browser. Many in-market mobile and desktop browsers, powered by the WebKit rendering engine, format the value of their user agent in a way similar to the following:

Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en-US) AppleWebKit/534.1+ (KHTML, like Gecko) Version/6.0.0.141 Mobile Safari/534.1+

As shown in this example, the user agent identifies three important pieces of information:

• The model number of the BlackBerry® smartphone being used to make the web request is 9800.
• The version of the software installed on the BlackBerry smartphone is 6.0.0.141.
• The rendering engine used to power the smartphone is WebKit.

If you haven’t done so already, make sure that your web site properly detects the BlackBerry 6 browser. Once that is done, you can begin offering a high-quality browsing experience to those users.

Please see the following resource center article for more information and examples on detecting the BlackBerry Browser.

Let us know if you have any questions in the comments!

]]> http://devblog.blackberry.com/2010/08/blackberry-browser-detect/feed/ 2 adamstan1 http://devblog.blackberry.com/2010/08/blackberry-html5/ http://devblog.blackberry.com/2010/08/blackberry-html5/#comments Wed, 18 Aug 2010 12:32:57 +0000 Prosanta B. http://devblog.blackberry.com/?p=2004 ]]> As I’m sure you’ve heard by now, WebKit has come to BlackBerry®! This is an exciting time not only for the BlackBerry Web Platform, but for web technologies in general. With the combination of WebKit and the new W3C standard for HTML5, web applications are going to become more and more powerful.

Here at Research In Motion® (RIM), we’re incredibly excited about this development. The support of WebKit and HTML5 in BlackBerry® 6 – along with the recent introduction of BlackBerry® Widgets – shows the way the platform is changing and growing for web developers looking to make rich, compelling apps that have the same look, feel and features as a native application.

HTML5 contains lots of new elements for developers to leverage, including elements to help make web content easier to index and optimize for search engines; elements that enable you to play media in your application; elements that let you take it offline; and a plethora of other features to make your application a thing of beauty. The BlackBerry implementation of WebKit and HTML5 will be no different – going forward with the BlackBerry 6 Browser and Widget engines, you’ll be able to leverage all of the same elements that you would for any desktop browsers with virtually no limitations.

These elements include:

• Canvas
• Parsing
• Video
• Audio
• Forms (partial implementation)
• Geolocation
• Workers
• Timers

With the added capabilities of HTML5 to the BlackBerry® Browser, web developers will be able to create content that they would have never been able to run through the mobile web before – compelling games, interactive media, 3D graphics, and the list goes on. HTML5 looks to be an invaluable tool for web developers around the world!

Here’s a few blogs and websites with some examples of the compelling features of HTML5:

• HTML5Demos
• HTML5Gallery
• YouTube
• VisionWidget

Please feel free to post your HTML5 experiences so far, and share with us how you plan to leverage this exciting new technology!

]]> http://devblog.blackberry.com/2010/08/blackberry-html5/feed/ 5 Prosanta B.