Skip navigation
Help

Safari

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.
Original author: 
Peter Bright

Aurich Lawson (with apologies to Bill Watterson)

Google announced today that it is forking the WebKit rendering engine on which its Chrome browser is based. The company is naming its new engine "Blink."

The WebKit project was started by Apple in 2001, itself a fork of a rendering engine called KHTML. The project includes a core rendering engine for handling HTML and CSS (WebCore), a JavaScript engine (JavaScriptCore), and a high-level API for embedding it into browsers (WebKit).

Though known widely as "WebKit," Google Chrome has used only WebCore since its launch in late 2008. Apple's Safari originally used the WebKit wrapper and now uses its successor, WebKit2. Many other browsers use varying amounts of the WebKit project, including the Symbian S60 browser, the BlackBerry browser, the webOS browser, and the Android browser.

Read 10 remaining paragraphs | Comments

0
Your rating: None

Padlock Macbook

Before Apple's browser was released as Safari, it was known as "Freedom" — and it masqueraded as both Internet Explorer and a Mozilla browser. Don Melton, who started the original Safari project, describes the secrecy under which his team operated, both physically on Apple's campus and virtually as he devised ways to hide Safari's user agent information out of fear it would be connected to Apple's block of IP addresses, then to release it a few days before the announcement. "I spent the days before [Safari's] debut nervous and losing sleep," he writes, "as I combed the Internet for server logs."

Continue reading…

0
Your rating: None

An image displayed on a computer after it was successfully commandeered by Pinkie Pie during the first Pwnium competition in March.

Dan Goodin

A hacker who goes by "Pinkie Pie" has once again subverted the security of Google's Chrome browser, a feat that fetched him a $60,000 prize and resulted in a security update to fix underlying vulnerabilities.

Ars readers may recall Pinkie Pie from earlier this year, when he pierced Chrome's vaunted security defenses at the first installment of Pwnium, a Google-sponsored contest that offered $1 million in prizes to people who successfully hacked the browser. At the time a little-known reverse engineer of just 19 years, Pinkie Pie stitched together at least six different bug exploits to bypass an elaborate defense perimeter designed by an army of some of the best software engineers in the world.

At the second installment of Pwnium, which wrapped up on Tuesday at the Hack in the Box 2012 security conference in Kuala Lumpur, Pinkie Pie did it again. This time, his attack exploited two vulnerabilities. The first, against Scalable Vector Graphics functions in Chrome's WebKit browser engine, allowed him to compromise the renderer process, according to a synopsis provided by Google software engineer Chris Evans.

Read 5 remaining paragraphs | Comments

0
Your rating: None

A handful of the many screens your site needs to handle. Photo: Ariel Zambelich/Wired.com

Responsive design means making your website readable no matter what screen it might be on. In the words of karate master Bruce Lee, “Don’t get set into one form, adapt it and build your own, and let it grow, be like water.” Lee may have been talking about your mind, but his words apply just as well to your website. To paraphrase the rest of that quote, you put water into a cup, it becomes the cup; so, you put your content on a tablet, it becomes the tablet; you put it on a TV, it becomes the TV.”

On a more practical level, achieving a Bruce Lee-like command of the fluid web means ditching the pixels and points for flexible units like ems or percentages. There’s a lot more to responsive design than just fluid layouts, but it’s definitely a key part of the process.

Curiously, when it comes time to use the other universal element of responsive design — the @media query that applies the actual responsive design — most of us revert right back to pixels with something like @media all and (min-width: 500px) {}. It seems logical; after all, you’re trying to fit your content into a window with specific dimensions, so why not use pixels?

Certainly you can, and most sites we’ve seen up to this point use pixels for the actual media query breakpoints, but it’s worth noting that you can use ems here as well.

Lyza Gardner over at Cloud Four recently posted a look at why Cloud Four’s new responsive design uses ems in its media queries. Here’s her reasoning for Cloud Four’s em-based approach:

Folks who design for traditional reading media — where the content really is king — don’t center design decisions around the absolute width of content-holding elements so much as around the optimal line lengths for the content they’re flowing. There are some tried-and-true numbers one can shoot for that make for the “right” number of letters (and thus words) per line for comfortable human reading.

Thus actual column width is a function of font size and ems-per-line.

