All posts tagged ‘chrome’

File Under: Browsers

Google Readies Chrome for Windows 8 Metro

Google is hard at work on a version of its Chrome browser that will work with Windows 8′s Metro environment. The Chromium blog recently announced that the next build of Chrome’s dev channel will run in both the Metro and desktop environments of Windows 8.

If you’d like to try it out a version of Chrome on Windows 8 once it’s available — most likely later today or perhaps over the weekend — you’ll need to switch over to the Chrome dev channel.

While Chrome will run in Windows 8′s Metro interface on desktop PCs, Google faces the same Microsoft platform restrictions Mozilla has spoken out against and as of now there will be no version of Chrome for WinRT, the version of Windows 8 designed to run on ARM processors.

Since WinRT is the most likely candidate for tablets that means any Windows 8 tablets will be Chrome-free.

Google has stopped short of being as vocal as Mozilla — which has called WinRT “a return to the digital dark ages. The Chromium blog merely notes that “Microsoft is not allowing browsers other than Internet Explorer on the platform,” though there is a link in that sentence to Mozilla’s original post decrying Microsoft’s restrictions.

The crux of Mozilla’s gripe — which Google seems to be tacitly endorsing as well — is that in Windows RT Microsoft gives its own Internet Explorer access to special APIs other web browsers can’t use.

Mozilla’s Asa Dotzler has previously pointed out that at least part of what makes this different than Apple’s iOS — which imposes similar restrictions on software — is that Microsoft still has binding agreements with the EU about browser choice on Windows, and Windows RT is still Windows.

It’s possible that Microsoft will change its mind about third-party web browsers on WinRT (or be legally compelled to change its mind) before any Windows 8 tablets arrive, but in the mean time at least you’ll soon be able to use Chrome with Windows 8 on desktop machines.

File Under: Browsers

Google Chrome Speeds Up Fancy CSS Filter Effects

CSS filters offer web developers some very powerful tools, powerful enough that it wouldn’t be too hard to create a web app capable of producing the kind of effect-laden photos popularized by Instagram. There’s just one problem: CSS Filters can be hard on the CPU.

Few things on the web get your PC’s fan spinning quite like CSS Filters — just give Google’s abstract painting demo page a try to see for yourself. Filters alone can send your fan spinning, but combine them with some CSS transitions or animations and you’ve got a recipe for battery draining excess.

That, combined with the fact that so far they only work in WebKit browsers, means right now you should use CSS Filters with caution.

Fortunately the roaring sound of your fan may soon be a thing of the past, at least for Google Chrome users. The Chromium blog reports that CSS Filters with GPU acceleration have landed in Chromium. It will be some time before the acceleration makes its way into the stable version of Google Chrome, but it is coming and that’s good news for the future of CSS Filters. Stephen White, a Software Engineer at the Chromium project, writes, “GPU acceleration of these filters brings their performance to the point where they can be used for animating elements in conjunction with CSS animations powered by -webkit-transition or even HTML5 video tags.”

It might be a while yet before Adobe launches a web-based version of its Premiere video editor, but expect other browsers to follow Chrome’s lead in supporting and speeding up CSS Filters.

It’s worth noting that, while the Instagram use case tends to get all the press, CSS Filters can do a lot more than just sepia toning images. In fact potential uses go far beyond just images or video. For example, CSS Filters could be used to blur backgrounds (or make them black and white) thus highlighting foreground content in online diagrams, charts or educational apps. CSS Filters could replace image sprites in navigation elements (less to download means faster page load times) and could also be used in conjunction with some animation to let users know that something on a page has changed.

For more info on CSS Filters, check out our earlier coverage and have a look at the HTML5Rocks site, which offers a nice overview of CSS Filters along with some example code.

File Under: Browsers

Chrome Offers Tabs to Go With New Tab-Syncing Features

Google has released an update for its Chrome web browser that adds tab syncing to Chrome’s list of tricks. Using the latest version of Chrome you can now access the tabs open on your desktop at home while you’re out and about with your Android phone. The syncing should work with any device that can run the latest version of Google Chrome.

Current Chrome users will be automatically updated to the latest version. If you’d like to try out the latest version of Chrome head over to the download page.

The tab-syncing feature was already available to those using the Chrome beta channel, but now it’s available in a more stable form.

