safari webkit profiler

Apple touts major 60% leap in Safari and WebKit performance

Apple’s WebKit team has published a new blog post this week detailing how they’ve made significant upgrades to Safari’s performance over the last several months. The improvements come following the debut of Speedometer 3.0 in March, described as a “major step forward in making the web faster for all.”

Back in March, Apple, Google, and Mozilla teamed up to launch the new Speedometer 3 browser benchmark. The goal of Speedometer 3 is to “create a shared understanding of web performance so that improvements can be made to enhance the user experience.”

The results provided by Speedometer 3 offer more details on how the test “captures and calculates scores, show more detailed results and introduce an even wider variety of workloads.” Apple says:

The introduction of Speedometer 3.0 is a major step forward in making the web faster for all, and allowing Web developers to make websites and web apps that were not previously possible.

Apple’s WebKit team says that it has successfully improved Safari’s Speedometer 3.0 score by ~60% between the release of Safari 17.0 in September and Safari 17.4’s release in March. These improvements, Apple says, mean that developers can build websites and web apps that are faster than ever before:

With all these optimizations and dozens more, we were able to improve the overall Speedometer 3.0 score by ~60% between Safari 17.0 and Safari 17.4. Even though individual progressions were often less than 1%, over time, they all stacked up together to make a big difference. Because some of these optimizations also benefited Speedometer 2.1, Safari 17.4 is also ~13% faster than Safari 17.0 on Speedometer 2.1. We’re thrilled to deliver these performance improvements to our users allowing web developers to build websites and web apps that are more responsive and snappier than ever.

The full blog post has a ton of technical details on the work that has been done to optimize WebKit and Safari for Speedometer 3.0.

Follow Chance :  Threads ,  Twitter ,  Instagram , and  Mastodon . 

FTC: We use income earning auto affiliate links. More.

Check out 9to5Mac on YouTube for more Apple news:

Chance is an editor for the entire 9to5 network and covers the latest Apple news for 9to5Mac.

Tips, questions, typos to [email protected]

Manage push notifications

DEV Community

Posted on Mar 10, 2023

Running the Latest Safari WebKit on Windows

Safari runs on windows.

I can't believe it took me this long to figure this out, but it's totally possible to run the latest WebKit/Safari on Windows locally and debug issues that would otherwise require emulation, a remote machines or a Mac!

Not only can it be done but it's extremely easy to do, and in this article I will go over the 2 simplest ways to get up and running.

Method #1: Playwright CLI

This first method is by far the easiest as it only requires having Node.js installed which comes with npm/npx. Once you have Node.js installed you will need to run the Playwright command to download the browsers.

Open up the Command Prompt and type npx playwright install , then once this is done you can open up a url in WebKit by running the follow command npx playwright wk https://dustinbrett.com/ , as described in the docs for Command line tools -> Open Pages .

Method #2: Download Build Artifacts

As described in the Webkit Wiki , the files required are built often and can be easily downloaded and combined.

The first file that is needed comes from the Webkit CI Builders , specifically WinCairo-64-bit-Release-Build .

Open the latest green build and download the zip file mentioned after S3 URL on the transfer-to-s3 step.

Now you will need to download one more zip file from the WebKitForWindows Releases by downloading WebKitRequirementsWin64.zip from the Assets section of the most recent release.

Then extract both files to the same folder so that the bin64 folders become combined. All other folders can be deleted as they are not needed. Go into the combined bin64 folder and launch MiniBrowser.exe and you are up and running.

This version has more features compared to the Playwright one and allows turning on and off Experimental & Internal Debug Features.

Both versions have the familiar Web Inspector which is extremely helpful to have locally.

Companion Video

I thought this was such a useful trick that I also made a video showing how to do it, feel free to check it out!

Top comments (0)

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Managing JDKs on native Windows (not WSL)

Han Li - Apr 1

Fix Code helper plugin(visual studio code) leak memory Macbook

Nguyen Dinh Khai - Apr 2

What I DON'T like about shadcn/ui

Leonardo Montini - Apr 23

Podlite v1.0 released: A lightweight block-oriented markup language for organizing knowledge

Alexandr Zahatski - Apr 23

We're a place where coders share, stay up-to-date and grow their careers.

View in English

Tools, documentation, forums, videos, and more.

Safari Technology Preview

Get a sneak peek at upcoming web technologies in macOS and iOS with Safari Technology Preview and experiment with these technologies in your websites and extensions.

