The Future of CSS and HTML - 2019 Edition

Transcript

1. The Future of CSS & HTML FusionConf. - Sept 18, 2019 - Justin Holt
2. The Future of CSS & HTML Justin Holt
3. W T F ! ? ! ?
4. The Future of CSS & HTML FusionConf. - Sept 18, 2019 - Justin Holt
5. Agenda Part 1: New and Upcoming CSS Features. Part 2: HTML5 APIs in Development Now. Wrap Up with FREE LINKS!!
6. New and Upcoming CSS Features
7. Media Query Ranges @media (width < 480px) {} @media (480px <= width < 768px) {} @media (width >= 768px) {} A syntax for defining media query ranges using ordinary comparison operators.
8. New Psuedo-Selectors nav :any-link > span A pseudo-class for matching anchor elements independent of whether they have been visited. a:has(> img) {} A pseudo-class for matching ancestor and sibling elements.
9. New Psuedo-Selectors p:matches(:first-child, .special) {} A pseudo-class for matching elements in a selector list. input:blank {} A psuedo-class for matching form elements when they are empty.
10. Case Insensitive Selectors An attribute selector matching attribute values case-insensitively. [display=grid flex] {}
11. Color Adjust Property The color-adjust property is a non-standard CSS extension that can be used to force printing of background colors and images. .background {background-color:#ccc;} .background.color-adjust {color-adjust: economy;} .background.color-adjust-exact {color-adjust: exact;}
12. Focus Within A pseudo-class for matching elements that are either focused or that have focused descendants. :focus:not(:focus-visible) {outline: 0;}
13. Image Set Function A function for specifying image sources based on the user’s resolution. p {background-image: image-set( "foo.png" 1x, "foo-2x.png" 2x, "foo-print.png" 600dpi);}
14. Overscroll Behavior Properties for controlling when the scroll position of a scroll container reaches the edge of a scrollport. .messages { height: 220px; overflow: auto; overscroll-behavior-y: contain; } body { margin: 0; overscroll-behavior: none;}
15. Accessible Media-Queries Media queries to detect and adjust styles based on user preferences. @media (prefers-color-scheme:dark) {} @media (prefers-reduced-motion) {}
16. HTML5 APIs in Development Now
17. Background Sync API Microtask API Use to offload lower priority tasks, routines, and services to execute in background.
18. Credential Management API Allow user to specify globally accessible credentials, and use them to log in to any website.
19. Payment request API Standardized routine for requesting and communicating Web payment data to merchant processors.
20. Resize Observer API Visual Viewport API More efficient DOM polling for viewport and element Resize observers.
21. Web Bluetooth API Allow web applications to communicate to devices using low power Bluetooth standards.
22. Web Speech API Provide detection, processing, and translation for user inputs via speech/audio.
23. WebXR Device API Provide connections for web applications to Virtual Reality headsets and devices.
24. Wrap Up & FREE LINKS!!
25. cssdb.org platform-status.mozilla.org csswg.org caniuse.com
26. W T F ! ? ! ?
27. Focus Within :any-link