Graceful Degradation with Modernizr

September 05, 2013

1k

Graceful Degradation with Modernizr

Lean Machine

September 05, 2013

Tweet

More Decks by Lean Machine

See All by Lean Machine

3

980

Organizing Stylesheets with CSS Pre-processors

2

950

Responsive Web Design in a Nutshell

3

130

Seven UX Design Rules

9

1k

JavaScript Closures

1

1.1k

JavaScript Inheritance

2

1.1k

Asynchronous JavaScript

1

950

JavaScript Promises

2

1.1k

Other Decks in Programming

See All in Programming

php-conference-japan-2024

0

270

KubeCon + CloudNativeCon NA 2024 Overviewat Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68

0

250

見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理

0

330

Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4

1

330

今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left

0

200

From Translations to Multi Dimension Entities

alexanderschranz

2

130

ドメインイベント増えすぎ問題

2

300

「Chatwork」Android版アプリを支える単体テストの現在

0

180

The Efficiency Paradox and How to Save Yourself and the World

1

440

短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go

2

170

Cloudflare MCP ServerでClaude Desktop からWeb APIを構築

1

540

Effective Signals in Angular 19+: Rules and Helpers @ngbe2024

0

140

Featured

See All Featured

Understanding Cognitive Biases in Performance Measurement

26

1.5k

The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024

17

2.3k

"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)

226

22k

Designing for Performance

604

68k

85

9.4k

Building Flexible Design Systems

yeseniaperezcruz

327

38k

Measuring & Analyzing Core Web Vitals

4

170

Build The Right Thing And Hit Your Dates

33

2.4k

Why Our Code Smells

335

57k

Product Roadmaps are Hard

49

11k

Facilitating Awesome Meetings

50

6.1k

The Psychology of Web Performance [Beyond Tellerrand 2023]

45

2.2k

Transcript

Graceful Degradation ... with Modernizr leanmachine.se ▪ [email protected] ▪ 2013-09-06
“Graceful degra... whaaa?”
CSS3
None
if (browser == 'IE8') { // Add some css classes,
etc. } if (browser == 'IE9') { // Add some css classes, etc. } if (browser == 'IE10') { // Add some css classes, etc. } if (browser == 'IE11') { // Add some css classes, etc. } if (browser == 'Chrome') { // Add some css classes, etc. } if (browser == 'Firefox') { // Add some css classes, etc. }
if (browser == 'IE8') { // Add some css classes,
etc. } if (browser == 'IE9') { // Add some css classes, etc. } if (browser == 'IE10') { // Add some css classes, etc. } if (browser == 'IE11') { // Add some css classes, etc. } if (browser == 'Chrome') { // Add some css classes, etc. } if (browser == 'Firefox') { // Add some css classes, etc. }
Detect browser features, not browser version.” “
None
<head>  <script type="text/javascript" src="modernizr.js"></script> </head>
Include modernizr.js
1 HTML5 Shiv – Makes new HTML5 sectioning tags work
in old browsers 2 CSS classes on <html> element based on available features 3 Modernizr.<feature> in JavaScript
.our-div { -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px
1px 1px; box-shadow: #666 1px 1px 1px; } .no-boxshadow .our-div { border-bottom: 1px solid #666; border-right: 1px solid #777; }
if (Modernizr.boxshadow) { // Do cool stuff... }
http://modernizr.com/
leanmachine.se ▪ [email protected] ▪ 2013-09-06