Modernizr - Detecting HTML5 and CSS3 support

•

5 likes•1,560 views

Paul Irish

Technology Design

HTML5 & CSS3 Coolness™
Rounded corners 2D Transformations
@font-face fonts CSS Gradients
Canvas SVG
rgba(), hsla() colors Geolocation
border-image CSS Columns
box-shadow HTML5 Forms
HTML5 Audio & Video Web Workers
CSS Animations Ofﬂine Web Apps
CSS Transitions …and so on and so on.

ishtml5readyyet.com

U P !
HU T wrong.
S y ou ’re

Modernizr
Making use of tomorrow’s technologies, today!

$Native No Native Implementation Implementation . box { .no-borderradius .box { // use border-radius // maybe less padding? } } if (Modernizr.borderradius == false){ // call up DD_roundies, etc. }$

We got you covered, b.
Rounded corners 2D Transformations
@font-face fonts CSS Gradients
Canvas SVG
rgba(), hsla() colors Geolocation
border-image CSS Columns
box-shadow HTML5 Forms
HTML5 Audio & Video Web Workers
CSS Animations Ofﬂine Web Apps
CSS Transitions …

We got you covered, b.
Rounded corners 2D webGL
Transformations
@font-face fonts SMIL
CSS Gradients
Canvas hashchange
SVG event
rgba(), hsla()
colors Geolocation localStorage
border-image CSS Columns sessionStorage
box-shadow HTML5 Forms postMessage
HTML5 Audio & Web Workers html5 drag ‘n
Video drop
Ofﬂine Web Apps
CSS Animations web sql
…and so on and database
CSS Transitions so on.

Modernizr
http://modernizr.com
@modernizr

Me:
http://paulirish.com
@paul_irish

Yah, it’s open source. Fork it, baby.

Similar to Modernizr - Detecting HTML5 and CSS3 support

Html5 more than just html5 v final

Lohith Goudagere Nagaraj

HTML5とIE10とWindows 8 in OSC2012会津

Microsoft

Progressive Advancement, by way of progressive enhancement

Paul Irish

20111129 modernizr

brooky-yen

HTML5 and SVG

yarcub

Css3 transitions and animations + graceful degradation with jQuery

Andrea Verlicchi

Drawing in HTML5 Open House

Noam Kfir

Svcc 2013-css3-and-mobile

Oswald Campesato

CSS3: Ready for Primetime?

Jeff Bridgforth

Intro to CSS3

Denise Jacobs

Understanding hardware acceleration on mobile browsers presentation

Justin Dorfman

GPU acceleration on mobile browsers, if it is leveraged correctly, can lead to a smooth and fluid applications, thus improving the user experience. There has been a lot of mentions and best practices of hardware acceleration these days, although so far it has been pretty general and hasn’t provided much technical direction apart from simple magical advice such as “use translate3d”. This talk sheds some more light on browser interactions with the GPU and explain what happens behind the scenes, covering the topic of acceleration of primitive drawing, the use of tiled backing store, and composited layer. Knowing the actual machinery behind hardware acceleration, you will be in the position to plan your strategy to improve the performance of your web application.

Understanding Hardware Acceleration on Mobile Browsers

Ariya Hidayat

HTML5 & Friends

Remy Sharp

SVGD3Angular2React

Oswald Campesato

Next generation Graphics: SVG

David Corbacho Román

Apache Cordova is one of the most popular frameworks for cross-platform mobile development. Web developers can build apps for iOS, Android, and Windows based on the same frameworks they use for the Web by using a shared codebase. However, the methods for improving mobile app performance can be different from those web developers use for web apps. Doris Chen outlines what impacts “native performance” and explains how the startup time, as well as the overhead of resume, memory, communication, and the Web, can all contribute to the performance of Cordova apps. To build Cordova apps that perform well, it’s important to understand how to avoid common pitfalls and how to use the technologies in the most efficient ways. Doris introduces tools for performance tests and demonstrates how to measure mobile app performance by using diagnostic tools for different platforms. Doris also shares practical tips for building faster Cordova apps by exploring Document Object Model (DOM) complexity, animation techniques, and memory management.

Practical tipsmakemobilefaster oscon2016

Doris Chen

Css3 101

Ignacio Coloma

How to build a html5 websites.v1

Bitla Software

HTML5: An Overview

Nagendra Um

HTML 5 & CSS 3

Kevin van Dijk

Similar to Modernizr - Detecting HTML5 and CSS3 support (20)

Html5 more than just html5 v final

HTML5とIE10とWindows 8 in OSC2012会津

Progressive Advancement, by way of progressive enhancement

20111129 modernizr

HTML5 and SVG

Css3 transitions and animations + graceful degradation with jQuery

Drawing in HTML5 Open House

Svcc 2013-css3-and-mobile

CSS3: Ready for Primetime?

Intro to CSS3

Understanding hardware acceleration on mobile browsers presentation

Understanding Hardware Acceleration on Mobile Browsers

HTML5 & Friends

SVGD3Angular2React

Next generation Graphics: SVG

Practical tipsmakemobilefaster oscon2016

Css3 101

How to build a html5 websites.v1

HTML5: An Overview

HTML 5 & CSS 3

Recently uploaded

Angeliki Cooney has spent over twenty years at the forefront of the life sciences industry, working out of Wynantskill, NY. She is highly regarded for her dedication to advancing the development and accessibility of innovative treatments for chronic diseases, rare disorders, and cancer. Her professional journey has centered on strategic consulting for biopharmaceutical companies, facilitating digital transformation, enhancing omnichannel engagement, and refining strategic commercial practices. Angeliki's innovative contributions include pioneering several software-as-a-service (SaaS) products for the life sciences sector, earning her three patents. As the Senior Vice President of Life Sciences at Avenga, Angeliki orchestrated the firm's strategic entry into the U.S. market. Avenga, a renowned digital engineering and consulting firm, partners with significant entities in the pharmaceutical and biotechnology fields. Her leadership was instrumental in expanding Avenga's client base and establishing its presence in the competitive U.S. market.

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...

Angeliki Cooney

Dubai, known for its towering skyscrapers, luxurious lifestyle, and relentless pursuit of innovation, often finds itself in the global spotlight. However, amidst the glitz and glamour, the emirate faces its own set of challenges, including the occasional threat of flooding. In recent years, Dubai has experienced sporadic but significant floods, disrupting normalcy and posing unique challenges to its infrastructure. Among the critical nodes in this bustling metropolis is the Dubai International Airport, a vital hub connecting the world. This article delves into the intersection of Dubai flood events and the resilience demonstrated by the Dubai International Airport in the face of such challenges.

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf

Orbitshub

Following the popularity of “Cloud Revolution: Exploring the New Wave of Serverless Spatial Data,” we’re thrilled to announce this much-anticipated encore webinar. In this sequel, we’ll dive deeper into the Cloud-Native realm by uncovering practical applications and FME support for these new formats, including COGs, COPC, FlatGeoBuf, GeoParquet, STAC, and ZARR. Building on the foundation laid by industry leaders Michelle Roby of Radiant Earth and Chris Holmes of Planet in the first webinar, this second part offers an in-depth look at the real-world application and behind-the-scenes dynamics of these cutting-edge formats. We will spotlight specific use-cases and workflows, showcasing their efficiency and relevance in practical scenarios. Discover the vast possibilities each format holds, highlighted through detailed discussions and demonstrations. Our expert speakers will dissect the key aspects and provide critical takeaways for effective use, ensuring attendees leave with a thorough understanding of how to apply these formats in their own projects. Elevate your understanding of how FME supports these cutting-edge technologies, enhancing your ability to manage, share, and analyze spatial data. Whether you’re building on knowledge from our initial session or are new to the serverless spatial data landscape, this webinar is your gateway to mastering cloud-native formats in your workflows.

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Safe Software

Accelerating FinTech Innovation: Unleashing API Economy and GenAI Vasa Krishnan, Chief Technology Officer - FinResults Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...

apidays

Webinar Recording: https://www.panagenda.com/webinars/why-teams-call-analytics-is-critical-to-your-entire-business Nothing is as frustrating and noticeable as being in an important call and being unable to see or hear the other person. Not surprising then, that issues with Teams calls are among the most common problems users call their helpdesk for. Having in depth insight into everything relevant going on at the user’s device, local network, ISP and Microsoft itself during the call is crucial for good Microsoft Teams Call quality support. To ensure a quick and adequate solution and to ensure your users get the most out of their Microsoft 365. But did you know that ‘bad calls’ are also an excellent indicator of other problems arising? Precisely because it is so noticeable!? Like the canary in the mine, bad calls can be early indicators of problems. Problems that might otherwise not have been noticed for a while but can have a big impact on productivity and satisfaction. Join this session by Christoph Adler to learn how true Microsoft Teams call quality analytics helped other organizations troubleshoot bad calls and identify and fix problems that impacted Teams calls or the use of Microsoft365 in general. See what it can do to keep your users happy and productive! In this session we will cover - Why CQD data alone is not enough to troubleshoot call problems - The importance of attributing call problems to the right call participant - What call quality analytics can do to help you quickly find, fix-, and prevent problems - Why having retrospective detailed insights matters - Real life examples of how others have used Microsoft Teams call quality monitoring to problem shoot problems with their ISP, network, device health and more.

Why Teams call analytics are critical to your entire business

panagenda

CNIC Information System with Pakdata Cf In Pakistan

danishmna97

Scaling API-first – The story of a global engineering organization Ian Reasor, Senior Computer Scientist - Adobe Radu Cotescu, Senior Computer Scientist - Adobe Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

apidays

DBX First Quarter 2024 Investor Presentation

Dropbox

Elevate Developer Efficiency & build GenAI Application with Amazon Q

Bhuvaneswari Subramani

Keynote 2: APIs in 2030: The Risk of Technological Sleepwalk Paolo Malinverno, Growth Advisor - The Business of Technology Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...

apidays

💥 You’re lucky! We’ve found two different (lead) developers that are willing to share their valuable lessons learned about using UiPath Document Understanding! Based on recent implementations in appealing use cases at Partou and SPIE. Don’t expect fancy videos or slide decks, but real and practical experiences that will help you with your own implementations. 📕 Topics that will be addressed: • Training the ML-model by humans: do or don't? • Rule-based versus AI extractors • Tips for finding use cases • How to start 👨‍🏫👨‍💻 Speakers: o Dion Morskieft, RPA Product Owner @Partou o Jack Klein-Schiphorst, Automation Developer @Tacstone Technology

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

UiPathCommunity

Effective data discovery is crucial for maintaining compliance and mitigating risks in today's rapidly evolving privacy landscape. However, traditional manual approaches often struggle to keep pace with the growing volume and complexity of data. Join us for an insightful webinar where industry leaders from TrustArc and Privya will share their expertise on leveraging AI-powered solutions to revolutionize data discovery. You'll learn how to: - Effortlessly maintain a comprehensive, up-to-date data inventory - Harness code scanning insights to gain complete visibility into data flows leveraging the advantages of code scanning over DB scanning - Simplify compliance by leveraging Privya's integration with TrustArc - Implement proven strategies to mitigate third-party risks Our panel of experts will discuss real-world case studies and share practical strategies for overcoming common data discovery challenges. They'll also explore the latest trends and innovations in AI-driven data management, and how these technologies can help organizations stay ahead of the curve in an ever-changing privacy landscape.

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

TrustArc

Corporate and higher education. Two industries that, in the past, have had a clear divide with very little crossover. The difference in goals, learning styles and objectives paved the way for differing learning technologies platforms to evolve. Now, those stark lines are blurring as both sides are discovering they have content that’s relevant to the other. Join Tammy Rutherford as she walks through the pros and cons of corporate and higher ed collaborating. And the challenges of these different technology platforms working together for a brighter future.

Corporate and higher education May webinar.pptx

Rustici Software

Understanding the FAA Part 107 License ..

Christopher Logan Kennedy

Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows. We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases. This video focuses on the deployment of external web forms using Jotform for Bonterra Impact Management. This solution can be customized to your organization’s needs and deployed to support the common use cases below: - Intake and consent - Assessments - Surveys - Applications - Program registration Interested in deploying web form automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...

Jeffrey Haguewood

[BuildWithAI] Introduction to Gemini.pdf

Sandro Moreira

Exploring Multimodal Embeddings with Milvus

Zilliz

How to Troubleshoot Apps for the Modern Connected Worker

ThousandEyes

ICT role in 21st century education and its challenges

rafiqahmad00786416

Vector Search -An Introduction in Oracle Database 23ai.pptx

Remote DBA Services

Recently uploaded (20)

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...

Why Teams call analytics are critical to your entire business

CNIC Information System with Pakdata Cf In Pakistan

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

DBX First Quarter 2024 Investor Presentation

Elevate Developer Efficiency & build GenAI Application with Amazon Q

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

Corporate and higher education May webinar.pptx

Understanding the FAA Part 107 License ..

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...

[BuildWithAI] Introduction to Gemini.pdf

Exploring Multimodal Embeddings with Milvus

How to Troubleshoot Apps for the Modern Connected Worker

ICT role in 21st century education and its challenges

Vector Search -An Introduction in Oracle Database 23ai.pptx

Modernizr - Detecting HTML5 and CSS3 support

1. Progressive Enhancement in the age of HTML5 and CSS3 using Modernizr Paul Irish Molecular NC jQuery & JavaScript Camp ’10

2. HTML5 & CSS3 Coolness™

3. HTML5 & CSS3 Coolness™ Rounded corners 2D Transformations @font-face fonts CSS Gradients Canvas SVG rgba(), hsla() colors Geolocation border-image CSS Columns box-shadow HTML5 Forms HTML5 Audio & Video Web Workers CSS Animations Ofﬂine Web Apps CSS Transitions …and so on and so on.

4. ishtml5readyyet.com

5. ishtml5readyyet.com U P ! HU T wrong. S y ou ’re

6. Modernizr Making use of tomorrow’s technologies, today!

8. Feature Detection Just Detect It™

10. Native No Native Implementation Implementation . box { .no-borderradius .box { // use border-radius // maybe less padding? } } if (Modernizr.borderradius == false){ // call up DD_roundies, etc. }

11.

12. OM G it onl ’s y7 k!

13. We got you covered, b. Rounded corners 2D Transformations @font-face fonts CSS Gradients Canvas SVG rgba(), hsla() colors Geolocation border-image CSS Columns box-shadow HTML5 Forms HTML5 Audio & Video Web Workers CSS Animations Ofﬂine Web Apps CSS Transitions …

14. We got you covered, b. Rounded corners 2D webGL Transformations @font-face fonts SMIL CSS Gradients Canvas hashchange SVG event rgba(), hsla() colors Geolocation localStorage border-image CSS Columns sessionStorage box-shadow HTML5 Forms postMessage HTML5 Audio & Web Workers html5 drag ‘n Video drop Ofﬂine Web Apps CSS Animations web sql …and so on and database CSS Transitions so on.

15. Modernizr http://modernizr.com @modernizr Me: http://paulirish.com @paul_irish Yah, it’s open source. Fork it, baby.

Editor's Notes

awesome shit! js solutions for many of these, but in 95% of cases, the result with the native css approach has a better result - responsive, faster, less code. transforms. transitions. @font-face
omg is html5ready yet ?? UGH. the challenge is: how do you use these features across browsers, progressively enhancing where possible
omg is html5ready yet ?? UGH. the challenge is: how do you use these features across browsers, progressively enhancing where possible
in other words: super easy to have multiple levels of support in site, one for each degree of sophistication that&#x2019;s how i ended up w/modernizr allows you to start using html5+css3 coolness today, and have full control over what your html,css and js do in browsers that don&#x2019;t have features Which brings me to the most important part of this presentation:
FEATURE DETECTION aka object detection is good sniffing is bad all browsers. future-proof
FEATURE DETECTION aka object detection is good sniffing is bad all browsers. future-proof
awesome shit! js solutions for many of these, but in 95% of cases, the result with the native css approach has a better result - responsive, faster, less code.

Modernizr - Detecting HTML5 and CSS3 support

Recommended

Recommended

More Related Content

Similar to Modernizr - Detecting HTML5 and CSS3 support

Similar to Modernizr - Detecting HTML5 and CSS3 support (20)

More from Paul Irish

More from Paul Irish (7)

Recently uploaded

Recently uploaded (20)

Modernizr - Detecting HTML5 and CSS3 support

Editor's Notes