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
Conversation
> > "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) |
There was a problem hiding this comment.
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 ?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
@joseluisbolos just emailing Nate to find out :) |
@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. |
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
There was a problem hiding this 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: |
There was a problem hiding this comment.
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 😁
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
initaliseseses
Do it 👍 |
## Our criteria for browser support | ||
|
||
|
||
We followe the guidelines for graded browser support outlined by Nate Koechley at Yahoo: |
There was a problem hiding this comment.
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) |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ah yes. Silly me.
Fixed typos. |
👍 |
## How we implement graded browser support | ||
|
||
|
||
There are currently two methods by which implement graded support for browsers using principles of progressive enhancement. |
There was a problem hiding this comment.
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
There was a problem hiding this 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/). |
There was a problem hiding this comment.
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
All sounds good. Should have re-read more carefully! |
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. |
What should change? |
| ------------- |:---------------:| ----------------:| | ||
| Chrome | latest stable | | | ||
| Edge | latest stable | | | ||
| Firefox | latest stable | $1 | |
There was a problem hiding this comment.
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?
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):
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. |
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 :-) |
No description provided.