Предупредите пользователей о старых браузерах, которые не поддерживают новые стандарты CSS3

Я пытаюсь перенаправить старые браузеры, которые не поддерживают CSS3 или iFrames, на страницу с предупреждением, где я объясняю, что у них могут возникнуть проблемы с их старыми браузерами, если они продолжат работу.

Сценарий (или иным образом) должен проверять сопоставимость css3, а не идентификатор браузера.

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

Сейчас я использую: <!--[if lt IE 9]><div style=' clear: both; height: 200px; padding:0 0 0 15px; position: relative;'><a href="old"><img src="old-browser.jpg" border="0" height="153" width="659" alt="" /></a></div><![endif]-->

Есть ли у кого-нибудь опыт с этим или ссылка на пример? Спасибо.


person daba    schedule 03.01.2012    source источник
comment
все последние браузеры поддерживают css3 и html5, в любом случае вы можете сделать это, зная браузер пользователя и его версию. погугли это   -  person diEcho    schedule 03.01.2012
comment
Я погуглил и нашел только полуполные решения с 2003 по 2006 год! Проблема не в последнем браузере, а в том, что обезьяны бегают с IE6,7, Firefox 1,2, Safari 1,2,3 и т. д.   -  person daba    schedule 03.01.2012
comment
@diEcho css3 и html5 еще не полностью определены - ни один браузер не может их полностью поддерживать. Я бы предположил, что когда даба говорит о поддержке css3, он имеет в виду тестирование определенных функций.   -  person    schedule 04.01.2012
comment
Да, лучше бы этот комментарий удалили ;)   -  person    schedule 04.01.2012


Ответы (3)


Тестирование версии браузера является ненадежным методом — многие пользователи не предоставляют эту информацию, а другие говорят вам, что они используют другой браузер, чем на самом деле. Если вам нужны определенные функции, то единственный надежный способ определить, доступны ли они, — это использовать javascript, чтобы увидеть, существуют ли они.

Вы полны решимости перенаправить, а не просто изменить то, что отображается? Потому что изменить содержимое текущей страницы было бы намного проще. Просто добавьте что-то вроде этого на свою страницу:

<div id='warning'>Your browser sucks!</div>

CSS:

#warning {
  /* make this DIV very visible - you could even cover the rest
     of the page if your website is useless without javascript. */
}

Теперь страница будет загружаться с отображением #warning, и вы можете использовать javascript, чтобы скрыть его, если присутствуют необходимые функции (вы не хотите делать обратное и использовать javascript для его отображения, потому что вы хотите, чтобы он отображался, если ваш скрипт не работает). т бег). Есть много способов сделать это, и самым «стандартным» способом было бы прикрепить событие загрузки. Тем не менее, это одна из ситуаций, когда я думаю, что хакерский подход намного лучше. Если вы выполняете тест под нагрузкой, то предупреждение будет отображаться до тех пор, пока не выполнится javascript, что может занять от доли секунды до нескольких секунд. Что вы действительно хотите сделать, так это скрыть элемент до того, как он когда-либо отобразится, и вы можете сделать это, добавив что-то подобное в раздел <head>.

if((function() {
  var t,u,i,j,
    css='textShadow,textStroke,boxShadow,borderRadius,borderImage,opacity'.split(','),
    prefixes=',webkit,moz,o,ms,khtml'.split(','),
    nPrefixes=prefixes.length,
    el=document.createElement('i').style;
  styles:for(i=0;t=css[i];i++) {
    t=t.charAt(0).toUpperCase()+t.substr(1);
    for(j=0;j<nPrefixes;j++) {
      u=prefixes[j]+t;
      if(el[u.charAt(0).toLowerCase()+u.substr(1)]!==undefined)
        continue styles;
    }
    return false;
  }
  return true;
})())
  document.write("<style type='text/css'>#warning {display:none;}</style>");

В соответствии с вашим примером предполагается, что вам нужны функции textShadow, textStroke, boxShadow, borderRadius, borderImage и opacity.

Вы действительно не должны помещать какой-либо другой javascript в <head>, поскольку страница не начнет рендеринг до тех пор, пока код над ней не завершит выполнение.

