Graceful Degradation with Modernizr

September 05, 2013

120

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

190

Organizing Stylesheets with CSS Pre-processors

0

130

Responsive Web Design in a Nutshell

0

390

2

130

Customer On-boarding in Practice

2

98

Other Decks in Programming

See All in Programming

チーム力を高めるスクラム実践法：カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18

1

110

ADRを一年運用してみた/adr_after_a_year

7

2.2k

From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE

0

850

9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの ~プログラム言語~

1

640

スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18

1

120

脱・初心者！脱・マネコン！AWS CDKを使ってみませんか！？

0

300

Micro Frontends for Java Microservices - Devnexus 2024

0

410

OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI

2

100

Folding Cheat Sheet #2

0

110

Designing for tomorrow's programming workflows

2

110

#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures

3

210

CircleCIを活用して AWSへの継続的デリバリーを実践する

coconala_engineer

1

230

Featured

See All Featured

Designing the Hi-DPI Web

276

33k

Faster Mobile Websites

296

30k

The Invisible Customer

114

12k

Statistics for Hackers

789

220k

Infographics Made Easy

237

18k

Adopting Sorbet at Scale

67

8.6k

Embracing the Ebb and Flow

78

4.1k

The Brand Is Dead. Long Live the Brand.

48

28k

Building Applications with DynamoDB

88

5.6k

Pencils Down: Stop Designing & Start Developing

116

11k

Navigating Team Friction

177

13k

Music & Morning Musume

40

5.6k

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