• Safari Technology Preview for macOS Sonoma Requires macOS 14 or later
• Safari Technology Preview for macOS Ventura Requires macOS 13 or later
• Release Notes

April 24, 2024

Safari beta

Try out the next version of Safari for upcoming macOS releases. To access the latest beta versions of Safari, sign in with your Apple ID.

View downloads

Release Date

September 20, 2021

Guides and sample code

Get details on implementing web technologies with guides, reference, and sample code.

• Safari Web Extensions
• Apple Pay on the Web
• Security Keys
• Video Content in Safari
• More Safari Documentation

Watch and learn from our engineers as they show how to bring the latest web technologies to your websites on Safari.

• Watch Safari and Web Videos

Ask questions and discuss a variety of web development topics with Apple engineers and other developers.

• Apple Developer Forums

Featured web technologies

Safari extensions.

Safari extensions are a powerful way to add new features to Safari. They are built in Xcode with web technologies, such as HTML5, CSS3, and JavaScript and powerful native APIs. Now you can distribute and sell them through the App Store on Mac, iPhone and iPad.

• Meet Safari Web Extensions on iOS
• Explore Safari Web Extension improvements
• Converting a Web Extension for Safari
• Creating a Content Blocker
• Submit Your Extension

Universal links

Seamlessly link to content within your app or on your website in iOS, iPadOS, and macOS. With universal links, you can always give users the most integrated mobile experience, even when your app isn’t installed on their device.

• Universal Links

Smart App Banners

Make it easy for people to discover and download your app using iOS, iPadOS, and macOS. With Safari Smart App Banners, you can display a banner that provides a direct link to your app on the App Store, or opens the app if the user already has it installed. Smart App Banners integrate seamlessly and are easy to implement.

• Promoting Apps with Smart App Banners

HTTP Live Streaming (HLS)

Deliver streaming media to apps on iOS and iPadOS or HTML5-based websites using an ordinary web server.

• HTTP Live Streaming

Safari iCloud Keychain

Easily create more secure logins for users in iOS 15, iPadOS 15, and macOS Monterey or later using iCloud Keychain verification codes. Take advantage of verification codes, AutoFill, iCloud Keychain sync, and two-tap setup to simplify the multistep sign-in process.

• Secure login with iCloud Keychain verification codes
• Securing Logins with iCloud Keychain Verification Codes
• Safari Push Notifications

Use the Apple Push Notifications Service to send notifications to your website vistors, right on their Mac desktop — even when Safari isn’t running. These notifications display your website icon and notification text, which people can click to go right to your website.

• Certificates, Identifiers & Profiles

Introduced by Apple, WebKit is the most advanced rendering engine, drawing the web pages in Safari on iOS, iPadOS, and macOS.

• WebKit Open Source Project

Write automated tests to exercise web content in Safari to ensure a good user experience, and run those same tests against other browsers with a WebDriver-compliant driver.

• macOS WebDriver Commands for Safari 11.1 and earlier
• macOS WebDriver Commands for Safari 12 and later
• About WebDriver for Safari
• Testing with WebDriver in Safari

Apple announces new Safari profiles and WebKit features

Apple’s wwdc announcements include a new version of safari for macos sonoma that allows separation of work / personal browsing, upgrades to webkit, and extended privacy features..

By Umar Shakir , a news writer fond of the electric vehicle lifestyle and things that plug in via USB-C. He spent over 15 years in IT support before joining The Verge.

Share this story

Apple’s latest version of Safari was announced at WWDC as part of the newly announced macOS Sonoma. The new browser version brings new privacy features that include the ability to lock your browser window, block trackers, and remove URL trackers. Safari can also now share passwords and passkeys to groups using iCloud Keychain. The transfer is done with end-to-end encryption.

Perhaps the biggest new addition to Safari is the ability to create profiles. Now when you’re browsing, you can sandbox your activities separately for things like work and personal browsing. The feature will help keep data and trackers from mixing between each other and help you browse more organized.

Apple is refocusing on WebApps, allowing developers to take advantage of a new Add to Dock feature so you can quickly access that program. Safari is built on top of the WebKit engine, which is also getting a whole lot of under-the-hood updates that include features like adding vibration support for controllers, support for external webcams in the iPad version of Safari, and AVIF support for older macOS versions starting with Big Sur.

Apple claims that Safari is “the best way to browse the web” and is the “world’s fastest browser.” Notably, iOS and iPadOS third-party browsers still require to run WebKit under the hood.

