{"id":274940,"date":"2018-12-17T14:57:26","date_gmt":"2018-12-17T21:57:26","guid":{"rendered":"http:\/\/css-tricks.com\/?p=274940"},"modified":"2018-12-17T14:57:26","modified_gmt":"2018-12-17T21:57:26","slug":"nobody-is-quite-wrong","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/nobody-is-quite-wrong\/","title":{"rendered":"Nobody is quite wrong."},"content":{"rendered":"

There are two opposing views on using non-polyfillable new web features that I find are both equally common in our industry:<\/p>\n

    \n
  1. Websites don’t need to look the same in every browser. The concept of progressive enhancement helps with that. There are tools, even native language features, that help with this.<\/li>\n
  2. If browser support isn’t where I want it to be, it’s just exotic eye candy for demos and not to be used.<\/li>\n<\/ol>\n

    I’m not sure I’d say either one of these is more or less correct than the other. <\/p>\n

    <\/p>\n

    I also imagine it doesn’t come as much of surprise that I support the thinking behind #1. It’s perfectly possible to design and implement things that behave differently in different browsers and conditions. That’s essentially what responsive design is, and that’s pretty much the entire internet now. <\/p>\n

    The backbone of progressive enhancement is starting with a working foundation that works everywhere and layering design and functionality on top of that, when possible. There are even native language features to support the idea. @supports<\/code> rules allow us to write CSS that can do something if a feature is supported and do something else if it isn’t. <\/p>\n

    This is the entire use case for Modernizr<\/a> and it has 22,804 stars. <\/p>\n

    I don’t want to argue against progressive enhancement. Remember, I just said I support that thinking. But I do have some empathy for people and teams that choose not to go there, and end up developing more of a #2 attitude. <\/p>\n

    It is a bit more work<\/em> to develop and design features that work in different ways. It might be work that is absolutely worth doing. Or it might not. Either way, it does complicate things. It’s more code, it requires more attention and testing, and it’s a bit harder to reason. It’s technical debt.<\/strong><\/p>\n

    Let me be preemptively defensive again: technical debt can be fine<\/a>, and even intentional. We all incur it in everything we build. My point is that it is helpful to be smart about it and take on an amount of technical debt that is feasible for you to look after in perpetuity.<\/p>\n

    You might argue that building on a progressive enhancement foundation is, in a sense, less<\/em> technical debt because you’re building on such a sturdy foundation that less testing and constant tending to is required. Perhaps! <\/p>\n

    I do get<\/em> behaving like a #2. It feels safer. It feels like you’re being cautious and responsible. “Hey that’s neat,” you think. “I’ll revisit it in a few years to see if I can use it for real.” I might argue that 1) that’s no fun and 2) almost counter-intuitively, it means you aren’t willing to take a progressive enhancement approach which may make your code ultimately more frail.<\/p>\n

    It depends, I suppose. It depends on what exactly you’re trying to do. It depends on the weight of that techinical debt. It depends on the team and the rate of developer churn. It depends on documentation. It depends on testing and QA.<\/p>\n

    You do you.<\/p>\n","protected":false},"excerpt":{"rendered":"

    There are two opposing views on using non-polyfillable new web features that I find are both equally common in our industry: Websites don’t need to look the same in every browser. The concept of progressive enhancement helps with that. There are tools, even native language features, that help with this. If browser support isn’t where […]<\/p>\n","protected":false},"author":3,"featured_media":280167,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"No one is _quite_ wrong when it comes to using non-polyfillable web features.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[905,620],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/opinon-this-that-signs.png?fit=4000%2C2000&ssl=1","jetpack-related-posts":[{"id":302550,"url":"https:\/\/css-tricks.com\/apollo-graphql-without-javascript\/","url_meta":{"origin":274940,"position":0},"title":"Apollo GraphQL without JavaScript","date":"January 29, 2020","format":false,"excerpt":"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 mutation Ajax request through Apollo GraphQL. That is about the\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/apollo-graphql-button.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":360073,"url":"https:\/\/css-tricks.com\/defensive-css\/","url_meta":{"origin":274940,"position":1},"title":"Defensive CSS","date":"December 31, 2021","format":false,"excerpt":"Ahmad\u00a0Shadeed nails it again with \"Defensive CSS.\" The idea is that you should write CSS to be ready for issues caused by dynamic content. More items than you thought would be there? No problem, the area can expand or scroll. Title too long? No problem, it either wraps or truncates,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/defensive-6-1.png?fit=1200%2C575&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":275719,"url":"https:\/\/css-tricks.com\/new-mobile-chrome-feature-would-disable-scripts-on-slow-connections\/","url_meta":{"origin":274940,"position":2},"title":"New mobile Chrome feature would disable scripts on slow connections","date":"August 31, 2018","format":false,"excerpt":"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 shown a UI at the bottom of the screen indicating\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/chrome-brackets.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":362169,"url":"https:\/\/css-tricks.com\/evergreen-does-not-mean-immediately-available\/","url_meta":{"origin":274940,"position":3},"title":"\u201cEvergreen\u201d Does Not Mean Immediately Available","date":"February 1, 2022","format":false,"excerpt":"I have a coworker who is smart, capable, and technologically-literate. Like me, they work on the web full-time. When they are sharing their screen in a meeting, I find myself disassociating fixating on the red update button in their copy of Chrome. Clicking this button would start the process to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"A floppy disk used for install king Netscape Navigator.","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_D0AD31FBF658C09667EF06883B4D142FA961BADADF5839F7F681E757E12AFFB1_1641571594625_Floppy_Disk_of_Netscape_Navigator-scaled.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":246516,"url":"https:\/\/css-tricks.com\/progressive-enhancement-debate\/","url_meta":{"origin":274940,"position":4},"title":"Progressive Enhancement “Debate”","date":"October 14, 2016","format":false,"excerpt":"Nolan Lawson: I had a slide in my talk that read: In 2016, it\u2019s okay to build a website that doesn\u2019t work without JavaScript. The condemnation was as swift as it was vocal. Response by Jeremy Keith: That framing makes it sound like it\u2019s a binary choice: either the website\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":194902,"url":"https:\/\/css-tricks.com\/progressive-enhancement-data-visualizations\/","url_meta":{"origin":274940,"position":5},"title":"Progressive Enhancement and Data Visualizations","date":"February 2, 2015","format":false,"excerpt":"The following is a guest post by Chris Scott. Chris has written for us before - always on the cutting edge of things. This time Chris shows us something new in the form of a new charting technique his company offers. But it's based on something old: the fundamentals of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/opinon-this-that-signs.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/274940"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=274940"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/274940\/revisions"}],"predecessor-version":[{"id":280071,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/274940\/revisions\/280071"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/280167"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=274940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=274940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=274940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}