3 sim­ple steps

Will mul­ti­ple par­ent se­lec­tors ever be pos­si­ble?

net magazine - - Q&AS -

Ryan Irv­ing, Hen­ley-on-Thames, UK

HR: Mul­ti­ple par­ents make stylesheets much more terse, which is al­ways nice. It re­duces file­size and main­te­nance, so it’s some­thing we’re definitely in­ter­ested in. The best thing is, we have it al­ready!

Pre­proces­sors

Cur­rently, the most ob­vi­ous so­lu­tion is to use a pre­proces­sor’s in-built nest­ing func­tion­al­ity to list our mul­ti­ple par­ents, then nest our one child in it. This still com­piles out to rel­a­tively ver­bose CSS, but it is nice and terse in our source.

:matches()

There’s a pseudo-se­lec­tor in Se­lec­tors Level 4 that pro­vides this na­tively. :matches (or :any , in older specs) al­lows you to write much more terse se­lec­tors, which the browser ex­pands in­ter­nally.

css­next

To get :matches() work­ing re­quires a lit­tle ex­tra work. It’s ac­tu­ally re­ferred to as :any() in older specs, and re­quires ven­dor pre­fix­ing. To this end, I’d rec­om­mend us­ing css­next ( css­next.io) to tran­spile the new syn­tax back to bet­ter sup­port.

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.