Заметила, что верстка 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 для такого?
Ковыряние в исходниках подсказывает, что в данном случае всё довольно примитивненько и костыльненько
// 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");
// ...
}
}
Такое можно реализовать не только с помощью 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;
}
Виртуальный выделенный сервер (VDS) становится отличным выбором
Добрый день! В моём приложении несколько страниц (через блок div), Одна из страниц содержит карту google (js api, ключ есть)По логике работы приложения...