Noticed that the layout of stackoverflow made using flex 's

An example of a menu in the header:

 .so-header .-main { height: 100%; width: 100%; display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-align-items: center; align-items: center; }

enter image description here

And in ie9 (and as I understand it in other older versions of browsers) flex is replaced with inline-block , and the styles are inline, apparently js-ohm.

An example of the same menu in the header, but for ie 9:

enter image description here

I do not see modernizer to be used.

Question: How can you do this with js (ask which browsers to set which styles), because css is almost always used for this?

    3 answers 3

    Picking the source suggests that in this case, everything is pretty primitive and crutch

     // https://cdn.sstatic.net/Js/full.ru.js?v=b200a9ef1cb2, line 2 lol "init": function() { // ... if (StackExchange.options.user.canSeeNewHeaderDesign) { var e = document.body.style; "justifyContent" in e || "WebkitJustifyContent" in e || $(".so-header *:visible").css({ "display": "inline-block", "white-space": "nowrap", "vertical-align": "middle" }).not(".-logo, .-logo *, svg, .-badges *").css("width", "auto"); // ... } }
    • uh, I did not understand. What can you do this function can you describe? @andreymal - Excess Suslikov
    • one
      @ Excessive ghosts turn off flexbox styles if the browser does not have flexbox support ( justify-content is one of the flexbox css, this code checks its presence with in e ) - andreymal
    • thank @andreymal - Surplus of Gophers

    This can be implemented not only with js , for example, yandex has a service ( http://phd.yandex.net/detect ) to find out through it which browser and what type of device is used, and after that you can immediately connect other styles and scripts and templates.

    Here is an example of the code in which I made a check on mobile devices, but you can do the same check on the devices you want.

     $_SESSION['is_mobile'] = false; $query = http_build_query( array( 'user-agent' => $_SERVER['HTTP_USER_AGENT'], ) ); // TODO chenge sesion to config $ctx = stream_context_create(array('http' => array( 'timeout' => 1 // 30 sec ) )); $res = file_get_contents('http://phd.yandex.net/detect' . '?' . $query, null, $ctx); $s = $res; $s = <<<END <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> {$s} </root> END; //уберите пробелы с начало этой строки кода скопируете код у вас $xml = simplexml_load_string($s); $error = $xml->{'yandex-mobile-info-error'}; //если тип устройства определить не удалось - возвращаем пусткю строку $is_ipad = $_SERVER['HTTP_USER_AGENT']; $is_ipad = explode('iPad', $is_ipad); $_SESSION['mobile'] = false; if ($res && $error != 'Unknown user agent and wap profile' || count($is_ipad) == 2) { $_SESSION['mobile'] = true; } else { $_SESSION['mobile'] = false; $_SESSION['is_mobile'] = false; }

      It seems like the answer is given, but I will show one more way without JS. So, Flexbox has been running since IE 10, conditional comments work up to and including IE9. After the main style file, connect the styles with a float and / or inline-block :
      <!--[if lte IE 9]><link rel="stylesheet" href="/css/ie.css"><![endif]-->