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

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

ИЗМЕНИТЬ

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


javascript css browser-detection
person JCOC611    schedule 24.12.2010    source источник
comment
Уточните, почему вы хотите это сделать, так как лучшее решение может решить основную проблему.   -  person Josh Lee    schedule 25.12.2010
comment
зависит от браузера и свойств CSS, которые вы устанавливаете   -  person Šime Vidas    schedule 25.12.2010
comment
скажем, например, я устанавливаю отступ элемента, но в каждом другом браузере он будет выглядеть по-разному, если я установлю его одинаковым. Поэтому я должен установить его по-разному в каждом браузере.   -  person JCOC611    schedule 25.12.2010
comment
@JCOC Хм, это звучит как элемент кнопки. Что это за элемент? А также, о каких браузерах идет речь. Быть конкретными.   -  person Šime Vidas    schedule 25.12.2010
comment
Я говорю о <input type="button"/> и: IE 7+, Chrome, Firefox и Opera.   -  person JCOC611    schedule 25.12.2010
comment
Таблица стилей reset.css (например, Reset Reloaded Эрика Мейера, сброс YUI 2 и многие другие) может уменьшить влияние различий браузеров. путем явного удаления подавляющего большинства настроек браузера по умолчанию. Это не панацея от всех болезней, но она должна справляться с межбраузерными различиями в отображении элемента input; за исключением тех, которые стилизованы базовой ОС, и в этом случае ничего нельзя сделать, кроме использования какой-либо формы JS и скрытого поля или чего-то еще.   -  person David says reinstate Monica    schedule 25.12.2010

Ответы (8)


arrow_upward
2
arrow_downward

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

  1. Взгляд SitePoint на использование анализа браузера: http://blogs.sitepoint.com/2009/05/31/why-browser-sniffing-stinks/
  2. Собственное расследование Stackoverflow: Почему анализ браузера не рекомендуется?
person David says reinstate Monica    schedule 24.12.2010

arrow_upward
1
arrow_downward

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

person dthorpe    schedule 24.12.2010

arrow_upward
1
arrow_downward

Кажется, вам нужен обходной путь 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, что хлопотно и ненадежно даже по стандартам браузерного сниффинга.

Расчетное время прибытия:

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

Для этого вам не нужно нюхать браузер. Просто включите правило. Если это работает, то это работает, если нет, вы ничего не потеряли.

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

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';
person bobince    schedule 24.12.2010
comment
Я знаю, что IE обычно является единственным браузером с... эээ... проблемами... лол, но на этот раз я устанавливаю разные CSS для Firefox, IE, и Opera. - person JCOC611; 25.12.2010
comment
Действительно? С какой целью? Существенные, неизбежные CSS-ошибки Firefox/Opera довольно редки. Если вы делаете что-то другое для учета присутствия новых функций CSS3, вам следует указывать это при наличии или отсутствии свойства styleName в объекте style, а не при ужасном navigator.userAgent. - person bobince; 25.12.2010
comment
Я предполагаю, что это CSS3. Я добавляю text-shadow внутри кнопки. - person JCOC611; 25.12.2010

arrow_upward
1
arrow_downward

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

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

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

С другими стилями 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}
person mwilcox    schedule 25.12.2010

arrow_upward
0
arrow_downward

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

person WrightsCS    schedule 24.12.2010

arrow_upward
0
arrow_downward

Обычно причина, по которой вы хотите изменить 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 не требуется.

person Phrogz    schedule 24.12.2010
comment
У меня та же проблема, что и с ответом bobince. - person JCOC611; 25.12.2010
comment
@ JCOC611 JCOC611 Это потому, что мы все пытаемся угадать ваши намерения, поскольку вы задали очень широкий вопрос без достаточной информации, чтобы действительно помочь вам. - person Phrogz; 25.12.2010
comment
Я понимаю, но я просто спросил, есть ли причина не делать это с определением браузера, я не спрашивал, как я могу сделать это без использования определения браузера. - person JCOC611; 25.12.2010
comment
@JCOC Но это зависит от конкретного браузера и конкретного свойства. На этот вопрос нет общего ответа. - person Šime Vidas; 25.12.2010
comment
@ JCOC611 Ответ: Да, есть причина не делать что-то, если доступен лучший способ сделать то же самое. Таким образом, ответ в вашем случае зависит от того, что вы действительно пытаетесь сделать. . Возможно, обнаружение браузера и использование JavaScript неизбежны; однако мы не можем не ответить на этот вопрос, не зная, что именно вам нужно сделать. - person Phrogz; 25.12.2010

arrow_upward
0
arrow_downward

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

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

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

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

person Russ Cam    schedule 24.12.2010
comment
Я это знаю, но не думаю, что смогу проверить: if(some css will cause certain effect on the webpage) - person JCOC611; 25.12.2010
comment
что именно вы хотите протестировать? Там может быть известный способ обнаружения функции. - person Russ Cam; 25.12.2010
comment
Я знаю, как веб-страница отображается в каждом браузере, поэтому я настраиваю CSS, чтобы она выглядела одинаково во всех браузерах или, по крайней мере, чтобы она работала во всех из них (IE...) - person JCOC611; 25.12.2010
comment
@ JCOC611- вы знаете, как отображается веб-страница, но может быть известный способ определить базовую функцию, которая заставляет страницу отображаться определенным образом. Не могли бы вы добавить более конкретные детали к своему вопросу о том, чего именно вы пытаетесь достичь, пытаясь обнаружить браузер? - person Russ Cam; 25.12.2010

arrow_upward
0
arrow_downward

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

person rmurphey    schedule 24.12.2010