Stack Overflow
Stack Overflow

Questions tagged [progressive-enhancement]

Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page (regardless of browser) and providing an enhanced experience to those with better bandwidth, more advanced browser features or more experience.

Progressive Enhancement is a development technique that stresses the primacy of the semantic HTML, then testing for browser-capability and conditionally "layering" on JavaScript and/or CSS enhancements for the browsers that can utilize those enhancements.

One of the keys is understanding the Progressive Enhancement technique tests what the browser can do, as opposed to browser-sniffing.

Progressive-Enhancement is inherently (section 508) accessible; it provides for meeting the letter of the law and the spirit of the rule.

The Filament Group wrote the excellent "Designing With Progressive Enhancement" book on the subject.

185 questions
142
votes
8 answers

Best way to detect that HTML5 is not supported

The standard way to deal with situations where the browser does not support the HTML5 tag is to embed some fallback content like: Your browser doesn't support "canvas". But the rest of the page remains the same, which may…
brainjam
  • 18,863
  • 8
  • 57
  • 82
65
votes
7 answers

What is the difference between progressive enhancement and graceful degradation?

I'm confused on what the difference is between progressive enhancement and graceful degradation. To me they seem like the same thing. Can you please explain to me the differences between the two and in which situation I would use one over the other?
zeckdude
  • 15,877
  • 43
  • 139
  • 187
33
votes
1 answer

Is :not(:hover) and :hover a safe way to hide accessible elements?

Sometimes it appears helpful to make certain page elements only visible on e.g. hovers. An example is stackoverflow's "feedback - Was this post useful to you?"-widget. As those elements might be crucial to the interface, such a show-on-hover-feature…
Richard Kiefer
  • 1,814
  • 2
  • 23
  • 42
32
votes
3 answers

How can I style external links like Wikipedia?

I would like to distinguish between external and internal links using just CSS. I would like to add a small icon to the right side of these links, without it covering up other text. The icon I would like to use is the icon used on Wikipedia. For…
Brigand
  • 84,529
  • 20
  • 165
  • 173
28
votes
4 answers

Detecting support for a given JavaScript event?

I'm interested in using the JavaScript hashchange event to monitor changes in the URL's fragment identifier. I'm aware of Really Simple History and the jQuery plugins for this. However, I've reached the conclusion that in my particular project…
Will
  • 283
  • 1
  • 3
  • 4
25
votes
2 answers

How can I check if a user's computer supports Emoji?

This question could be generalized to any character, I suppose; but my specific use-case are emoji. I'm writing a command-line program, and I want to detect if the computer on which it is running has a font installed that can display emoji; and…
ELLIOTTCABLE
  • 17,185
  • 12
  • 62
  • 78
24
votes
7 answers

What is Progressive Enhancement?

Jeff mentioned the concept of 'Progressive Enhancement' when talking about using JQuery to write stackoverflow. After a quick Google, I found a couple of high-level discussions about it. Can anyone recommend a good place to start as a…
kaybenleroll
  • 16,794
  • 16
  • 54
  • 66
23
votes
2 answers

Hybrid page-based / single-page web-app (Angularjs, Ember.js) with progressive enhancement?

I'm wondering if anyone has found a solution to this problem. Is there a way to get the best of both worlds: build a page-based site, with permanent links, accessibility, SEO, and graceful fallback / progressive enhancement (basically all the best…
Christopher Poile
  • 985
  • 1
  • 11
  • 17
19
votes
5 answers

Progressive Enhancement with KnockoutJS

Let's say we have data as follows var data = { facets: [{ name : "some name", values: [{ value: "some value" }] }] }; We can easily represent this as a view model bound to a knockout template as follows:
Can Gencer
  • 8,822
  • 5
  • 33
  • 52
17
votes
1 answer

Detecting geo-uri-support

Is there a way with JavaScript to check whether the client-browser supports the GEO-URI-scheme? I want to show a coordinate for nonsupported browsers as a link to a map Berlin and for…
cyper
  • 436
  • 4
  • 12
11
votes
5 answers

Detect when JavaScript is disabled in ASP.NET

In the Render method of an ASP.NET web-control, I need to alter the output of the Html based on whether JavaScript is enabled or disabled on the clients browser, Does anyone know the right incantation to figure that out?
Kieron
  • 26,748
  • 16
  • 78
  • 122
11
votes
5 answers

Is it ok to manipulate dom before ready state?

This is generally how I manage progressive enhancement whilst keep the experience clean, but how safe is it? is there potential for a race condition and this not working? Imagine the simple abstract scenario, you want to display something…
meandmycode
  • 17,067
  • 9
  • 48
  • 42
10
votes
4 answers

CSS3 Transition Polyfill

Alright, so most of you will be familiar with CSS3 Transitions, I prefer it above jQuery animations as it has the simplicity of CSS. My only regret is that it doesn't work in IE < 9( As always ) as well as Firefox < 4, Safari < 4, etc. I do not mean…
Rigel Glen
  • 1,289
  • 3
  • 14
  • 20
9
votes
8 answers

HTML radio buttons: hide bullets

I want a particular form component to act as radio buttons (only one option may be selected at a time). I do not want the radio bullets to show, however, opting for alternative presentational methods such as high light selected, or some other…
whamsicore
  • 8,320
  • 9
  • 40
  • 50
1
2 3
…
12 13