Twenty Thirteen: Audit and clean up browser prefixes

[Jayjdk]

As suggested in the Twenty Thirteen office hours, old/unused vendor prefixes can be dropped.

lancewillett in #23568:

Based on notes in today's Twenty Thirteen office hours, we're going to take the following approach:

• Look at each browser's prefix support. If it's been dropped in the stable version in the last year, we can remove it.
• Keep in mind a webkit prefix may be needed for older mobile devices (​​http://isandroidgoodyet.com/).
• We should mention here in the ticket notes that the theme itself may need to fail gracefully.

In the next couple of days I'll research which prefixes are safe to drop and which to keep, and attach a patch.

This is a list of all properties and selectors with prefixes in the Twenty Thirteen style.css. I haven't yet looked into which one that can be removed.

Properties with prefixes:

text-size-adjust

• webkit
• ms

hyphens

• webkit
• moz
• ms
• unprefixed

appearance

• webkit

box-sizing

• webkit
• moz
• ms
• unprefixed

font-smoothing

• webkit

linear-gradient

• webkit
• moz
• ms
• o
• unprefixed
• Old IE

transition

• webkit
• moz
• o
• unprefixed

calc

• webkit
• unprefixed

transform

• webkit
• moz
• ms
• o
• unprefixed

Selectors with prefixes:

search-decoration

• webkit

focus-inner

• moz

placeholder

• webkit
• moz
• ms

Properties without prefixes:

box-shadow

• Unprefixed version is not supported in Android Browser 3.0 and older, iOS Safari 4.3 or older and Blackberry Browser
• The only place the prefix might be needed as I see it is in .blog .format-aside:first-of-type, .single .format-aside:first-of-type as it's used to create a separation between aside posts and the navigation

Notes:

• box-sizing: border-box; (and all the prefixes) is referenced 18-19 times

What about using the universal selector instead? See ​http://paulirish.com/2012/box-sizing-border-box-ftw/

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	-ms-box-sizing:     border-box;
	box-sizing:         border-box;
}

I've started the research. There doesn't appear to be too many old prefixes but I've found prefixes that never even have been supported by any browser. Later I'll post the results of the research and a patch.

---

Firefox 16 supports a lot of unprefixed versions. The version is from October 9, 2012 so it's less than a year old. But Firefox supports auto updating and according to ​http://en.wikipedia.org/wiki/Template:Firefox_usage_share not many uses the older versions any more. I don't know how the stats are for WordPress - perhaps some one can help here.

I think we should drop the prefixes. But I don't know what the rest of you think?

Properties with prefixes:

text-size-adjust

• -webkit, -ms
• Note: There's a -moz prefix as well but that doesn't support percentages
• Recommendation:
  • Keep them

hyphens

• -webkit, -moz, -ms, unprefixed
• Recommendation:
  • Keep them as they're all still needed

appearance

• -webkit
• Recommendation:
  • Keep it

box-sizing

• -webkit, -moz, -ms, unprefixed
• Recommendation:
  • Remove the –ms prefix as IE8-IE10 supports the unprefixed (the -ms prefix has never been used by any version of IE)
  • Keep the others as Firefox still needs the –moz and old webkit mobile browsers need –webkit.

font-smoothing

• -webkit
• Recommendation:
  • Keep it.

linear-gradient

• -webkit, -moz, -ms, -o, unprefixed, old IE
• Recommendation:
  • Remove -ms as IE10 supports the unprefixed version.
  • Remove -moz as Firefox 16 supports unprefixed
  • Keep the -o prefix even through the latest versions supports the unprefixed. Opera 12.10 was released on November 6, 2012.

transition

• -webkit, -moz, -o, unprefixed
• Recommendation:
  • Remove -moz as Firefox 16 supports unprefixed
  • Keep the -o prefix (unprefixed supported in Opera 12.10)

calc

• -webkit, unprefixed
• Recommendation:
  • Keep them.

transform: translate

• -webkit, -moz, -ms, -o, unprefixed
• Recommendation:
  • Remove -moz as Firefox 16 supports unprefixed (nothing will break in older versions)
  • Keep the -o prefix (unprefixed supported in Opera 12.10)

Selectors with prefixes:

Keep them all.

Properties without prefixes:

box-shadow

• Unprefixed version is not supported in Android Browser 3.0 and older, iOS Safari 4.3 or older and Blackberry Browser. The global usage for those is, according to ​http://caniuse.com, 3.34 % (Android Browser 2.3 alone is 2.36 %)
• Recommendation:
  • The only place the prefix might be needed as I see it is in .blog .format-aside:first-of-type, .single .format-aside:first-of-type and .blog .format-link:first-of-type, .single .format-link:first-of-type as it's used to create a separation between aside posts and the navigation.

Other Notes:

• I still in favor of moving all the box-sizing stuff to an universal selector

Same as the previous but with an universal selector for box-sizing

I went ahead and tried to create a second patch, this time with an universal selector for box-sizing. So far I haven't run into any problems but I'm still testing it.

Thanks! This is great. For making patches (in the future) can you create the diff from the root of the WordPress file structure? Instead of inside the theme. That makes it much easier for us to patch things up. Thanks. :)

In 23494:

Twenty Thirteen: first pass at cleaning up unneeded browser prefixes, props Jayjdk. See #23582.

Thanks for your patches Jayjdk!

How about aggregating it with the selectors that currently use it? We would end up with one declaration for the main styles and each media query (I'd really like to avoid using a * selector).

Why avoid the * selector? It's not a significant performance issue, if that's your worry.

I don't really see the benefits of that. It only makes the CSS even harder to maintain in my opinion.

But I've attached two patches. One is a updated version of attachment:23582.universal-box-sizing.patch​ and the other is with the selectors are combined.

I hope the patches have the right file structure this time.

Selectors combined per obenland's suggestion.

In 23520:

Twenty Thirteen: apply box-sizing: border-box as a universal selector. Props Jayjdk, see #23582.

@Jayjdk OK to close this ticket now?

That depends. Did we agree to remove the -o prefixes?

Replying to Jayjdk:

That depends. Did we agree to remove the -o prefixes?

Oh, right. Go ahead and remove all Opera prefixes except in media queries.

Remove all Opera prefixes except in media queries.

attachment:23582.opera-prefixes.2.diff​ removes the double spaces in linear-gradient in attachment:23582.opera-prefixes.diff​

In 23532:

Twenty Thirteen: wrap up vendor prefix cleanup with final Opera removals. Fixes #23582, props Jayjdk.