The walls of Apple’s garden are tumbling down

I traded in my macbook and now i’m a desktop convert, the apple vision pro’s ebay prices are making me sad, how to delete the data google has on you, in the first autonomous racing league race, the struggle was real.

More from this stream WWDC 2023 news: Apple Vision Pro, Mac Pro, iOS 17, and more

Lg is going to support that hotel airplay thing., siri gets a bit smarter, but apple home is still lagging behind, apple’s latest sherlock targets your grandparents’ tech, you can buy the new 15-inch macbook air today..

What are Safari experimental WebKit features on iOS?

Modified Nov. 3, 2023, 8:44 p.m. By Maxime Levesque

The Safari advanced settings on iOS contain a specific menu called Experimental WebKit features. What are these settings? Should I turn off them? I’ll explain what are those experimental features and what to do with them.

Safari experimental WebKit features on iOS are mostly useful for developers that want to try some of the new features implemented in Safari but not activated by default yet or that have been recently enabled. Each entry in this menu corresponds to a specific feature, enabling or disabling it could change the behavior of your Safari browser, should you do it? I’ll answer this and will also detail each of these features.

What are Safari experimental WebKit features useful for?

Should i turn off experimental wekkit features, how to reset experimental webkit features.

Web development is evolving very quickly, new technologies are out every month, and new features are released in every new version of Safari, the Apple web browser . It can be very complicated for the developers to be sure that the web applications they develop are compatible with these new features, or if the new technologies released can be used inside their web applications to make them even better.

The Safari experimental WebKit features help the developers to test the features that will be released in the next version of Safari, or a new technology available but not so much used yet. The developers can enable or disable each of these WebKit features during their tests.

You can find more information on Safari resources here.

The short answer is no, you should not change anything in this menu if you do not know what is the meaning of the feature.

Some of these features are enabled by default, it can be because Apple wants to allow web developers to try what happens when they disable it, or because the feature has been enabled in one of the last versions of Safari. Disabling a feature could change the behavior of Safari and therefore add some bugs you could not understand.

These features are focused on web development and you should not have to change anything in this menu. But a bad update could be released with bugs, which could decrease the battery health faster for example. This is the only case where a manual change from you could be required until Apple releases a fix, but it’s rarely really needed.

If you or someone else changed anything in this menu without understanding the meaning of the feature, you should reset the values to the default ones.

• Open settings on your iPhone or iPad
• Open the Safari settings
• Scroll to the bottom and open Advanced
• Scroll to the bottom and open Experimental Features/

• Scroll to the very bottom and click on Reset All to Defaults

• That’s it, all the experimental WebKit features values have been reset to default ones

What experimental WebKit features should be on?

If you do not want to reset all the values to defaults and just want to be sure what are the values at default, here is the list of enabled features :

The experimental WebKit features that should be on in iOS 17 are :

• :focus-visible pseudo-class
• :has() pseudo-class
• AccessHandle API
• Aspect ratio of </img> from width and height
• Async clipboard API
• Blank anchor target implies rel=noopener
• Block top-level redirects by third-party iframes
• BroadcastChannel Origin
• CSS Accent Color
• CSS Aspect Ratio
• CSS Cascade Layers
• CSS Color 4 Color Types
• CSS Container Queries
• CSS Containment
• CSS Gradient Premultiplied Alpha Interpolation
• CSS Individual Transform Properties
• CSS Motion Path
• CSS Overscroll Behavior
• CSS overflow: clip support
• CSS subgrid support
• CSS text-align-last property
• CSSOM View Smooth Scrolling
• Canvas Color Spaces
• Cross-Origin-Embedder-Policy
• Cross-Origin-Opener-Policy
• Defer async scripts until DOMContentLoaded or first-paint
• Dialog Element
• Disallow sync XHR during page dismissal
• Experimental MediaSource Inline Painting
• Fetch API Request KeepAlive
• File System Access API
• Form requestSubmit
• GPU Process: DOM Rendering
• GPU Process: WebGL
• Generic Text Track Cue API
• HDR Media Capabilities
• ImageBitmap
• In-Process Cookie Cache
• Intersection Observer
• Lazy image loading
• Mask WebGL Strings
• Media Capabilities Extensions
• Media Session API
• MediaRecorder
• NSURLSession WebSocket
• Opus audio decoder
• Paint Timing
• PerformanceNavigationTiming
• Permissions API
• Prefer Page Rendering Updates near 60fps
• Private Click Measurement Fraud Prevention
• Referrer Policy attribute
• Remote Playback API
• RequestVideoFramCallback
• Resize Observer
• Resolution media feature
• Service Worker Navigation Preload
• SharedWorker
• SpeechRcognition API
• Storage API
• Swap Processes on Cross-Site Navigation
• Synthetic Editing Commands
• TranformStream API
• UserGesture Promise Propagation
• Visual Viewport API
• Vorbis audio decoder
• Web Animations composite operations
• Web Animations mutable timelines
• Web Autentication
• Web Locks API
• Web Share API Level 2
• WebGL via Metal
• WebRTC Encoded Transform API
• WebRTC H264 LowLatency encoder
• WebRTC Platform TCP Sockets
• WebRTC Platform UDP Sockets
• WebRTC Sockets Proxying
• WebRTC VP9 profile 0 codec
• WebRTC VP9 profile 2 codec
• Wheel Event gestures become non-blocking
• Wheel Event listeners on the root made passive
• inert attribute

