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
9
votes
1 answer

Is it possible to detect processing power for use in progressive enhancement in web development?

Sometimes I need to add animation effects that are out of the scope of CSS3 like effects that are coupled to scroll position etc. Often, this works just fine but I ran into an awkward problem lately. Im trying to animate a blur effect that occurs…
romeovs
  • 5,785
  • 9
  • 43
  • 74
9
votes
1 answer

Progressive enhancement with YUI3 (Y.App) and Symfony2

We actually work with the Symfony 2 PHP framework and Twig as a template engine. We think that we could avoid code duplication for the View layer and benefit from progressive enhancement (p-jax). Current status: PJAX doesn't handle partial updates…
Benjamin
  • 382
  • 4
  • 12
8
votes
2 answers

How to not reset the form on submit with `use:enhance` in Svelte?

I have a form that updates a product's information using a form with use:enhance and actions defined in +page.server.ts - However, whenever I submit the form, use:enhance resets the form elements and they all become blank, which is unexpected as the…
Basil
  • 488
  • 1
  • 15
8
votes
1 answer

Using @supports selector() despite Sass not supporting it

I want to use the new CSS feature queries by selector, like so: :root { --focus-shadow: 0 0 0 2.4px rgba(130, 138, 145, 0.5); } /* Focus styles even for mouse selection in old browsers */ *:focus { outline: none; box-shadow: var(--focus-shadow);…
Ariane
  • 393
  • 4
  • 14
7
votes
3 answers

Mixing an @supports with an @media query in CSS

I'm building a website with CSS grid for the first time. Since not all browsers support this, I have made a set of fallback styles, and I conditionally apply those with @supports not (display:grid). But I also want to use this as the mobile…
vrugtehagel
  • 1,009
  • 1
  • 9
  • 20
7
votes
3 answers

How to create Progressive web app apk/any type of file that can be distributed in a enterprise devices

Understandably, PWAs (Progressive Web Apps) are added to home screen after the user visits the web app in a supported browser and clicks on "Add to Home Screen". This works fine for publicly available PWAs. Thinking of Enterprise Android…
Anand
  • 9,672
  • 4
  • 55
  • 75
7
votes
3 answers

How to enhance a server side generated page with Aurelia.io?

I'm writing an app with some parts as SPA and some pages generated on server side for SEO. I've chosen Aurelia.io framework and I use enhance method to enable custom elements on my pages. But I can't find the best way to use aurelia specific…
Hadrien.eu
  • 161
  • 10
7
votes
6 answers

Is progressive enhancement a current issue anymore?

There are couple of things I hear in defense of progressive enhancement. Javascript is off or not available. According to W3School's Javascript statistics, 95% had Javascript enabled January 2008 (2.5 years ago). The trend, based on those stats,…
randomguy
  • 12,042
  • 16
  • 71
  • 101
7
votes
2 answers

How do I build a gracefully-degrading HTML5 Range?

I'd like to use the from HTML5 for browsers that support it and degrade to a