Панель Управления





Курс CSS. Урок 54. CSS3. Интерфейс пользователя. User Interface.
Стиль сайта. Онлайновый курс по теме CSS. Сделано в kocby.ru Курс CSS. Урок 54. CSS3. Интерфейс пользователя. User Interface. Стандарт CSS3 расширяет возможности пользовательского интерфейса, добавляя такие новые фичи как изменение размера элементов, расчет размера блока нестандартным способом, аутлайнинг и пр. Свойство appearance позволяет сделать так, чтобы какой-то обычный элемент (например, span) вдруг выглядел, как стандартный элемент интерфейса пользователя, например, кнопка. Зачем это нужно и где это может пригодиться, и почему нельзя элемент просто создать как кнопку, пока мне непонятно, но вот есть такая возможность. Свойство box-sizing позволяет для определенных элементов рассчитывать площадь нестандартным способом (например, с учетом границ). Свойство outline-offset отодвигает обводку блочного элемента и рисует ее на расстоянии от границ. Свойство resize определяет, может пользователь или нет изменять размер блочного элемента.
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
Курс CSS. Урок 54. CSS3.
Интерфейс пользователя. User Interface.
Стандарт CSS3 расширяет возможности пользовательского интерфейса, добавляя такие новые фичи как изменение размера элементов, расчет размера блока нестандартным способом, аутлайнинг и пр.

Затронем теорию вопроса.
Интерфейс пользователя. User Interface.
NN Свойство Гугль Хром FireFox IE Safari Opera
12 appearance -webkit- -moz- 3 - -webkit- -
42 box-sizing 10 -moz- 8 5.1 9.5
77 icon - - - - -
94 nav-down - - - - 11.5
95 nav-index - - - - 11.5
96 nav-left - - - - 11.5
97 nav-right - - - - 11.5
98 nav-up - - - - 11.5
100 outline-offset - 11
110 resize 4 5 - 4 -

Прежде всего, заметим, что данный раздел CSS Интерфейс пользователя (User Interface) есть прекрасный пример переплетения и борьбы разных технологий. В данном случае CSS по праву пытается отвоевать то, что давно уже реализовано с помощью т.н. UI (User Interface) библиотеки jQuery:
http://kocby.ru/post/webmaster/jquery/ui/

Вопрос, какую технологию выбрать, если поставленную задачу можно и тем, и другим способом, весьма непростой. С одной стороны, то, что можно сделать через стили, следует делать все-таки именно через стили. Но с другой стороны, вышеуказанный плагин UI jQuery обеспечивает почти полную кроссбраузерность и прошел тщательное тестирование многими веб кодировщиками по всему миру.

На сегодняшний день, есть практический смысл изучать следующие свойства Интерфейса пользователя, которые дает нам технология CSS:
  • appearance - Позволяет сделать так, чтобы какой-то обычный элемент (например, span) вдруг выглядел, как стандартный элемент интерфейса пользователя (например, кнопка). Зачем это нужно и где это может пригодиться, и почему нельзя элемент просто создать как кнопку, пока мне непонятно, но вот есть такая возможность. Allows you to make an element look like a standard user interface element.
  • box-sizing - Позволяет для определенных элементов рассчитывать площадь нестандартным способом (например, с учетом границ). Allows you to define certain elements to fit an area in a certain way.
  • outline-offset - Отодвигает обводку блочного элемента и рисует ее на расстоянии от границ. Offsets an outline, and draws it beyond the border edge.
  • resize - Определяет, может пользователь или нет изменять размер блочного элемента. Specifies whether or not an element is resizable by the user.
Теперь рассмотрим эти свойства более подробно.

appearance (необычное отображение элемента)

Возможные значения appearance (необычное отображение элемента)
NN Значение Описание
1 normal Представляет элемент в
нормальном виде
. Render the element as normal.
2 icon Иконка. Представляет элемент в виде
маленькой картинки
. Render the element as a small picture.
3 window Окно. Представляет элемент в виде
порта вывода
. Render the element as a viewport.
4 button Кнопка. Представляет элемент в
виде кнопки
. Render the element as a button.
5 menu Меню. Представляет элемент в виде
множества опций
для пользователя, из которого можно выбрать определенный пункт. Render the element as a set of options for the user to choose from.
6 field Поле. Представляет элемент в виде
поля ввода
. Render the element as an input field.

Рассмотрим классы объекта для представления в виде кнопки:
.appearance_button_054 {
	appearance:button;
	-moz-appearance:button; /* Firefox */
	-webkit-appearance:button; /* Safari and Chrome */
}


box-sizing (способ расчета размера блочного элемента)

