Reality Check: What Works Now CSS3

Unfortunately, most of the work we’ve done on this layout is just an illustration of what’s possible—not a demonstration of how you should actually use flexible box layout today. In IE, Opera, and other browsers that don’t support it, the layout looks like a broken mess (Figure below). This is not like using border-radius and having rounded corners not show up in IE; here, the CSS3 properties we’re using affect the layout of the whole page and are more than simple decorative effects.

The latest version of Modernizr can detect whether the browser supports the flexible box model, so we could use it to feed non-supporting browsers alternate layout styles using floats or other techniques. Of course, this would usually defeat the purpose of using the flexible box model to create the layout to begin with—if you have to spend the time creating a fallback float-based layout that will work everywhere, why take extra time to create a flexible-box-based layout too?

The layout is broken in browsers that don’t support flexible box layout, such as IE 8.

The layout is broken in browsers that don’t support flexible box layout, such as IE 8.

But don’t despair! There are some practical uses of flexible box layout today. In the previous section, we showed how it can be used to create full-page multi-column layouts because it illustrates most of the flexible box properties nicely, and because it demonstrates how we all
might be building layouts in the future. But there are ways you can use it in a more limited manner right now.

For instance, centering the horizontal nav bar was a cinch using the flexible box model, and it degrades well in non-supporting browsers.

Because we didn’t use flexible box layout to make the individual links line up horizontally, but just to center the ul as a whole, IE and Opera still see a horizontal list of links—it’s just left-aligned instead of centered. In many cases, this would be a perfectly acceptable fallback for non-supporting browsers, and it would keep you from having to resort to other, more complicated methods of horizontally centering a float-based nav bar.

In addition to centering a horizontal nav bar, let me show you a couple more examples of practical uses of flexible box layout.

Flexible Form Layout
One great way to use flexible box layout is to lay out and align form elements easily. As an example of this, open the exercise file form_start.html in a browser. This is the same page used, with all the floats restored, so that the layout works in all browsers.

In the media query for viewports of 550 pixels and narrower, the label, text field, and button of the email newsletter subscription form lay out in a single line . However, the form doesn’t stretch to fill up the entire width of the box it’s in. It would be nice if the text field adjusted in width to fill up the remaining space left over from the label and button. This is possible to do without flexible box layout, but it involves nesting a number of divs and using complicated absolute positioning rules.

The text field is a fixed width— it looks fine now, but doesn’t stretch to fill up the entire width available to it.

But using flexible box layout makes the text-field-stretching effect easy to accomplish. First, find the max-width: 550px media query near the bottom of the style element in the head of the page. Delete the following two rules within it:

We’re deleting these rules to start out with a blank slate, so you can see how the new flexible box layout rules affect the styling of the email newsletter form without anything else interfering.

Next, turn the form into a flexible box; this will make its children lay out horizontally by default. You also need to set its width to 100 percent to make it stretch to fill the whole block it’s in. Do this in a new rule for #form-newsletter inside the media query:

Next, add a small amount of margin in between each of the elements in the form:

So far, the form looks pretty much as it did before—like it does in Figure below—the text field is still not stretching to fill the available space. That’s because all the elements of the form are being sized intrinsically right now. That’s perfect for the label and the button—we want them both to be as wide as needed for their text and no wider— but we haven’t told the browser we want the text field to flex. Do that now by adding the following new rule within the media query:


Save the page and view it in Firefox, Safari, or Chrome. Narrow your window under 550 pixels to activate the media query, and then check out the newsletter subscription form. Narrow your window further and watch how the text field always fills the available space between the label text and the subscribe button . Even if this box were set to a fixed pixel size, if the user has a larger or smaller text size than the default, changing the overall size of the label and button, the text field will also adjust to whatever space is left.

The text field now stretches to fill the whole space between the label and button, no matter how wide or narrow the newsletter box is.

The text field now stretches to fill the whole space between the label and button, no matter how wide or narrow the newsletter box is.

This effect works great for search fields in headers. You can have label text, a text field, a submit button, and even a link to an advanced search, all lined up on one line, with the text field adjusting to whatever space is available. Form elements can also sometimes be hard to align as you would like, but box-align and box-pack can really simplify that task.

FALLBACK STYLES FOR NON-SUPPORTING BROWSERS
The subscription form now looks better in Firefox and Webkit-based browsers, but it looks a little worse in Opera and IE 9—browsers that do support media queries but don’t support flexible box layout. Each element in the form is on its own line .

In browsers that don’t support flexible box layout (like Opera 10.6, shown here), each element of the form is on its own line instead of sitting side by side.

