April 30th I will be speaking at Webdirections Hover on a topic very dear to me: New and future media queries. Read on for more info on the conference, how to get tickets and a discount!
Hocus Pocus, CSS Aliases
I started building websites about 15 years ago. Two weeks ago I wrote down a:hover, a:focus {…}
for what felt like the millionth time. Something snapped and I quipped the following on twitter:
I'm tired of always having to type 'a:hover, a:focus {}', I therefore propose a new pseudoclass that combines them: a:hocus {}
— Kilian Valkhof (@kilianvalkhof) January 31, 2014
That throwaway Friday afternoon tweet got 50+ retweets, 30+ favorites and a whole bunch of interesting replies. Those replies included one that pointed me to a draft Spec about CSS Aliases. CSS Aliases look interesting and you can read a bit about them at the end of this blog post.
Here’s a list of the replies I got. It includes suggestions, ways you can already use (something like) :hocus
and how it might be possible in the future.
@dorward @kilianvalkhof @brucel \o/ great idea!
— Manuel Strehl (@m_strehl) January 31, 2014
@kilianvalkhof @brucel Hahaha! So awesome I nearly choked on my coffee. a:hocus {} has a nice ring though.
— William Dodson (@williamvdodson) January 31, 2014
A bunch of other people wanted to add a :pocus
pseudoclass for various reasons:
@kilianvalkhof @vasilis Then I want a pocus too.
— job (@Sturmmm) January 31, 2014
@kilianvalkhof @brucel And a:pocus {} for any keyboard event.
— David Dorward (@dorward) January 31, 2014
And a:pocus{}! MT @kilianvalkhof I'm tired of typing 'a:hover, a:focus {}', I propose a new pseudoclass that combines them: a:hocus {}
— Cordelia (@cordeliadillon) February 1, 2014
@kilianvalkhof @dennisl and a touch pseudo class called a:pocus
— Joe Dolson (@joedolson) February 1, 2014
…Or a :focer {}
@kilianvalkhof @brucel a:focer {} would be better, I think
— Stuart Langridge (@sil) January 31, 2014
There was a whole lot of talk about css preprocessors:
@kilianvalkhof @dennisl if you use vim, you could do it as an abbreviation. In SASS, you can do it as a mixin.
— Andrew Woods (@awoods) February 1, 2014
@kilianvalkhof @vasilis Pre-processor anyone? :-)
— Roy Tomeij (@roy) January 31, 2014
@kilianvalkhof @iandevlin Could be part of @SassCSS and would be outputted as two individual classes, would be pretty cool :D
— Sara Soueidan (@SaraSoueidan) January 31, 2014
@awoods Neat ideas. Maybe I'll try it in LESS :-) @kilianvalkhof @JoeDolson
— Dennis Lembrée (@dennisl) February 1, 2014
Before the end of the day, @SassCSS made a mixin which, although actually more verbose, is pretty cool:
@SaraSoueidan @iandevlin @kilianvalkhof https://t.co/lNaVzeu0zN
— SassCSS (@SassCSS) January 31, 2014
And just to prove that everything has been invented already, CSS-Crush already includes both a :hocus
and a :pocus
:
@kilianvalkhof has existed here for several years http://t.co/Mi2fBI5SlV
— シ (@pete_b) February 2, 2014
CSS Aliases
@kilianvalkhof @brucel Soon®, you’ll be able to write @custom-selector :_hocus :hover, :focus; thanks to @tabatkins’s http://t.co/ekl2n15zrt
— Simon Sapin (@SimonSapin) January 31, 2014
In the linked CSS Aliases proposal is a part about Custom Selectors. Custom selectors allow you to name your own selector (but it has to start with an underscore) and combine that with a list of selectors. If this gets implemented, we can almost get our :hocus
and :pocus
pseudoclasses:
@custom-selector :_hocus a:hover, a:focus;
@custom-selector :_pocus a:hover, a:focus, a:active;
:_hocus { /* style for a's with hover and focus */ }
:_pocus { /* style for a's with hover, focus and active */ }
Pretty cool, though I’m not sure you can use this to make a custom pseudoclass as opposted to a custom selector. Then you could actually write “a:_hocus{}
“. In any case this is just a draft proposal, and a young one at that. It’s not clear yet where it will go, or if it will get implemented at all.
I know this isn’t much of a full article, especially after three years of silence. But it was cool to see so many people respond to a fun little idea, and I wanted to share that!