Возможные значения box-sizing (способ расчета размера блочного элемента)
NN Значение Описание
1 content-box Расчитывает ширину и высоту блочного элемента обычным способом по стандарту CSS2.1 (относительно области контента, без учета паддингов и границ).
2 border-box При данном значении ширина и высота блочного элемента включает в себя значения паддингов и границ.
3 inherit Значение наследуется от родительского элемента.

Пример использования.

Допустим, есть у нас некий див-контейнер, внутри которого необходимо поместить два одинаковых по размеру дива, которые бы точно вписались по ширине.

Решить эту задачу напрямую не получится, т.к. при расчете не учитывается ширина границ:
Див занимает левую половину (50%)
Див занимает правую половину (50%)


Но если использовать свойство box-sizing:border-box; - то все работает ок:
Див занимает левую половину (50%)
Див занимает правую половину (50%)


Рассмотрим классы, которые мы использовали:
.container_054 {
	width:96%;
	height:60px;
/*	border:1em solid; */
	background:#E7FFB7;
	border:10px solid #B7F777; 
	border-radius:10px;
	box-shadow: 6px 7px 5px #979797;
}

.box_inside_054_content {
	box-sizing:content-box;
	-moz-box-sizing:content-box; /* Firefox */
	width:50%;
	background:#F0FFF7;
	border:3px solid #FFF777;
	float:left;
}

.box_inside_054_border {
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	width:50%;
	background:#F0FFF7;
	border:3px solid #FFF777;
	float:left;
}


outline-offset (сдвиг обводки блока от его границ)

Возможные значения outline-offset (сдвиг обводки блока от его границ)
NN Значение Описание
1 length Расстояние до обводки от границ элемента.
2 inherit Значение наследуется от родительского элемента.

Пример использования.

Использование обводки без свойства outline-offset:
За последнее время читатели нашей газеты, очень часто обращались к нам с просьбой рассказать о гигантских растениях. Но что можно рассказать об этих пресловутых растениях, о которых действительно теперь можно услышать множество толков и кривотолков? О них с уверенностью можно сказать только то, что сказать о них нечего, так как о них достоверно известно лишь то, что о них достоверно ничего не известно. Многие легковерные коротышки в своем легковерии доходят до того, что покупают акции этих легендарных растений. Мы вовсе не хотим бросить тень на Общество гигантских растений. Мы не хотим также сказать, что, приобретая акции, коротышки ничего не приобретают, так как, покупая акции, они получают надежду на улучшение своего благосостояния. А надежда, как известно, тоже чего-нибудь да стоит. Даром, как говорится, и болячка не сядет. За все надо платить денежки, а заплатив, можно и помечтать. При первой возможности редакция снова возвратится к разговору о гигантских растениях. Редактор Гризль.


Использование обводки c свойством outline-offset:10px;
"Газета для дураков". Да, да! Не удивляйтесь: именно "для дураков". Некоторые читатели могут подумать, что неразумно было бы называть газету подобным образом, так как кто станет покупать газету с таким названием. Ведь никому не хочется, чтобы его считали глупцом. Однако давилонские жители на такие пустяки не обращали внимания. Каждый, кто покупал "Газету для дураков", говорил, что он покупает ее не потому, что считает себя дураком, а потому, что ему интересно узнать, о чем там для дураков пишут. Кстати сказать, газета эта велась очень разумно. Все в ней даже для дураков было понятно. В результате "Газета для дураков" расходилась в больших количествах и продавалась не только в городе Давилоне, но и во многих других городах.


Рассмотрим классы, которые мы использовали:
.news_054_wo_outline_offset {
	width:90%;
	padding:10px;
	margin:10px;
	border:3px solid #B7F777; 
	border-radius:10px;
	box-shadow: 6px 7px 5px #979797;
	outline:3px solid #FFF777;
}

.news_054_with_outline_offset {
	width:90%;
	padding:10px;
	margin:10px;
	border:3px solid #B7F777; 
	border-radius:10px;
	box-shadow: 6px 7px 5px #979797;
	outline:3px solid #FFF777;
	outline-offset:10px;
}


resize (изменение размера блока пользователем)

Возможные значения resize (изменение размера блока пользователем)
NN Значение Описание
1 none Пользователь не может изменять размер элемента.
2 both Пользователь может изменять и высоту, и ширину элемента
2 horizontal Пользователь может изменять ширину элемента
2 vertical Пользователь может изменять высоту элемента

Примеры использования.

