![Page 1: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/1.jpg)
© 2015 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.
#WWDC15
What’s New in Web Developmentin WebKit and Safari
Brent Fulgham WebKit EngineerChris Young-Zawada Senior Front End Developer
Media
Session 501
![Page 2: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/2.jpg)
![Page 3: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/3.jpg)
Introduction to WebKit
WebKit Enhancements in Safari
Creating Amazing Experiences on Mac and iOS
![Page 4: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/4.jpg)
Introduction to WebKit
WebKit Enhancements in Safari
Creating Amazing Experiences on Mac and iOS
![Page 5: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/5.jpg)
Introduction to WebKit
WebKit Enhancements in Safari
Creating Amazing Experiences on Mac and iOS
![Page 6: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/6.jpg)
Introduction to WebKit
WebKit Enhancements in Safari
Creating Amazing Experiences on Mac and iOS
![Page 7: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/7.jpg)
Introduction to WebKit
![Page 8: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/8.jpg)
IntroductionWebKit
Web Browser EngineOpen Source Project
![Page 9: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/9.jpg)
WebKit
![Page 10: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/10.jpg)
WebKit
![Page 11: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/11.jpg)
WebKitConsistent features on iOS and OS X
![Page 12: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/12.jpg)
WebKit
WKWebViewSafari(iOS and OS X)
JavaScriptCoreFramework
![Page 13: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/13.jpg)
WebKit
WKWebViewSafari(iOS and OS X)
JavaScriptCoreFramework
![Page 14: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/14.jpg)
WebKit
WKWebViewSafari(iOS and OS X)
JavaScriptCoreFramework
![Page 15: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/15.jpg)
WebKit
WKWebViewSafari(iOS and OS X)
JavaScriptCoreFramework
![Page 16: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/16.jpg)
Introduction to WebKit
WebKit Enhancements in Safari
Creating Amazing Experiences on Mac and iOS
![Page 17: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/17.jpg)
WebKit Enhancements in Safari
![Page 18: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/18.jpg)
WebKit Enhancements
New Layout and Rendering Features Modern JavaScript UpdatesNew CSS Features
![Page 19: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/19.jpg)
WebKit Enhancements
New Layout and Rendering Features Modern JavaScript UpdatesNew CSS Features
![Page 20: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/20.jpg)
WebKit Enhancements
New Layout and Rendering Features Modern JavaScript UpdatesNew CSS Features
![Page 21: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/21.jpg)
WebKit Enhancements in SafariNew layout and rendering features
![Page 22: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/22.jpg)
New Layout and Rendering FeaturesBackdrop effects
![Page 23: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/23.jpg)
![Page 24: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/24.jpg)
![Page 25: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/25.jpg)
Backdrop Effects
![Page 26: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/26.jpg)
Backdrop Effects
![Page 27: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/27.jpg)
Backdrop Effects
![Page 28: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/28.jpg)
![Page 29: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/29.jpg)
![Page 30: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/30.jpg)
![Page 31: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/31.jpg)
![Page 32: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/32.jpg)
![Page 33: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/33.jpg)
Manual Backdrop EffectsDownsides
Can’t animate backdropDifficult to change blur effect
![Page 34: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/34.jpg)
backdrop-filter: blur(…)
![Page 35: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/35.jpg)
Backdrop Filter
Declare backdrop filter effects in CSS Addition to CSS Filters Level 2 Draft Specification
![Page 36: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/36.jpg)
Backdrop Filter
backdrop-filter: blur(10px)
![Page 37: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/37.jpg)
backdrop-filter: blur(10px)
![Page 38: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/38.jpg)
backdrop-filter: blur(10px)
![Page 39: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/39.jpg)
backdrop-filter: blur(10px)
![Page 40: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/40.jpg)
backdrop-filter: blur(10px)
![Page 41: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/41.jpg)
backdrop-filter: blur(10px)
![Page 42: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/42.jpg)
backdrop-filter: blur(…)
![Page 43: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/43.jpg)
backdrop-filter: [Filter]
![Page 44: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/44.jpg)
![Page 45: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/45.jpg)
![Page 46: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/46.jpg)
![Page 47: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/47.jpg)
![Page 48: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/48.jpg)
New Layout and Rendering FeaturesScrolling
![Page 49: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/49.jpg)
iTunes Style Banners
![Page 50: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/50.jpg)
iTunes Style Banners
![Page 51: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/51.jpg)
![Page 52: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/52.jpg)
![Page 53: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/53.jpg)
Paged Scrolling in JavaScript
Requires complicated JavaScript implementationDoes not use browser engine’s smooth scrolling featuresSignificant performance issues
![Page 54: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/54.jpg)
Scroll Snap Points
![Page 55: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/55.jpg)
Scroll Snap Points
Declare target scroll positions in CSSSpecified in CSS Scroll Snap Points Module Level 1
![Page 56: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/56.jpg)
10 10
Scroll Snap Points
1 2 3 4
![Page 57: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/57.jpg)
10 10
Scroll Snap Points
1 2 3 4
300px 300px 300px
![Page 58: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/58.jpg)
21
scroll-snap-points-x: repeat(300px)
![Page 59: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/59.jpg)
21
scroll-snap-points-x: repeat(300px)
![Page 60: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/60.jpg)
765
scroll-snap-points-x: repeat(300px)
![Page 61: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/61.jpg)
Scroll Snap Points<style> #left-snap { width: 300px; overflow-x: auto; overflow-y: hidden; -webkit-scroll-snap-type: mandatory; -webkit-scroll-snap-points-x: repeat(300px); } </style> <div id="left-snap"> <img src="album/art01.jpeg" /> <img src="album/art02.jpeg" /> … <img src="album/art10.jpeg" /> </div>
![Page 62: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/62.jpg)
Scroll Snap Points<style> #left-snap { width: 300px; overflow-x: auto; overflow-y: hidden; -webkit-scroll-snap-type: mandatory; -webkit-scroll-snap-points-x: repeat(300px); } </style> <div id="left-snap"> <img src="album/art01.jpeg" /> <img src="album/art02.jpeg" /> … <img src="album/art10.jpeg" /> </div>
![Page 63: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/63.jpg)
Scroll Snap Points<style> #left-snap { width: 300px; overflow-x: auto; overflow-y: hidden; -webkit-scroll-snap-type: mandatory; -webkit-scroll-snap-points-x: repeat(300px); } </style> <div id="left-snap"> <img src="album/art01.jpeg" /> <img src="album/art02.jpeg" /> … <img src="album/art10.jpeg" /> </div>
![Page 64: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/64.jpg)
-webkit-scroll-snap-points-x: repeat(300px)
![Page 65: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/65.jpg)
-webkit-scroll-snap-points-x: repeat(300px)
![Page 66: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/66.jpg)
scroll-snap-points-y
scroll-snap-points-x
![Page 67: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/67.jpg)
54321
Non-Uniform Elements
![Page 68: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/68.jpg)
54321
Non-Uniform Elements
300px
![Page 69: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/69.jpg)
54321
Non-Uniform Elements
300px 300px
![Page 70: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/70.jpg)
scroll-snap-destination
![Page 71: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/71.jpg)
scroll-snap-destination
![Page 72: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/72.jpg)
54321
scroll-snap-coordinate
![Page 73: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/73.jpg)
54321
scroll-snap-coordinate
![Page 74: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/74.jpg)
Putting Them Together
-webkit-scroll-snap-coordinate: 50% 50%;
![Page 75: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/75.jpg)
Putting Them Together
-webkit-scroll-snap-destination: 50% 50%;-webkit-scroll-snap-coordinate: 50% 50%;
![Page 76: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/76.jpg)
Putting Them Together
-webkit-scroll-snap-destination: 50% 50%;-webkit-scroll-snap-coordinate: 50% 50%;
![Page 77: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/77.jpg)
Scroll Snap Points#gallery { width: 300px; overflow-x: auto; overflow-y: hidden; -webkit-scroll-snap-type: mandatory; -webkit-scroll-snap-destination: 50% 50%; }
.photograph { -webkit-scroll-snap-coordinate: 50% 50%; }
![Page 78: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/78.jpg)
Scroll Snap Points#gallery { width: 300px; overflow-x: auto; overflow-y: hidden; -webkit-scroll-snap-type: mandatory; -webkit-scroll-snap-destination: 50% 50%; }
.photograph { -webkit-scroll-snap-coordinate: 50% 50%; }
![Page 79: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/79.jpg)
Scroll Snap Points#gallery { width: 300px; overflow-x: auto; overflow-y: hidden; -webkit-scroll-snap-type: mandatory; -webkit-scroll-snap-destination: 50% 50%; }
.photograph { -webkit-scroll-snap-coordinate: 50% 50%; }
![Page 80: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/80.jpg)
Scroll Snap Points#gallery { width: 300px; overflow-x: auto; overflow-y: hidden; -webkit-scroll-snap-type: mandatory; -webkit-scroll-snap-destination: 50% 50%; }
.photograph { -webkit-scroll-snap-coordinate: 50% 50%; }
![Page 81: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/81.jpg)
-webkit-scroll-snap-destination: 50% 50%;-webkit-scroll-snap-coordinate: 50% 50%;
![Page 82: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/82.jpg)
-webkit-scroll-snap-destination: 50% 50%;-webkit-scroll-snap-coordinate: 50% 50%;
![Page 83: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/83.jpg)
DemoBackdrop filters and scroll snap points
Chris Young-ZawadaSenior Front End Developer
![Page 84: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/84.jpg)
Presentation EnhancementsBest practices
Backdrop filters are very efficient, but rendering can be expensiveScroll snap is great for paged contentBe careful mixing programmatic and scroll snap
![Page 85: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/85.jpg)
WebKit Enhancements
New Layout and Rendering Features Modern JavaScript UpdatesNew CSS Features
![Page 86: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/86.jpg)
WebKit Enhancements in SafariModern JavaScript updates
![Page 87: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/87.jpg)
Modern JavaScript UpdatesLast year
Destructuring
Maps
Promises
Math AdditionsIterators
Computed Properties
For-of LoopsSets
Spread Operator
Weak MapsString Additions
![Page 88: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/88.jpg)
Modern JavaScript UpdatesThis year
Class SyntaxSymbol Object
Object.assignTemplate Literals
Weak Sets
Computed Properties
Tagged Template
Octal and Binary LiteralsInheritance
Destructuring
Maps
Promises
Math Additions
Iterators
Computed Properties
For-of Loops Sets
Spread Operator
Weak Maps
String Additions
![Page 89: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/89.jpg)
Template Literalsvar a = 4; var b = 8;
// Old syntax console.log("The value of " + a + " + " + b + " = " + (a + b) + ".");
// New syntax console.log(`The value of ${a} + ${b} = ${a + b}.`);
![Page 90: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/90.jpg)
Template Literalsvar a = 4; var b = 8;
// Old syntax console.log("The value of " + a + " + " + b + " = " + (a + b) + ".");
// New syntax console.log(`The value of ${a} + ${b} = ${a + b}.`);
![Page 91: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/91.jpg)
The value of 4 + 8 = 12.
Template Literalsvar a = 4; var b = 8;
// Old syntax console.log("The value of " + a + " + " + b + " = " + (a + b) + ".");
// New syntax console.log(`The value of ${a} + ${b} = ${a + b}.`);
![Page 92: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/92.jpg)
Object Literal Property Shorthand Syntaxvar name = "Joe"; var category = "Awesome";
// Old style function createFoo(name, category) { return { name: name, category: category }; };
![Page 93: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/93.jpg)
// New style function createBar(name, category) { return { name, category }; }
Object Literal Property Shorthand Syntaxvar name = "Joe"; var category = "Awesome";
// Old style function createFoo(name, category) { return { name: name, category: category }; };
![Page 94: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/94.jpg)
Prototype Syntaxfunction Polygon(sides) { this.sides = sides; }
Polygon.prototype.name = function() { return 'polygon'; }
Polygon.prototype.description = function() { return `This ${this.name()} has ${this.sides} sides.`; }
![Page 95: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/95.jpg)
Class Syntaxclass Polygon { constructor(sides) { this.sides = sides; } name() { return 'polygon'; }
description() { return `This ${this.name()} has ${this.sides} sides.`; } }
![Page 96: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/96.jpg)
Class Syntaxclass Polygon { constructor(sides) { this.sides = sides; } name() { return 'polygon'; }
description() { return `This ${this.name()} has ${this.sides} sides.`; } }
![Page 97: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/97.jpg)
Class Syntaxclass Polygon { constructor(sides) { this.sides = sides; } name() { return 'polygon'; }
description() { return `This ${this.name()} has ${this.sides} sides.`; } }
![Page 98: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/98.jpg)
Class SyntaxInheritance
class Rectangle extends Polygon { constructor() { super(4); }
name() { return 'rectangle'; }
static rightAngle() { return 90; } }var bar = new Rectangle(); console.log(bar.sides()); // 'This rectangle has 4 sides.' console.log(Rectangle.rightAngle()); // '90'
![Page 99: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/99.jpg)
Class SyntaxInheritance
class Rectangle extends Polygon { constructor() { super(4); }
name() { return 'rectangle'; }
static rightAngle() { return 90; } }var bar = new Rectangle(); console.log(bar.sides()); // 'This rectangle has 4 sides.' console.log(Rectangle.rightAngle()); // '90'
![Page 100: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/100.jpg)
Class SyntaxInheritance
class Rectangle extends Polygon { constructor() { super(4); }
name() { return 'rectangle'; }
static rightAngle() { return 90; } }var bar = new Rectangle(); console.log(bar.sides()); // 'This rectangle has 4 sides.' console.log(Rectangle.rightAngle()); // '90'
![Page 101: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/101.jpg)
Class SyntaxInheritance
class Rectangle extends Polygon { constructor() { super(4); }
name() { return 'rectangle'; }
static rightAngle() { return 90; } }var bar = new Rectangle(); console.log(bar.sides()); // 'This rectangle has 4 sides.' console.log(Rectangle.rightAngle()); // '90'
![Page 102: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/102.jpg)
Class SyntaxInheritance
class Rectangle extends Polygon { constructor() { super(4); }
name() { return 'rectangle'; }
static rightAngle() { return 90; } }var bar = new Rectangle(); console.log(bar.sides()); // 'This rectangle has 4 sides.' console.log(Rectangle.rightAngle()); // '90'
![Page 103: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/103.jpg)
WebKit Enhancements
New Layout and Rendering Features Modern JavaScript UpdatesNew CSS Features
![Page 104: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/104.jpg)
WebKit Enhancements in SafariNew CSS features
![Page 105: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/105.jpg)
WebKit EnhancementsNew CSS features
Unprefixed properties and values
@supports :matches
:any-link
Full selectors in :not
:nth-child(… of …)
placeholder-shown
Case-insensitive attribute selectors
:lang
![Page 106: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/106.jpg)
New CSS FeaturesRecently unprefixed properties and values
1
transitions
5
columns
2
animations
6
cursor zoom-in
3
transforms
7
cursor zoom-out
4
flexbox
8
alt
![Page 107: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/107.jpg)
New CSS FeaturesDetecting feature support
![Page 108: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/108.jpg)
![Page 109: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/109.jpg)
-webkit-initial-letter: Lines Occupied [Lines To Sink]
![Page 110: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/110.jpg)
![Page 111: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/111.jpg)
![Page 112: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/112.jpg)
Manually Detecting Feature Support// detect CSS initial-letter support var browsers = ['moz', 'khtml', 'webkit', 'o', 'ms']; var options = (“initialLetter," + browsers.join("InitialLetter,") + "InitialLetter").split(",");
var test = document.createElement("div"); for (var n = 0; n < options.length; ++n) { if (test.style[options[n]] === "") { console.log(`${options[n]} is supported.`) break; } } // Sadface. Must Polyfill
![Page 113: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/113.jpg)
@supports@supports(condition) { /* Rules when condition is true */ }
![Page 114: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/114.jpg)
@supports@supports(-webkit-initial-letter: 3) { section.main :first-child:first-letter { font-family: "Bodoni 72"; -webkit-initial-letter: 3; margin: 0px 4px; } }
![Page 115: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/115.jpg)
@supports(initial-letter: 3)Unsupported
![Page 116: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/116.jpg)
@supports(initial-letter: 3)Supported
![Page 117: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/117.jpg)
New CSS FeaturesReducing repetition
![Page 118: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/118.jpg)
Reducing Repetition
.default .def,
.default .bracket,
.default .operator,
.default .variable { color: red; }
![Page 119: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/119.jpg)
Reducing Repetition
.default .def,
.default .bracket,
.default .operator,
.default .variable { color: red; }
![Page 120: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/120.jpg)
:matches
.default :matches(.def, .bracket, .operator, .variable) { color: red; }
![Page 121: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/121.jpg)
WebKit Enhancements
New Layout and Rendering Features Modern JavaScript UpdatesNew CSS Features
![Page 122: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/122.jpg)
Introduction to WebKit
WebKit Enhancements in Safari
Creating Amazing Experiences on Mac and iOS
![Page 123: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/123.jpg)
Creating Amazing ExperiencesMaximizing design for iOS and OS X
![Page 124: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/124.jpg)
AirPlay
![Page 125: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/125.jpg)
AirPlay Video for OS X
Allows your content to be played on Apple TV in full fidelityWebKit Media Controls support this todayAPI is identical to iOSSee our WWDC 2013 session for the details
![Page 126: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/126.jpg)
AirPlay Video for OS X
Allows your content to be played on Apple TV in full fidelityWebKit Media Controls support this todayAPI is identical to iOSSee our WWDC 2013 session for the details
What's New in Safari and WebKit for Web Developers WWDC13
![Page 127: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/127.jpg)
Multitasking
![Page 128: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/128.jpg)
![Page 129: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/129.jpg)
![Page 130: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/130.jpg)
![Page 131: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/131.jpg)
![Page 132: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/132.jpg)
Creating Amazing ExperiencesMultitasking
Remember iOS Multitasking during testingUsers now control view sizeResponsive design is critical
![Page 133: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/133.jpg)
Creating Amazing ExperiencesMultitasking
Remember iOS Multitasking during testingUsers now control view sizeResponsive design is critical
Using Safari to Deliver and Debug a Responsive Web Design Mission Wednesday 9:00AM
Multitasking Essentials for Media-Based Apps on iPad in iOS 9 Pacific Heights Wednesday 2:30PM
![Page 134: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/134.jpg)
Picture-in-Picture
![Page 135: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/135.jpg)
Fill me with a cool video! Goodness!
![Page 136: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/136.jpg)
Fill me with a cool video! Goodness!
![Page 137: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/137.jpg)
Fill me with PIP Goodness!
![Page 138: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/138.jpg)
Fill me with PIP Goodness!
![Page 139: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/139.jpg)
Presentation Modefullscreen
![Page 140: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/140.jpg)
Presentation Modeinline
![Page 141: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/141.jpg)
Presentation ModepictureInPicture
![Page 142: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/142.jpg)
Presentation Mode
pictureInPictureinlinefullscreen
![Page 143: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/143.jpg)
Creating Amazing ExperiencesPicture-in-picture support
WebKit Media Controls support PiP “For Free”Controlled by presentationMode API
![Page 144: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/144.jpg)
Picture-in-Picture SupportThings to consider
Page may not be obscured while video is playingMedia may play in small view Use HTTP Live Streaming for delivering media
![Page 145: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/145.jpg)
Picture-in-PictureRelated sessions
Multitasking Essentials for Media-Based Apps on iPad in iOS 9 Pacific Heights Wednesday 2:30PM
![Page 146: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/146.jpg)
Picture-in-PictureRelevant sessions from last year
Advanced Media for the Web WWDC014
![Page 147: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/147.jpg)
Force Touch
![Page 148: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/148.jpg)
Creating Amazing ExperiencesForce Touch trackpad
Taptic Engine
Force Sensors
Capacitive Glass Surface
![Page 149: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/149.jpg)
![Page 150: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/150.jpg)
![Page 151: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/151.jpg)
![Page 152: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/152.jpg)
![Page 153: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/153.jpg)
Click
Max
Min
Click
Time
![Page 154: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/154.jpg)
Click
Max
Min
Click
Time
mousedown
![Page 155: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/155.jpg)
Click
Max
Min
Click
Time
mousedown mouseup,click
![Page 156: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/156.jpg)
Creating Amazing ExperiencesEvent changes
All Mouse Events now include a webkitForce propertyRegister to handle a small set of new events
![Page 157: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/157.jpg)
Force Click
Time
Max
Force Click
Min
Click
mouseforcewillbegin, mousedown
mouseup,click
![Page 158: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/158.jpg)
Force Click
Time
Max
Force Click
Min
Click
mouseforcewillbegin, mousedown
mouseup,click
mouseforcedown
![Page 159: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/159.jpg)
Force Click
Time
Max
Force Click
Min
Click
mouseforcewillbegin, mousedown
mouseup,click
mouseforcedown mouseforceup
![Page 160: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/160.jpg)
mouseforcechanged
WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN
WEBKIT_FORCE_AT_MOUSE_DOWN
Time
mousedown mouseup
mouseforcechanged
![Page 161: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/161.jpg)
DemoRefined for Force Touch
Chris Young-ZawadaSenior Front End Developer
![Page 162: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/162.jpg)
Force TouchBest practices
Use the new MouseEvent force constantsNot all users have Force Touch hardwareUse as a shortcut or extra flourishUse to drive animations or other UI state
![Page 163: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/163.jpg)
Introduction to WebKit
WebKit Enhancements in Safari
Creating Amazing Experiences on Mac and iOS
![Page 164: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/164.jpg)
Introduction to WebKit
WebKit Enhancements in Safari
Creating Amazing Experiences on Mac and iOS
![Page 165: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/165.jpg)
Summary
![Page 166: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/166.jpg)
Summary
1
Backdrop Filter
![Page 167: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/167.jpg)
Summary
1
Backdrop Filter
2
Scroll Snap Points
![Page 168: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/168.jpg)
Summary
1
Backdrop Filter
2
Scroll Snap Points
3
Class Syntax
![Page 169: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/169.jpg)
Summary
1
Backdrop Filter
2
Scroll Snap Points
3
Class Syntax
4
@supports
![Page 170: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/170.jpg)
Summary
1
Backdrop Filter
5
AirPlay on OS X
2
Scroll Snap Points
3
Class Syntax
4
@supports
![Page 171: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/171.jpg)
Summary
1
Backdrop Filter
5
AirPlay on OS X
2
Scroll Snap Points
6
PiP
3
Class Syntax
4
@supports
![Page 172: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/172.jpg)
Summary
1
Backdrop Filter
5
AirPlay on OS X
2
Scroll Snap Points
6
PiP
3
Class Syntax
7
iOS Multitasking
4
@supports
![Page 173: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/173.jpg)
Summary
1
Backdrop Filter
5
AirPlay on OS X
2
Scroll Snap Points
6
PiP
3
Class Syntax
7
iOS Multitasking
4
@supports
8
Force Touch API
![Page 174: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/174.jpg)
More Information
Documentation and VideosSafari for Developershttp://developer.apple.com/safari/
Apple Developer Forumshttp://developer.apple.com/forums
WebKit Projecthttp://www.webkit.org
![Page 176: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/176.jpg)
Related Sessions
Using Safari to Deliver and Debug a Responsive Web Design Mission Wednesday 9:00AM
Multitasking Essentials for Media-Based Apps on iPad in iOS 9 Pacific Heights Wednesday 2:30PM
Advanced Media For the Web WWDC14
![Page 177: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/177.jpg)
Labs
Safari and WebKit Lab Graphics, Games, and Media Lab A Tuesday 2:30PM
Safari and WebKit Lab Graphics, Games, and Media Lab A Wednesday 10:00AM
Safari and WebKit Lab Graphics, Games, and Media Lab A Friday 12:00PM
![Page 178: What’s New in Web Development in WebKit and Safari · What’s New in Web Development in WebKit and Safari Brent Fulgham WebKit Engineer Chris Young-Zawada Senior Front End Developer](https://reader035.vdocument.in/reader035/viewer/2022070712/5ecd18ebbe20f52d853384d5/html5/thumbnails/178.jpg)