WordPress.org

Make WordPress Core

#23582 closed enhancement (fixed)

Twenty Thirteen: Audit and clean up browser prefixes

Reported by: Jayjdk Owned by: 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 14 months ago.
23582.universal-box-sizing.patch (8.0 KB) - added by Jayjdk 14 months 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 14 months ago.
23582.combined-box-sizing.patch (4.7 KB) - added by Jayjdk 14 months ago.
Selectors combined per obenland's suggestion.
23582.opera-prefixes.diff (2.5 KB) - added by Jayjdk 14 months ago.
Remove all Opera prefixes except in media queries.
23582.opera-prefixes.2.diff (2.8 KB) - added by Jayjdk 14 months ago.

Download all attachments as: .zip

Change History (22)

comment:1 lancewillett14 months ago

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

comment:2 Jayjdk14 months 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:

  • -moz-placeholder is there twice
  • 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;
}
Version 2, edited 14 months ago by Jayjdk (previous) (next) (diff)

comment:3 Jayjdk14 months 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 14 months ago by Jayjdk (previous) (diff)

comment:4 Jayjdk14 months 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

Jayjdk14 months ago

Jayjdk14 months ago

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

comment:5 Jayjdk14 months 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.

comment:6 lancewillett14 months 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. :)

comment:7 lancewillett14 months ago

In 23494:

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

comment:8 obenland14 months 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).

comment:9 helen14 months ago

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

comment:10 Jayjdk14 months 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 14 months ago by Jayjdk (previous) (diff)

Jayjdk14 months ago

Selectors combined per obenland's suggestion.

comment:11 lancewillett14 months ago

In 23520:

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

comment:12 lancewillett14 months ago

@Jayjdk OK to close this ticket now?

comment:13 follow-up: Jayjdk14 months ago

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

comment:14 in reply to: ↑ 13 lancewillett14 months 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.

Jayjdk14 months ago

Remove all Opera prefixes except in media queries.

comment:16 lancewillett14 months 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.