HTML and CSS Reference
In-Depth Information
Yo u c a n p u t y o u r c r o s s - b r o w s e r fl e x b o x i n t o a c t i o n u s i n g y o u r o l d f r i e n d M o d -
ernizr. Modernizr detects support for the new Flexbox syntax ( flexbox / no-flexbox )
and the old version ( flexbox-legacy / no-flexbox-legacy ).
Look at the code download file our-friends-flexbox-modernizr.html. This is
the same as the previous example you looked at except that Modernizr is included
on the page, and a whole raft of legacy Flexbox properties are applied to browsers
that only support the old syntax using Modernizr's descendant selector system. I
won't list all of the fallback code here, but you can find it under the “Modernizr
fallback rules” flag in the our-friends-flexbox-modernizr.html file.
These properties work fairly well and are fairly self-explanatory, although I
found that box-flex (the old syntax of flex ) seemed to work slightly oddly and
unreliably. Hopefully, browsers will support the new syntax soon so that this kind
of craziness will become a thing of the past!
TIP: To p r To v i d e b r To w s e r s t h a t d To n ' t e v e n s u p p To r t t h e To l d F l e x b ox
syntax with alternative layout rules, use .no-flexbox-legacy xxx { ... } .
Search WWH ::

Custom Search