Layout with CSS3 - HTML5 and CSS3 - page 311

box-orient: vertical;
}
div div {
-moz-box-flex: 1;
-webkit-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
}
This code sets the parent <div> element to be a flexbox container and
gives any child <div> elements the same amount of flex in all browsers
that have support.
Media queries and old browsers
If a browser doesn't support media queries, then it won't apply any of
the rules listed in a media query section. Any rules outside of a media
query section will constitute the default state of your site, so you should
always consider the sorts of devices the majority of your users will be
browsing with. If your site is primarily for desktop users, then your
default styles should be aimed at a desktop-style layout—around 1000
pixels wide and (most likely) using an older version of IE . If your site is
more mobile focused, then it would be better to target a small screen by
default and add media queries to improve the experience in modern
desktop browsers.
Regions and exclusions
Although IE10 and Chrome both have some support for these modules,
there are several limitations. In IE10 the source content for flow-into
must be an iframe . In Chrome 17-20 you must explicitly enable support
for regions in the about:flags page. Neither browser has much support
for shaped exclusions, but IE10 does support rectangular exclusions.
Summary
In this chapter, you've learned about some of the murky past of CSS
layout and how the situation has improved thanks to the gradual
decline of old versions of IE , allowing the use of the full range of CSS2
layout tools. New features like box-model , calc , and media queries
already have wide support and promise to improve the situation even