Maxime Levesque is a technical engineer with more than 5 years of professional experience. He is an expert in computer and phones, mostly on Apple products. Maxime is also the founder of TechBrowser.

Willy - Oct. 18, 2023, 12:44 p.m.

Carole coleman - oct. 22, 2023, 5:51 a.m., maxime levesque - moderator - oct. 22, 2023, 7:47 a.m., post your comment, lastest reviews.

The Best Podcast Microphones for iPhone

The Best External Microphones for iPhone

I’ve been able to test many different external microphones while recording videos but also audio-only using my iPhones.

The Best Mini Microphone for iPhone

As an audio equipment expert with extensive experience in testing various mini microphones for the iPhone, I'm excited to share my insights with you.

Lastest News

What is Journal, the new Apple application?

Apple's latest addition to its iOS ecosystem is the Journal app, introduced with the first beta of iOS 17.2, is now available for every user with the latest 17.2 update.

MacBooks Pro with M3 chip announced

IOS 17.1 RC now available for download

Apple just released the 17.1 release candidate update, which means the official 17.1 update should be release next week. Here is what’s new.

Latest Posts

6 Ways to Improve a MacBook's Speed

MacBooks are one of the best when it comes to excelling in the overall performance. However, similar to other devices, Macs are no exception when it comes to performance drop over time.

The Impact of iPhone Cases on Microphone Quality

As a phone enthusiast and a frequent user of various iPhone cases and accessories, I've noticed something interesting – these items can significantly affect the microphone quality of your iPhone

Understanding the Technical Specifications of iPhone Microphones

Today, I'm excited to chat about something that often goes unnoticed but is super important in our iPhones – the microphones.

Privacy Policy

Terms of Service

Cookie Policy

© 2023 SAS Vexilab, All rights reserved

Ads displayed using affimate.io

back to the homepage

Who and what.

• What we offer
• Kinbaku/Shibari

Free Galleries

Our pictures, free videos, other stuff, links, banners , etc, news & events, contacts us, report from moscow knot.

This is our report from Moscow Knot 2013, the first edition of what has been probably one of the greatest rope event of this year, featuring on stage some incredible artists including Naka Akira for the first time performing out of Japan. We really don’t know where to start from to describe all the emotions of this incredible long weekend. The Moscow Knot was organized by Vlada, Falco and Torquemada. Three splendid and friendly guys that took very good care of all the guests during the three days of the Festival. We arrived quite late in the night before the beginning of the Festival and slept...

Kinbaku LuXuria goes to Russia

Kinbaku LuXuria will be giving two workshops qnd four (yes I said four!) shows in Russia! Thanks to Boris Mosafir we have been invited in Moscow and St. Petersburg from Nov. 30 to Dec.4 to hold two workshops and perform twice in each city. Wildties and Redsabbath are honored for this invitation and will do their best to show some of the best LuXuria style and bondage to the growing Russian community. Theese guys are really great and their bondage scene is growing in a very fast way. Also a few of them have already performed internationally in events like The London Festival of the Art of Japanese...

• October 2018
• October 2016
• August 2016
• February 2016
• January 2016
• February 2015
• November 2014
• October 2013
• February 2013
• January 2013
• December 2012
• November 2012
• October 2012

Help us invent CSS Grid Level 3, aka “Masonry” layout