As with the rest of Chrome’s syncing features, you’ll need to be signed into your Google account in Chrome for it to work. To give it a try just sign in and look for the Other Devices menu on Chrome’s New Tab page. Click that button and you’ll see a list of every open tab on all the devices signed into that Google account.

While tab syncing is handy if you move between home and work computers, it really shines when going from desktop to mobile. If you’ve got an Android phone with the new Chrome beta installed, you’ll now be able to access any open tab on your desktop machine no matter where you are. The reverse is also very helpful, especially for those times when you encounter a mobile-unfriendly page — just open it later when you get home.

Note that Chrome users will be automatically updated to the latest stable version of the browser over the next few days, but the Chrome Blog reports that the tab-syncing features “will be rolled out more gradually over the coming weeks.” If you don’t have access just yet, you’ll have to get by with this video from Google until tab syncing is enabled for your account.

File Under: CSS

HTML5 Offers ‘Scoped’ CSS for Precision Styling

HTML5′s controversial “scoped” style attribute is now supported in the latest Canary builds of Google’s Chrome web browser and Mozilla may eventually add support to Firefox as well.

HTML5 adds an attribute, scoped, to the style element which limits the scope of the styles contained within the tag. Google’s Alex Danilo has a good introduction to scoped over at HTML5Rocks. Essentially scoped allows you to nest styles within HTML and those styles will only apply to any child elements. The easiest way to understand scoped is to see it in action:

<html lang="en">
    <head>
        <style>
            p { color: white; }
        </style>
    </head>
    <body>
        <p>The text in this will be white</p>
        <div>
            <style scoped>
                p { color: red; }
            </style>
            <p>The text in this paragraph will be red</p>
        </div>
        <p>And we're back to white text</p>
    </body>
</html>

In this example the first style declaration applies to all the p tags on the page while the scoped style declaration applies only to the p tags within that scope (in this case all the p tags within our div tag). The scope rule has a higher specificity so it overrides the other rule and makes the middle text red.

It seems handy at first glance, but scoped can be a step backward if you overuse it. It’s akin to using inline styles, a long-frowned-upon practice that means mingling content and presentation. Indeed, scoped should be used sparingly; it will cause you pain if you just start throwing it around.

That said, there are some cases where scoped makes sense and makes developers’ lives easier. If you’re pulling in content from some outside source and displaying it on your page, styles and all, scoped can help you avoid style conflicts. Similarly if you’re building a widget designed to be embedded elsewhere scoped ensures your styles won’t affect the rest of the page.

Another use case that’s worth mentioning is within content management systems. Developer Arley McBlain recently covered the advantages of the scoped attribute for handling CMS content in some depth over at CSS Tricks. McBlain even has a demo WordPress site that uses scoped to style content on a per-post basis.

The big catch to using scoped right now is that it doesn’t work anywhere but Chrome 19+. Worse, because other browsers do understand the style element, they’ll apply your styles, but they’ll apply them globally. In other words, don’t use scoped without a polyfill like the JQuery Scoped CSS Plugin.

Also note that to test out Chrome’s scoped support you’ll need to be using Chrome 19 and then head to chrome://flags. Look for the “Enable <style scoped>” towards the end of the list and click “Enable.” Restart the browser and scoped should work.

File Under: Browsers

Google Cloud Print, Now With PDF Power

Printing to Android. Image: Google

Google has updated its Cloud Print service with a couple of new features aimed at making it easier to move documents from your phone or tablet to a dead tree near you.

Cloud Print, which was first introduced in 2010, is designed to make it easy to print files from Android devices (and Chromebooks). The latest version adds support for printing to a local FedEx office as well as integration with some new Canon printers that will natively support Cloud Print.

Near the bottom of Google’s announcement is another feature that’s far more useful: “printing” to your Android device. Provided you’ve installed the latest Chrome for Android Beta on your phone and are signed in to your Google account, your Android device will now appear as a destination printer in the Cloud Print dialog. Select your device and Cloud Print will send a PDF to your phone, which will then automatically open it in Chrome for Android.

While you can accomplish something similar using services like Dropbox to sync PDFs to your phone (or iTunes if you’re an iOS user), Cloud Print’s print to Android is one of the easiest, fastest ways I’ve seen to get just about any file or webpage to a phone.

The only catch is that, as with the Chrome for Android beta, you’ll need to have Android 4 or better installed on your phone or tablet.