In browsers that don’t support flexible box layout (like Opera 10.6, shown here), each element of the form is on its own line instead of sitting side by side

Even though we can’t feed these non-supporting browsers their own non-flexible-box styles, unseen by Firefox and Webkit, we can—in this case—provide fallback styles seen by all browsers that we then override for Firefox and Webkit without the non-supporting browsers knowing it.

To get the form elements back on one line in browsers that don’t support flexible box layout, add width: auto to the #form-newsletter input[type=text] rule, and

This restores the styles we previously had on these elements for all browsers, putting the form back on one line in Opera and IE 9. Yes, we could have left them there all along, but removing them and then dding them gives you a clearer view of the before and after.
The only problem with setting the form elements to display as inline elements instead of blocks is that this overrides the flexible box model, removing the flexibility of the text field. To get it back, keep display: inline in the #form-newsletter * rule, but add display:

box, plus the browser-specific equivalents, below it:

Setting display to box overrides the earlier inline value, restoring the flexible box model and the flexibility of the text field. Browsers that don’t understand the flexible box model won’t understand the box value for the display property, so they ignore the subsequent display declarations, and therefore stick with the first one, which sets the elements to inline.

With these styles, users of browsers that don’t support the flexible box model see the same layout for the subscription form as shown in Figure below while users of browsers that do support the flexible box model see an enhanced version of the form, as shown in Figure below. Although the scarcity of browser support may keep you from using the flexible box model to control the layout of your entire page, there’s no reason why you can’t use it right now in instances like this as a nice little progressive enhancement technique.

Sticky Footers
Another way you can use flexible layout right now without harming non-supporting browsers is to create a sticky footer effect. A sticky footer is the common name for having the footer of a page stick to the bottom of the viewport when the content isn’t long enough to push it down . This can be accomplished without CSS3, but once again, it’s more complicated.

In the left page, the footer appears at the bottom of the viewport. In the right page, the footer appears right after the content above it ends.

In the left page, the footer appears at the bottom of the viewport. In the right page, the footer appears right after the content above it ends

In the left page, the footer appears at the bottom of the viewport. In the right page, the footer appears right after the content above it ends

The key to creating a sticky footer using the flexible box model is to use box-flex to make the div before the footer flexible. This will make that div stretch to fill whatever space is left in the viewport after the height of the other divs has been accounted for. If there’s no extra space—in other words, if the page is already longer than the viewport the div before the footer will just be its normal height, and the footer will appear immediately after it, as usual.
To try this out yourself, open the file sticky-footer_start.html in your code editor. This is the same page from above, but we have added a div named content around the content-main and content-secondary divs. We have also removed a bunch of content to make the page very short so you can see that the footer currently displays immediately after the content div, with extra space in the viewport appearing under the footer .

The footer displays right after the content div, not at the bottom of the viewport.

The footer displays right after the content div, not at the bottom of the viewport.

Since we want the entire layout to be at least as tall as the viewport at all times, we need to first set the body and html elements to stretch to be as tall as the viewport, even if they don’t contain much content.

Create a rule for the html element, setting its height to 100 percent, and add height: 100% to the existing body rule as well:

Next, turn the wrapper div into a flexible box using the display property, and tell it to display its children vertically using the boxorient property. And set its minimum height to 100 percent, so that it will always be at least as tall as the viewport:


This makes the three children divs of the wrapper—named header, content, and footer—stack vertically. This is already their normal behavior, so adding these properties doesn’t change the appearance in any browsers, whether or not they support the flexible box model.

But we have to make the wrapper div into a flexible box in order to make any of its children flex.

The child div that we want to flex is the content divs, so add a new rule for it, setting box-flex to 1:

Now, after the intrinsic height of the header and footer have been accounted for, whatever extra height is left inside the wrapper div goes to the content div, so that the combined heights of the three divs always equals at least the height of the viewport. Thus, the footer sits at the bottom of the viewport instead of right underneath the content div .

Now the footer sits at the bottom of the viewport, with any extra space placed between it and the content div.

Now the footer sits at the bottom of the viewport, with any extra space placed between it and the content div.

Browsers that don’t support the flexible box model simply ignore this rule and see the page as it was before (and as almost all pages online behave): the footer appears right under the content div. Users of these browsers have no reason to know that they’re seeing something a little different than others. The sticky footer is just another decorative bonus for users of the most advanced browsers.

Flexible box model browser support

Flexible box model browser support

Flexible box model properties

Flexible box model properties

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

CSS3 Topics