Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
progressive enhancement

12 Articles
{
,

}
Direct link to the article Apollo GraphQL without JavaScript
apollo graphql progressive enhancement react

Apollo GraphQL without JavaScript

Direct Link

It’s cool to see progressive enhancement being done even while using the fanciest of the fancy front-end technologies.

This is a button in a JSX React component that has a click handler applied directly to it that fires a data …

Avatar of Chris Coyier
Shared by Chris Coyier on Jan 29, 2020
Direct link to the article Using <details> for Menus and Dialogs is an Interesting Idea
accessibility details/summary menus progressive enhancement

Using <details> for Menus and Dialogs is an Interesting Idea

One of the most empowering things you can learn as a new front-end developer who is starting to learn JavaScript is to change classes. If you can change classes, you can use your CSS skills to control a lot…

Avatar of Chris Coyier
Chris Coyier on Mar 21, 2019
Direct link to the article How @supports Works
@supports progressive enhancement

How @supports Works

CSS has a neat feature that allows us to test if the browser supports a particular property or property:value combination before applying a block of styles — like how a @media query matches when, say, the width of the browser …

Avatar of Chris Coyier
Chris Coyier on Feb 18, 2019 (Updated on Feb 25, 2019)
Direct link to the article New CodePen Feature: Prefill Embeds
codepen progressive enhancement

New CodePen Feature: Prefill Embeds

Direct Link

I’m very excited this feature is ready for y’all. You can take any <pre></pre> block of HTML, CSS, and JavaScript (or any combination of them) and enhance it into an embed, meaning you can see the rendered output. Very progressive …

Avatar of Chris Coyier
Shared by Chris Coyier on Jan 21, 2019 (Updated on Jan 22, 2019)
Direct link to the article Nobody is quite wrong.
opinion progressive enhancement

Nobody is quite wrong.

There are two opposing views on using non-polyfillable new web features that I find are both equally common in our industry:

  1. Websites don’t need to look the same in every browser. The concept of progressive enhancement helps with that. There
…
Avatar of Chris Coyier
Chris Coyier on Dec 17, 2018
Direct link to the article New mobile Chrome feature would disable scripts on slow connections
chrome JavaScript progressive enhancement

New mobile Chrome feature would disable scripts on slow connections

This is a possible upcoming feature for mobile Chrome:

If a Data Saver user is on a 2G-speed or slower network according to the NetInfo API, Chrome disables scripts and sends an intervention header on every resource request. Users are

…
Avatar of Chris Coyier
Chris Coyier on Aug 31, 2018
performance progressive enhancement pwa

A practical guide to Progressive Web Apps for organisations who don’t know anything about Progressive Web Apps

Direct Link

Sally Jenkinson:

Progressive Web Apps (sometimes referred to as PWAs, because everything in tech needs an acronym) is the encapsulating term for websites following a certain approach, that meet particular technical criteria. The “app” involvement in the name isn’t an

…
Avatar of Chris Coyier
Shared by Chris Coyier on Jan 30, 2017
forms progressive enhancement

Enhancing a Comment Form

Direct Link

Nice tutorial from Michael Scharnagl in which he takes a perfectly-functional comment form and progressively enhances it with very nice features. Things like custom error messaging, auto-expanding height, and even really fancy stuff like ajax and offline submission. …

Avatar of Chris Coyier
Shared by Chris Coyier on Nov 23, 2016
progressive enhancement

Progressive Enhancement “Debate”

Direct Link

Nolan Lawson:

I had a slide in my talk that read:

In 2016, it’s okay to build a website that doesn’t work without JavaScript.

The condemnation was as swift as it was vocal.

Response by Jeremy Keith:

That framing makes

…
Avatar of Chris Coyier
Shared by Chris Coyier on Oct 14, 2016
progressive enhancement shapes

A Redesign with CSS Shapes

Direct Link

CSS Shapes is like the perfect example for progressive enhancement these days. Kinda like border-radius was. Older browsers have square corners! Who cares! CSS Shapes allow you to wrap text irregularly – like along the path of a circle().…

Avatar of Chris Coyier
Shared by Chris Coyier on Oct 4, 2016
an event apart contest microsoft progressive enhancement

10k Apart

Direct Link

This year is An Event Apart’s 10th anniversary. In order to celebrate, they are putting on competition called 10K Apart where people show off what can be accomplished in 10kB of data. This isn’t a new competetion- its first genesis …

Avatar of Sarah Drasner
Shared by Sarah Drasner on Aug 15, 2016
  • 1
  • 2
  • Older
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top