Пуленепробиваемые медиазапросы CSS3

Если вы являетесь частью сообщества CSS, вы, вероятно, знаете, что медиазапросы CSS3 изменят способ написания CSS.

Почему это?

Медиа-запросы CSS3 очень удобны для нацеливания на различные устройства с различным размером монитора (экрана). С помощью медиазапросов CSS3 мы можем оптимизировать сайт для iPhone и других мобильных устройств, и с тем же решением мы можем оптимизировать сайт для iPad и всех других планшетов. Это CSS-решение будет намного дешевле, чем создание нового мобильного веб-сайта, например, http://m.somewebsite.com или http://ipad.somewebsite.com.

Можем ли мы начать использовать медиазапросы CSS3 сегодня?

Да мы можем!

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

Медиа-запросы CSS3 не будут работать в IE8 (и ниже), а также в браузерах ниже Firefox 3.5, Safari 3 и Opera 7. По сути, основная проблема — это IE и более старая версия Firefox.

Для мобильных веб-браузеров это решение должно работать для современных веб-браузеров и браузеров Opera, которые поддерживают медиазапросы CSS3.

Я попытался решить эту проблему, предоставив чистое решение CSS для 95% браузеров ПК и решение для JavaScript для остальных браузеров.

Вот решение :

<!-- Big screen -->
<link rel="stylesheet" type="text/css" href="CSS/main.css" media="screen and (min-device-width: 800px)" />

<!-- Tablet pc -->
<link rel="stylesheet" type="text/css" href="CSS/tablet.css" media="screen and (min-device-width: 481px) and (max-device-width: 799px)" />

<!-- Mobile -->
<link rel="stylesheet" type="text/css" href="CSS/mobile.css" media="only screen and (max-device-width: 480px)" />

<!-- If is lower than IE9 use conditional comments -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="CSS/main.css" media="all" />

И решение JavaScript для Firefox:

<script type="text/javascript">

if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){

var ffversion=new Number(RegExp.$1);

if (ffversion<=3.5){
var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'CSSNEW/main.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
}
}
</script>

У нас есть один CSS для мобильных браузеров с максимальным экраном 480px. Для более старых телефонов, которые не поддерживают медиазапросы CSS3, мы можем альтернативно добавить media = «handheld» CSS.

Для монитора размером от 481 до 799 пикселей (iPad и другие планшеты) у нас будет другой CSS.

В случае мониторов от 800px и более у нас будет основной CSS.

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

Для более старой версии Firefox мы можем использовать
JavaScript.

Вероятно, очень немногие используют Opera6 и Safari2, поэтому я не предоставил никакого решения. Поочередно может быть добавлено решение JavaScript.

Это решение CSS + JavaScript должно работать на 99% всех браузеров ПК и на новых мобильных браузерах Opera и Webkit.

Еще одна важная вещь: браузеры, вероятно, загрузят только одну (<link type = «text / css»… />) таблицу стилей и проигнорируют все остальные CSS. Таким образом, браузер не будет загружать ненужные CSS.

Я не уверен на 100%, что все браузеры проигнорируют ненужный CSS, вероятно, эксперты по скорости браузера, такие как
Стив Соудерс и
Стоян Стефанов, могут знать об этом немного больше.

Демонстрация этого решения

Скачайте код

Заключение : CSS3 Media Queries — это дешевый и простой способ оптимизировать ваш веб-сайт для различных устройств. С помощью этого решения вы можете безопасно покрыть 99% браузеров ПК и современных мобильных браузеров (iPhone, iPad, Android, новый веб-набор BlackBerry и новые браузеры Opera).

Другие полезные ресурсы: