It’s a disappointing day when you find a single serving site that generates the comprehensive syntax for the border-radius property, aptly named border-radius.com. Because not all browsers (and browser versions) support the latest and greatest things CSS3 can do, one has to resort to browser targeting yet again. Only this time, one browser’s syntax is different from another browser’s, and becomes a chore to write CSS for each.
There’s a pretty obvious explanation for the existence of browser-specific properties from SitePoint:
Vendors—browser makers—are free to implement extensions to the CSS specifications that, in most cases, are proprietary to their browser. They may do this for a number of reasons, such as adding new features for users, or for experiments and debugging. Most often, though, the extensions are used to release and test browser features that have been developed in the preparation of W3C drafts that have not yet reached Candidate Recommendation status—the extensions allow these new properties to be widely tested before they become available as standard CSS properties.
So for starters, the browser-specific CSS has prefixes like:
-moz: Gecko-based browsers like Firefox-webkit: WebKit-based browsers like Safari and Chrome-ms: Internet Explorer-o: Opera-khtml: Konqueror
(The complete table is listed at the W3C.) That’s fine, but what I don’t get is why the syntax following the prefix isn’t always the same as the standard CSS syntax. The border-radius property is just one example, which is peanuts compared to the gradients syntax. Compare:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,10,148)),
color-stop(1, rgb(45,58,246))
)
-moz-linear-gradient(
center bottom,
rgb(0,10,148) 0%,
rgb(45,58,246) 100%
)
Sure, we can turn to generators like WestCiv’s and Damien Galarza’s—and we’ll probably be increasingly dependent on them in the future as CSS capabilities and their corresponding syntaxes grow more complex. But why must browser vendors insist on that when it only multiplies the code and maintenance necessary? Does it have to do with the way their engines parse the code, or something less significant?
And by jQuery-esque I mean easy! The premise of Jetpack, Mozilla Labs’s latest creation, is that anybody who knows HTML, CSS and JavaScript can create Firefox add-ons.
It takes 80 lines of code to block ads on websites as shown in the demo above, and 14 lines to edit images from within Firefox. Granted, it just sends the data to Pixlr which does all the hard work, but lowering the obstacles to develop some fairly nifty scripts is a commendable effort, just as what jQuery did with JavaScript, Sass with CSS, and HAML with HTML. It’s made even more compelling with Bespin, Mozilla’s HTML5-powered web-based code editor.
Perhaps I’m still in a “standardize everything” mood, or envy this new doodad since I’m now using Chrome as my default browser, but don’t you sometimes wish all browsers could do this? Do the same set of things? We’re getting to a point where the level of HTML and CSS support is the same across every browser, so it makes me wonder what’s the next step for the idea of cross-browser compatibility.
It will probably depend on what the web browser means to its various makers. Google has unveiled the Chrome OS, which will run on a specialized version of Chrome. Opera is focused on its “web servers for everyone” feature in Opera Unite. (And Internet Explorer is playing catch-up, mostly.) Browsers are basically the gateways to the whole Internet, but they’ve become more ambitious than that and their vendors will attend to those ventures first before convening to create new cross-platform goodness.
All the new browser updates seem to be coming out at the same time, which definitely keeps the competition interesting. But while you continue to scoff at IE, gush over Firefox, and smile nervously at Opera, Chrome, and Safari, have you heard that ordinary computer users don’t actually know what a web browser is? Let’s get to that in a bit…
Internet Explorer is the “best”
IE8 Comparison (comic by Brad Colbow)
I think people around the world made a collective ROFLMAO when the infamous IE8 browser comparison chart came out. I reserved any biased judgment when I first saw it, but oh my, Microsoft sure knows how to put its best features forward.
That’s not all it’s doing to promote the latest version of Internet Exploder, though. There’s a treasure hunt for $10,000 buried “online” (you have to use IE8 to find it, of course), and a donation of meals to charity (per IE8 download, of course).
Firefox has a new icon
New Firefox logo
Firefox is definitely the darling of the browser lot, so even a branding update—the fire, the fox, and the glossy globe are still intact and recognizable—is under magnified scrutiny.
Of course that’s not all there is to the next major release of Firefox, but I’m just glad they also care about their image. Lots of open source products pay little attention to the designery stuff. Firefox knows how to stay fresh and accessible to its audience without trying too hard (cough, see previous browser, cough).
Opera unites
Opera continues to innovate with its upcoming release, including an interface refresh from the same person who brought the Firefox logo to life. But it doesn’t stop there. Opera Unite cuts off the middleman for sharing photos, music, and all other kinds of files by turning the browser into a web server.
It’s not for everybody, but it’s a fascinating idea. An interesting twist to the “web as platform” concept. First there was web-based equivalents of desktop apps, as well as full-blown desktop interfaces on the web, then it was cloud computing, then it was the real-time web, then we have this. The jury’s still out on whether this will actually take off—considering Opera’s level of influence compared to the fox and the blue “e”—but any venture into Web 3.0 is a welcome effort. Here’s hoping we jump into it very soon.
But what is a web browser?
But apparently we can’t jump just yet. According to this discovery by The Next Web, the average internet user can’t tell the difference between a search engine and a browser, about 92% of those interviewed. Ironically, it was Google conducting the survey, and the final question was whether people knew that it had its own web browser.
Although Internet Explorer and Firefox were mentioned, people still didn’t know where the Web ended and the software began. It’s all just a blur of computer terms, which, at the end of the day, help them “find stuff”.
Knowing this, shouldn’t web browsers be scrambling to teach its users how the Internet works, including typing URLs into the address bar, and not just relying solely on search engines? Or should they just give up on the nth incarnation of the Browser Wars?
Chrome Experiments is a cool new website rolled out by Google to promote its browser Chrome (which is out with version 2.0 beta, by the way) and to demonstrate the power and fun that can be had with the awesomeness of JavaScript and the browser chrome.
Emphasis on the small letter c. See how the site is named Chrome and not Google Chrome (although they effectively became synonymous because it’s Google)? This means most of the neat tricks can be accomplished on other modern browsers too. That is, after all, the idea of “moving to the cloud”—your web product must work in every browser and any other device possible. Of course, the idea is to promote Chrome and not really every other browser and device out there, but Google gets that that’s not the only goal. The experiments are best experienced while using Chrome and not the other browsers.
A short update on other browsers
Speaking of other browsers, let’s take a look at what they’ve been up to lately:
Now let’s go back to Chrome. Seems to me that this Chrome Experiments campaign is the most engaging one of its kind to come out in a long while. From real-time information visualization to graphics and sound rendering to games (both the classics and ones with a browser-based twist), these demos are just a delight to try out. See the compilation video below:
A short rant on other browser campaigns (yes, IE6)
Now, a note on “browser campaigns”. it’s like every other day I see a new site, piece of code, or banner that screams death to IE6! exclamation point! That’s it. Hardly any effort to get Microsoft and other companies to listen, it’s just screaming. I feel like IE6 is now an ace up one’s marketing sleeve, and no longer a real headache that web designers have to deal with everyday. Chrome Experiments makes more sense right now.
What Chrome’s made of
All the browsers claim they’ve got the fastest JavaScript engine of all, and maybe Chrome wants to put its money where its mouth is. It needs to; Google probably expected a better adoption rate for its browser because it’s Google, but it hasn’t happened (yet?). And while it’s nothing close to Spread Firefox or Mozilla Labs, it’s still a solid effort.
We do practically everything on a web browser these days. That’s how Google built itself from the ground. That’s why they rethought how browsers were made and came out with Chrome. Time to show what it’s really made of.
Some chunks of good browser-related news at the turn of the new year: Firefox browser usage is more than 20% now, while Internet Explorer, especially IE6, is declining—forcibly and otherwise!
Firefox market shares are rise, IE shares decline
Browser market share from October to December 2008
For the first time ever, Net Applications is reporting that Mozilla Firefox market shares passed 20% while Microsoft Internet Explorer dropped below 70%. Four major factors are said to explain Firefox growth, from the US elections to longer weekends/holidays, and higher unemployment—all US-centric factors.
Browser version market share December 2008
Here’s a chart by browser version. IE7 remains the dominant browser in the market, while IE6 is still at number 2, having almost the same percentage as all Firefox versions combined. But it has declined from the 21-22% range in the last quarter of 2008.
Google Chrome barely leaves a dent at 1%, but surpasses Opera at 0.7%.
Google urges IE6 users to upgrade
Get faster Gmail notice in IE6 (image courtesy of Ars Technica)
According to TG Daily, Google’s Gmail is now sporting a message specifically for IE6 users to upgrade and “get faster Gmail”.
The link leads to a page that promotes Chrome and Firefox 3. “Browsers are getting faster and better at running web applications like Google Mail that use browser technology to its limits,” the page reads. “In order to get the best experience possible and make Google Mail run an average of twice as fast, we suggest that you upgrade your browser to one of the fastest Google Mail supported browsers that work on Windows.” The page offers direct download links for Firefox 3 and Chrome. IE7 and Apple’s Safari are listed as supported Gmail browsers.
Several modern browsers are listed in the linked page, and unfortunately Opera is no longer qualified on that list. At least Google is trying to be fair by mentioning competitors to its own browser, Chrome. More importantly, at least it realizes that the browser share for such an old and run-down browser are alarmingly high. Looks like it’s getting costly to maintain backwards compatibility for JavaScript-intensive web applications like Gmail.
This is not the first time that a large company is forcing its hand. Apple’s MobileMe recommends only 2 browsers: Safari, which it owns, and Firefox.
There is hope!
With the combination of natural factors and some nudging from the big, influential companies like Google and Apple, the obsolete browser that is IE6 might just retire sooner than we expect, sooner than never.
Between Apple computers gaining popularity and Google remaining just as powerful, their influence on which becomes the default browser in controlled environments will be needed to level the playing field, ultimately pushing the capabilities of web browsers forward.
Opera is at it again: they’ve announced a project called MAMA, short for “Metadata Analysis and Mining Application”, which figures out what different websites are using to construct and run their pages.
They used “3,509,180 URLs in 3,011,668 domains, from 217 identified countries”. How I wonder what Google would do in their shoes given their crawling prowess. Still, I commend Opera (again) for initiating a project like this. They continue to impress.
It will be tough digesting all the data they’ve gathered so for now, read up on the Key findings, which tackle 8 main sections. Here are some statistics I clipped from that article:
more
Philipp Lensen of Google Blogoscope shares a comic about Google’s open source web browser called Chrome. TechCrunch has posted leaked screenshots too. I suggest you read all those links as they explain very nicely the many, many features Google Chrome has, then try it out for yourself.
With all the revolutionary new features planned for this web browser, do the rest of the factions of the more-than-a-decade-long Browser Wars stand a chance? Let me run through several points that may or may not convince you that the ‘Wars are over:
Reworking web browser concepts
“Chrome”. Google Chrome is so named because the developers wanted to weed out all the unnecessary interface elements that get in the way of an optimal user experience. Google is pretty good at this—see Gmail.
Omnibox. I’ve complained about this before. We have too many blank bars in our browsers, why not stick to just one? Combining the ambitiousness of Firefox 3’s “AwesomeBar”, search keyword shortcuts, and Google’s mighty search engine, users might not need any other button in the toolbar.
Independent tabs and sandboxing. Chrome runs tabs as separate processes to isolate any unruly behavior, whether it’s a memory leak or malicious code.
Using Google’s assets
Webpage testing. Google will use its large—an understatement—collection of crawled websites to test if their browser is working properly on them. It will prioritize by popularity to be efficient in testing the millions, billions, and trillions of pages, of course.
Search and anti-phishing. I’ve mentioned the Omnibox. Google will incorporate its search into the singular browser bar to make finding websites a breeze. (I think AwesomeBar sounds better though.) And since Google is a pretty good keeper of blacklisted sites, Chrome also detects when a website is potentially harmful.
Google Gears. Another obvious move. Google Gears was created to make web browsing more responsive and efficient by linking together the online and offline, so it’s mandatory for Chrome to incorporate this feature.
Inspired by the best of other worlds
WebKit. WebKit is possibly the fastest and smartest browser rendering engine out there. It powers Safari and several Mac OS X applications, as well as Google Android and now Google Chrome.
Privacy Mode. Microsoft is set to introduce a history-free, cookie-free browsing feature in Internet Explorer 8 called InPrivate (though everyone else calls it “porn mode”). Now Google follows suit with “incognito browsing”.
Better JavaScript performance. Mozilla recently announced it was able to dramatically improve JavaScript loading by up to 37.5 times, a feature coming to Firefox 3.1. (Another comparable feature to Firefox is the previously-mentioned Omnibox.)
Speed Dial. Opera has sported this feature since version 9.2.
On to the questions…
Why? My answer? Because they can. Google’s answer? Watch it here. Google is the epitome of a Web 2.0 company, having revolutionized search, then e-mail, then every other activity that can be done online. It rehashed old elements of the Internet, and doing so on a browser feels like a natural extension of their work.
Does Google Chrome comply with Web Standards? Since Chrome is going to run on WebKit, can we trust that we won’t have to debug for yet another browser? Unfortunately, it failed the ACID3 test (which, on the other hand, Safari passed in version 3.2.1).
Will Google end its “search bar relationship” with Firefox and other browsers? Now that Google has its own browser, does it still need to push for the search bar feature in browsers like Firefox, IE, and Safari? Probably not. But most users will still use Google—the search engine—one way or the other. And if you’ve watched the video linked above, Sergey Brin says the general goal is to get people to use “alternative” browsers such as Firefox. (Of course, assuming that Firefox and Chrome remain minor players in the game.)
Is this a milestone in web browser history? Put another way, is this the best thing since tabbed browsing? I can’t really answer a resounding yes. Web browsers must pay attention to detail and reduce bloat—it’s a difficult balance. Google Chrome is a lean browser that contains only a few notable features. We’ll have to wait for a few more releases to see where they’re going with this.
Do you trust Google to browse in its browser? Between a proof-of-concept security flaw discovered hours after the browser’s release and a questionable (but recently modified) license agreement, are you confident in using yet another Google product? This is perhaps the biggest question of all.
A few weeks ago Google announced that it can now extract and index textual content from Adobe Flash files. We all know that creating websites in pure Flash is a big no-no if you care about being found through search engines. So is there nothing left that’s stopping web designers from switching from plain old HTML and CSS to rich interactive Flash? I have yet to find somebody who agrees with a resounding “yes!”
Rand Fishkin, CEO of SEOmoz, believes that this new development isn’t compelling enough to start building sites with Flash.
Flash content is fundamentally different from HTML on webpage URLs and being able to parse links in the Flash code and text snippets does not make Flash search-engine friendly. I think it’s great that Google’s digging deeper into Flash, but I don’t believe web developers should be any less wary than they’ve been in the past about Flash-based websites or Flash-embedded content.
If anything, I commend Google for continuing to convince web designers and search engine marketers alike to embrace web standards by pushing for the best practices in coding websites. Of course it’s the most logical thing both parties: search spiders need to parse content properly so that they can index it, and a well-formed webpage makes this possible; webmasters need not wade through nested tables and unnecessary tag soup when there’s a better way. And Google should, since it’s way more influential than Opera or any other web company out there.
However, Google’s efforts to read Flash still seem to be in the premature stages. Typical Google, they always release their products in beta without being wary of the consequences.
By consequences I mean clients who are now running around telling their web designers to create animated intros and the extravagant interfaces for their websites. I can’t really shoot down this little achievement by Google—except that it’s getting scarily smarter everyday and should try to have more features than issues when they launch a product.
More importantly, I can only continue to condemn those who misuse Flash without any regard for accessibility, much less usability, whatsoever.
The Opera Web Standards Curriculum is a comprehensive online course that teaches you standards-based web design. This includes not only coding in the web’s foundational languages, HTML, CSS, Javascript, but also design theory.
One of the authors, Chris Heilmann, describes it as “probably the most thorough and up-to-date web standards curriculum on the web”. He writes:
During the whole course the main focus is on usability, accessibility and writing maintainable code. We deliberately left out browser hacks and backward facing solutions and build on the ideas of progressive enhancement and unobtrusive JavaScript.
I must also point out that WSC is part of Opera Education, an initiative that pushes for web standards awareness and enthusiasm for the internet industry, specifically in schools and universities. I think it’s important for these two parties—browser software makers and educational institutions—to work together rather than apart in developing the Web. In this regard, Molly Holzschlag believes the course is an A+:
The impressive aspect of the curriculum as it is now is that it’s comprehensive, including foundational topics such as Internet and Web history and evolution. Educators understand that history provides context for real learning. Sadly, this is an area often not available in books and online tutorials because readers typically want to dive right in and learn a given technique.
It’s difficult to find a course that focuses solely on creating things through the internet. It’s almost always integrated with either graphic design (see MTV Engine Room) or computer science. Because of this, there is no focus on employing the best practices in creating beautiful, functional websites. And it will continue to be that way—all the way into the workplace—without those two entities joining forces.
This is why I continue to admire Opera. (Mozilla does, too.) It pushes projects that are interesting and beneficial to the web community. Here’s another example: Opera Dragonfly. Firefox’s FireBug wasn’t created by Mozilla (although Safari’s Debugger is a native feature).
And unlike other browser vendors out there, Opera shows it cares about web standards not by saying but by doing.
You can never run out of things to talk about when it comes to cascading style sheets or CSS, but lately there have been developments that are more than worth your while. CSS3 is slowly but surely becoming mainstream thanks to several browser updates, while the gurus continue to think up smart ways to code those stylesheets.
Update: Ajaxian blogs that WebKit will support CSS variables. Amazing news that has come out just in time with this blog post. I’ve listed it below as well.
Tools and Frameworks
I’m not going to mention every imaginable CSS framework and piece of software out there, but these are worth looking at.
Stylizer: Skybound Software comes out with perhaps one of the most interesting (read: intuitive) CSS editors to date. It helps that it has a free version with a 14-day trial for its Ultimate counterpart.
YAML: Smashing Magazine shows how it is possible to create a flexible layout using Dirk Jesse’s HTML/CSS framework called YAML. The YAML Builder is an excellent plus.
CSS Cacheer: Shaun Inman releases a mini-application for CSS caching.
Best Practices
Here are some great nuggets of advice that will help guide you when writing your own CSS.
Font Stacks: The Unit Interactive blog lists various scenarios in which you should order your CSS font stacks. A PDF file is available for download, too.
Fun With Floating in the Grid: Devlounge recommends several practical CSS classes and layout techniques to achieve hassle-free floats and grids.
Performance Testing: jpsykes reports how the different browsers fare using different CSS selectors and attributes.
Faux Absolute Positioning: A List Apart comes up with a new layout technique that does away with hacks.
Nesting Specifics: DZone goes into the nuances of CSS selector specificity.
CSS3 and Beyond
If you’re still hesitant to use CSS3, you might change your mind now that some of the most popular browsers are slowly incorporating support for it.
Firefox 3: Killian Valkhof and David Baron write about support for several CSS3 features in the latest version of Mozilla Firefox. These include ligatures, kerning, font-size-adjust, inline-block/inline-table, and even text-shadow—coming in Firefox 3.1. The complete list is on Mozilla’s official page.
Opera 9.5: The Opera Developer Community discusses the CSS3 features its own browser supports, namely, @media, text-shadow, opacity, HSL values, overflow-x/overflow-y, :firstof-type, :nthchild, -o-background-size. Not to mention HTML 5 elements and SVG. Don’t forget to check out Opera’s debugging tool, Dragonfly.
Safari 3 has been out for a while now, but it’s Internet Explorer that we’re really waiting for. Unfortunately, IE8 will continue to lag behind.
Qualified Selectors: Shaun Inman proposes a different breed of CSS selectors.
CSS Variables: David Hyatt announces that WebKit now supports CSS variables as documented here.
