-
200803 Jul
Posted in News
The beauty about working on a site that is specifically targeted for one the most popular mobile devices around (aka the iPhone) is that the vendor with the least CSS support (*cough* IE *cough*) doesn’t exist on it (purely because of its inadequate CSS support in this case).
Depending on the browser matrix you have to work with and the platforms you’re coding for, utilizing Level 3 (and some Level 2.1 in IE’s case) selectors simply isn’t realistic, although properties on the other hand can be used to progressively enhance an elements appearance in this particular context.
But what if a site was created to serve one specific handheld device in which Safari (along with its sufficient CSS3 support) was the default browser? Well, this is what Facebook has done with it’s iPhone-specifc UI. By peaking into their stylesheet you’ll notice that they’re implementing a number of Level 3 selectors, properties and property value additions. They include the:-
- User-select property (Webkit prefix)
- Negation Pseudo-class Selector
- RGBA color values (in conjunction with ‘background-color’ and ‘text-shadow’ properties
- Text Overflow property
- Box-sizing property (including Mozilla and Webkit prefixes)
- Border-image property (Webkit prefix)
- Text-shadow property
- Border-radius property
- Multiple Backgrounds
- Opacity
For comedy value, try viewing the site in IE.
Having this sort of free reign on selectors and properties is an interface developers dream in this day and age, and hopefully in a couple of years we’ll be able to structure a stylesheet with some similarly advanced features.
You can skip to the end and leave a response.
-
Comments
-
01.
I finished my website targetting Firefox 3 & Safari 3.1.
HTML5/CSS3, no divs, no ids, no classes- none.
Is this the sort of thing you’re looking for?
http://camendesign.com -
02.
I’m not sure that going down the ‘optimised for browser X’ path is one we want to be going back to after working so hard for standards.
-
03.
Steve says:Comment » July 3rd, 2008 at 5:16 pm
Nice! I logged in with Safari (PC) and the interface is quite nice, and obviously very iPhone-ish.
I took you up on the try IE line… IE6 looked horrible, esp. the Login button (a < IE8 button bug on XP), but once logged in, after the multiple JS errors, the site was completely unusable (I couldn’t even logout!)
Must admit, it is nice to see a site that can actually take advantage of new CSS features… IE has held the web back for soooo long!
Best of all, the iPhone version of facebook is void of all the horrible ads, flash, and the 16million extra add on super- wall- smiley- where- ive- been- scrabble- starwars- be- my- friend- you- have- 4- throw- a- dog- a- stick- requests- type garbage.
;-) -
04.
@Peter:- What Facebook has done is create a platform-specifc UI as opposed to a browser-specific one (check out the Mozilla property prefixes in the stylesheet), although AFAIK Safari is the only browser available on the iPhone for the time being at least.
Although it’s pure speculation I can’t help think that third-party browsers will be on their way to iPhone soon (what with Mozilla prefixes in the stylesheet already), although this all rests on the iPhone SDK agreement (an interesting article on the subject). One interpretation of part of the SDK agreement that is discussed in the aforementioned article, talks about third party apps possibly being restricted to using the Webkit engine, rendering (excuse the pun) Firefox and any third party browser, useless. However, Mozilla has already posted a concept video demonstrating the concept of Firefox working on iPhone, and there’s also an interesting quote from Opera further down the article.
In conclusion, I wouldn’t rule out third party browsers appearing on the platform, but obviously it’s still all speculation.
@Steve:- Perhaps we should try and get the Web Standards.org lot to fit it in between Acid 2 & 3 and make it a target for IE8 to render properly! :)
Yes, the iPhone UI is certainly cleansed of all the ads you get and invites; I would use it instead of the main site, but it looks every so slightly too stretched in my 1920×1200!
-
05.
But with little effort and ingenuity, and ample use of @media queries, they could make this for ALL mobile users, optimised for those with better CSS implementation. That’s the point of standards. We don’t make a website for OS X and a website for Windows.
-
06.
Oh please stop with the Apple fanboi act – it doesn’t suit this site. Also I’d say Opera Mobile/Mini are pretty advanced, standardswise – they have the same rendering engine as the Desktop version.
Now stop with your fanboi chants and learn grammar before you attempt to publish anything
“because of it’s inadequate CSS support”
“this is what Facebook has done with it’s iPhone-specifc UI”idiot…
-
07.
kenbw2 – you’ve clearly misunderstood the whole point of this post, and to call me an idiot is frankly immature.
As I haven’t yet seen a site which includes a substantial Media Queries implementaton, iphone.facebook.com is a chance to see a vast array of l3 features implemented, and was intended as a ‘live example’. As I’ve mentioned before Safari is the sole browser on the platform (I daren’t ever mention the i-word from now on, in fear of being labeled a fanboi by your good self) for the time being. If Opera Mini for example, was shipped as the default browser in another popular mobile device, and a brand as large as Facebook decided to create a site specifically for it (with a similar volume of CSS3 features), then I would have obviously written about that- this of course isn’t the case today.
And yes, I am the verge of becoming an Apple fanboi- I have an iPod and a MBPro (I would personally use a Mac over a PC anyday), but I’m sure everyone knows that that beared absolutely no weight when I was writing the post, except for you for some reason.
Thanks also for highlighting my two grammatical errors – they’ve now been corrected :)
-
08.
[…] Level 3 features in the wild – CSS3 . Info But what if a site was created to serve one specific handheld device in which Safari (along with it’s sufficient CSS3 support) was the default browser? (tags: http://www.css3.info 2008 mes6 dia3 at_tecp CSS3 CSS iPhone Facebook blog_post) […]
-
09.
OK, maybe my fanboi comments were a tad harsh. “I would personally use a Mac over a PC anyday” – You could say that for me with Ubuntu. I still think it does read as a salesman for the iPhone though.
On the grammar side, I’m a pedant without a cause. When I see “it’s” when it’s not an abbreviation I die a little inside.
With regard to the subject of the article, I know what you mean – I was writing a JavaScript application to help me learn the language. It felt good to be able to ignore IE’s (lack of) standards compliance since I was using Opera.
Please accept my apologies for the harsh comments…please?
-
10.
Opera has huge problems with sites like this. We’ve been in the mobile game for a long time, and are shipping on many devices. iPhone only sites are short sited at best. For example, Opera Mobile 9.5 is coming out on the 15th, and while it doesn’t run on the iPhone it runs on devices that have just as high resolution screen (or higher, and just as powerful hardware. Take the HTC Diamond for example. This runs Opera Mobile 9.5 by default. Are Facebook going to make a Diamond.facebook.com and a touchcruise.facebook.com and a xperia.facebook.com? What about a wii.facebook.com or ds.facebook.com?
Opera Mobile should in theory be able to render the iphone site, but the URL is illogical for none iphone users to use, instead they will get the really stripped down m.facebook. Also the WebKit specific rules means Opera wouldn’t get those styles, even when we support them, and some we do not support, so it will break in Opera Mobile 9.5. You could say that Opera should support them, but Opera already has good CSS3 support obviously, and they are not using CSS3 that Opera supports but Safair doesn’t. It is kind of strange they’ve taken Mozilla into account when they only have a paperware mobile browser, and not Opera when we have mobile browsers shipping on hundreds of millions of devices. The sooner iphone.* sites die out the better. We in fact had to add a iphone quirks mode of sorts to Opera Mobile due to this issue of designing for one browser AND one device.
-
11.
@David – I agree with you about iPhone sites being short-sited.
The main point behind this site, as I see it, is to replicate iPhones UI. I share the same opinion as yourself and Peter in that we shouldn’t be going down the route of creating platform-specific sites; instead, as Peter pointed out, developers should be building interfaces designed for a wide array of mobile browsers. However, I think we need to define a ‘platform-specifc UI’; I think it’s a bit over the top to try and match colour palettes/gradients to a specific UI, but instead I feel that the design be brand-focused. If Facebook however were using fundamental CSS properties (same could apply to JS) that were specific to WebKit, which in turn meant that the site broke in other browsers, then as far as I’m concerned, that would be going down the wrong path.
Regarding your comments about the use of WebKit specific rules, if or when vendors such as yourselves are allowed to develop browsers for the iPhone, that the devs at FB will update their CSS accordingly – as I’ve already mentioned there is at least one instance of ‘-moz- in there somewhere, so they’re obviously anticipating that browsers other than Safari will be or are already using the site, and why include the standardized ‘box-sizing’ property if Webkit only support their own vendor-specific extension?
I’m also unsure as to what you mean when the site will break in Mobile 9.5? So far as I’ve seen, ‘box-sizing’ is probably the most crucial layout property that is used and as I’ve mentioned already, they’ve included this in the form of the standardized property (which Opera supports) in the stylesheet. As to the other Webkit-specific properties; I’m guessing they’ve added these either because the property itself isn’t stable enough to be implemented at this stage, therefore sticking to their own version of the property makes sense for the time being, or purely for the progressive enhancement aspect (border-radius, border-image).
Edit
@David, I’d also be very interested to hear more about this iPhone quirks mode you speak of? -
12.
For the record, support for box-shadow and border-image have just been added to Firefox (3.1 trunk). :)
-
13.
Exec says:Comment » July 19th, 2008 at 4:12 am
It’s -moz-box-shadow and -moz-border-image though. Or at least that’s what I see in the code.
-
14.
-
15.
-
16.
[…] – bookmarked by 1 members originally found by randomaze on 2008-10-13 Comment on Level 3 features in the wild by IVR http://www.css3.info/level-3-features-in-the-wild/ – bookmarked by 3 members originally found by […]
-
01.