Apr 19, 2024

by Jen Simmons

What is masonry layout?

Inventing masonry, creating a classic masonry / waterfall layout, leveraging grid’s full power to define columns, leveraging grid’s ability to let content span columns, columnar vs. modular grids, using subgrid and explicit placement, what is a grid, we want to hear from you.

If you’ve been making websites for years, you know how frustrating it was to lay out a web page with CSS floats. Managing sizes and placement was tedious and time consuming. Being creative was often impossible. CSS Grid greatly eased that pain with Grid Level 1 in 2017 , and now with Grid Level 2, aka Subgrid . But even with the powerful CSS of today, not every layout imaged by designers is possible. In fact, when CSS Grid shipped, one of the most commonly asked questions was: “how do I write CSS to accomplish a masonry layout?” Sadly, for the last seven years the answer has been — you can’t.

What do we mean by the term “masonry layout”? Basically it’s the pattern seen in the following image — where content packs together like a brick or stone wall. That’s where it gets the name “masonry”. It’s also frequently called “ waterfall layout ”, as a metaphor for how content flows down the page like a waterfall.

This layout is popular because it solves a few problems that other layouts do not.

• It allows for content of different aspect ratios, and avoids the need to crop or truncate content in order to turn everything into uniform rectangles.
• It distributes content across the page (instead of flowing down each column, one by one). This follows the natural reading order as you scroll the page. And it lets the website lazy-load additional content at the bottom without moving existing content around.

This layout creates uniformly-sized columns, without any rows. It’s quite possible that because this layout has required JavaScript, anything more creative or complex has been too hard to pull off — and we’ve been left with an expectation that masonry layout should only ever be a simple pattern with uniformly-sized columns. Let’s see what’s possible if we build it into CSS instead.

A mechanism in CSS for “masonry layout” was first proposed by Mozilla in January 2020 as an extension of CSS Grid, and implemented as an experiment behind a flag in Firefox Nightly. In 2022, Apple started implementing this CSS Grid Level 3 proposal in Safari Technology Preview (where it’s currently on by default), and we’ve been helping to move the web standard along to reach maturity.

However, there are big questions still being asked about how CSS should handle masonry-style layouts. Some people remain skeptical that this capability should be part of CSS Grid, and want it to instead be its own separate display type. Others are questioning whether or not this kind of layout is needed on the web at all — they aren’t sure that well-known websites will use it. With such fundamental disagreements at play, no browser can ship. We must first come to consensus in the CSS Working Group.

This is where we need your help. We’d like real-world web designers and developers to weigh into the discussion, and express what it is that you want. Your input really can make a difference.

In this article, we’ll walk through how the CSS Grid Level 3 proposal works, and how you can use its new capabilities. We’ll show you why we believe these features should be part of CSS Grid, and explain what the alternative would be if the CSS Working Group creates display: masonry instead. And then, we’ll ask you to join the debate to help move us forward. Please do read to the end.

To show why we at Apple believe this capability should be part of CSS Grid, we created four demonstrations. If you’d like, try them yourself at webkit.org/demos/grid3 . View these demos in a browser that supports Grid Level 3 — currently Safari Technology Preview or Firefox after you’ve turned on the feature flag .

Note there’s a control panel for each demo, with the relevant layout code printed to the page. Turn on “Number items” to see the relationship between the HTML order of content and the layout placement of that content.

Each demo has a multitude of variations. Switch between variations from the dropdown menu, which changes only the CSS. The HTML stays the same.

First, let’s take a look at how to build a classic masonry/waterfall layout. In this gallery of photos, each image is wrapped with a figure element, and the figures are direct children of a main element.

We start by applying display: grid to the main element to create the Grid container. Then we can define grid-template-columns however we’d like.

In this case, let’s use grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)) to ask the browser to repeat a looped definition to create a set of flexible columns that are each of a minimum of 14rem. This results in uniformly-sized columns, typical of the classic masonry/waterfall layout. The gap: 1rem; rule creates a 1rem-wide space between the items — both between the columns, and horizontally between items.

And then, we’ll define the “rows” with the masonry value. (It’s likely the name of this value will change before this ships in browsers — more on that at the end of this article. For now, masonry is what works.)

The grid-template-rows: masonry rule tells the browser: “Please do not create rows. Instead pack the content into a masonry/waterfall-like pattern.”