person Community    schedule 03.01.2012
comment
Я думаю, лучше поместить это в тег noscript, чем использовать JavaScript, чтобы скрыть это. . Также подумайте о том, чтобы не скрывать всю страницу, а просто разместить уведомление где-нибудь на видном месте, как это делает SO. Неспособность видеть содержимое сайта из-за этого будет раздражать. даже если сайт может быть сломан. Я убежден, что любой, кто просматривает без javascript, делает это намеренно или вынужден делать это. Тем, кто пользуется старыми браузерами по другим причинам, все равно ничем не поможешь. - person kapex; 04.01.2012
comment
Есть две проблемы с noscript, главная из которых заключается в том, что OP не просто хочет проверить поддержку javascript, но и поддержку конкретных функций. Кроме того, известно, что тег снижает доверие поисковых систем к вашему сайту (таким образом, ваш рейтинг ниже). Но вы правы в том, что не освещаете всю страницу — я не должен был предполагать, что его сайт будет бесполезен без функций, которые он тестирует. Ответ отредактирован. - person ; 04.01.2012
comment
Да, отображение только баннера вверху — это нормально. Итак, вы говорите, что я должен добавить такой код: jsfiddle.net /h43Uj и код прежде всего в заголовок моей страницы? Не вызовет ли это значительных задержек рендеринга? Извините, но я полный нуб в JS. - person daba; 04.01.2012
comment
Да, просто измените свой код, чтобы он возвращал true или false вместо того, чтобы печатать результаты. И да, это задержит рендеринг страницы, но нет другого способа (насколько я знаю), чтобы убедиться, что окно предупреждения никогда не мигает, прежде чем оно будет скрыто. И если ваш код не является ужасно неэффективным (не выглядит таковым), а остальная часть вашего javascript запускается после рендеринга страницы, то задержка будет слишком короткой, чтобы ее заметить. - person ; 04.01.2012
comment
ха-ха, нет, это просто код, который я получил откуда-то еще, когда я говорю нуб, я имею в виду, что я никогда ничего не кодировал в JS... :( Спасибо за предложения, однако! - person daba; 04.01.2012
comment
Вы правы, проверка фич лучше, чем просто проверка JS. Но все же: показ его по умолчанию приводит к уродливому миганию при загрузке страницы. Я бы использовал тег noscript и дополнительно показывал сообщение (используя JS), только если JS включен, но функции недоступны. - person kapex; 04.01.2012
comment
@kapep Это лучший подход, но он все еще не касается SEO. А что касается вспышки, я прекрасно о ней знаю, и поэтому мой ответ несколько запутан: она полностью избегает вспышки. Я немного горжусь этим, так как я это придумал :) (хотя я уверен, что кто-то еще тоже) - person ; 04.01.2012
comment
@daba хорошо, тогда я могу сказать, что считаю этот код уродливым :p. Я изменю его для вас, дайте мне минуту. - person ; 04.01.2012
comment
В настоящее время я использую: <!--[if lt IE 9]><div style=' clear: both; height: 200px; padding:0 0 0 15px; position: relative;'><a href="old"><img src="old-browser.jpg" border="0" height="153" width="659" alt="" /></a></div><![endif]--> и пытаюсь переключить это, чтобы все браузеры, не поддерживающие css3, видели это сообщение. - person daba; 04.01.2012
comment
Хорошо, не знал, что он даже выполняется до рендеринга. Я просто не сторонник отключения частей страницы с помощью JS. Даже без noscript вы можете установить display:none; по умолчанию и показать его с помощью JS. Однако, если мигания действительно нет, включение не даст большого преимущества перед его отключением, за исключением, возможно, избегания головного скрипта (и, конечно, он будет виден браузерам без js и ботов). - person kapex; 04.01.2012
comment
@kapep Я думаю, вы правы, иметь сценарии в голове обычно плохая идея, но в этом случае я не знаю лучшего решения. Кроме того, если вы покажете его с помощью js вместо его отключения, он не будет отображаться, когда пользователь вообще не поддерживает js. - person ; 04.01.2012
comment
@daba хорошо, ответ обновлен. Поэтому просто поместите все в последний блок кода в скрипте в заголовке каждого документа, для которого вы хотите отобразить предупреждение, и дайте вашему текущему блоку предупреждения идентификатор предупреждения. Вы можете избавиться от условных комментариев, так как они не могут быть расширены в соответствии с вашими целями, а вместе со сценарием они избыточны. - person ; 04.01.2012
comment
Я нашел это: jsfiddle.net/29Xzx/1, но display:none; по-прежнему не будет отображаться для поисковых роботов? - person daba; 04.01.2012
comment
Будет div, а span - нет. Но это решение является большим шагом назад по сравнению с тем, что я только что написал в своем посте. Разве то, что я написал, не то, что вы ищете? - person ; 04.01.2012
comment
@skier88 skier88 Я пробовал, и кажется, скрыть предупреждающий div в ie6 и т. Д. См. пример здесь: dariobauer.com/browser-test.html - person daba; 04.01.2012
comment
О, лол, я не знаю, почему я это сделал. Просто удалите ! в операторе if в конце. (ответ обновлен) - person ; 04.01.2012
comment
Да, работает сейчас. IE9 и FF9 не совместимы со всеми функциями CSS3 в тесте (textStroke и borderImage), поэтому я удалил эти два теста. Еще раз спасибо! :) - person daba; 04.01.2012
comment
Нет проблем :) Если на ваш вопрос ответили, вы можете принять ответ, чтобы решить его. - person ; 04.01.2012

Возьмите Modernizr и создайте версию со всеми необходимыми функциями. Откройте файл modernizr и добавьте что-то вроде этого

if(Modernizr.borderradius && Modernizr.cssgradients && Modernizr.textshadow) { var valid = true; var
expires = new Date(); expires.setDate(expires.getDate() + 31); document.cookie = 'browser=modern;
expires='+expires.toUTCString()+'; path=/'; } else { var valid = false; }

Замените функции для тестирования (например, Modernizr.borderradius), которые я указываю в примере, своими собственными, используя документацию modernizr. Я добавляю файл cookie пользователю, если его браузеры совместимы, поэтому я могу отфильтровать отображение кода с помощью php.

Затем добавьте этот div и javascript вверху, прямо под тегом body. Javascipt использует jquery, чтобы скрыть элемент, но вы можете использовать другие примеры, показанные здесь, чтобы сделать это только с помощью javascript.

<div id="warning_block">
Warning! You are viewing this page in a non compatible browser.
</div>
<script type="text/javascript">
if (valid == false) { $("#warning_block").show(); }
</script>

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

#warning_block {
display: none;
width: 80%;
border: 1px solid #000;
background: #F00;
color: #FFF;
font-family: arial;
text-align: center;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
person Ayub    schedule 04.01.2012

шаг 1 - определите версию вашего браузера с помощью javascript или путем анализа заголовка запроса в коде на стороне сервера.

шаг 2 - если версия не поддерживается, перенаправить на страницу с предупреждением.

(но CSS3 и HTML 5 широко не поддерживаются).

person Acn    schedule 03.01.2012
comment
частично то, что я хочу сделать, но это ничего не отвечает. - person daba; 04.01.2012