Platform/Layout/CSS Compatibility: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(→‎meetings minutes discussions: fix date posted of snook.ca post)
Line 63: Line 63:
'''2010:'''
'''2010:'''
* 2010-05-10 Microsoft states support for a -webkit- property and then withdraws it a day later due to community feedback: http://blogs.msdn.com/b/iemobile/archive/2010/05/10/javascript-and-css-changes-in-ie-mobile-for-windows-phone-7.aspx in particular: <blockquote><p>"We've also added support for the -webkit-text-size-adjust CSS selector. This selector allows you to control how text on the Web page is scaled to increase readability for the user (you can also use -ms-text-size-adjust, IE Mobile recognizes both).</p><p> ... [one day later] ... </p><p><b>"[Update 05/11/2010: based on community feedback, we will only be implementing the -ms- prefix, not the -webkit- one.]"</b></p>
* 2010-05-10 Microsoft states support for a -webkit- property and then withdraws it a day later due to community feedback: http://blogs.msdn.com/b/iemobile/archive/2010/05/10/javascript-and-css-changes-in-ie-mobile-for-windows-phone-7.aspx in particular: <blockquote><p>"We've also added support for the -webkit-text-size-adjust CSS selector. This selector allows you to control how text on the Web page is scaled to increase readability for the user (you can also use -ms-text-size-adjust, IE Mobile recognizes both).</p><p> ... [one day later] ... </p><p><b>"[Update 05/11/2010: based on community feedback, we will only be implementing the -ms- prefix, not the -webkit- one.]"</b></p>
* 2010-05-10 Jonathan Snook: [http://snook.ca/archives/html_and_css/vendor-prefixes-competing
* 2010-05-11 Jonathan Snook: [http://snook.ca/archives/html_and_css/vendor-prefixes-competing
'''2011:'''
'''2011:'''
* 2011-11-15 Henri Sivonen: [http://hsivonen.iki.fi/vendor-prefixes/ Vendor Prefixes Are Hurting the Web]
* 2011-11-15 Henri Sivonen: [http://hsivonen.iki.fi/vendor-prefixes/ Vendor Prefixes Are Hurting the Web]

Revision as of 04:07, 16 February 2012

CSS vendor-prefix compatibility

problem statement

Sites that have WebKit-specific content and back-up content for everyone else.

-webkit- properties are used so much on mobile content in particular that non-WebKit browsers face a Prisoner's Dilemma problem, analogous to past quirks battles (e.g. 2003-4 era innerHTML and undetected document.all).

data: https://bugzilla.mozilla.org/show_bug.cgi?id=708406

problematic sites

See http://people.mozilla.com/~atrain/mobile/Evangelism/chrome-compare/chrome-compare.html for a comparison of Android default browser vs. Mobile Firefox/13.0a1 Nightly

Please feel free to add specific problematic sites here so we can Firefox Mobile QA can investigate:

  • ...

goals

The underlying open web goal:

  • Open up the webkit-specific part of the web to other vendors in the same way that we had to be practical about what IE-proprietary or IE-only technologies to support.

straw proposal

  • Consider implementing some -webkit- prefixed properties.

straw proposal downsides

  • Unfortunately for the open web, implementing a -webkit- prefixed property (outside of WebKit) will nearly legitimize (make people assume they'll work forever) the use of -webkit- prefixed properties.
  • ...

possible downside mitigation

  • In the short term we can at least remove pain for web authors and users.
  • In the long term we can ensure the unprefixed properties (in CR drafts) work and encourage authors to switch to them.
  • ...

questions and methodology

For sites in general:

  • What are the thresholds (even approximate) for supporting an other-vendor prefixed property vs. not?
  • How much of this is due to user-agent sniffing?
    • Is there an approximate % of top N sites that justifies it?
    • Is there a set of specific top sites that justifies it?
      • Could grab the Alexa 50 for mobile and compare side-by-side
  • How should we consider occurrence counts of -webkit- properties?
    • Weighted by PageRank or equivalent?
  • Severity of feature absence. Missing some properties breaks a lot more than missing others. Consider usability of page with/without the feature, not just how often it is used. E.g. tap-highlight-color does not affect the user's ability to use a website the same way text-size-adjust does.
  • ...

For specific sites:

  • *Which* sites will work *how much* better if we implement *which* properties?
    • The sites which are currently "broken" should be listed above in "problematic sites" and have a bug# for each one.
  • ...

parsing other vendor prefixes approaches

  • parse other vendor prefixed properties only in conjunction with parsing the equivalent unprefixed properties
  • only do it for environments where critically necessary, i.e. mobile not desktop, to encourage use of standard equivalents.

unprefixing principles

  • unprefixing things early (before CR) should be an exceptional case
    • what is the methodology for "exceptional" unprefixing?
  • unprefixing things must be evaluated carefully on case-by-case basis.
  • unprefixing is not something to do routinely just to "go faster" by a few months.
    • put the energy first into contributing and passing test suites instead.
  • ...

meetings minutes discussions

2010:

2011:

2012:

FAQ

  • ...

Next Steps

  • Propose -webkit- properties to implement in Firefox Mobile, each based on specific data from bug 708406.
    • -webkit-... due to prevalence of usage in x% of sites ...
  • ...

Data on vendor-specific prefixes

Here's a summary of the data collection and analysis that has been conducted regarding the use of various CSS vendor-specific prefixes.

The current datasets, collected by John Jensen, are:

Initial CSS properties dataset

Q and A

  • how many sites in your mobile Webkit browser crawl use at least one of 'transition', 'transition-timing-function', 'transition-duration', 'transition-property', 'transition-delay' (ignoring prefixes)?

1245 / 30087 = 4.13%

  • how many use them only with -webkit prefixes (no -moz or unprefixed versions of the properties)?

336 / 30087 = 1.12%

  • how many use them only with -webkit prefixes and unprefixed (no -moz versions of the properties)?

365 / 30087 = 1.21%

  • For each CSS prefix for which there are both -moz- and -webkit- prefixes, what percentage of domains host CSS that uses only the -webkit- version and not the -moz- or unprefixed version?
text-size-adjust 510 1.70%
box-shadow 428 1.42%
border-radius 412 1.37%
appearance 379 1.26%
font-smoothing 285 0.95%
tap-highlight-color 250 0.83%
transform 75 0.25%
border-top-left-radius 72 0.24%
border-top-right-radius 72 0.24%
transition-duration 61 0.20%
animation-duration 56 0.19%
animation-name 56 0.19%
border-bottom-left-radius 55 0.18%
border-bottom-right-radius 55 0.18%
transition-property 49 0.16%
animation-iteration-count 45 0.15%
padding-start 45 0.15%
background-size 43 0.14%
animation-timing-function 42 0.14%
box-sizing 42 0.14%

Larger, as-yet-unprocessed datasets

  • Raw data downloading completed in mid-January 2012, using these UAs:
  1. latest Android Native Browser from ICS
  2. latest Mobile Safari UA
  • Includes all HTML, Javascript, CSS files in compressed format
  • Roughly 1.1m files downloaded for each UA

Summary data is attached to bug 708406.

Retrieved from "https://wiki.allizom.org/index.php?title=Platform/Layout/CSS_Compatibility&oldid=397958"