WWDC23: What’s New in CSS | Apple  Full Document Contents/Articles/WWDC23 What’s New in CSS Apple.md, WWDC23: What’s New in CSS | Apple, Apple Developer. > [!note]+ Document Notes > tags: [#CSSUpdates #WebDevelopment #SafariTechnology #Typography] > - CSSUpdates > - WebDevelopment > - SafariTechnology > Author: Jen Simmons > Source: WWDC23: What’s new in CSS | Apple > Reference: https://www.youtube.com/watch?v=uadAfE6cAoM > date created: 2024-09-14 14:30 > > # Title: What’s New in CSS at WWDC23 > <!-- deep-read:sections start --> ## Table of Contents: 1. [📝 Summary](#-summary) 2. [📖 Main Content](#-main-content) - [Layout](#layout) - [Typography](#typography) - [Color](#color) 3. [🗒️ Notes](#-notes) 4. [📖 References](#-references) 5. [🗣️ Paraphrase](#-paraphrase) 6. [📰 Newsletter](#-newsletter) 7. [✅ Action Items](#-action-items) 8. [🧪 Hypotheses](#-hypotheses) 9. [📊 Methodology](#-methodology) 10. [❓ Questions](#-questions) 11. [🔮 Future Research](#-future-research) 12. [💡 Implications](#-implications) 13. [🧠 Learning Styles Assessment](#-learning-styles-assessment) 14. [📊 Accessibility Assessment](#-accessibility-assessment) 15. [🌍 DEIB Assessment](#-deib-assessment) 16. [✅ Logical validity](#-logical-validity) 17. [🔍 SEO Evaluation](#-seo-evaluation) 18. [🎯 Conclusion](#-conclusion) ## 📝 Summary: This session from WWDC23 highlights new CSS features coming to Safari and WebKit, emphasizing layout, typography, and color advancements. These changes make it easier for developers to create visually dynamic, high-performance websites. Key topics include Masonry Layout for grid-based designs, Margin Trim for better space management, new color functions, and advanced typography tools like line-height units and font-size adjustments. ## 📖 Main Content: ### Layout: - **Masonry Layout**: Now supported in Safari’s Technology Preview, this layout helps designers manage content of different sizes within a grid system without relying on JavaScript. - **Margin Trim**: Simplifies whitespace management by trimming unwanted margins at container boundaries, solving common design problems like inconsistent spacing. ### Typography: - **Line-height Units**: New `lh` and `rlh` units tie elements directly to the line-height of text, improving vertical rhythm in layouts. - **Font-size Adjust**: This feature harmonizes font sizes across different font families, ensuring visual consistency, especially in fallback scenarios. ### Color: - **P3 and Color Gamut**: Expanded color gamut with `P3` support, introducing four new color models: LCH, OKLCH, LAB, and OKLAB, for creating more vibrant, nuanced web colors. - **Gradients**: CSS now supports gradients calculated in different color spaces, giving developers fine control over transitions between colors. ## 🗒️ Notes: - **Masonry Layout**: Offers flexibility for grid-based designs, reducing JavaScript reliance. - **Margin Trim**: Fixes padding/margin overlaps between container elements and their contents. - **Typography Enhancements**: - `lh` and `rlh` provide better vertical rhythm in web typography. - Font-size adjust maintains consistent text appearance across font families. - **Advanced Color Management**: Support for P3 colors, alongside new color models and gradient options. ## 📖 References: - Jen Simmons, WWDC23 Presentation, https://www.youtube.com/watch?v=uadAfE6cAoM ## 🗣️ Paraphrase: 1. **Original**: "Masonry layout is available in Safari’s Technology Preview, allowing content to flow across the page, automatically packing items closer to the top of the layout grid." - **Paraphrase**: The Masonry layout feature in Safari’s Technology Preview enables content to automatically arrange itself efficiently in a grid, making better use of vertical space. 2. **Original**: "P3 color gamut allows for a greater range of colors, including brighter and more saturated hues, enhancing the web's visual potential." - **Paraphrase**: The P3 color gamut supports a broader spectrum of colors, enabling web designers to use more vibrant and saturated tones for richer visuals. ## 📰 Newsletter: 🌟 **New CSS Features in Safari 17: Transform Your Web Design!** This month, dive into the latest CSS updates from WWDC23. Learn how Safari’s new Masonry Layout streamlines complex designs, manage white space better with Margin Trim, and use P3 color gamuts to create stunning, vibrant visuals. Stay ahead of the curve and explore these exciting tools to elevate your projects. For more details, check out our [complete guide](https://www.youtube.com/watch?v=uadAfE6cAoM). 🚀 ## ✅ Action Items: - Highlight how Masonry Layout and Margin Trim help reduce reliance on JavaScript for layout management, aligning with goals of efficient, accessible code. - Emphasize open-source web technologies that support the growing demand for web diversity and performance, crucial for your advocacy in open-source contributions. ## 🧪 Hypotheses: - Websites using the Masonry Layout will have improved page load times compared to those using JavaScript-based layouts. - P3 color gamut usage will increase as more browsers support wider color spaces, making the web more visually dynamic. ### 📊 Methodology: - Conduct A/B tests on page load performance using CSS-based layouts versus JavaScript implementations. - Survey web designers on their adoption of P3 colors and other advanced CSS features. ### ❓ Questions: - How do new CSS features like Masonry Layout impact site performance and accessibility? - Will broader color gamut adoption affect visual design trends on the web? ### 🔮 Future Research: - Investigate how browsers are working to make Masonry Layout more accessible. - Study the adoption rates of advanced color models across web browsers and platforms. ### 💡 Implications: - These advancements will likely drive a shift away from JavaScript-heavy layouts, making the web faster and more accessible. Enhanced color models and layout features will redefine web aesthetics and visual design capabilities. ### 🧠 Learning Styles Assessment: 1. **Visual Learners**: - **Present**: Good use of diagrams in explaining Masonry Layout. - **Improve**: Provide more visual examples of typography adjustments and color models. 2. **Aural Learners**: - **Present**: Video presentation available. 3. **Verbal Learners**: - **Present**: Strong technical language describing CSS updates. 4. **Physical Learners**: - **Improve**: Add interactive CSS demos for hands-on learning. 5. **Logical Learners**: - **Present**: Detailed explanations of how each new CSS feature works. 6. **Social Learners**: - **Improve**: Encourage group discussions on applying these new CSS features in team projects. 7. **Solitary Learners**: - **Present**: Clear explanations allow for personal study. 8. **Naturalistic Learners**: - **Improve**: Introduce real-world applications of wide color gamut in environmental or nature-themed designs. ### 📊 Accessibility Assessment: - **Screen Reader Compatibility**: Ensure that all color models and new layout features are fully accessible. - **Keyboard Navigation**: Masonry Layout and typography adjustments should work seamlessly with keyboard-only navigation. ### 🌍 DEIB Assessment: - **Cultural Relevance**: Advanced color models like P3 can support more culturally diverse color schemes on websites. - **Inclusive Language**: Use neutral terms in explanations to avoid confusion for non-technical users. - **Representation**: CSS updates support multiple writing directions, helping to cater to more global audiences. ### ✅ Logical validity: - **Positive**: Jen Simmons makes a coherent argument for the efficiency of CSS-based layouts versus JavaScript-heavy solutions, backed by clear technical evidence. - **Improvement**: More data on performance benchmarks across browsers would strengthen the argument for using CSS Masonry Layout. ### 🔍 SEO Evaluation: 1. **Keywords**: "CSS updates," "Masonry Layout," "Safari 17" are effectively used. 2. **Meta Description**: Missing but recommended: "Explore new CSS features from Safari 17 including Masonry Layout, Margin Trim, and advanced typography tools." 3. **Headers**: Clear use of headers to structure content. 4. **Content Length**: Sufficient for explaining new features. 5. **Internal and External Links**: Add more links to detailed blog posts or documentation for specific CSS features. ## 🎯 Conclusion: Jen Simmons’ WWDC23 session reveals significant updates to CSS in Safari 17, offering powerful tools like Masonry Layout and P3 color models. These changes simplify web design workflows, enhance visual dynamics, and reduce dependency on JavaScript, helping developers craft more efficient, aesthetically rich websites. Short Summary for [WWDC23: What’s new in CSS | Apple](https://www.youtube.com/watch?v=uadAfE6cAoM) by [Merlin](https://merlin.foyer.work/) Title: Exploring Exciting New CSS Features in Safari Technology Preview for Enhanced Web Layout and Typography [00:07](https://www.youtube.com/watch?v=uadAfE6cAoM&t=7) WebKit has shipped over 140 new web technologies and has more coming this fall, focusing on CSS. [03:00](https://www.youtube.com/watch?v=uadAfE6cAoM&t=180) CSS Grid with Masonry offers flexibility and power [08:34](https://www.youtube.com/watch?v=uadAfE6cAoM&t=514) Color models can represent any gamut and are defined by values for Lightness, Chroma, and Hue. [11:34](https://www.youtube.com/watch?v=uadAfE6cAoM&t=694) Exploring new color models and color spaces for defining gradients and mixing colors in CSS. [17:11](https://www.youtube.com/watch?v=uadAfE6cAoM&t=1031) Pseudo-classes for form field styling and language-dependent styling [19:45](https://www.youtube.com/watch?v=uadAfE6cAoM&t=1185) Utilize direction pseudo-class for text transformation based on text direction. [25:07](https://www.youtube.com/watch?v=uadAfE6cAoM&t=1507) Font-size-adjust allows for more control over font consistency. [27:46](https://www.youtube.com/watch?v=uadAfE6cAoM&t=1666) Text-box-trim helps in layout by trimming extra space reserved for accents and marks. [32:54](https://www.youtube.com/watch?v=uadAfE6cAoM&t=1974) Stay updated on Safari's supported features --------------------------------- Detailed Summary for [WWDC23: What’s new in CSS | Apple](https://www.youtube.com/watch?v=uadAfE6cAoM) by [Merlin](https://merlin.foyer.work/) Title: Exploring Exciting New CSS Features in Safari Technology Preview for Enhanced Web Layout and Typography [00:07](https://www.youtube.com/watch?v=uadAfE6cAoM&t=7) WebKit has shipped over 140 new web technologies and has more coming this fall, focusing on CSS. - New features in CSS, including layout possibilities, color tools, pseudo-classes, and typography enhancements are discussed. - Masonry Layout, previously achieved with JavaScript, is now available in Safari Technology Preview using CSS Grid. [03:00](https://www.youtube.com/watch?v=uadAfE6cAoM&t=180) CSS Grid with Masonry offers flexibility and power - Grid-template-rows: Masonry creates a Masonry pattern easily. - Masonry combined with Grid surpasses popular JavaScript libraries in power and flexibility. [08:34](https://www.youtube.com/watch?v=uadAfE6cAoM&t=514) Color models can represent any gamut and are defined by values for Lightness, Chroma, and Hue. - Models like LCH, OKLCH, LAB, and OKLAB can create colors with new functions for each, supporting P3 and sRGB gamuts. - The color() function can specify gamuts and takes values in red, green, blue, and alpha, influencing color creation. [11:34](https://www.youtube.com/watch?v=uadAfE6cAoM&t=694) Exploring new color models and color spaces for defining gradients and mixing colors in CSS. - L and H channels untouched, focus on C chroma. Relative Color Syntax for palette creation. Safari 16.2 allows explicit color space declaration for gradients. - Options like sRGB, sRGB-linear, OKLAB, LCH, LAB, HSL, HWB for different effects. Impact of color space on interpolation, mixing colors with the new color-mix function in Safari 16.2. [17:11](https://www.youtube.com/watch?v=uadAfE6cAoM&t=1031) Pseudo-classes for form field styling and language-dependent styling - Usage of :invalid and ::before pseudo-elements for form field validation - Usage of :user-valid, :user-invalid, and the improvements in Safari 16.5 [19:45](https://www.youtube.com/watch?v=uadAfE6cAoM&t=1185) Utilize direction pseudo-class for text transformation based on text direction. - Solution simplifies multilingual support with user-valid and invalid techniques, :has() additions, and :dir pseudo-class. - Introduction of new line-height units, like lh and rlh, enables precise typography refinement for vertical rhythm and whitespace connection. [25:07](https://www.youtube.com/watch?v=uadAfE6cAoM&t=1507) Font-size-adjust allows for more control over font consistency. - In Safari 16.4, basic capabilities of font-size-adjust were added. - Safari 17 introduces support for more advanced capabilities and two-value syntax. [27:46](https://www.youtube.com/watch?v=uadAfE6cAoM&t=1666) Text-box-trim helps in layout by trimming extra space reserved for accents and marks. - Trimming away extra space ensures proper alignment of text and images. - Counter Styles in CSS allow for customization of numbering systems, expanding support for different languages. [32:54](https://www.youtube.com/watch?v=uadAfE6cAoM&t=1974) Stay updated on Safari's supported features - Utilize Caniuse as a resource to check for supported features - Download Safari Technology Preview to preview and test new features and improvements <!-- deep-read:sections end --> ## Highlights - We first shipped the ability to create P3 colors in CSS through the use of this color function in Safari 10.1, over six years ago. With the advent of these color gamuts and color models, the CSS Working Group defined additional tools that make use of their power. Their web standards are finally mature enough for us to ship these tools this year. Have you ever wanted to define a color in CSS, while referring to another color? It's been possible to do similar things in preprocessors for a while. ([View Highlight](https://read.readwise.io/read/01j7sncbq7sf6wpk1zjbq2enpd)) - that make use of P3 color, and of course, the user's operating system and display need to support it, but also the browser needs to support rendering in P3 for each particular part of the web page, in different portions of the DOM. You'll want to check into the details for each browser before assuming that it works universally. Let me give you an update on P3 in Safari. ([View Highlight](https://read.readwise.io/read/01j7sncbsm8zpjf1shh5pab89n)) - In Safari 17, we're adding support for more advanced capabilities. Wouldn't it be better if you didn't have to track down a magic number like 0.47 to try and make every font match your main font? The from-font value lets you tell the browser to just figure it all out. Also in Safari 17, we're adding support for the two-value syntax, which lets you specify which metric should be used when creating size consistency. By default, it's ex-height, but you can instead use cap-height, ([View Highlight](https://read.readwise.io/read/01j7sncbvyh9hhbhgyj5j76c99)) - ch-width, ic-width, or ic-height. Safari 17 also adds support for the size-adjust descriptor, which lets you make a similar kind of adjustment when you set-up a font with a @font-face rule. That's font-size-adjust. It let's you have a bit more control over something that cannot easily be controlled with font-size alone. But even with new line height units, ([View Highlight](https://read.readwise.io/read/01j7sncbyzs99ngw76mkbqb206)) - but don't get too attached to these details. We expect it to keep changing. Perhaps it will become like this. Do try it out in Safari Technology Preview and let us know what you think. Early feedback from web designers and developers like you is how CSS becomes the best it can be. Meanwhile, here's something that has great support across browsers and will soon come to Safari 17, Counter styles. You're probably very familiar with ordered lists in HTML, ([View Highlight](https://read.readwise.io/read/01j7sncc1pd4w9qwah96kw1b7g)) - In Safari 16.2, we also shipped support for last baseline alignment for Grid and Flexbox, plus several functions inside font-variant-alternates and @font-feature-values to further support Open Type features. Safari 16.4 also added support for the Media Queries range syntax and boolean logic, @property, and much more. Safari 16.5 also added support for CSS Nesting. ([View Highlight](https://read.readwise.io/read/01j7sncc556vyj86aybne1dva5)) - And in Safari 17, we're also adding feature detection of font tech and font formats, contain-intrinsic-size, text-transform: full-width and full-size-kana and a lot more. We want to say a huge thank you to everyone who files issues, pings us on social media, or writes blog posts to let us know which web technology you needed implemented or improved most. We are listening, and your input does have impact. ([View Highlight](https://read.readwise.io/read/01j7sncc811vmt4thy30b4dtps))