Re: Composite pseudo classes

+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/
>>> [2] http://the-echoplex.net/csscrush
>>> [3]
>>> 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 Wednesday, 9 November 2011 17:08:31 UTC