HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .
Шрифт:
Интервал:
Закладка:
Метатег может использоваться также для управления пределами возможностей пользователя при масштабировании страницы в обе стороны. Следующий пример позволяет пользователям увеличивать масштаб до трехкратной ширины экрана устройства и уменьшать его до половинной ширины экрана устройства:
<meta name="viewport" content="width=device-width, maximum-scale=3,
minimum-scale=0.5" />
Можно также вообще не давать пользователям возможности масштабирования, но, поскольку масштабирование является важным средством, повышающим удобство просмотра содержимого, применять эту настройку на практике вряд ли придется:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
Ключевой здесь является часть user-scalable=no.
Да, мы изменим масштаб на 1.0, что означает вывод страницы браузером мобильного устройства на 100 % окна просмотра. Настройка его на ширину устройства означает, что наша страница должна выводиться на 100 % ширины всех поддерживающих это свойство браузеров мобильных устройств. В большинстве случаев подойдет следующий метатег:
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
совет
Заметив рост популярности использования метатега viewport, консорциум W3C предпринял попытки внедрения такой же возможности в CSS. Зайдите на страницу http://dev.w3.org/csswg/css-device-adapt/ и прочитайте все о новом объявлении @viewport. Идея заключается в том, что вместо написания в <head>-разделе вашей разметки метатега вы можете написать в CSS @viewport { width: 320px; }. В результате ширина браузера будет настроена на 320 пикселов. Но поддержка этого объявления со стороны браузеров оставляет желать лучшего, поэтому для охвата всех возможных вариантов и максимального соответствия требованиям завтрашнего дня можно воспользоваться комбинацией метатега и объявления @viewport.
На данный момент у вас уже должно было сложиться четкое представление о медиазапросах и порядке их работы. Но перед тем, как полностью перейти к совершенно другой теме, было бы неплохо рассмотреть возможности ближайшего будущего при использовании следующей версии медиазапросов. Давайте заглянем в будущее!
Спецификация Media Queries Level 4
На момент написания книги, когда CSS Media Queries Level 4 пребывали в стадии проекта спецификации (http://dev.w3.org/csswg/mediaqueries-4/), компоненты этого проекта не могли похвастаться реализацией в множестве браузеров. Это означает, что, несмотря на краткий обзор особенностей этой спецификации, она еще не приобрела достаточной стабильности. Перед использованием любого из ее компонентов нужно убедиться в его поддержке браузером и дважды проверить, не изменился ли у него синтаксис.
А пока, хотя в спецификации четвертого уровня есть и другие компоненты, мы коснемся только возможностей использования сценариев, реагирования на прохождение указателя мыши над элементами страницы и использования освещенности.
Медиасвойство использования сценариев
Согласно устоявшейся практике тегу HTML присваивается класс, показывающий исходное отсутствие кода JavaScript с последующей заменой этого класса на другой при запуске JavaScript. Тем самым предоставляется легко реализуемая возможность разветвления кода, включая CSS, на основе этого нового класса, присваиваемого тегу HTML. В частности, используя этот прием, можно написать правила, применяемые к конкретным пользователям, у которых включен JavaScript.
Чтобы не запутаться, рассмотрим пример кода. В самом начале это будет тег, созданный в HTML:
<html class="no-js">
Когда на странице запустится JavaScript, одной из первых задач станет замена класса no-js:
<html class="js">
После того как это будет сделано, можно написать конкретные CSS-правила, применимые исключительно при наличии JavaScript, например .js .header { display: block; }.
А вот медиасвойство использования сценариев, имеющееся в спецификации CSS Media Queries Level 4, предназначено для обеспечения более соответствующего общему стандарту способа достижения аналогичного результата непосредственно в коде CSS:
@media (scripting: none) {
/* стили, предназначенные для применения в отсутствие JavaScript */
}
И при наличии JavaScript:
@media (scripting: enabled) {
/* стили, предназначенные для применения при наличии JavaScript */
}
И наконец, это свойство предназначено также для выявления факта применения JavaScript только при начальном отображении страницы. В спецификации W3C приводится пример задания отображаемой страницы, которая может быть размечена при начальном выводе на экран, после чего JavaScript на ней использоваться не будет:
@media (scripting: initial-only) {
/* стили для страницы, применяющей JavaScript только при ее начальном выводе */
}
О текущем редакторском проекте этого свойства можно прочитать на странице http://dev.w3.org/csswg/mediaqueries-4/#mf-scripting.
Медиасвойства, связанные с взаимодействием со страницей
В W3C медиасвойство указателя pointer, представлено следующим образом:
«Медиасвойство pointer используется для запроса наличия и точности указывающего устройства, например мыши. Если у устройства имеется несколько механизмов ввода, медиасвойство pointer должно отражать характеристики первичного механизма ввода в соответствии с определением пользовательского агента (user agent)».
Существует три возможных состояния указателя pointer: none (отсутствует), coarse (грубый) и fine (тонкий).
В качестве устройства указателя с параметром coarse может оказаться палец на устройстве с сенсорным экраном. Но это может быть и курсор игровой консоли, не обладающий такой же высокой точностью, как указатель мыши:
@media (pointer: coarse) {
/* стили на случай присутствия указателя, имеющего состояние coarse */
}
Устройством со свойством pointer, имеющим значение fine, может быть мышь, а также стилус-перо или любой другой указательный механизм высокой точности:
@media (pointer: fine) {
/* стили на случай присутствия указателя с высокой точностью */
}
Я считаю, что чем скорее в браузерах будет реализовано это свойство указателя, тем лучше. А пока еще определить, что именно используется, мышь, сенсорный ввод или и то, и другое, довольно трудно. Так же трудно определить, чем именно пользуются в данный момент.
совет
Разумнее всегда предполагать, что пользователи работают с устройством сенсорного ввода, и задавать размеры элементов пользовательского интерфейса соответствующим образом. Тогда, даже если они используют мышь, с интерфейсом у них не возникнет никаких затруднений. Если же предположить, что устройством ввода является мышь, возникнут осложнения из-за невозможности надежного определения касания при работе с элементами интерфейса.
Более подробный обзор проблем разработки для устройств с сенсорным вводом и устройств, использующих указатель типа «мышь», представлен в наборе слайдов под названием Getting touchy, созданном Патриком Лауке (Patrick H. Lauke) и опубликованном на сайте https://patrickhlauke.github.io/getting-touchy-presentation/.
О редакторском проекте (editor’s draft) этого свойства можно прочитать на сайте http://dev.w3.org/csswg/mediaqueries-4/#mf-interaction.
Медиасвойство hover
Как вы, наверное, уже догадались, медиасвойство hover тестирует пользовательскую возможность проведения указателя над элементами экрана. Если пользователь располагает несколькими устройствами ввода (например, сенсором и мышью), используются характеристики основного устройства ввода. Далее перечислены возможные значения и показаны примеры кода.
Для пользователей, не имеющих возможности провести указатель над элементами экрана, можно нацелить стили для значения этого свойства, равного none:
@media (hover: none) {
/* стили для тех случаев, когда провести указатель над элементами невозможно */
}
Для тех пользователей, которые имеют такую возможность, но должны для ее инициирования предпринять определенные действия, можно воспользоваться значением on-demand:
@media (hover: on-demand) {
/* стили для тех случаев, когда пользователь
имеет возможность провести указатель над
элементами, но от него требуются определенные
действия */
}
Для пользователей, имеющих возможность провести указатель над элементами, может быть использовано объявление hover без указания какого-либо значения:
@media (hover) {
/* стили для тех случаев, когда пользователь
имеет возможность провести указатель над элементами */
}
Существуют также медиасвойства any-pointer и any-hover. Они похожи на рассмотренные ранее hover и pointer, но проверяют возможности любого из возможных устройств ввода.
Медиасвойства среды
Правда, неплохо было бы иметь возможность изменять наш дизайн на основе свойств окружающей среды, например уровня освещенности? Тогда при переходе пользователя в хуже освещенное помещение можно будет переключиться на использование более яркого цветового оформления. Или же, наоборот, повысить контрастность при переходе в место с ярким солнечным светом. Медиасвойства среды предназначены для решения разнообразных задач подобного рода. Рассмотрим следующие примеры:
