Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Move to a feature-detection system for delivering 1st class browser support #7391

Closed
3 of 7 tasks
alexgibson opened this issue Jul 8, 2019 · 2 comments
Closed
3 of 7 tasks

Move to a feature-detection system for delivering 1st class browser support #7391

alexgibson opened this issue Jul 8, 2019 · 2 comments
Assignees
@alexgibson
Labels
P3 Third level priority - Nice to have Papercuts 💸 Tech debt payoff
Milestone
S2/Q4: 20191104-2...

Comments

@alexgibson
Copy link
Member

alexgibson commented Jul 8, 2019 •
edited
Loading

Description

We usually do a good job of making sure to deliver usable experiences to people both with and without JS enabled, but handling scenarios where JS fails to load is a much more common problem on most websites today. We often resort to using feature detection for this type of problem, but it's nearly always done on a page-by-page basis, or at a component level.

If we moved toward using a global cutsTheMustard() type feature detect (real name TBD), and only ran page-specific JS if the function passes, then we could much more confidently ship code without worrying that we're breaking the site in old browsers.

My initial idea was a function that runs a callback only if the feature detect returns true, but there may be other ways to do this too.

💛 Success Criteria 💛

  • Deliver feature detection on a single page (e.g. /firefox/all)
  • Document the feature detection snippet and incorporate into norms going forward

❗ Risks ❗

  • Where should this live - should it be in the <head>, so we can leverage it for CSS class hooks, or should it be in the common bundle only? There are likely tradeoffs for each.

Tasks

  • Create a feature detect. Ideally it should return false for IE10, but true for IE11 and above.
  • Decide where to implement it and how to should be used (see risks above).
  • Update the page-specific JS on /firefox/all/ to use the new feature detect.
  • Document the feature detect and how it should be used on our browser support page.
@alexgibson
Copy link
Member Author

See also: #7391

@alexgibson alexgibson added the Papercuts 💸 Tech debt payoff label Jul 8, 2019
@alexgibson alexgibson modified the milestone: Technical Roadmap Q4 2019 Jul 8, 2019
@alexgibson
Copy link
Member Author

alexgibson commented Aug 12, 2019 •
edited
Loading

Since IE10 does not support conditional comments (the mechanism we currently use to deliver basic browser support for legacy IE), this issue will become important in order to drop support for IE10.

We may want to consider moving away from conditional comments & universal CSS longer term, and moving more toward a feature-detection model that uses graceful degredation.

@alexgibson alexgibson changed the title Add a site-wide feature detection snippet for 1st class JS support. Move to a feature-detection system for delivering 1st class browser support Aug 12, 2019
@alexgibson alexgibson mentioned this issue Aug 13, 2019
Closed
7 tasks
@ejregithub ejregithub added this to the S5/Q3: 20190923-20191011 milestone Sep 18, 2019
@ejregithub ejregithub added the P3 Third level priority - Nice to have label Sep 18, 2019
@alexgibson alexgibson self-assigned this Oct 8, 2019
alexgibson added a commit that referenced this issue Oct 8, 2019
@alexgibson
Add site wide feature detect snippet (Fixes #7391)
efb67b7
alexgibson added a commit that referenced this issue Oct 8, 2019
@alexgibson
Add site wide feature detect snippet (Fixes #7391)
a4771b0
alexgibson added a commit that referenced this issue Oct 8, 2019
@alexgibson
Add site wide feature detect snippet (Fixes #7391)
5d3015f
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 9, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
b707c24
@alexgibson alexgibson mentioned this issue Oct 9, 2019
Merged
2 tasks
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 9, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
118d62d
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 9, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
1234f0b
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 10, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
0d6afdc
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 10, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
64038fa
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 10, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
570ddb5
@alexgibson alexgibson added the Needs Review Awaiting code review label Oct 10, 2019
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 11, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
761845a
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 14, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
641392e
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 14, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
2bff3e1
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 15, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
945257b
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 17, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
aa37521
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 18, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
64292f9
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 21, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
ff09004
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 22, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
4d7d070
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 23, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
4742814
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 28, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
3166bad
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 30, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
ae5c55a
alexgibson added a commit to alexgibson/bedrock that referenced this issue Oct 31, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
78b8229
alexgibson added a commit to alexgibson/bedrock that referenced this issue Nov 4, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
b8d6ab4
alexgibson added a commit to alexgibson/bedrock that referenced this issue Nov 5, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
0f5a83a
alexgibson added a commit to alexgibson/bedrock that referenced this issue Nov 5, 2019
@alexgibson
Add site wide feature detect snippet (Fixes mozilla#7391)
00498d0
@stephaniehobson stephaniehobson removed the Needs Review Awaiting code review label Sep 29, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@alexgibson alexgibson

Labels
P3 Third level priority - Nice to have Papercuts 💸 Tech debt payoff
Projects
None yet
Milestone
S2/Q4: 20191104-20191122
Development

No branches or pull requests
3 participants
@alexgibson @stephaniehobson @ejregithub