That’s it! In four lines of CSS, with zero media queries or container queries, we’ve created a flexible layout that works on screens of all sizes. And there’s no need to crop content to force everything into same-sized boxes.

In graphic design, a layout that has uniformly-sized columns and no rows is often called a “symmetrical columnar grid”. For centuries, columnar grids were the dominant type of grid used in page design.

Now let’s dive into the advantages of combining the full power of CSS Grid with masonry/waterfall packing. CSS Grid provides many options for defining grid our columns. Using fr units to create a symmetrical grid is only one option of many.

How could these possibilities be used for a masonry/waterfall-style layout? Let’s try mixing fixed-sized columns with flexible columns. We could make the first and last column fixed-sized, while the middle columns are flexible, changing in both size and number.

Specifically, the first and last columns are exactly 14 characters wide, while the middle columns are flexible (at least 28 characters wide) and change in number to fill the available space.

This is just one of many, many possibilities.

CSS Grid allows for a lot of creativity with its options for defining grid tracks:

• fixed sizes defined in any unit (px, em, rem, cqi, lh, ch, ic, cap, vw, svh, and many more )
• max-content and min-content
• the full power of fr units
• minmax() functions

These options in CSS Grid allow you to create something much more dynamic and flexible in interesting ways. You can create two stages of flexibility, because the fr -unit sized columns grow and shrink in a separate stage from the minmax() -sized columns. The max-content and min-content values let you size the columns based on the content size, rather than sizing the content based on the column size. The fr units can easily be used to create compound or asymmetrical grids, where the columns are different sizes. The options are endless.

By adding the ability to pack content in a masonry/waterfall pattern to CSS Grid, we maintain the full power of Grid for defining our columns in whichever manner we like.

For example, let’s use grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr) to create a pattern of alternating narrow and wider columns, where all the columns are flexible. More columns are added when there’s space. And there’s always an odd number of columns, ending with a narrow one.

Even when we define columns using only the simple fr unit, the full power provided in CSS Grid means different columns can be set to different sizes. For fun, let’s use fr units to define a set of columns sized to inject the vibes of the golden ratio by using the Fibonacci sequence in grid-template-columns: 1fr 1fr 2fr 3fr 5fr 8fr;

In a more practical example, let’s use max-content when defining our columns. Content-based sizing is an incredibly power feature of CSS Grid. This demo of a mega menu layout uses grid-template-columns: repeat(auto-fill, minmax(max-content, 30ch)); to ensure that every column is big enough to fit every link without wrapping text.

Mega menus have been hard to code, especially across multiple screen sizes. With CSS Grid Level 3, it becomes incredibly easy. A few lines of code creates a dynamic layout which adds and removes columns one at a time as space allows — without any media/container queries, and with wrapping prevention.

Many of these examples could never be created with masonry as a separate display type. The discussion of display: masonry is to only allow symmetrical columns (columns that are the same size as each other), much like multicolumn layout does today.

CSS Grid also lets us span items across multiple columns. Let’s use that capability to see what interesting options might emerge. How about making every 5th image span two grid columns, while the rest of the images are span one column.

What if instead, we put a wider class on specifically on images that have a wider aspect-ratio, to make those images span multiple columns. We can also change the styling a bit, making the corners square instead of round, and reducing the grid gap to zero. This gives us a different way to pack photos of different aspect ratios together.

We also experimented with combining the classic masonry/waterfall layout of photos with View Transitions. When a user clicks/taps on any photo, it grows to span multiple columns. The browser automagically animates the transition. (This demo requires Safari Technology Preview 192 or later.)

These variations of the Photos and Mega Menu demos are just a small taste of all of the many possibilities you get when leveraging the full power of CSS Grid in the column direction, while simultaneously turning off rows.

What happens when we keep experimenting? Let’s let go of thinking about “masonry”, and start imagining Grid Level 3 purely as an expansion of Grid. At its core, CSS Grid Level 3 provides a mechanism for turning off rows. It lets us create a columnar grid — a grid that’s made up of columns alone.

By contrast, a modular grid is a grid where everything is lined up in both columns and rows. They became popular in the 20th century during the dominance of modernism in graphic design. CSS Grid Level 1 is really good at making modular grids… that’s what it wants to do. In fact, float-based layouts also encouraged the creation of modular grids on the web, since you had to make all your content the same height to get your floats to clear. Images need to be the same aspect ratio. Text has to be the same length. This is often accomplished on the back-end with policies enforced by the content management system, or on the front-end by CSS that truncates/crops the content.