The rest of the post walks through how Cloud Four used em-based media queries to create a better navigation experience on their site. Some of the advantages may not apply to every responsive design, but there is one additional benefit that works nearly everywhere — em-based media queries mean that your site will handle user zooming much better, applying media queries instead of allowing content to overflow its container.

But perhaps the best part of an em-based approach is that it seems to work in nearly every web browser. Cloud Four’s post doesn’t get into the specifics of their browser testing so I fired up a couple of virtual machines and tested their site and my own simplified demo page in every major browser.

According to my testing, em-based media queries work properly in all OS X browsers. (I tested the latest versions of Safari, Firefox, Chrome and Opera.) Only Firefox and Opera apply media queries on zoom, though. (Chrome and Safari need a page refresh before the query is applied.)

On Windows 7 Firefox, Opera and Chrome behave the same way they do on OS X. IE 9 also worked fine and, like Firefox and Opera, applies media queries when zooming without needing a page refresh. Judging by the comments on the Cloud Four blog, Chrome on Linux may have some issues, but in my testing Firefox and Chrome on Fedora worked as expected.

All the mobile browsers I tested on Android worked as well (Firefox, Chrome, Opera Mini and the default Android browser). On iOS Mobile Safari applies em-based queries as you would expect.

In the end you certainly don’t need to use em-based media queries. As many sites out there demonstrate, pixel-based queries work. At least for now. However, as a wider range of screen sizes begin to access the web switching to em-based queries may put you ahead of the game. Em-based queries mean addressing the content-width rather than just the screen width and that feels like a more future-friendly approach.

0
Your rating: None


The Google Maps API and Chrome DevTools

Learn how the Chrome Developer Tools can make development with the Maps API faster and easier. If you'd like to know more, see the links below. Chrome DevTools documentation: goo.gl Google Maps API V3 reference: goo.gl For more DevTools screencasts than you can handle: www.html5rocks.com From the jQuery Docs: "jQuery() — which can also be written as $() — searches through the DOM for any matching elements and *creates a new jQuery object that references these elements*." api.jquery.com
From:
GoogleDevelopers
Views:
4288

116
ratings
Time:
12:16
More in
Science & Technology

0
Your rating: None



Less than 24 hours after a Russian hacker pocketed $60,000 by exploiting a previously unknown critical vulnerability in Google Chrome, company developers released an update removing the security threat.

The quick turnaround underscores one of the key advantages of Google's open-source browser: the speed in which highly complex bugs are fixed and updates are pushed out to users. By contrast, Microsoft, which must run updates through a battery of rigorous quality-assurance tests, often takes months to fix bugs of similar complexity.

Read the rest of this article...

Read the comments on this post

0
Your rating: None

Steven Wittens' Acko.net features an impressive and unique 3-D header.

It’s one thing to hear about the powerful new 3-D tools coming to CSS, but it’s a very different thing to actually see them used creatively in the wild. Developer Steven Wittens recently did just that when he redesigned his Acko.net website. Wittens turned to the 3-D features in CSS 3 — with a little JavaScript help — to create a visually stunning 3-D page header.

To see the 3-D in action you’ll need to be using a WebKit browser (Safari or Chrome), though the site nicely degrades to a still very readable state for Firefox and other browsers that don’t yet support the 3-D rules coming to CSS. To get the full 3-D effect be sure to scroll down the page.

Wittens has a blog post detailing exactly how he pulled off the effects and he’s even built a 3-D editor you can play around with. Of the initial inspiration Wittens writes:

This idea started with an accidental discovery: if you put a CSS perspective on a scrollable <DIV>, then 3-D elements inside that <DIV> will retain their perspective while you scroll. This results in smooth, native parallax effects, and makes objects jump out of the page, particularly when using an analog input device with inertial scrolling.

This raises the obvious question: how far can you take it? Of course, this only works on WebKit browsers, who currently have the only CSS 3-D implementation out of beta, so it’s not a viable strategy by itself yet. IE10 and Firefox will be the next browsers to offer it.

To work around some of CSS limitations in the browsers, Wittens turned to Three.js, a JavaScript 3-D engine written by Ricardo Cabello, better known as Mr. Doob. For those interested in the code behind some of the transformation happening on Acko.net, Wittens has promised to release it via GitHub in the near future.

0
Your rating: None