Re: Composite pseudo classes

In the context discussed, I also proposed that these aliases be usable via
querySelectorAll...  I think this would allow libraries like sizzle/jquery
to simplify even more... I'm not sure whether John or Yehuda or anyone
involved with jquery follow this list, perhaps we should cross post a
proposal.
On Nov 9, 2011 12:26 PM, "Brian Kardell" <bkardell@gmail.com> wrote:

> It wouldn't be a full one to one swap if you had a preprocessor now though
> because preprocessing would expand the selectors and the two would differ
> in specificity score.
> On Nov 9, 2011 12:08 PM, "Charles Pritchard" <chuck@jumis.com> wrote:
>
>> +1 for hocus, pocus.
>>
>> Things get awfully verbose once you're working with pseudo-selectors.
>>
>> While trying (and failing) to tweak the <audio>/<video> controls in
>> webkit to be larger, I was pretty
>> overwhelmed with selector duplication.
>>
>> audio::-webkit-media-controls-**timeline-container,
>> video::-webkit-media-controls-**timeline-container
>> http://pastebin.com/zGdndGpB
>>
>> Alias would be a big help in making my code more readable where it needs
>> to be.
>>
>> -Charles
>>
>> On 11/9/11 8:59 AM, Brian Kardell wrote:
>>
>>> Has the advantage of being pretty easy to implement too... :)
>>>
>>> If you are a jquery/sizzle user and have grown accustomed to their
>>> extensions the following snippet would then cause 13 of them to be
>>> immediately useable in your regular CSS too...
>>>
>>> @alias jq-button      input[type=button];
>>> @alias jq-checkbox    input[type=checkbox];
>>> @alias jq-file        input[type=file];
>>> @alias jq-header      h1,h2,h3,h4,h5;
>>> @alias jq-image       input[type=image];
>>> @alias jq-input       input,textarea,select,button;
>>> @alias jq-password    input[type=password];
>>> @alias jq-radio       input[type=radio];
>>> @alias jq-reset       input[type=reset];
>>> @alias jq-selected    option[selected];
>>> @alias jq-submit      input[type=submit];
>>> @alias jq-text        input[type=text];
>>> @alias jq-parent      :not(:empty);
>>>
>>>
>>>
>>>
>>> On Wed, Nov 9, 2011 at 11:42 AM, Tab Atkins Jr.<jackalmage@gmail.com>
>>>  wrote:
>>>
>>>> On Wed, Nov 9, 2011 at 4:15 AM, Pete Boere<pete@the-echoplex.net>
>>>>  wrote:
>>>>
>>>>> Usually when using the :hover pseudo class it is appropriate to also
>>>>> use the
>>>>> :focus pseudo class for accesibility reasons. [1]
>>>>>
>>>>> Is it possible to have composite pseudo classes for this purpose?
>>>>> I've implemented a kind of composite pseduo class in a PHP CSS
>>>>> preprocessor[2] like this:
>>>>>
>>>>> .nav a:hocus { ... }
>>>>> .nav a:pocus { ... }
>>>>>
>>>>> compiling to
>>>>>
>>>>> .nav a:hover, .nav a:focus { ... }
>>>>> .nav a:hover, .nav a:focus, .nav a:active { ... }
>>>>>
>>>>> internally a substitiution is being made using an :any (:matches) shim
>>>>> [3]
>>>>> :hocus =>  :matches(:hover,:focus)
>>>>>
>>>>>
>>>>> [1]
>>>>> http://www.456bereastreet.com/**archive/201004/whenever_you_**
>>>>> use_hover_also_use_focus/<http://www.456bereastreet.com/archive/201004/whenever_you_use_hover_also_use_focus/>
>>>>> [2] http://the-echoplex.net/**csscrush<http://the-echoplex.net/csscrush>
>>>>> [3]
>>>>> https://github.com/peteboere/**css-crush/blob/master/plugins/**
>>>>> hocus-pocus.php<https://github.com/peteboere/css-crush/blob/master/plugins/hocus-pocus.php>
>>>>>
>>>> Like Brian said, he and I and Boris Zbarsky have been privately
>>>> brainstorming over something like this.
>>>>
>>>> I think it's quite reasonable to have a mechanism to define aliases
>>>> for compound selectors.  This allows for CSS that is easier to read
>>>> and maintain (though I personally don't think that 'hocus' and 'pocus'
>>>> are very good names ^_^).
>>>>
>>>> Something like this, perhaps:
>>>>
>>>> @selector-alias :my-pseudo :matches(:focus, :active);
>>>>
>>>> ~TJ
>>>>
>>>>
>>>>
>>

Received on Thursday, 10 November 2011 12:07:46 UTC