FOUC, and the Death of Progressive Enhancement

35761e3936deba2f8189c2d20982c771?s=47 Kyle Simpson
September 13, 2019

FOUC, and the Death of Progressive Enhancement

Web developers have long heralded Progressive Enhancement for delivering web experiences in "layers" (HTML, images, CSS, and then JS). It sounds so obvious and elegant, right? But FOUC (Flash of Unstyled Content), exposes the lies we've been telling ourselves and users! It's time to peel back the layers and re-envision how the web is assembled.


Kyle Simpson

September 13, 2019


  1. 7.

    <html> <body> <a id="hover-me">Hover Me!</a> </body> </html> #hover-me { background-color:

    #f00; color: #fff; } var btn = document.getElementById("hover-me"); btn.addEventListener("mouseover",openMenu); btn.addEventListener("mouseout",closeMenu); Separation of Concerns
  2. 17.
  3. 19.
  4. 21.
  5. 25.
  6. 28.
  7. 29.
  8. 38.

    Flawed: if the device can do it, the user wants

  9. 49.
  10. 54.
  11. 60.
  12. 68.

    "[N]o one has disproved the benefits of Progressive Enhancement or

    proposed a better technique." backlash-myth-busting-progressive-enhancement/