Определить браузер и ОС с помощью CSS?

Question

Я знаю, что неправильно кодировать конкретный CSS для определенных браузеров или ОС, но на создаваемом мной сайте есть определенные элементы, которые плохо отображаются в определенных браузерах.Например, некоторые элементы не поддерживаются в IE8 или выглядят странно на маленьком дисплее iphone.

Поэтому мой вопрос - с помощью только CSS можно ли идентифицировать браузер пользователя и ОС и разрешить мне кодировать различные варианты отображения?

Черт побери.

Answer 1

Вы не можете прослушивать ОС или браузеры с помощью CSS, но вы можете использовать @media запросы для таргетинга на разные размеры экрана, например:

@media screen and (max-width: 1000px) { ... }

Выше для небольших экранов настольных компьютеров и ноутбуков.

@media screen and (max-width: 700px) { ... }

Выше для iPad и ОЧЕНЬ маленьких экранов настольных компьютеров / ноутбуков.

@media screen and (max-device-width: 480px) { ... }

Выше для iPhone 3GS и мобильных устройств в целом.

Тем не менее, новый iPhone 4 с поющим и танцующим «сетчатым» дисплеем Стива Джобса означает, что он имеет соотношение пикселей 2-1, что означает, что 1 пиксель фактически отображается в браузере как 2x2 пикселя, что делает его разрешение (960x640 - это означает, что он будет запускать макет iPad, а не макет мобильного устройства), поэтому для этого требуется ДРУГОЙ медиа-запрос (только пока поддерживаемый webkit):

@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }

Для таргетинга на разные браузеры вам нужно использовать HTML if:

<!--[if IE]>
According to the conditional comment this is Internet Explorer
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->

Затем просто свяжите вашу таблицу стилей CSS внутри этих условий

Answer 2

К сожалению, я не верю, что это возможно только с чистым CSS для каждой системы.

Однако вы можете использовать комбинацию CSS и JS, чтобы увидеть систему.

См. Здесь: http://rafael.adm.br/css_browser_selector/

Answer 3

Чтобы настроить таргетинг на устройства в зависимости от размера экрана, используйте мультимедийные запросы CSS :

@media screen and (max-device-width: 10cm) {/* Small screen, like iphone */ }

. Для версий IE можно использовать условные условия комментарии :

<!--[if lt IE 9]>
<style>/* IE5,6,7,8 */</style>
<![endif]-->

Answer 4

Невозможно идентифицировать браузер или ОС с помощью CSS. Это только для презентации. Вы можете настроить таргетинг на браузеры с помощью CSS-хаков , но это только послужит CSS браузеру, а не обнаружит его.

Вы можете использовать JS для определения браузера, как это делает плагин CSS-браузер .

Answer 5

Чтобы различать разные типы носителей (печать, экран, мобильный и т. Д.), Ознакомьтесь с правилами Тип носителя CSS . Для браузерных хаков, посмотрите на эту статью .

Answer 6

Ну, есть браузерные хаки CSS , которые используют известные ошибки в механизмах синтаксического анализа CSS, но не рекомендуется использовать их, если вы не знаете, что делаете.1005 *

selector { property: value; } /* regular, valid CSS */
selector { *property: value; } /* will only work in IE7 and older IEs */
selector { _property: value; } /* will only work in IE6 and older IEs */

Answer 7

Вы всегда можете использовать CSS-хаки, описанные здесь: http://www.quirksmode.org/css/condcom.html

Answer 8

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

<!--[if IE 8]>
    ... load stylesheets, JS or whatever here.
<![endif]-->

Информационные запросы см. В http://www.w3.org/TR/css3-mediaqueries/ и ... хорошо, http://www.google.com/search?q=media+queries+css3.

Answer 9

Изменить CSS для конкретной ОС:

Я написал эту функцию, которая распознает, является ли ваша ОС XP или другой, и, как следствие, устанавливает конкретный CSS.

function changeStyle() {
var css = document.createElement('link');
css.rel="stylesheet";
css.type = 'text/css';

if (navigator.appVersion.indexOf("Windows NT 5.1")!=-1){ /* if is windowsXP */
css.href = 'styleXP.css';
} else {
css.href = 'style7.css';
}

document.getElementsByTagName("head")[0].appendChild(css);
return false;
}

Answer 10

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