Setting Chrome Flags for Experimental Web Browser Layout Features

Page layouts are set for a revolution. We’re mostly waiting for the majority of browsers to support new layout technologies.

One of those technologies, CSS Flexbox, allows for easy placement and styling of navigation menus, image galleries, photograph thumbnails, centering objects, and so on. Basically, anything that designers would have thought should have straightforward with web design is now possible.

CSS Flexible Box Layout Module

Method of positioning elements in horizontal or vertical stacks. Support includes all properties prefixed with `flex`, as well as `display: flex`, `display: inline-flex`, `align-content`, `align-items`, `align-self`, `justify-content` and `order`.

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 4*
  • 2*
  • 10*
  • 12.
  • 3.1*

Mobile / Tablet

  • 3.2*
  • 2.1*
  • 12.
  • 96
  • 94

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

While Flexbox can handle the layout within portions of a page, true page layout design is a bit aways.

The technology powering page layouts, CSS Grids, is still awaiting for browser support.

CSS Grid Layout (level 1)

Method of using a grid concept to lay out content, providing a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors. Includes support for all `grid-*` properties and the `fr` unit.

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 25
  • 19
  • 9
  • 28
  • 6

Mobile / Tablet

  • 6.0
  • 4.2
  • 64
  • 96
  • 94

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

However, the latest browser vendors are experimenting with the implementation of the CSS specification with new browser builds. What that means is that web designer and developers can turn them on for testing out cool new stuff like CSS grids!

Enabling Chrome Flags

In the Chrome browser, type in the web address chrome://flags/. This action results in a list of experimental browser features available to you.

NOTE: As the warning states at the top of the flags page, these features may go away at any time in a future release. Or worst, they might make your browser something you really do not want it to do like delete data, crash your browser, etc. It’s called experimental for a reason. If we stick to page capabilities, though, that should likely not be that much of a problem.

To turn on CSS Grids, scroll down to Experimental Web Platform features and select enable.

Experimental Feature Display

So that the features can take hold, the browser prompts you to restart the Chrome browser.

Relaunch Chrome Browser

To make sure you have browser displaying CSS grids, check out Rachel Andrew’s Grid By Example lab making sure to check out each of her layout examples.

Learn More about CSS Grid

Rachel’s has done a lot of speaking and writing about new layout technologies. She even has a great online master class about layouts.

To hear Rachel Andrew’s thoughts on new layout technologies, listen to her interview on the next Non Breaking Space Show episode! Sign up for the The Non Breaking Space’s newsletter or subscribe via iTunes.


Also published on Medium.

About Christopher Schmitt

The Internet's Christopher Schmitt is an award winning designer, author, and speaker and one of the people behind the web conference team, Environments for Humans. He hosts the Non Breaking Space Show and curates the weekly UX Design Newsletter.

Leave a Reply

Your email address will not be published. Required fields are marked *