Обнаружение единиц области просмотра (с помощью modernizr или обычного js) и обслуживание соответствующей таблицы стилей

У меня действительно есть проблема, которую я пытаюсь решить уже 3 недели. Я пытаюсь протестировать поддержку модулей vw и обслуживать отдельную таблицу стилей, когда браузер не поддерживает модуль. Я читал учебные пособия по modernizr и знаком с обнаружениями modernizr css, но тестирование модулей vh (относительные единицы просмотра) - это то, что я не нашел в сети .

Итак, в основном:

Сценарий 1. Браузер поддерживает модуль vw, а затем обслуживает таблицу стилей A.

Сценарий 2: браузер не поддерживает его, а затем обслуживает таблицу стилей B.

Я обнаружил, что существует неосновное обнаружение под названием Modernizr.cssvwunit, но я, честно говоря, не знаю, с чего начать и как использовать в этом контексте.

Было бы здорово, если бы вы помогли мне расширить мои знания. Также, если это не слишком утомительно, будет очень полезен jsfiddle с примером, который я мог бы изучить.

Искренне,

Маркус

Изменить: почему он запускает только оператор else? http://jsfiddle.net/5saCL/10

<script>
  if (Modernizr.cssvwunit) {
    alert("This browser supports VW Units!");
  } else {
    alert("This browser does not support VW Units!");
  }
</script>

javascript css viewport-units modernizr browser-feature-detection
person Community    schedule 08.06.2014    source источник
comment
Хороший вопрос ... Мне самому это интересно   -  person Demorus    schedule 08.06.2014
comment
Большинство браузеров поддерживают модули v * (caniuse.com/#search=vw), а также медиа-запросы css3 (caniuse.com/#search=media)   -  person    schedule 08.06.2014
comment
@jeff Действительно, но он пытается обнаружить это и использовать другую таблицу стилей для любых целей. В моем случае я пытаюсь добиться того же, потому что у меня есть очень конкретные причины для использования Firefox 18 и ниже.   -  person Demorus    schedule 08.06.2014
comment
Google определит, поддерживает ли браузер vmin units polyfill, и у вас будет из чего выбрать.   -  person    schedule 08.06.2014
comment
@jeff на самом деле я не хочу использовать полифиллы, а просто использую другую таблицу стилей. Я сделал jsfiddle из того, что уже пробовал jsfiddle.net/5saCL   -  person    schedule 08.06.2014
comment
Это всегда срабатывает false, потому что вы используете сборку Modernizr без обнаружения vwunit. Вам необходимо скачать кастомную сборку и выбрать «Неосновные обнаружения».   -  person Shaun    schedule 26.01.2015

Ответы (2)


arrow_upward
5
arrow_downward

Если вы посмотрите это руководство, http://www.developphp.com/view.php?tid=1253 вы узнаете, как изменить стиль CSS с помощью JavasSript.

Вам просто нужно немного отредактировать скрипт, чтобы он соответствовал вашим требованиям:

<!DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
  if (Modernizr.cssvwunit) {
    document.getElementById('pagestyle').setAttribute('href', "styleVW.css");
  } else {
    document.getElementById('pagestyle').setAttribute('href', "style.css");
  }
</script>
</head>
<body>
<h2>Javascript Change StyleSheet Without Page Reload</h2>
<!-- no buttons needed -->
</body>
</html>

Это должно сработать.

person Cockootec    schedule 08.06.2014

arrow_upward
1
arrow_downward

Вы уверены, что хотите загрузить две разные таблицы стилей?

Другой вариант - установить флажок «Добавить классы CSS» в Modernizr. Таким образом классы добавляются к элементу html.

<html class="no-cssvhunit">

Затем сделайте это в своем CSS:

.fullscreen {
    height: 100vh;
}

.no-cssvhunit .fullscreen {
    height: 100%;
}
person cuth    schedule 05.02.2015