I was just fooling around with some mobile WordPress stuff, and noticed that a few sites I was playing around with rendered slightly different on Opera Mini vs the Services browser or Nokia OS browser. Not a tremendous deal, but it happened to catch my attention.
Opera Mini:
Services Browser:
Looks like Opera Mini isn’t doing the border-bottom. Fair enough, a quick look at the CSS Mobile Profile 2.0 shows that I should be using border-bottom-width and border-bottom-color. However, once I swap those in, Opera Mini still doesn’t look like the Nokia built in browser (which by the way renders the page like Firefox does, which is my gold standard, cause I’m a n00b).
And as always, I think well after the fact, “hey, wonder if there’s a checker out there that would tell me when I’m using CSS I’m not supposed to”. Cause when I put pages up I do it like people on the good old interweb do it, I bash at the stuff till it looks the way I want, and then maybe check it afterward when someone tells me it’s broken.
Surprisingly enough, I’m not sure there is. The stuff I’ve read says to use WCSS from the OMA (the WCSS PDF linked to from here), but I don’t think I’ve found a checker that actually checks a set of CSS against that document. And I think the document I have actually matches to that.. I think. The W3C mobile checker has some issues with my background colors… are background colors only allowed to be some predefined set in CSS Mobile 2.0?
Doesn’t matter, base question is: online document checkers – which one to use for XHTML mobile content that uses CSS? Is there an all-singing all-dancing one that lets me know if stuff is out of spec, or in spec but not supported by current implementations?
Will this not do what you are looking for?
http://jigsaw.w3.org/css-validator/
There’s a mobile option on there, not sure exactly what spec it is validating against.
Or is that what you mean when you mention the “The W3C mobile checker”?
There isn’t anything to address the problem you’re describing (namely, being able to identify when you’ve used a CSS property that is poorly supported on a given device).
It’s unlikely that there ever would be an automated test for identifying what CSS properties work on given mobile browser (as opposed to identifying what’s valid, which sort of exists, though not really because there isn’t much agreement on what constitutes valid Mobile CSS) because it’s ultimately something that’s only possible to verify with human eyeballs. This is true for PC browsers and why the Acid Test exists (http://www.webstandards.org/action/acid2/)
When I was at Yahoo! I created a Mobile Acid test which, of course, they never officially launched. Luckily, I wrangled a “BSD license” for it so I put it up myself (http://www.jwtmp.com/a). Eventually, I’ll edit out the references to Yahoo!, but for now it’s a cool, quick way to see what simple CSS and XHTML-MP a mobile browser supports. Opera Mini doesn’t do particularly well, though Opera Mobile is pretty good. And almost no mobile browser correctly honors the @media screen syntax to filter out styles meant only for PCs which is a huge pain.
Mobile support for CSS is a total crapshoot.
The W3C has started a group recently that is working exactly to produce test suites for mobile browsers. They are working fully in public, you can join the mailing list and comment on anything. They have already done some work about markup and CSS. They are also talking with OMA to see if they can include a test suite for mobile CSS.
Ask for Dom, http://www.w3.org/2005/MWI/Tests/
- Andrea