Верстка stackoverflow, flex заменяется на inline-block

#javascript #html #css

Заметила, что верстка stackoverflow выполнена с помощью flex'ов

Пример меню в шапке:

.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;
}




А в ie9 (и я так понимаю в других более старых версиях браузеров) flex заменяется
на inline-block при чем стили встроенные, видимо js-ом. 

Пример того же меню в шапке, но для ie 9:



modernizer не вижу чтобы использовался.

Вопрос: Как можно такое реализовать с помощью js (задать для каких браузеров какие
стили задавать), потому как практически всегда используется css для такого?
    

Ответы

Ответ 1

Ковыряние в исходниках подсказывает, что в данном случае всё довольно примитивненько
и костыльненько

// 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");
        // ...
    }
}


Ответ 2

Такое можно реализовать не только с помощью js, например yandex имеет сервис (http://phd.yandex.net/detect)
что бы через него узнать какой браузер и вообще какой тип устройство используется,
и после этого можешь сразу подключить другие стили, скрипты и шаблоны.

Вот пример кода в котором я сделал проверку на мобильные устройства, но можно сделать
ту же самую проверку на те устройства которые вы хотите.

$_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 = <<

{$s}

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;
}


Ответ 3

Вроде как ответ дан, но покажу ещё один способ без JS. Итак, Flexbox работает начиная
с IE 10, условные комментарии работают до IE9 включительно. После основного файла стилей
подключаем стили c float и/или inline-block: