Если браузер, использовать Javascript?

Question

У меня есть скрипт, который определяет, какой браузер (и версию) кто-то использует, и я хотел бы настроить его так, чтобы для определенных браузеров div-класс получал анимацию при наведении курсора. Я хотел бы сделать это с помощью jQuery, но я открыт для всего.

Моя идея для JavaScript заключается в следующем ...

if (browser == IE || browser < Firefox 4) {
      // somehow animate a div class on hover (could be id-based too)
    } else {
      // do nothing
    }

CSS, который я настроил для этого, выглядит примерно так

.item {
  height: 100px;
  width: 100px;
  /* css3 */
  transition: height .5s, width .5s;
  -moz-transition: height .5s, width .5s;
  -webkit-transition: height .5s, width .5s;
}

.item:hover {
  height: 200px;
  width: 200px;
}

И тогда HTML-код (очевидно)

<div class="item" id="item">
  <p>Content here</p>
</div><!-- end item -->

Целью является исправление CSS3 для старых браузеров. Переходы, на мой взгляд, одна из лучших вещей в CSS3, и меня чертовски раздражает, что IE9 не включает их поддержку.

Answer 1

Вместо этого, как насчет использования чего-то вроде библиотеки Modernizr?

http://www.modernizr.com/

Modernizr добавляет классы к элементу, которые позволяют вам настраивать определенные функции браузера в вашемтаблицы стилей.На самом деле вам не нужно писать какой-либо Javascript для его использования.

Затем вы можете делать такие вещи:

.multiplebgs div p {
  /* properties for browsers that
     support multiple backgrounds */
}
.no-multiplebgs div p {
  /* optional fallback properties
     for browsers that don't */
}

Answer 2

Используйте $.support, чтобы проверить, поддерживает ли его браузер, и даже не связываться с определением версии. Это помогает в будущем проверять ваш код и более точно моделировать то, что вы действительно хотите делать.

На самом деле, уже есть плагин jQuery для этого специально. : D

Answer 3

Вы идете по очень опасному пути, используя нюх браузера.

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

Answer 4

Вы можете использовать библиотеку Modernizer (http://www.modernizr.com)), которая обнаруживает и исправляет поддержку различных функций HTML 5 и CSS3 в разных браузерах.

Вот что они имеют в своей документации о переходах CSS3:
http://www.modernizr.com/docs/#csstransitions

CSS-переходы невероятно полезная новая часть CSS3. Используя их, вы можете позволить браузеру анимировать или скорее переход - из одного состояния в другой. Вам нужно только указать начало и конец и браузер берет забота об отдыхе.

В Модернизре мы тестируем на CSS Переходы с использованием перехода свойство со всеми префиксами продавца.

Переходы обычно могут использоваться без использования специфического CSS Модернизра свойство класса или JavaScript, но для в тех случаях, когда вы хотите части вашего сайт, чтобы выглядеть и / или вести себя по-другому они доступны. Хороший пример использования дело в том, чтобы построить Modernizr в анимационный движок, который использует нативный CSS-переходы в браузерах, которые есть, и полагается на JavaScript для анимация в браузерах, которые этого не делают.

Пример использования:

a {
   color: #090;
   -webkit-transition: color .2s ease-out;
}
a:focus,
a:hover {
   color: #9f9;
}

Answer 5

Вы можете сделать что-то вроде этого:

<![if (IE 6)|(IE 7)|(IE 8)]-->
<link type="text/css" rel="stylesheet" href="nocss3.css" />
<script type="text/javascript" src="nocss3.js"></script>
<![endif]-->

Answer 6

Обнаружение браузера - не лучший способ написания JS-кода.

Если вы предпочитаете jQuery, то здесь jQuery.browser объект

Некоторые примеры:

 if ($.browser.webkit) {
    alert( "this is webkit!" );
  }

var ua = $.browser;
  if ( ua.mozilla && ua.version.slice(0,3) == "1.9" ) {
    alert( "Do stuff for firefox 3" );
  }

if ( $.browser.msie ) {
    $("#div ul li").css( "display","inline" );
 } else {
    $("#div ul li").css( "display","inline-table" );
 }

Answer 7

Вы можете заглянуть в этот урок https://developer.mozilla.org/en/Browser_Detection_and_Cross_Browser_Support