Make WordPress Core

Opened 11 years ago

Closed 11 years ago

#23582 closed enhancement (fixed)

Twenty Thirteen: Audit and clean up browser prefixes

Reported by: jayjdk's profile Jayjdk Owned by: lancewillett's profile lancewillett
Milestone: 3.6 Priority: normal
Severity: normal Version: 3.6
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

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.

Attachments (6)

23582.diff (7.1 KB) - added by Jayjdk 11 years ago.
23582.universal-box-sizing.patch (8.0 KB) - added by Jayjdk 11 years ago.
Same as the previous but with an universal selector for box-sizing
23582.universal-box-sizing.2.patch (4.8 KB) - added by Jayjdk 11 years ago.
23582.combined-box-sizing.patch (4.7 KB) - added by Jayjdk 11 years ago.
Selectors combined per obenland's suggestion.
23582.opera-prefixes.diff (2.5 KB) - added by Jayjdk 11 years ago.
Remove all Opera prefixes except in media queries.
23582.opera-prefixes.2.diff (2.8 KB) - added by Jayjdk 11 years ago.

Download all attachments as: .zip

Change History (22)

#1 @lancewillett
11 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 3.6

#2 @Jayjdk
11 years ago

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;
}
Last edited 11 years ago by Jayjdk (previous) (diff)

#3 @Jayjdk
11 years ago

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. The prefixes have already been dropped for calc. But I don't know what the rest of you think?

Last edited 11 years ago by Jayjdk (previous) (diff)

#4 @Jayjdk
11 years ago

  • Keywords has-patch added; needs-patch removed

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

@Jayjdk
11 years ago

@Jayjdk
11 years ago

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

#5 @Jayjdk
11 years ago

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.

#6 @lancewillett
11 years ago

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. :)

#7 @lancewillett
11 years ago

In 23494:

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

#8 @obenland
11 years ago

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).

#9 @helen
11 years ago

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

#10 @Jayjdk
11 years ago

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.

Last edited 11 years ago by Jayjdk (previous) (diff)

@Jayjdk
11 years ago

Selectors combined per obenland's suggestion.

#11 @lancewillett
11 years ago

In 23520:

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

#12 @lancewillett
11 years ago

@Jayjdk OK to close this ticket now?

#13 follow-up: @Jayjdk
11 years ago

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

#14 in reply to: ↑ 13 @lancewillett
11 years ago

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.

@Jayjdk
11 years ago

Remove all Opera prefixes except in media queries.

#16 @lancewillett
11 years ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

In 23532:

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

Note: See TracTickets for help on using tickets.