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

410

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

【Kaigi on Rails 2024】YOUTRUST スポンサーLT

1

330

LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について

2

190

とにかくAWS GameDay！AWSは世界の共通言語！ / Anyway, AWS GameDay! AWS is the world's lingua franca!

1

860

シールドクラスをはじめよう / Getting Started with Sealed Classes

4

640

どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか

1

120

Remix on Hono on Cloudflare Workers

1

290

0

460

弊社の「意識ﾁｮｯﾄ低いアーキテクチャ」10選

5

24k

ローコードSaaSのUXを向上させるためのTypeScript

1

610

ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry

1

230

3 Effective Rules for Using Signals in Angular

0

110

Tauriでネイティブアプリを作りたい

0

370

Featured

See All Featured

[RailsConf 2023 Opening Keynote] The Magic of Rails

28

9.1k

Teambox: Starting and Learning

133

8.8k

10 Git Anti Patterns You Should be Aware of

654

59k

Cheating the UX When There Is Nothing More to Optimize - PixelPioneers

stephaniewalter

280

13k

CSS Pre-Processors: Stylus, Less & Sass

356

29k

145

15k

Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure

42

9.2k

Understanding Cognitive Biases in Performance Measurement

26

1.4k

StorybookのUI Testing Handbookを読んだ

27

5.3k

Rebuilding a faster, lazier Slack

79

8.7k

GraphQLの誤解/rethinking-graphql

67

10k

The Art of Delivering Value - GDevCon NA Keynote

8

880

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