« Safari and custom CSS Part 2: An ApologySilverlight and C# web scripting »

Safari and custom CSS

07/03/07

Permalink 11:02:02 am, by rekle Email , 134 words   English (US)
Categories: Apple

Safari and custom CSS

Link: http://dev.lipidity.com/apple/iphone-webkit-css-3

Bad, bad, Apple.

The above linked blog gives some examples about how Apple's Safari browser achieves it's 'OS X-ish' look in Windows. It does this by way of some Safari specific CSS attributes. These custom attributes allow Safari to do some custom 'rounded OS X-ish' button styles on standard web pages - at least ones that are running in Safari.

I really hate when browser developers like Apple or Microsoft do custom stuff like this! Web site developers have a hard enough time making web sites that work in all browsers. When there are tons of custom features that are specific to certain browsers, it just makes things all that more difficult.

Get with the program, Apple. Why can't you simply use standard CSS for this stuff rather than yet another non-standard addition! Sheesh.

2 comments

Comment from: oliver [Visitor] Email
oliverThose "Safari specific" css properties are part of CSS 3. The reason for the -webkit- prefix is that CSS 3 has not yet been finalised, and this needs to be made clear to developers. Firefox also supports these "Safari specific" with the -moz- prefix. For more info check http://css3.info which details what browsers have implemented what portions of CSS3, and what their prefixes are.

You should possibly have at least googled these properties before deciding Safari was another IE. the -enginename- prefix on properties is the *correct* way to indicate unfinalised properties. Googling "border-image", "border-radius", etc would have taken you directly to the css3 spec. "-webkit-border-image", etc would take you directly to css3.info (as would "-moz-border-radius" -- firefox doesn't appear to support border-image yet :( )

If anything this shows that Safari has a commitment to standards...
07/03/07 @ 17:00
Comment from: oliver [Visitor] Email
oliverOoh, the -webkit-appearance ones are less good, but once again they have the standard engine specific prefix, which should tell designers that it is a browser specific extension. Still it differs from the IE approach where there's no distinction between standard and non-standard properties. As an added advantage the property will fallback to working content on other browsers.

OTOH *all* browsers (including firefox) have a ream of non-standard features, especially in JS (JS being where all the pain happens as there are lots of useful things in all the browsers, even IE -- *shudder* -- but the standardisation process has failed to specify). A great example of a really useful feature in firefox is console.log -- unfortunately it is not specified in any standard, should they remove it because it isn't specified? no -- but remember that means attempting to use it will break a script in *all* other browsers.

That great and marvellous canvas tag was originally introduced by Apple in Safari (2?) and is now going to be part of html5 and is already supported by Firefox and Opera. So occasionally non-standard features lead to good standardised features (eg. canvas) or at least should be (why doesn't safari have console.log? :( ). Nowadays CSS has the -engine- prefix to further help designers distinguish standardised features from non-standardised ones
07/03/07 @ 17:18
February 2012
Mon Tue Wed Thu Fri Sat Sun
 << <   > >>
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29        
Copyright © 2005 - 2011, Rick Ekle

Comments? Contact me at rick@ekle.us or visit me on Twitter at @rekle

Search

XML Feeds

User tools

powered by b2evolution