Обнаружение браузера, делай и не делай.Это нормально? - PullRequest
Новая
       15

Обнаружение браузера, делай и не делай.Это нормально?

1 голос
/ 25 декабря 2010

Итак, я понимаю, что обнаружение браузера (т. Е. navigator.userAgent) не должно использоваться для решения, какой метод / свойство объекта использовать; Тем не менее, я хочу установить несколько простых CSS с JavaScript в зависимости от браузера. Однако этого недостаточно для обоснования совершенно новой таблицы стилей. Так что, если я использую Обозреватель браузеров, чтобы решить, какой CSS применить к элементу, все в порядке?

EDIT

Хорошо, давайте будем СПЕЦИАЛЬНЫМИ. Я говорю о text-shadow внутри кнопки (<input type="button"/>). Текст внутри кнопки не центрируется по вертикали во всех браузерах, поэтому я настраиваю его с помощью JS в зависимости от браузера.

Ответы [ 8 ]

2 голосов
/ 25 декабря 2010

Что делать и чего не делать абсолютно хорошо! ... обнаружение браузера, с другой стороны, кажется, заменено «обнаружением объекта»:

  1. SitePoint рассматривает использование перехвата браузера: http://blogs.sitepoint.com/2009/05/31/why-browser-sniffing-stinks/
  2. Собственное расследование Stackoverflow: Почему перехват браузера не рекомендуется?
1 голос
/ 25 декабря 2010

Решение для тени текста довольно простое, поскольку оно стандартное.Вы делаете тестовый DIV и проверяете, что стиль не является неопределенным: 

if(div.style.textShadow !== undefined){ return true; }else{ return false; }

Обратите внимание, что не нужно, и вы не должны устанавливать стиль .IE будет извергать стиль, как если бы вы установили любое другое свойство объекта.Приведенный выше код будет неопределенным в IE, а все остальные будут ... ну, что-то, кроме undefined.

С другими стилями CSS3 становится сложнее, потому что вам необходимо учитывать все префиксы браузера: 

if(
    div.style.MozBoxShadow !== undefined ||
    div.style.WebkitBoxShadow !== undefined ||
    div.style.OBoxShadow !== undefined ||
    div.style.KhtmlBoxShadow !== undefined ||
    div.style.msBoxShadow !== undefined ||
    div.style.boxShadow !== undefined // don't forget this one!
){return true}
1 голос
/ 25 декабря 2010

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

1 голос
/ 25 декабря 2010

Похоже, вы хотите обходной путь IE CSS без указания новой таблицы стилей. Это можно сделать с помощью условных комментариев, например, для таргетинга IE6: 

<!--[if lt IE 7]><body class="browser-ie6"><![endif]-->
<!--[if gte IE 7]><!--><body class="browser-ok"><!--<![endif]-->

тогда вы можете использовать правило CSS, например: 

body.browser-ok .troublesome_thing { troublesome-style: something; }

в вашей основной таблице стилей.

Почти никогда нет веской причины смотреть на navigator.userAgent, что хлопотно и ненадежно даже по стандартам браузера.

* 1011 ETA *:

Я добавляю текстовую тень внутри кнопки.

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

Если вы хотите предоставить стиль резервного копирования для браузеров, которые его не поддерживают, вы можете использовать альтернативные правила: 

button { text-shadow: 2px 2px 2px white; }
body.support-noshadow button { background: white; }

с некоторыми JS для выявления случая: 

if (!('textShadow' in document.body.style))
    document.body.className+= ' support-noshadow';
0 голосов
/ 25 декабря 2010

Возможно, вы захотите взглянуть на Modernizr (или, по крайней мере, на тест для текста-тени). Это библиотека JavaScript, которая выполняет эту функцию для вас, позволяя вам ориентироваться как на ваш CSS, так и на ваш JS на основе результатов.

0 голосов
/ 25 декабря 2010

То, как вы сформулировали вопрос, ответ - да, используйте обнаружение браузера, чтобы установить простые CSS с JavaScript в зависимости от браузера. Но я не думаю, что это то, что вы действительно хотите спросить.

Более прогрессивный подход заключается в использовании функции обнаружения, а не в браузере, т. Е. "Поддерживает ли браузер x?" - если это так, то сделай это, иначе сделай что-нибудь еще.

Иногда, однако, это не всегда так просто сделать, так как может быть не так просто написать код, позволяющий проверить функциональность. Я бы сказал, что в этих случаях прагматичный подход может заключаться в том, чтобы браузер обнаруживал как можно более конкретно, с целью обнаружения функции в будущем, когда существуют известные / надежные способы проверки функции.

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

0 голосов
/ 25 декабря 2010

Обычно причина, по которой вы хотите изменить CSS для браузера, - это IE. Для этого вы должны использовать поддержку IE * условных комментариев , чтобы включить либо таблицу стилей, либо встроенные стили только для IE. Например: 

<link rel="stylesheet" type="text/css" href="common.css" />
<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Только IE6 и более ранние версии будут включать в себя вторую таблицу стилей, в которой вы можете переопределить более ранние стили или исправить проблемы. JavaScript не требуется.

0 голосов
/ 25 декабря 2010

Конечно, определение браузером было бы хорошим способом выбора вашего стиля CSS(По вашему вопросу).

...