prefixfree icon indicating copy to clipboard operation
prefixfree copied to clipboard

Unhandled: :matches, stretch, sticky

Open joyously opened this issue 8 years ago • 5 comments

Looking through the tables at http://www.caniuse.com/#cats=CSS, I see these 3 things:

  • :matches selector was :any, can be :-webkit-any or :-moz-any

  • stretch keyword can be -webkit-stretch or -moz-available

  • sticky keyword for position is not in the list of keywords

joyously avatar Oct 08 '17 20:10 joyously

We can't do anything for the first one (since -prefix-free only adds a prefix, doesn't rewrite), but would accept PRs for the others :)

LeaVerou avatar Oct 09 '17 09:10 LeaVerou

Wouldn't changing stretch to -moz-available be a rewrite also? And it looked to me like the selectors are set up to handle changes, like placeholder does.

joyously avatar Oct 09 '17 15:10 joyously

Yeah, I guess we have deviated from the original premise :) No strong opinions there, if you can implement it in a sane way, I'd merge it.

LeaVerou avatar Oct 11 '17 00:10 LeaVerou

I was looking in to how to add :matches and :is, but this code seems to be doing something odd.

for(var selector in selectors) {
	var standard = selectors[selector] || selector
	var prefixed = selector.replace(/::?/, function($0) { return $0 + self.prefix })
	if(!supported(standard) && supported(prefixed)) {
		self.selectors.push(standard);
		self.selectorMap[standard] = prefixed;
	}
}

It gets the standardized selector and checks if that is supported instead of checking if the non-standard one is supported. So if the stylesheet has :input-placeholder it remains untouched since it checked for ::placeholder being supported. Is this the intended logic? Is this supposed to leave an unsupported style alone, in case it is followed by the supported one? Or should the selector being saved be the actual selector that is prefixed, not the standardized one? Would this make more sense?

for(var selector in selectors) {
	var standard = selectors[selector] || selector
	var prefixed = selector.replace(/::?/, function($0) { return $0 + self.prefix })
	if(!supported(standard) && supported(prefixed)) {
		self.selectors.push(selector);
		self.selectorMap[selector] = prefixed;
	}
}

joyously avatar Apr 28 '19 16:04 joyously

I think I'm understanding this better now. I got onto a tangent trying to do :matches since it is a rewrite, so was looking at the others that way. Sorry!

But, leaving the original code alone, doesn't the list of selectors hold the one that should be used to build the prefix, and the standard to check for? So maybe it's a different issue, but I'm thinking the list should look more like this

	'::placeholder': null,
	':placeholder': ':placeholder-shown',
	'::input-placeholder': '::placeholder',
	':input-placeholder': ':placeholder-shown',

I started typing this and forgot... So I opened a different issue (#6143) for the :placeholder-shown problem. If it's merged before the others that add to that list it won't interfere.

joyously avatar Apr 29 '19 00:04 joyously