It’s incredible common for websites to do some variation of this sort of modular grid, laid out here with CSS Grid Level 1.

Of course, this example is overly simplistic. The article ledes look bare with no teaser images. The uniformity is so strict and formal, the design lacks life. Real websites find other ways to breathe life back into the design.

But what if the layout itself could also provide some vitality and interest? What will happen if we use CSS Grid to create a columnar grid as easily as it creates a modular grid? What if we don’t truncate content, and instead let it be the size that it wants to be — and get the layout to work for the content, rather than forcing the content to work for the layout?

A classic masonry/waterfall layout with various lengths of text looks like this, which is already more engaging since a user can read more about each article:

Although, that’s still a bit visually repetitive. Symmetrical columnar grids often are. We need the rest of the power of CSS Grid to do something more interesting. Let’s make the latest article much bigger, and have it span four columns. A handful of other recent articles can be medium-sized and span two columns. While the older content is smaller, spanning one column.

Now this otherwise visually boring text is starting to look fairly lively. If we were to add images to each of these articles, it would be it even more dynamic.

Let’s experiment with mixing images and text together on a webpage for a museum. The first grid item is a header that introduces the museum, and provides navigation to other resources. The rest of the content consists of pieces of artwork and their information: title, artist, year, medium, catalog number and location.

Because the paintings are gorgeous, the content looks pretty great in a classic masonry/waterfall layout.

Let’s see what else we can do by utilizing two more powerful features of CSS Grid — subgrid and explicit placement.

The functionality provided by subgrid in CSS Grid Level 2 is incredible, and it’s finally supported in most browsers.

Instead of listing the painting’s metadata in a single left-aligned column, let’s see how we might better use the available space. By using subgrid , we can put the year and catalog number on the right of each card — and line up this data for one painting with the same data for the other paintings.

By adding this new functionality to CSS Grid Level 3, we get the benefit of existing developer tools. You can use the Grid Inspector in Safari Technology Preview today as you try out grid-template-rows: masonry .

If masonry is its own display type, and not part of CSS Grid, it will not get the benefit of subgrid.

We can also use the power of CSS Grid Level 1 to explicitly place the header into the last two columns, moving it to the top right corner of the page with grid-column: -3 / -1 .

In just a few lines of layout code, we are using the full power of CSS Grid Levels 1, 2, and 3 to create flexible columns that change in number to accommodate the available size — without using any media queries or container queries.

Hopefully you can see the advantages of fully combining a mechanism for masonry/waterfall layouts with CSS Grid — providing many more creative possibilities than masonry alone.

So let’s get into the debate that’s been blocking the CSS Working Group from moving forward. Our hope is that web designers and developers chime in (post to social media, write blog posts) with your thoughts about which direction CSS should take.

Some people, including those of us at Apple, like having “Masonry” be part of CSS Grid. We believe this functionality is a mechanism to expand CSS Grid — allowing it to finally create columnar grids as well as modular grids. And we want this functionality to be mixed with all the other features of Grid, including the powerful options for defining a columns, track spanning, explicit placement, and subgrid.

Other people instead believe Masonry should be its own separate display type. At first glance, defining Masonry with a new display type might make a lot of sense. You do get a tidy separation between layout types.

The CSS Working Group has not discussed how the syntax for a separate Masonry display type would work, but perhaps it would be patterned after Multicolumn layout .

Or perhaps the syntax would be patterned after Grid, but with significant limitations :

Either way, it’s clear that advocates of this option want Masonry to be limited to a symmetrical grid — where all the columns are the same size as each other. None of the rest of CSS Grid’s track sizing capabilities would be allowed.

Making masonry a simple and separate layout type would avoid the work necessary to keep Grid and Masonry working together in combination — both now and in the long term. Doing this would simplify the layout model, make it easier to implement in browsers, reduce the potential for performance traps, and allow the feature sets of Grid and Masonry to diverge.

Conversely, we believe the effort needed to add this capability to CSS Grid is worth the many benefits to be had. The CSS Grid Level 3 specification has already been written, and implemented in two browser engines . And yes, while making CSS Grid more complex will make it harder to extend in the future, we believe there’s an advantage to having these two types of grid layouts intertwined. This way the CSS Working Group will always define all new additions for both modular and columnar grids. There won’t be something added to display: grid that will be left out of display: masonry , or vice versa. For example, many developers want CSS Grid Level 4 to provide a mechanism for styling grid areas and grid lines — perhaps a way to add a background color to a track, or create a rule line in a gap. It’d be great to ensure that will work for both modular and columnar grids from Day 1.

