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

254
14 июня 2017, 03:56

Заметила, что верстка 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 для такого?

Answer 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");
        // ...
    }
}
Answer 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 = <<<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;
}
READ ALSO
Не видна карта google при открытии первоначально скрытого блока

Не видна карта google при открытии первоначально скрытого блока

Добрый день! В моём приложении несколько страниц (через блок div), Одна из страниц содержит карту google (js api, ключ есть)По логике работы приложения...

256
Перемещение элемента jQuery

Перемещение элемента jQuery

У меня есть такая разметка нескольких блоков с классом input-box:

260