Пользователь не может изменять размер элемента:
У самой воды под большой, старой ивой стоял дом не дом, хижина не хижина, а скорее какая-то сказочная избушка. Все ее стены были испещрены какими-то непонятными картинками. На одной картинке был изображен коротышка в клетчатом плаще и с трубкой в зубах. На другой -- точно такой же коротышка, и тоже с трубкой, но почему-то перевернутый вверх ногами. Над этим перевернутым коротышкой была чьято огромная нога в начищенном до яркого блеска ботинке. Рядом была банка с черникой, зеленые стручки гороха, чья-то голова с волосами, покрытыми белой пушистой пеной, чей-то рот с красными, улыбающимися во всю ширину губами и огромными, сверкающими белизной зубами. Затем снова чья-то намыленная голова, но на этот раз лежащая на боку, чашка с дымящимся кофе, еще банка с черникой, огромной величины муха, опять нога... Все это было без всякого смысла и связи, словно какой-то художник рехнулся, а потом вырвался на свободу и решил разукрасить попавшееся ему на пути строение своей сумасшедшей кистью. И все же не это привело в изумление Скуперфильда. У него захватило дыхание, когда над входом в эту чудную хижину он увидел вывеску, на которой огромными печатными буквами было написано: МАКАРОННОЕ ЗАВЕДЕНИЕ СКУПЕРФИЛЬДА


Пользователь может изменять и высоту, и ширину элемента:
"Значит, Спрутсу выгодно, чтоб перестали покупать гигантские акции, -- сказал сам себе Скуперфильд. -- Может быть, ему даже хочется, чтоб они понизились в цене?.. Да, да! Какой же я остолоп, что не сообразил этого сразу. Недаром Спрутс так старался, чтоб Мига и Жулио скрылись с деньгами. Ведь как только они скроются, цены на акции обязательно упадут. Тогда господин Спрутс скупит их по дешевке, а когда они снова поднимутся в цене, продаст и разбогатеет еще больше. Что ж, надо перебить Спрутсу дорогу и скупить гигантские акции раньше его. Это будет выгодное дельце!"


Пользователь может изменять ширину элемента:
-- Вам повара или официанты не требуются?
Хозяин перестал щелкать на счетах и, окинув Незнайку и Козлика взглядом, спросил:
-- А кто из вас повар?
-- Я повар, -- ответил Козлик. -- А вот он официант.
-- Какой же из тебя повар! -- усмехнулся хозяин. -- Повара обычно бывают толстенькие, а ты вон какой худой.
-- Вы меня только возьмите, я обязательно растолстею, -- ответил Козлик.


Пользователь может изменять высоту элемента:
Гостиница "Экономическая", куда отправились ночевать Незнайка и Козлик, славилась своей дешевизной. За пятьдесят сантиков здесь можно было получить на ночь вполне удобный номер, что было чуть ли не вдвое дешевле, чем в любой другой гостинице. Этим объяснялось, что гостиница "Экономическая" никогда не испытывала недостатка в жильцах. Каждый, прочитав на вывеске надпись: "Самые дешевые номера на свете", недолго раздумывая шел в эту гостиницу. Уплатив пятьдесят сантиков. Незнайка и Козлик получили ключ и, разыскав свой номер, очутились в небольшой чистенькой комнате. Здесь были стол, несколько стульев, платяной шкаф, рукомойник с зеркалом у стены и даже телевизор в углу.


Рассмотрим классы, которые мы использовали:
.news_054_resize_none {
	resize:none;
	overflow:auto;
}

.news_054_resize_both {
	resize:both;
	overflow:auto;
}

.news_054_resize_horizontal {
	resize:horizontal;
	overflow:auto;
}

.news_054_resize_vertical {
	resize:vertical;
	overflow:auto;
}



Теперь для сравнения посмотрим, как можно делать размероизменчивые элементы с помощью UI (User Interface) библиотеки jQuery:
http://kocby.ru/post/webmaster/jquery/ui/resizable/
Пончик, который, как известно, был не дурак покушать, показал на наглядном примере, насколько велико может быть расхождение между теоретическими расчетами и практической жизнью. Незнайка установил, что Пончику обеспечен запас еды больше чем на год, так как все свои вычисления произвел в расчете на обыкновенного едока, не принимая во внимание его индивидуальные, то есть личные, едовые свойства. Вся беда оказалась в том, что личные едовые качества Пончика заключались в его чрезвычайной едовой недисциплинированности. Говоря проще, он мог есть что угодно, где угодно, когда угодно и в каких угодно количествах.


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

Теперь отобразим новые полученные знания на нашем учебном тестовом примере.
css_054_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_054_001.zip ← скачайте пример, чтобы установить на свой сайт...

***** Машина-Функционал для передвижения по страничкам курса CSS *****
:: ::  / 


Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.


Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/css/p054.html
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
© KOCBY.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCBY.RU ©
Basket is empty :: Корзина пустая
Close and hide in basket :: Закрыть и спрятать в корзину
***** Реклама *****
Посмотри в зеркало! Что там видно?
Красивая девушка брюнетка слева Красивая девушка блондинка справа
Красивая девушка блондинка слева Красивая девушка брюнетка справа
Наверх ↑