Another argument made by advocates of display: masonry is that that masonry is conceptually a fundamentally different layout type from CSS Grid, and therefore should have its own display type. They often describe CSS Grid as inherently being about “lining things up in two-dimensions”, and since masonry only lines things up in one dimension, “it’s not a grid”. (In fact, some have advocated that Masonry is more like Flexbox, since “both line things up in one direction”.)

In many ways, your perspective on this question might depends on what you imagine a grid is.

Grids are an incredibly important aspect of graphic design. Grids are used to line up text, images and other content in a regular pattern. They help readability and usability by making things predictable.

You can trace their use through thousands of years of history.

It wasn’t until the 20th century that European and American modernists started promoting the idea that “proper” graphic design grids should line content up in both directions — in rows as well as columns.

Even today, there is a lot of debate about which type of grid is the best grid or the only legitimate grid. Many designers claim a 12 column grid is the only correct way to design a web page — or 12 columns for “desktop”, 8 columns for “tablet”, and 4 columns for “phones”. At times designers have gotten quite religious about their ideas of what a “proper grid” looks like.

Mark Boulton argued for years that symmetrical columnar grids are incredibly formulaic and boring. He promoted the use of asymmetrical compound grids in design for the web. Today, luckily CSS Grid Level 1 makes it incredibly easy to create both asymmetrical grids and compound grids, giving designers the freedom to create what they want. But only if they also want all their grids to be a modular grids.

Both modular and columnar grids are in fact grids. And CSS Grid deserves the ability to also create columnar grids.

We believe there’s an opportunity for CSS to enable a rich history of design grids to come to the web — and would be greatly disappointed to see the new masonry feature limited to only allowing symmetrical columnar grids.

But what do you think?

This is where you come in. Try some demos of your own. Write about your thoughts on your own blog. Comment at the CSS Working Group in this issue .

• Should “masonry”/“waterfall” be part of CSS Grid?
• Do you want the capabilities to define a columnar grid with CSS Grid — to use subgrid, spanning, explicit placement, and all the many options for track sizing? Or do you only want the ability to define a classic masonry layout with equal-sized columns?
• Will you use this? What might you create with it?
• Do you have links to demos you’ve made? We want to see your ideas and use cases.
• Are there things you want to do that you can’t do with this model?

Often, thinking about something theoretically and actually seeing it in use can be very different. To make sure the CSSWG gets the design of this feature correct, we need developers to gain some hands-on experience, and articulate your thoughts about what it’s like.

The WebKit team has been working on Masonry for a year and a half. It was first enabled by default in Safari Technology Preview 163 in February 2023. There’s a bit more polish needed, and details to work out (naming being one). But we would like to ship this feature soon. To do so, these fundamental questions need to be resolved.

Thank you for your help!

P.S. About the name…

It’s likely masonry is not the best name for this new value. Names in CSS are usually simple words that directly describe the result they create — like center , under , contain , clip , revert , ltr , always , break-word , hidden , allow-end , scale-down , wrap , smooth .

The word “masonry” is more of a metaphor, where the meaning has to be explained with a backstory. Such a term is harder to remember for developers who do not speak English. And arguably, the syntax could just as easily be grid-template-rows: waterfall instead, since that’s the dominant word for this layout used in certain regions, not masonry.

Plus, once you start to write a lot of code using this feature, it’s likely you’ll come to the realization that we did — this really isn’t about the layout used by Pinterest or other similar sites. This is a mechanism for telling the browser, “please create a grid, but without any rows. ”

Perhaps the best syntax could be grid-template-rows: none; to convey “please do not give me any rows”. Sadly, it’s too late to use this name, because none is the default value for grid-template-* and means “please give me only implicit rows, no explicit ones”.

Instead we could use the name off to convey “please turn off the grid in the row direction, and give me only columns”.

The CSSWG is debating this name in this issue . If you have ideas or preferences for a name, please join that discussion.

Meanwhile, masonry is the value that is currently implemented in Safari Technology Preview, since that’s what the Editor’s Draft currently uses. And so that’s what we used in our demos above, and what you should use in yours. But do expect the name of this value to change in the future. And perhaps prepare for a future where we call this “columnar grid” or “Grid Level 3” instead of “Masonry”.