You provide a responsive design for your component

Somebody else uses your

component and it JustWorks™

based on how much room is available to it.

@element .my-component and (min-width: 500px) {
  .title {
    background: lime;
  }
}

Past ideas

Seems intuitive, but actually there are a lot of new asks/issues here..

@element .my-component and (min-width: 500px) {
  .title {
    background: lime;
  }
}

Past ideas

Doesn't parse
no obvious precedent
selector engine?
nesting

@element html and (min-width: 500px) {
  :self {
    width: 400px;
  }
}

Past ideas

inherently has to imply containment, from a MQ?

New fundamentals available...

containment
ResizeObserver
MutationObserver

But low level stuff isn't for everyone, so how do we move forward?

Several smaller experiments over the last couple of years.

Now ResizeObserver is landing everywhere, new concerted community effort

Began as a hack observation/experiment:

What if this were a property rather than a MQ?

custom properties avoid some parts of circularity
properties can imply things like containment just fine
no need to change parsers or stylesheets..

Are we missing things still?

What is the minimum we can fake?

Lots of discussions in the community,

some with standards folks...

Very positive!

almost.

actually it shows a gap we're missing

(not just machinery to wire it up)

You write your breakpoint - but we have to apply containment on the parent...

Circularity is still possible :(

Gold ring: An CSS anon containing box which fits its parent box, and has containment

Hey, also... Maybe this is a minimal new path for lots of interesting "observers" oriented things?

 /*
  Pseudo elements can establish boxes / can't be selected and create circularity.
  We can allow-list limit the properties they respect
  They can imply things (fit/wrap + containment)
    
  ::observed would allow observed-* properties, in this case, widths.
*/
.my-component::observed {
   observe-resize-width: small 420px, medium 720px, large 1000px;
}

  
/* These are basically just 'special attributes' then 
   which refer to their measures
 */
.my-component:breakpoints(resize-width*=small) {
  background-color: blue;
  color: white;
}
 
 
.my-component:breakpoints(resize-width*=medium) {
  background-color: white;
  color: blue;
}

  
/*
	This then has no actual effect, no circularity - yay!
 */
.my-component:breakpoints(resize-width*=small) {
  background-color: blue;
  color: white;
  observe-resize-width: small 420px, medium 720px, large 1000px;
}

 .my-component::observed {
   observe-resize-width: small 420px, medium 720px, large 1000px;
}
 
.my-component:breakpoints(resize-width*=small) { ... }
 
.my-component:breakpoints(resize-width*=small) .title { ... }
 
.my-component:breakpoints(resize-width*=small) .content { ... }
 
.my-component:breakpoints(resize-width*=medium) { ... }
 
.my-component:breakpoints(resize-width*=medium) .title { ... }
 
.my-component:breakpoints(resize-width*=medium) .content { ... }

 .my-component::observed {
   observe-resize-width: small 420px, medium 720px, large 1000px;
}
 
.my-component:breakpoints(resize-width*=small) { ... }
 
.my-component:breakpoints(resize-width*=small) .title { ... }
 
.my-component:breakpoints(resize-width*=small) .content { ... }
 
.my-component:breakpoints(resize-width*=medium) { ... }
 
.my-component:breakpoints(resize-width*=medium) .title { ... }
 
.my-component:breakpoints(resize-width*=medium) .content { ... }

Objections: ~~Not dry~~
Welcome to CSS.

 .my-component::observed {
   observe-resize-width: small 420px, medium 720px, large 1000px;
}
 
.my-component:breakpoints(resize-width*=small) { 
   ... 
   &.title { ... }
   &.content { ... }
}
 
.my-component:breakpoints(resize-width*=medium) { 
   ... 
   &.title { ... }
   &.content { ... }
}

No really - not exclusive to this.
We should add nesting, but it is a red herring

all of the existing processors should work.

No one has problems with this part, really.

 .my-component::observed {
   observe-resize-width: small 420px, medium 720px, large 1000px;
}
 
.my-component:breakpoints(resize-width*=small) { ... }
 
.my-component:breakpoints(resize-width*=small) .title { ... }
 
.my-component:breakpoints(resize-width*=small) .content { ... }
 
.my-component:breakpoints(resize-width*=medium) { ... }
 
.my-component:breakpoints(resize-width*=medium) .title { ... }
 
.my-component:breakpoints(resize-width*=medium) .content { ... }

Objections: ~~Specificity too high~~
Zero.

unfortunately, that is impossible to polyfill :(

Best we can do today?

  
/* we can mark it similarly, hack... 
   but this doesn't create our gold box or limit anything.
   It might even be actively bad to try to fake it like this
   It means you basically have to explcitly create a separate container,
   on which we magically contain
*/
.my-component-container::-wekbit-observed {
   observe-resize-width: small 420px, medium 720px, large 1000px;
}
 
 
/* It means we have to not do this  */
.my-component-container[_resize-width*=small] { ... }
 
/* But do this instead, have to manage this on the children, 
  ... it's always downward to prevent circularity  
 */
.my-component-container > .my-component[_resize-width*=small] { ... }
 
/* specificity is higher */

So... missing primitives
potential new machinery that could open new paths?

 .my-component::observed {
   observe-intersection-y:  start 1%; 
}
 
.my-component:breakpoints(insection-y*=start) { 
   ... 
 }

Maybe?

 .my-component::observed {
   observe-mutation-children:  none 0 one 1 few 5 many 10; 
}
 
.my-component:breakpoints(mutation-children*=one) { 
   ... 
 }
 
 
.my-component:breakpoints(mutation-children*=few) { 
   ... 
 }
 
 
.my-component:breakpoints(mutation-children*=many) { 
   ... 
 }

Maybe even?

?

almost.

actually it shows a gap we're missing

unfortunately, that is impossible to polyfill :(

Best we can do today?

So... missing primitives
potential new machinery that could open new paths?

deck

deck

Brian Kardell

	/*
	Pseudo elements can establish boxes / can't be selected and create circularity.
	We can allow-list limit the properties they respect
	They can imply things (fit/wrap + containment)

	::observed would allow observed-* properties, in this case, widths.
	*/
	.my-component::observed {
	observe-resize-width: small 420px, medium 720px, large 1000px;
	}


	/* These are basically just 'special attributes' then
	which refer to their measures
	*/
	.my-component:breakpoints(resize-width*=small) {
	background-color: blue;
	color: white;
	}


	.my-component:breakpoints(resize-width*=medium) {
	background-color: white;
	color: blue;
	}


	/*
	This then has no actual effect, no circularity - yay!
	*/
	.my-component:breakpoints(resize-width*=small) {
	background-color: blue;
	color: white;
	observe-resize-width: small 420px, medium 720px, large 1000px;
	}


	/* we can mark it similarly, hack...
	but this doesn't create our gold box or limit anything.
	It might even be actively bad to try to fake it like this
	It means you basically have to explcitly create a separate container,
	on which we magically contain
	*/
	.my-component-container::-wekbit-observed {
	observe-resize-width: small 420px, medium 720px, large 1000px;
	}


	/* It means we have to not do this */
	.my-component-container[_resize-width*=small] { ... }

	/* But do this instead, have to manage this on the children,
	... it's always downward to prevent circularity
	*/
	.my-component-container > .my-component[_resize-width*=small] { ... }

	/* specificity is higher */

	.my-component::observed {
	observe-intersection-y: start 1%;
	}

	.my-component:breakpoints(insection-y*=start) {
	...
	}

	.my-component::observed {
	observe-mutation-children: none 0 one 1 few 5 many 10;
	}

	.my-component:breakpoints(mutation-children*=one) {
	...
	}


	.my-component:breakpoints(mutation-children*=few) {
	...
	}


	.my-component:breakpoints(mutation-children*=many) {
	...
	}

?

deck

More from Brian Kardell