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

광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기

0

170

開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall

0

450

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

1

590

見せてあげますよ、「本物のLaravel批判」ってやつを。

7

7.7k

Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する

1

110

「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night

5

2.1k

OnlineTestConf: Test Automation Friend or Foe

0

100

Macとオーディオ再生 2024/11/02

0

360

初めてDefinitelyTypedにPRを出した話

0

400

PLoP 2024: The evolution of the microservice architecture pattern language

0

2.7k

『ドメイン駆動設計をはじめよう』のモデリングアプローチ

8

530

CSC509 Lecture 11

0

180

Featured

See All Featured

Put a Button on it: Removing Barriers to Going Fast.

59

3.5k

XXLCSS - How to scale CSS and keep your sanity

246

1.3M

181

16k

Measuring & Analyzing Core Web Vitals

4

120

Designing for Performance

604

68k

145

15k

Docker and Python

40

3.1k

Automating Front-end Workflow

1366

200k

Reflections from 52 weeks, 52 projects

346

20k

Creating an realtime collaboration tool: Agile Flush - .NET Oxford

25

1.8k

Embracing the Ebb and Flow

84

4.5k

The Straight Up "How To Draw Better" Workshop

232

140k

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