W3C home > Mailing lists > Public > www-style@w3.org > July 2015

Re: [selectors4] Features to Defer&In-Reply-To=<CADC=+jetSy3hw-ixK3bJGFAeE0-SPfDbuTkV6ZR7Jh-2jyKkMw@mail.gmail.com>&References=<CADC=+jetSy3hw-ixK3bJGFAeE0-SPfDbuTkV6ZR7Jh-2jyKkMw@mail.gmail.com>

From: James South <james_south@hotmail.com>
Date: Wed, 22 Jul 2015 16:34:12 +0000
Message-ID: <DUB121-W7EDF1D484AB3229E71C9E95830@phx.gbl>
To: "www-style@w3.org" <www-style@w3.org>
Hi all,

:has() for me is something we sorely need for responsive development and shouldn't be delayed further.

Consider for example, the case where we want to embed iframe from various video providers. The standard technique with CSS is to wrap the iframe within a containing div and apply padding to the container to provide the correct aspect ratio.

The examples given here, demonstrate that technique. http://embedresponsively.com/

I have taken that one step further and apply the technique using different classes on the parent container to determine the correct ratio. http://responsivebp.com/css/media/#iframes

This approach is very limited in terms of flexibility. We cannot reuse a simple combination of container > iframe without classes and this prevents us from reusing templates, it makes it more complicated to use within the scope of a CMS, generally it's a headache. 

Yes, I could use JavaScript; No I most certainly do not want to. There's more than enough JavaScript getting thrown into webpages as it is.

To solve this issue correctly we need a :has() selector. With that we could build simple selector patterns based on known urls that allow us to drop an iframe template onto a page given only the url and have it styled correctly.

I hope you reconsider

James Jackson-South 		 	   		  
Received on Thursday, 23 July 2015 06:18:08 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:52:18 UTC