Selecting for features

I apologize if this is an issue that's been raised before - I was amazed
that various searches didn't turn up anything - but is there any plan for
functionality within CSS to select for browser support for a given feature
or feature set? CSS3 Media Queries allow selecting for screen size,
orientation, etc., but I still can't specify a style for a browser that
doesn't support CSS3 background properties without resorting to hacks,
tricks, and workarounds. Has there been any discussion of adding something
like this? For example:

@supports background-size {
    // My fancy CSS3 background mojo
}

@supports !background-size {
    // My alternate style for browsers that don't support the
background-size property
}

@supports ::first-letter {
    // My fancy CSS for styling paragraphs
}

@supports Fonts {
    // CSS for browsers that support the CSS Fonts feature set
}


Obviously a selector that's not supported by the browser will (should) be
ignored, but in most cases, I want to apply some sort of alternative
styling, or apply several properties atomically, i.e., apply all of them
only if all of them are supported, and none of them if any of them are not
supported. Also, I understand that browsers encountering unrecognized
at-rules are supposed to ignore the entire block, which would present a
backwards-compatibility issue, but it seemed the best option without
extending CSS syntax.

This gives browser developers an opportunity to define what functionality
the browser supports and keep it updated as each new version comes out,
without designers needing to keep up to date with each release and every
change in feature support.

At first blush this may appear to be an workaround for non-compliant user
agents, but there will always be user agents that don't support all parts of
the standard, whether because the functionality hasn't been implemented yet,
or due to limitations of the target platform, or what have you. It makes
sense to provide a method for selecting for feature support, which seems far
and away better than any method that revolves around selecting on which
browser or browser version the user has, which requires designers to keep up
with every change in compatibility for every release of every browser they
want to target.

As an example, the background-size property from CSS3 is missing from the
latest IE, it's a vendor property (-moz-background-size) in the latest
Firefox, it's fully supported in the latest Chrome, but unsupported in the
Android browser. I may have a situation where I want a background image if
sizing is supported, and none if sizing is not supported. Currently that's
not possible without resorting to hacks, workarounds, or non-standard syntax
such as the <![if IE]><link/><![endif]> construct.

Received on Thursday, 8 July 2010 07:19:28 UTC