Graceful Degradation with Modernizr

September 05, 2013

130

Graceful Degradation with Modernizr

Erik Frisk

September 05, 2013

Tweet

More Decks by Erik Frisk

See All by Erik Frisk

Seven UX Design Rules

10

420

The Science of Design

3

200

Organizing Stylesheets with CSS Pre-processors

0

150

Responsive Web Design in a Nutshell

0

400

2

140

Customer On-boarding in Practice

2

110

Other Decks in Programming

See All in Programming

Fibonacci Function Gallery - Part 1

0

210

テストコードのガイドライン〜作成から運用まで〜

3

370

[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ！

0

460

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

0

250

数十万行のプロジェクトを Scala 2から3に完全移行した

0

270

フロントエンドのディレクトリ構成どうしてる？　Feature-Sliced Design 導入体験談

8

4.1k

これでLambdaが不要に？！Step FunctionsのJSONata対応について

2

3.6k

ブラウザ単体でmp4書き出すまで - muddy-web - 2024-12

3

470

創造的活動から切り拓く新たなキャリア好きから始めてみる夜勤オペレーターからSREへの転身

1

130

クリエイティブコーディングとRuby学習 / Creative Coding and Learning Ruby

0

3.9k

情報漏洩させないための設計

1

130

17年周年のWebアプリケーションにTanStack Queryを導入する / Implementing TanStack Query in a 17th Anniversary Web Application

0

250

Featured

See All Featured

A designer walks into a library…

pauljervisheath

204

24k

GraphQLとの向き合い方2022年版

44

13k

Unsuck your backbone

669

57k

Build your cross-platform service in a week with App Engine

229

18k

Testing 201, or: Great Expectations

40

7.1k

The Cult of Friendly URLs

78

6.1k

Facilitating Awesome Meetings

50

6.1k

The Cost Of JavaScript in 2023

45

7k

[RailsConf 2023 Opening Keynote] The Magic of Rails

28

9.1k

The World Runs on Bad Software

65

11k

A Tale of Four Properties

157

23k

We Have a Design System, Now What?

51

7.3k

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