Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid

Earlier this year, the major desktop browsers all supported CSS Grid layouts. So Grid layout is a hot topic these days. After hearing a lot about the Grid and incremental enhancement, I think there are still some uncertainties in using it at this stage, and I’ll answer some of the interesting questions I’ve heard in this article.

### Some of the opinions and questions I’ve heard over the past few weeks

  • When can I use grid layout?
  • It would be years before a grid layout could be used in a production environment
  • Do I need Modernizr library to support grid layout in my browser?
  • I had to write two or three different versions of grid layout if I wanted to use it on my website
  • Progressive enhancement sounds good in theory, but I don’t think it works in real projects
  • What is the cost of progressive enhancement?

These are some great questions and not easy to answer, but I’m happy to share my own thoughts. CSS Grid layouts are the most exciting CSS feature after adaptive layouts. If the GIRD layout works for us and our projects we should do our best to understand it.

Before I get to the above questions and statements, I’m going to show you some small demos THAT I made. Disclaimer: It is best opened on a computer or a large screen, and this example makes no sense on a mobile phone

When you open the demo you will find that the site is under a basic layout. You can adjust the slider in the upper left corner of the page to enhance the experience of the page. The page will go from the basic layout to float to Flex and then to grid layout. This is not a very beautiful or complex design, but it is an example of how the shape of the site can be customized according to the capabilities of the browser. This demo page does not use any proprietary prefixes or putty scripts. It can be accessed by IE8+, Opera Mini in Extreme mode, UC browsers, and of course modern browsers. Now you can use Grid layout on your website. As long as you don’t require the page to render exactly the same in every browser, you can’t do that today anyway. I know it’s not up to us developers to use the Grid layout or not, but I believe that if our customers understand (future-oriented design, better accessibility and performance) they will be more than happy to accept differences in performance across browsers. That’s why I think our clients and users understand that the site looks different on different browsers and devices (thanks to adaptive layout)

Note: I had to add some JS and CSS to support IE8, which I couldn’t refuse because IE8+ sounds more impressive than IE9+

Let’s take a closer look at how I build a “level 4 enhancement” component on a page

HTML I started putting all the items into a

in logical order. The first part of the

is the header, followed by four sections. Assuming they represent a single blog post, I wrap them in an

tag, with each

composed of an H3 tag and an image link. Here I tried the tag because I wanted users with a wide enough viewport to provide different images, and here we have the first basic example of progressive enhancement. If the browser does not recognize the andtags, the browser will still recognize the IMG tag inside the picture tag.
 
<section>
  <h2>Four levels of enhancement</h2>
  <article><h3>No Positioning</h3><a href="#">  <picture>    <source srcset="320_480.jpg" media="(min-width: 600px)">! [](480_320.jpg)</picture></a>
  </article>
</section>
Copy the code

FLOAT ENHANCEMENTS 

article {
  float: left;
  width: 24.25%;
}

article:not(:last-child) {
  margin-right: 1%;
}

section:after {
  clear: both;
  content: "";
  display: table;
}
Copy the code

**Flexbox Enhancements **

In this example, I actually don’t need to enhance the general layout of the component with flexbox, because floating already does what I need. In the design, the headings are below the images, which is something that’s achievable with flexbox.

In this case, I didn’t really need flex layout progressive enhancement, because the floating layout did exactly what I wanted. In the design, the heading is below the image, which is what the Flex layout can do.

article {
  display: flex;
  flex-direction: column;
}

h3 {
  order: 1;
}
Copy the code

We have to be very careful when reordering elements in flex layout because we should only use it for visual changes and make sure that reordering does not affect keyboard usage and screen reader users. Grid Enhancements

section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}
Copy the code

Since all articles are 24.25% wide, I reset this property to make the browser understand the grid.

@supports(display: grid) { article {width: auto; }}Copy the code

Next, I put the title in the second column of the first row.

h2 {
  grid-row: 1;
  grid-column: 2;
}
Copy the code

To avoid automatic alignment of the grid, I also put the second article explicitly on the second row and second column (under the heading).

article:nth-of-type(2) {
  grid-column: 2;
  grid-row: 2 / span 2;
}
Copy the code

Finally, in order to remove the gap between the title and the second item, all other items must span two lines.

article {
  grid-row: span 2;
}
Copy the code

You can see this example on Codepen. I extracted extra code to make it work in IE9+, and we ended up with eight lines of code (three of which were for Clearfix and reuse). Compare the cost of using browser prefixes.

article {
  float: left;
  width: 24.25%;
}

@supports(display: grid) {
  article {width: auto;
  }
}

section:after {
  clear: both;
  content: "";
  display: table;
}
Copy the code

I know this is a simple example rather than a complete project, and we know that a website has a much more complex composition than this example. But how long will it take to build a layout that looks pixel-perfect in all browsers? You don’t have to rewrite everything. In the previous example, we just reset the width property. One important thing about grids (and Flexbox, by the way) is that if certain properties are applied to flex or Grid projects, they lose their original function. For example, float will have no effect if the applied element is inside the grid container. The same is true for some of the other attributes.

display: inline-block
display: table-cell
vertical-align
column-* properties
Copy the code

Measure the cost of incremental enhancement

Some things will be done by the browser and the rest will be done by us. In preparing the demo, I realized that it would be very helpful to really understand CSS, rather than just throwing properties in the browser and hoping for the best. The more you understand how floats, Flexbox, and grids work, and the more you know about browsers, the easier it will be to design progressively enhanced web sites.

Becoming someone who understands CSS, rather than someone who just uses CSS, will give you a huge advantage in your work. Rachel Andrew

Also, if incremental enhancement is deeply integrated into how you make your site, it’s hard to say how much extra cost there is, because that’s fine, that’s how you make your site. AaronGustafson shares a few stories about some of The projects he’s done on “The True Cost of Progressive Enhancement” and The “Relative Paths podcast” podcast. I strongly encourage you to listen and read his story. Flexible web development

Your website’s only as strong as the challenging device you’ve tested it on. Ethan Marcotte But it saves time and money in the long run. We don’t know which devices, operating systems or browsers users will use to access our site next. If we provide accessible and usable experiences for less capable browsers, we are building resilient products and preparing for new and unexpected developments.

Summary I have a feeling that some of us have forgotten what our job is and may even forget that what we actually do is “just” a job. We’re not rock stars, ninjas, artisans or gurus, and ultimately what we do is put content online and make it as easy as possible for people to consume it.

Content is the reason we create websites. Aaron Gustafson

It sounds boring, I know, but it doesn’t have to be. We can use the hottest cutting-edge technology and fancy technology, as long as we don’t forget who we’re making the site for: the user. Our users are not the same and do not use the same devices, operating systems, browsers, Internet providers or input devices. By providing the basic experience to start with, we can get the best out of modern networks without compromising accessibility.

For example, grid is available in almost every major browser, and we shouldn’t wait any longer until 100% coverage is reached before we can use it in production, because it will never exist. That’s not how the web works.

Refer to the link

  • Crippling the Web, “Tim Kadlec
  • “Browser Support for Evergreen Websites,” Rachel Andrew
  • The Experimental Layout Lab of Jen Simmons (demos), Jen Simmons
  • “World Wide Web, Not Wealthy Western Web, Part 1, Bruce Lawson
  • Resilience (Video), Jeremy Keith, View Source Conference 2016