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.

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

Adds guidelines for graded browser support. #108

Merged
merged 6 commits into from Dec 5, 2016
Merged

Conversation

sky-jack
Copy link
Contributor

No description provided.

> > "Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network."


- Reproduced from guidelines by [http://nate.koechley.com/](Nate Koechely)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we citing the source properly? I can't seem to find the original post, but his site has a CC BY 2.5 license, which states:

Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made.

Any idea where the source is? @dotcode ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's one small (and by "small" i mean "enormous") hitch when it comes to the source - we reproduced this from the Yahoo! YUI guidelines: https://github.com/yui/yui3/wiki/Graded-Browser-Support

It's also open source but it gives me a bad feeling to reproduce it verbatim, even if it's correctly attributed. Perhaps we should keep the table and anything that isn't included in the YUI source, and link out to their source instead.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, keeping the table and linking out to source seems best.

@dotcode
Copy link
Contributor

dotcode commented Oct 20, 2016

@joseluisbolos just emailing Nate to find out :)

@dotcode
Copy link
Contributor

dotcode commented Oct 20, 2016

@hollsk yeah … we're copying it almost verbatim, the bits we've altered refer to QA support for that strategy. Happy to do what you suggest though, it makes sense (the edits we've made are trivial). Can always fork it if necessary in future.

@hollsk
Copy link
Contributor

hollsk commented Oct 20, 2016

We had a bit of chat about it in Slack, and Jose and I thought that one approach might be to copy what YUI did by having the table on one page, and some more supporting blurb on another. That would give us the best of both worlds, I think.

…h to graded-browser support, cutting the mustard
Copy link
Contributor

@hollsk hollsk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only one comment, on the very last bit. The rest looks great, IMO.


> > "Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network."
We initialises JavaScript only if the browser supports a number of modern:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you lost your train of thought while you were editing this line 😁

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

initaliseseses

@hollsk
Copy link
Contributor

hollsk commented Nov 4, 2016

Do it 👍

## Our criteria for browser support


We followe the guidelines for graded browser support outlined by Nate Koechley at Yahoo:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

follow typo



We followe the guidelines for graded browser support outlined by Nate Koechley at Yahoo:
[https://github.com/yui/yui3/wiki/Graded-Browser-Support](Yahoo Grade Browser Support guide)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if i preview these changes this link doesn't work, says page not found

Copy link
Contributor

@benjclark benjclark Nov 4, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This applies to all the links actually. I think it's because the format should be name in square brackets followed by url in parentheses

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Yahoo Grade Browser Support guide](https://github.com/yui/yui3/wiki/Graded-Browser-Support)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah yes. Silly me.

@sky-jack
Copy link
Contributor Author

sky-jack commented Nov 4, 2016

Fixed typos.

@benjclark
Copy link
Contributor

👍

## How we implement graded browser support


There are currently two methods by which implement graded support for browsers using principles of progressive enhancement.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From:

There are currently two methods by which implement

To:

There are currently two methods by which we implement

Copy link
Contributor

@umaar umaar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One more change please


In other cases where querying the user agent is not feasible we apply a 'cutting the mustard' approach to graded browser support, based upon the principles developed by the BBC: [Cutting the Mustard](http://responsivenews.co.uk/post/18948466399/cutting-the-mustard)

We load our basic stylesheet to all users. This contains only normalisation and a few small enhancements to the user-agent stylesheet. To load the full experience only in modern browsers we implement logic in the media attribute of the link element that identifies the main stylesheet, loading the stylesheet only in browsers that recognise the properties of that media query. The technique is documented here: [Cutting the Mustard with Media queries](https://www.sitepoint.com/cutting-the-mustard-with-css-media-queries/).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a biggie but linking to the normalisation project or giving a definition of that it is would be nice

@sky-jack
Copy link
Contributor Author

sky-jack commented Nov 4, 2016

All sounds good. Should have re-read more carefully!

@josebolos
Copy link
Contributor

Those values on the table don't match what we currently have on the code. Seems like someone may have changed them (incorrectly) at some point.

@sky-jack
Copy link
Contributor Author

sky-jack commented Nov 4, 2016

What should change?

| ------------- |:---------------:| ----------------:|
| Chrome | latest stable | |
| Edge | latest stable | |
| Firefox | latest stable | $1 |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sky-jack What does $1 mean?

@josebolos
Copy link
Contributor

josebolos commented Nov 23, 2016

Gosh, I missed this thread. This is the current list of C-Grade browsers in our legacy platform (which we've been using as a single source of truth so far):

  • Internet Explorer <9
  • Safari up to 4.0.x on Windows and OS X
  • Safari 2 (any) and Safari 3 (iPhone 1)
  • Unknown (User-Agent matches '.* AppleWebKit.Version/[0-2]..')
  • Safari 1
  • Unknown (User-Agent matches '.*Version/2.2 Firefox/525.13')
  • Firefox 0.x and 1
  • Opera up to 9.4
  • Nokia browser for Symbian 7.3
  • Android browser up to 2.x
  • Old versions of 'Mozilla compatible' browsers
  • Netscape

In bold the ones that don't match what's on the table. As you can see, there are others that are not on the table at all, I'm not sure what we want to do and if we want to put them there.

@hollsk
Copy link
Contributor

hollsk commented Dec 5, 2016

I'm merging this right now as it's a blocker for some other updates. I've opened issue #117 to correct the C-grade values, which should get things moving again :-)

@hollsk hollsk merged commit 39f2448 into master Dec 5, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

8 participants