Категории
Самые читаемые
RUSBOOK.SU » Разная литература » Прочее » HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

Читать онлайн HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

Шрифт:

-
+

Интервал:

-
+

Закладка:

Сделать
1 ... 5 6 7 8 9 10 11 12 13 ... 55
Перейти на страницу:

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

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

Медиасвойства среды

Правда, неплохо было бы иметь возможность изменять наш дизайн на основе свойств окружающей среды, например уровня освещенности? Тогда при переходе пользователя в хуже освещенное помещение можно будет переключиться на использование более яркого цветового оформления. Или же, наоборот, повысить контрастность при переходе в место с ярким солнечным светом. Медиасвойства среды предназначены для решения разнообразных задач подобного рода. Рассмотрим следующие примеры:

1 ... 5 6 7 8 9 10 11 12 13 ... 55
Перейти на страницу:
На этой странице вы можете бесплатно скачать HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн . торрент бесплатно.
Комментарии
Открыть боковую панель
Комментарии
Сергій
Сергій 25.01.2024 - 17:17
"Убийство миссис Спэнлоу" от Агаты Кристи – это великолепный детектив, который завораживает с первой страницы и держит в напряжении до последнего момента. Кристи, как всегда, мастерски строит