Как проверить браузер, используя javascript / условные комментарии для соответствия css3?

Question

Как проверить браузер, используя javascript / условные комментарии для соответствия css3?

0

Я знаю, что мой сайт выглядит ужасно в IE7 и IE6. Я просто должен признать это.
Чтобы найти IE с использованием условных комментариев, это  или что-то в этом направлении.

Однако. Что делать, если пользователь приходит на мой сайт с другим браузером, скажем, Firefox 4 (кстати, они все еще используют в моей школе), как я могу это обнаружить?

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

благодаря

ben 22 окт. 2013, в 17:34

Источник

0

TMYK stackoverflow.com/questions/2400935/…
usernolongerregistered 22 окт. 2013, в 15:30
2

«Соответствие CSS3» - это гораздо более широкий вопрос, чем «поддерживает ли он border-radius». Рекомендую уточнить свой вопрос.
T.J. Crowder 22 окт. 2013, в 15:32
0

modernizr.js может помочь вам
fcalderan 22 окт. 2013, в 15:32
0

Для чего-то вроде border-radius , продолжайте и примените это. Это не помешает рендерингу границ. Когда браузер не понимает правила стиля, он игнорирует его. Только когда вам нужно применить противоречивые правила, вам нужно смотреть на условные комментарии.
Mister Epic 22 окт. 2013, в 15:32
0

@ChrisHardie Border-radius был только примером, потому что я знаю, что IE8, IE7 и IE6 не поддерживают его, поэтому я могу загрузить основные стили для этих браузеров
ben 22 окт. 2013, в 15:48
0

Какова конечная цель с этим обнаружением? Итак, Browser X не поддерживает свойство Y, что это значит для вашего CSS? Ориентация на конкретный браузер исторически осуществлялась из-за ошибочных реализаций, а не потому, что они не были поддержаны. Количество свойств CSS, которые приведут к нарушению дизайна из-за того, что они не поддерживаются, можно посчитать с одной стороны.
cimmanon 22 окт. 2013, в 16:38
0

если браузер не поддерживает радиус границы, загрузите базовые стили, иначе загрузите нормальные стили @cimmanon
ben 22 окт. 2013, в 17:04
1

@ben Вы серьезно намереваетесь использовать border-radius, чтобы определить, нужно ли конкретному браузеру обслуживать неработающий CSS-файл вместо реального? Это невероятно лениво. Поддержка одного свойства не указывает на общие возможности любого браузера.
cimmanon 22 окт. 2013, в 17:21
0

@cimmanon cimmanon файл css не работает. он просто исправляет ie6,7 и 8, и, насколько я знаю, это единственные браузеры, которые не поддерживают радиус границы.
ben 22 окт. 2013, в 19:27
0

Суть того, что они все говорят, заключается в том, что обнаружение в браузере - не лучший способ.
Qantas 94 Heavy 01 дек. 2013, в 09:27

Показать ещё 8 комментариев

Теги:

javascript

jquery

html

css

css3

2 ответа

Ещё вопросы

«Соответствие CSS3» - это гораздо более широкий вопрос, чем «поддерживает ли он border-radius». Рекомендую уточнить свой вопрос.
Для чего-то вроде border-radius , продолжайте и примените это. Это не помешает рендерингу границ. Когда браузер не понимает правила стиля, он игнорирует его. Только когда вам нужно применить противоречивые правила, вам нужно смотреть на условные комментарии.
@ChrisHardie Border-radius был только примером, потому что я знаю, что IE8, IE7 и IE6 не поддерживают его, поэтому я могу загрузить основные стили для этих браузеров
Какова конечная цель с этим обнаружением? Итак, Browser X не поддерживает свойство Y, что это значит для вашего CSS? Ориентация на конкретный браузер исторически осуществлялась из-за ошибочных реализаций, а не потому, что они не были поддержаны. Количество свойств CSS, которые приведут к нарушению дизайна из-за того, что они не поддерживаются, можно посчитать с одной стороны.
если браузер не поддерживает радиус границы, загрузите базовые стили, иначе загрузите нормальные стили @cimmanon
@ben Вы серьезно намереваетесь использовать border-radius, чтобы определить, нужно ли конкретному браузеру обслуживать неработающий CSS-файл вместо реального? Это невероятно лениво. Поддержка одного свойства не указывает на общие возможности любого браузера.
@cimmanon cimmanon файл css не работает. он просто исправляет ie6,7 и 8, и, насколько я знаю, это единственные браузеры, которые не поддерживают радиус границы.
Суть того, что они все говорят, заключается в том, что обнаружение в браузере - не лучший способ.

T.J. Crowder · Answer 1 · 2013-10-22T13-49-00.000Z

Вы можете взглянуть на использование Modernizr, который может протестировать радиус границы и около миллиона других вещей.

Альтернативно, здесь изолированный тест только для border-radius (из этого великого списка по kangax):

var hasBorderRadius = (function (){
  var docEl = document.documentElement, s;
  if (docEl && (s = docEl.style)) {
    return (typeof s.borderRadius == 'string'
      || typeof s.MozBorderRadius == 'string'
      || typeof s.WebkitBorderRadius == 'string'
      || typeof s.KhtmlBorderRadius == 'string');
  }
  return false;
})();

Флаг hasBorderRadius будет true если это произойдет, или false если это не так.

Тот же метод может быть использован для других новых свойств CSS3 (а также для HTML-элементов, таких как placeholder на элементах input), см. Ссылку выше. Но если вам нужно больше одного, не изобретайте велосипед, используйте инструмент.

roblarsen · Answer 2 · 2013-10-22T12-38-00.000Z

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

http://modernizr.com/