HTML5 and CSS3, Second Edition

(singke) #1
Even cooler is the fact that we can reorder the elements in the document.
The main region was defined in the document first, but we can use the order
property to rearrange elements on the page, so our output ends up looking
like the following figure.

Figure 38—Our sidebar and main region sit where we defined them.


Take a second and think about what that means for responsive web design:
you could use this with media queries to easily reorder elements on the page,
making the user experience better on phones, with much less developer effort!

Unfortunately, support for this new model is uneven. Internet Explorer 10
and Safari support an old version of the specification, as does iOS. You could
use Modernizr to conditionally load style sheets, or you could use Flexie to
force the Flexible Box model to work for your site.^3 This might sound strange,
but a fair number of sites are using this fallback solution today. You should
evaluate this on your own and decide if it’s right for your project. It certainly
is more attractive than monkeying around with floats and clears.

11.2 Cross-Origin Resource Sharing


The same-origin policy is a security measure that makes it nearly impossible for
a page hosted on one domain to make Ajax requests to a page hosted on another.
We’ve found all sorts of ways around the limitations, but cross-origin resource
sharing, or CORS, is the standard way of making requests across servers. Best
of all, almost every browser supports this, including Internet Explorer 10.

However, to pull it off, the domain you’re trying to access has to be configured
to accept CORS requests, and you have to configure your code to send those
requests. Specifically, the server needs to respond with the following header:

Access-Control-Allow-Origin:*


  1. http://flexiejs.com/


Chapter 11. Where to Go Next • 242


Download from Wow! eBook <www.wowebook.com> report erratum • discuss

Free download pdf