Re: Suggestion for generic CSS vendor prefix

--------------------------------------------------
From: "Tab Atkins Jr." <jackalmage@gmail.com>
Sent: Tuesday, March 23, 2010 10:36 AM
To: "Brad Kemper" <brad.kemper@gmail.com>
Cc: <robert@ocallahan.org>; "www-style" <www-style@w3.org>
Subject: Re: Suggestion for generic CSS vendor prefix

> On Tue, Mar 23, 2010 at 9:20 AM, Brad Kemper <brad.kemper@gmail.com> 
> wrote:
>>
>> On Mar 23, 2010, at 8:31 AM, Tab Atkins Jr. wrote:
>>
>>> Thoughts?
>>>
>>> 1: 
>>> http://www.quirksmode.org/blog/archives/2010/03/css_vendor_pref_1.html
>>> 2: http://lesscss.org/
>>
>> I would love to be able to do variables and mixins as part of normal CSS. 
>> Unfortunately, unless I used LESS to preprocess, I would have to wait 
>> until most Web browsers still in use were supporting it (I can't just 
>> have half my audience not have decent styling, just because they are 
>> using older browsers), and that might take a long while. Even so, I think 
>> it would be great if we could get those two parts of LESS, at least, into 
>> the spec.
>
> Well, yeah, this wouldn't be an immediate solution.  But no solution
> would be, even, say, moving to a single -draft- prefix, as there are
> still tons of vendor-prefixed stuff out there.  So yeah, we'd need to
> wait a while.  But it's probably a good idea, and I was just providing
> this as a use-case.
>
> It's fixing the symptoms, not the problem, but I don't think the
> problem is solveable, so we should just try and fix the symptoms as
> well as we can without introducing new problems.
>

I think the problem is solvable by introduction of
a) generic "experimental feature" syntax and
b) asking vendors to provide vendor-id as a constant for the @media.

This way if someone will want to experiment then they can use this:

@media screen and mozilla
{
    .experiment {  -border-radius: 50%; -text-clip: follow-curve;  }
}

@media screen and opera
{
    .experiment {  -border-radius: 50%; -content-box-radius: 50% }
}

as a bonus this will allow to experiment with ideas/solutions that do not 
fall into properties.

@media screen and sciter
{
    .experiment
    {
      -hover-on! :  $1( .slave-element ):hover = true;
    }
}

@media screen and webkit
{
    .experiment
    {
      -transition :  ease-out 0.6s;
    }
}

This will work out of the box and we don't need to wait for all UAs to be on 
board.

As of LESS, just for clarity, it appears as it uses CSS constants [1] but 
not variables.

[1] http://wiki.csswg.org/ideas/constants

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Wednesday, 24 March 2010 02:53:28 UTC