This month, Apple announced the forthcoming release of Safari 15 for macOS and iOS, bringing with it a number of new features for web design. Igalia is proud to have played a key role in bringing some of these new features to life in WebKit, including:
aspect-ratioproperty, which allows the sizing of elements based on a defined ratio of width to height. This is useful for the sizing of images and embedded videos, but can be applied to any element that needs to maintain a precise aspect ratio regardless of its content size.
- Improved support for the
gapproperty, which lets designers add regularly-sized gaps between flexbox items, much the way
grid-gapallowed them for grid items. With
gap, one property can now set the gaps in both Grid and Flexbox contexts.
- Shorthands for logical properties which allow authors to define their padding, borders, and margins based on the writing direction of the content, rather than physical directions like “top” or “left”.
- Improvements to scroll snapping and initial support for
scroll-margin, which allows authors to express how much of the content outside the snapport should remain visible.
Learn about these Igalia-driven features, and more, in the video “Design for Safari 15”, featuring Apple’s web evangelist Jen Simmons and engineer Myles Maxfield.