67209
Проектування, компонування та подання форм за допомогою CSS
Лекция
Информатика, кибернетика и программирование
Можна сказати, що використання великої кількості маркерів class та id порушує принцип KISS (принцип збереження максимальної простоти). Проте складні компонування часто створюють конфлікти в каскадуванні – конфлікти, які найпростіше вирішуються додаванням до елементів маркерів...
Украинкский
2014-09-06
863 KB
1 чел.
Тема № 8: «Проектування, компонування та подання форм за допомогою CSS»
ЗМІСТ
Вступ
Концепції, які представлені в цій темі
Перевизначення правил і маркерів
Нові елементи полів форми
Принципи проектування форм
Правило третин
Сітки
Рівні підтримки платформи
Проста контактна форма
Розмітка
Зміни щодо попередньої форми
Очевидні недоліки
Нові поля форми? Що це?
Починаємо з самого початку, закінчуємо готовою формою
Демонстрація 1
Демонстрація 1: супутні розгляди
Демонстрація 2
Демонстрація 2: супутні розгляди
Демонстрація 3
Демонстрація 3: супутні розгляди
Створення сітки
Демонстрація 4
Демонстрація 4: супутні розгляди
Правило третин
Демонстрація 5
Демонстрація 5: супутні розгляди
Демонстрація 6
Демонстрація 6: супутні розгляди
Демонстрація 7
Демонстрація 7: супутні розгляди
Демонстрація 8
Демонстрація 8: супутні розгляди
Демонстрація 9
Демонстрація 9: супутні розгляди
Демонстрація 10
Демонстрація 10: супутні розгляди
Демонстрація 11
Демонстрація 11: супутні розгляди
Демонстрація 12
Демонстрація 12: супутні розгляди
Створення рівнів підтримки платформи
Складні компонування форм на практиці (… замість теорії)
Резюме
Контрольні запитання
Таблиця: перетворення простих дробів у десяткові
Додаткове читання
Вступ
У темі міститься нова інформація про реалізацію форми і компонування інтерфейсу.
Перевизначення правил і маркерів
Можна сказати, що використання великої кількості маркерів class та id порушує принцип KISS (принцип збереження максимальної простоти). Проте складні компонування часто створюють конфлікти в каскадуванні конфлікти, які найпростіше вирішуються додаванням до елементів маркерів, і написанням правил таблиць стилів, які містять декілька селекторів.
Найбільш складні компонування насичені граничними випадками, які часто найкраще обробляються за допомогою елементів id, які визначають вузький та унікальний контекст.
Нові елементи полів форми
Ефективній формі часто потрібно щось більше, ніж прості кнопки та текстові поля введення, так як досить поширене уявлення відповідей користувачів у вигляді варіантів вибору. Мова HTML надає кілька можливостей для розробників, які зустрічаються з такою вимогою.
Принципи проектування форм
Форми сайту є, зазвичай, вузловими пунктами взаємодії користувачів та збору даних. У звязку з цим, вони часто будуть критично важливими для успіху сайту, що вимагає самого ретельного розгляду при їх проектуванні.
Правило третин
Користувачі найчастіше звертають увагу на чотири спеціальні точки на канві (і лінії, які через них проходять). У темі розглядається цей феномен, і пропонуються кращі варіанти використання за допомогою CSS.
Сітки
Попередні теми показали, як забезпечити узгоджене оформлення тексту і отримати максимум можливого від використання прогалин. Ця тнема йде трохи далі, пояснюючи, як використовувати одиниці вимірювання em для реалізації певної міри узгодженості компонування, яку неможливо реалізувати без CSS.
Рівні підтримки платформи
Однією з поширених вимог для комерційних проектів є майже точне відтворення затвердженого дизайну сайту в одному або декількох браузерах. Ця стаття коротко досліджує причини, результати та процеси, повязані з реалізацією цієї вимоги.
Контактні форми, які дозволяють відвідувачам сайту надсилати повідомлення e-mail прямо в папку вхідної пошти, широко поширені з очевидної причини: вони доступні будь-кому з активною адресою e-mail, і легко фільтруються у виділену папку пошти.
Розмітка
<form id="contactForm" method="post" action="/cgi-bin/service_email_script.php">
<ul>
<li id="nameField" class="required"><label for="realname">Name:</label><input type="text" name="name" value="" class="medium" id="realname" /><span class="note">required</span></li>
<li id="addressField" class="required"><label for="address">Email:</label><input type="text" name="email" value="" class="medium" id="address" /><span class="note">required</span></li>
<li id="subjectField"><label for="natureOfInquiry">General subject:</label>
<select name="subject" class="medium" id="natureOfInquiry">
<option value="support">Support</option>
<option value="billing">Accounts & billing</option>
<option value="press">Press</option>
<option value="other_q">Other questions</option>
</select>
</li>
<li class="required" id="acctTypeField"><label for="acctNone">Account type:</label>
<fieldset>
<label for="acctGold">Gold</label><input type="radio" name="acct_type" id="goldAcct" class="rInput" />
<label for="acctSilver">Silver</label><input type="radio" name="acct_type" id="acctSilver" class="rInput" />
<label for="acctBronze">Bronze</label><input type="radio" name="acct_type" id="acctBronze" class="rInput" />
<label for="acctNone">None</label><input type="radio" name="acct_type" id="acctNone" class="rInput" checked="checked" />
</fieldset>
<span class="note">required</span>
</li>
<li id="availabilityField">
<label for="availability">My account is unavailable:</label><input type="checkbox" name="is_down" id="availability" class="rInput" /></li>
<li id="messageField"><label for="messageBody">Comments:</label><textarea name="comments" cols="32" rows="8" class="long" id="messageBody"></textarea></li>
<li class="submitField"><input type="submit" value="Send" class="submitButton"/></li>
</ul>
</form>
Зміни щодо попередньої форми
Крім включення декількох нових елементів, в розмітку було додано кілька класів та ID, на які можна посилатися з таблиці стилів. Це дозволяє незалежно від контексту посилатися індивідуально на кожну форму, пару поле/значення і поле.
Нові ідентифікатори дозволяють також розрізняти поля, які повинні заповнюватися, і поля, які не повинні.
Нарешті, є кілька нових класів, які виводять вказівки про обсяг і типи інформації, яка повинна виводитися елементами форми, до яких вони приєднані. Ці класи роблять можливим застосовувати деталі компонування до кількох довільних елементів одночасно.
Очевидні недоліки
Варто відзначити, що “необхідні” теги на полях найкраще поміщати перед полем у порядку вихідного коду, щоб забезпечити користувачів програмного забезпечення легким зчитуванням екрану. Однак, потрібна властивість position для відповідного розміщення цих обєктів. У звязку з цим, “необхідні” теги були поміщені після їх відповідних елементів управління в порядку вихідного коду (хоча і в тому ж контексті).
Нові поля форм? Що це?
Як було зазначено вище, існує ряд випадків застосування, які вимагають, щоб користувач міг вибрати з двох або декількох варіантів. Ці елементи описуються коротко нижче.
Вибір описів: input type = “checkbox”
<label for="availability">My account is unavailable: </label><input type="checkbox" name="is_down" id="availability" class="rInput" />
Питання реєстрації та відмови зазвичай обробляються такими елементами управління. Інший випадок їх застосування, коли потрібно довільно вибрати з декількох варіантів, наприклад, список особистих інтересів.
Вибір із взаємовиключних станів: input type = “radio”
<label for="acctNone">Account type:</label>
<fieldset>
<label for="acctGold">Gold</label><input type="radio" name="acct_type" id="goldAcct" class="rInput" />
<label for="acctSilver">Silver</label><input type="radio" name="acct_type" id="acctSilver" class="rInput" />
<label for="acctBronze">Bronze</label><input type="radio" name="acct_type" id="acctBronze" class="rInput" />
<label for="acctNone">None</label><input type="radio" name="acct_type" id="acctNone" class="rInput" checked="checked" />
</fieldset>
Така група дозволяє уявити поруч кілька варіантів, з яких можна вибрати тільки один варіант. Одним хорошим прикладом застосування безлічі радіо-кнопок є завдання оцінки з шкали 1-5 або 1-10.
На відміну від інших елементів керування форми, радіо-кнопки не тільки дозволяють, але в дійсності вимагають, щоб відповідні елементи управління використовували одне й те ж імя.
Ці елементи управління отримали свою назву по кнопках механічного налаштування попередньо заданих радіостанцій автомобільної магнітоли. На відміну від програмованих попередніх налаштувань, звичайних для пристроїв з цифровою настройкою, механічні кнопки “попереднього налаштування” при натисканні, зазвичай, поміщають приймач в середині діапазону частот смуги налаштування.
Як прапорці (checkbox), так і радіо-кнопки (radio) дозволяють використовувати атрибут checked, який, якщо задано, активує елемент управління за замовчуванням, коли він виводиться перший раз.
Питання використання радіо-кнопок або прапорців має вирішуватися після розгляду ряду різних факторів. Якщо ви хочете, щоб користувач підтвердив субєктивний вибір (такий як реєстрація у списку поштової розсилки), то прапорці будуть, ймовірно, кращим варіантом. Якщо ви хочете замість цього, щоб користувач вибрав між двома обєктивними варіантами (наприклад, скажімо, стать), то тоді краще використовувати радіо-кнопки.
Коли занадто багато варіантів вибору: select/option
<label for="natureOfInquiry">General subject:</label>
<select name="subject" class="medium" id="natureOfInquiry">
<option value="support">Support</option>
<option value="billing">Accounts & billing</option>
<option value="press">Press</option>
<option value="other_q">Other questions</option>
</select>
Елементи select і option пропонують результати аналогічні тим, які надає послідовність радіо-кнопок, займаючи при цьому значно менше місця. Вибір елемента select замість послідовності радіо-кнопок часто є питанням того, як використовується простір інтерфейсу користувача; довгий список географічних областей або відділів на сайті е-комерції зазвичай краще підходить для елементів select, в той час як більш короткі послідовності вибору (наприклад, так/ні, true/false, діапазон віку, діапазон доходу) повинні представлятися у вигляді радіо-кнопок.
Ретельне самотестування покаже, що для маніпулювання списком select потрібен досить високий рівень точного управління рухом, але він збільшується не так істотно, в порівнянні з кількістю варіантів, які містяться в ньому. Практичний результат полягає в тому, що короткі списки взаємно виключних варіантів краще всього форматуються як послідовності радіо-кнопок з відповідним чином написаними мітками.
Обєднання послідовності елементів управління: fieldset
Основне призначення елемента fieldset полягає в завданні єдиного контексту послідовності тісно повязаних елементів управління (елементи управління text для номера телефону, елементи select для дати, і т.д.).
Тепер, коли новий матеріал цієї теми окреслено в загальних рисах, прийшов час розглянути цей матеріал в дії дванадцять наступних демонстрацій показують різні концепції дизайну і проблеми оформлення, які зустрічаються при розробці форми Web.
Читачам наполегливо рекомендується самостійно використовувати демонстраційний матеріал для експериментів з правилами таблиць стилів.
Ці демонстрації подано у порядку вихідного коду, а не в тому порядку, в якому були написані таблиці стилів. Причини і наслідки цього відхилення обговорюються надалі в темі.
Демонстрація 1
Починаючи з правила, яке містить html {margin: 0; padding: 0;}, перший крок полягає в оформленні body, що містить сторінку.
Так виглядає сторінка без додаткового оформлення.
І код відповідної сторінки.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS Technique Demonstration: Forms</title>
<link rel="stylesheet" type="text/css" href="bmh.form.styles.00.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="form_prog_styles_ie.css" /><![endif]-->
</head>
<body>
<h3>Contact Us</h3>
<form id="contactForm" method="post" action="/cgi-bin/generic_email_script.php">
<ul>
<li id="nameField" class="required"><label for="realname">Name:</label>
<input type="text" name="name" value="" class="medium" id="realname" />
<span class="note">required</span></li>
<li id="addressField" class="required"><label for="address">Email:</label>
<input type="text" name="email" value="" class="medium" id="address" />
<span class="note">required</span></li>
<li id="acctTypeField" class="required"><label for="acctNone">Account type:</label>
<fieldset>
<label for="acctGold">Gold</label><input type="radio" name="acct_type" id="acctGold" class="rInput" />
<label for="acctSilver">Silver</label><input type="radio" name="acct_type" id="acctSilver" class="rInput" />
<label for="acctBronze">Bronze</label><input type="radio" name="acct_type" id="acctBronze" class="rInput" />
<label for="acctNone">None</label><input type="radio" name="acct_type" id="acctNone" class="rInput" checked="checked" />
</fieldset>
<span class="note">required</span>
</li>
<li id="subjectField"><label for="natureOfInquiry">General subject:</label>
<select name="subject" class="medium" id="natureOfInquiry">
<option value="support">Support</option>
<option value="billing">Accounts & billing</option>
<option value="press">Press</option>
<option value="other_q">Other questions</option></select>
</li>
<li id="availabilityField"><label for="availability">My account is unavailable:</label>
<input type="checkbox" name="is_down" id="availability" class="rInput" /></li>
<li id="messageField"><label for="messageBody">Comments:</label>
<textarea name="comments" cols="32" rows="8" class="long" id="messageBody"></textarea></li>
<li class="submitField"><input type="submit" value="Send" class="submitButton" /></li>
</ul>
</form>
</body>
</html>
Форма з застосуванням оформлення body.
Додані нові стилі оформлення:
body {
margin: 0;
padding: 1.714em;
background-image: url(images/bg_grid.gif);
font-size: 14px;
font-family: Helvetica,Arial,sans-serif;
line-height: 1.714em;
}
Демонстрація 1: супутні розгляди
Демонстрація 2
Тепер, коли контейнери сторінки визначені, наступна пара кроків змінює або видаляє стилі агента користувача.
Оформлення основного заголовка і видалення небажаних прогалин.
Нові стилі оформлення:
h3 {
margin: 0 0 1.2em 0;
border-bottom: .05em solid rgb(0,96,192);
font-size: 1.429em;
line-height: 1.15em;
}
form {
width: 35.929em;
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
Демонстрація 2: супутні розгляди
(((14 x 1.429) 1.15) + (20 x 0.05)) ≈ 24
14 * 1.429 ≈ 20; 20 * 1.15 == 23; 20 * 0.05 == 1;
(20 x 1.2) = 24
Демонстрація 3
Тепер задання контейнерів для елементів форми.
Оформлення елементів списку (контейнери пар мітка/значення) і fieldset:
Нові стилі оформлення:
li {
clear: both;
height: 1.714em;
margin: 0;
}
fieldset {
height: 1.429em;
margin: 0 0 -.143em 0;
border: 0;
}
Демонстрація 3: супутні розгляди
Створення сітки
Одним з найбільш значних підсилень гарного графічного дизайну (і разом з цим, хорошого дизайну інтерфейсу) є те, що обєкти розміщуються з передбачуваними інтервалами. Ці інтервали зазвичай називають сіткою.
Як зазначалося вище, атомарна одиниця виміру демонстраційної форми має форму квадрата в 24 пікселя, але для отримання однорідного компонування потрібно щось більше, ніж розміщення елементів дизайну з невеликими, передбачуваними інтервалами.
Істинно ефективна сітка має такі характеристики:
Компонування, які демонструють такі характеристики, є більш привабливими і легшими для відстеження, що забезпечує більшу зручність використання сайту.
Створення структури сітки в композиції
Більшість професіоналів для створення композицій компонування сайту використовують інструмент Adobe Photoshop, і однією з його переваг є легкість доступу до ліній сітки, які він надає. Для виведення атомарної сітки в Photoshop можна вибрати View → Show → Grid, що призведе до виведення ліній сітки з інтервалами, заданими в Guides & Grid Preferences. Накладення напрямних для таких обєктів, як стовпці, реалізується потім вибором View → Rulers, перемиканням на інструмент Move, і перетягуванням вказівника з лінійки потрібним чином.
Реалізація сітки в таблиці стилів
Як зазначається у темі про оформлення тексту що підкріплюється декількома правилами, включеними в демонстраційну таблицю стилів кращим способом реалізації атомарної сітки в компонуванні є використання одиниць виміру em. Однак, лише цього буде недостатньо; оформлювач повинен також зберігати правильними свої перетворення простих дробів у десяткові при роботі з альтернативними розмірами шрифтів, пробілами і рамками.
Інша техніка реалізації сіток показана в демонстраційній таблиці стилів: створення маркерів class, які можуть посилатися на різні розміри елементів і стовпців в документі. При систематичному застосуванні ці маркери виконують велику частину роботи з реалізації сітки.
Демонстрація 4
Збереження обєктів вирівняними по сітці означає привласнення властивостей компонування міткам і елементам керування форми.
Вирівнюємо два основних стовпця:
Нові стилі оформлення:
label {
display: block;
float: left;
clear: left;
width: 10.286em;
overflow: auto;
padding-right: 1.714em;
text-align: right;
}
input {
height: 1.143em;
border: .071em solid rgb(96,96,96);
padding: .071em;
line-height: 1;
}
Демонстрація 4: супутні розгляди
Правило третин
Мал.1. Сцена ранньої весни в Портленді, Орегон. На цю фотографію були накладені лінії, що ілюструють Правило третин, зверніть увагу, як нижній правий перетин і лінії, які його формують, обмежують видиму діяльність.
При розгляді, що формує гарну композицію, існує майже універсальний прийом: якщо розділити компоновку чи ілюстрацію на третини, то можна виявити, що глядачі прагнуть зосередити свою увагу на лініях (і особливо на перетинах цих ліній), які складають ці розділи. Якщо ця особливість сприйняття не використовується, то може виникати відчуття незбалансованого компонування.
Найпростіше пояснення цього феномену полягає в тому, що ці чотири лінії найближче відповідають сітці, яка слідує Золотому перетину, пропорції, яка дорівнює приблизно за значенням однієї шостої. Золотий перетин часто зустрічається в різних галузях математики і в природі.
Мал.2. Знімок з екрану msnbc.msn.com з накладеними першими сімома золотими прямокутниками. Розміри четвертого і пятого прямокутників ілюструють природу сітки компонування сторінки в цілому
Форма демонстрації була розміщена таким чином, щоб елементи керування форми були б вирівняні по лівому полю, розміщеному на одній третині відстані уявного правого краю форми як цілого; такий вибір був зроблений продумано. Значно менш продумана вертикальна композиція форми коли в розрахунок приймається заголовок, текстові поля розбиваються на два рядки, описані в попередньому параграфі. Навіть якщо заголовок не враховується, необхідні поля відсікаються в самі верхні з цих рядків.
Важливий момент для оформлювача полягає в тому, що якщо Правило третин і сітку прийняти в розрахунок до початку роботи над таблицею стилів, то завдання нормалізації таблиці стилів може істотно спрощуватися.
Демонстрація 5
Щоб гарантувати, що створена сітка зберігається як по вертикалі, так і по горизонталі, необхідно розглянути деякі особливості. Ці зміни майже повністю мають косметичний характер.
Злегка змінюємо уявлення елементів управління textarea і select:
Нові стилі оформлення:
textarea {
height: 4.714em;
margin-bottom: .286em;
border: .071em solid rgb(96,96,96);
padding: 0;
}
select {
display: block;
float: left;
height: 1.571em;
font-family: Futura,'Century Gothic',sans-serif;
}
option {
font-size: 100%;
}
Демонстрація 5: супутні розгляди
Демонстрація 6
Попередня демонстрація маніпулює поданням деяких шрифтів; тепер необхідно закінчити цю роботу.
Нормалізуємо подання елементів управління text і налаштуємо результат каскадування на тексті елементів управління select.
Нові стилі оформлення:
input, textarea {
display: block;
float: left;
overflow: hidden;
font-family: Futura,'Century Gothic',sans-serif;
font-size: 1em;
}
input, textarea, select {
margin-top: 0;
font-size: 100%;
}
Демонстрація 6: супутні розгляди
Демонстрація 7
Необхідно змінити ширину різних текстових елементів управління, яка використовується за замовчуванням.
Змінюємо ширину текстових елементів управління, щоб зробити їх більш зручними для використання або, принаймні, більш узгодженими.
Нові стилі оформлення:
.medium {
width: 11.714em;
}
select.medium {
width: 12em;
}
.long {
width: 20.429em;
}
.rInput {
border: 0;
}
Демонстрація 7: супутні розгляди
Демонстрація 8
Кнопка відправки форми була млявою
Точно налаштовуємо позицію кнопки відправки форми.
Нові стилі оформлення:
.submitButton {
display: block;
clear: both;
width: 7.2em;
height: 2em;
margin: 0 0 0 16.8em;
border: 1px solid rgb(128,128,128);
padding: 0;
font-size: 10px;
text-align: center;
}
Демонстрація 8: супутні розгляди
Демонстрація 9
Розмістимо “необхідні” теги там, де вони повинні знаходитися.
Вирівнюємо “необхідні” теги до уявного правого поля форми, і змінюємо їх текстові властивості.
Нові стилі оформлення:
li.required span.note {
display: block;
width: auto;
float: right;
color: rgb(128,128,128);
font-size: .714em;
line-height: 2.4em;
font-style: italic;
}
Демонстрація 9: супутні розгляди
Демонстрація 10
Нарешті прийшов час залагодити конфлікти елементів управління radio з полями під ними у порядку вихідного коду.
Вирівнюємо елементи управління radio та їх мітки по горизонталі.
Нові стилі оформлення:
fieldset label {
margin-right: .25em;
padding-right: 0;
line-height: 1;
}
fieldset .rInput {
margin-right: .75em;
}
fieldset label, fieldset .rInput {
width: auto;
display: inline;
float: none;
font-size: .857em
}
li.required fieldset {
width: 18.857em;
float: left;
}
Демонстрація 10: супутні розгляди
Робимо коректування остаточного компонування для різних елементів управління.
Нові стилі оформлення:
#acctTypeField fieldset {
padding: .286em 0 0 0;
line-height: normal;
}
#acctTypeField .rInput {
margin-top: .167em;
}
#availabilityField label {
height: 3.143em;
padding-top: .286em;
line-height: normal;
}
#availabilityField .rInput {
margin-top: .286em;
}
#availabilityField, #messageField {
height: 1%;
overflow: auto;
}
Демонстрація 11: супутні розгляди
Демонстрація 12
Всі попередні стилі оформлення були розроблені для Opera або Safari (вибирайте, обидва браузера ведуть себе відносно добре). Далі слідують правила спеціально створені для Internet Explorer, визначені у файлі CSS, приєднаному (link) в умовному блоці коментаря.
Робимо останню множину змін для Internet Explorer:
Нові стилі оформлення:
h3 {
margin-bottom: 1.2em;
}
li {
margin: 0 0 -0.214em 0;
}
select {
height: 1.429em;
}
textarea {
height: 4.571em;
}
fieldset {
height: 1.583em;
padding-top: 0.417em;
}
.medium {
width: 13.429em;
}
select.medium {
width: 13.714em;
}
.long {
width: 20.286em;
}
fieldset .rInput {
border: 0 !important;
}
#subjectField {
margin-bottom: -0.214em;
}
#availabilityField .rInput {
margin-top: 0.286em;
}
#messageField {
padding-bottom: 0.286em;
}
input.submitButton {
margin-top: 0.15em;
}
* html input, * html textarea {
float: left;
}
* html select {
font-size: 0.643em;
}
* html select.medium {
width: 21.364em;
}
* html textarea {
height: 4.643em;
}
* html #subjectField {
margin-top: 0.071em;
margin-bottom: 0;
}
* html #availabilityField label {
padding-top: 0;
}
* html input.submitButton {
margin: .1em 0 0 7em;
}
Демонстрація 12: супутні розгляди
Останній розділ демонстрації показує різновид стилів оформлення, відкладених для Internet Explorer 6 і 7, і вимагає обговорення, наскільки широко різні браузери розглядаються сумлінною командою розробників сайту.
Реальність Web полягає в тому, що користувачі використовують безліч всіляких браузерів у всіляких робочих середовищах. Деякі з них є старими, в той час як інші перебувають на передньому краї розвитку. Деякі виконуються на повнофункціональних компютерах, в той час як інші виконуються на мобільних пристроях, таких як телефони. Всі вони розроблені в певних операційних системах, а потім перенесені на інші з різним ступенем підтримки стандартів. За винятком Opera, всі постачальники браузерів, постачають продукти, які створюються для використання разом з іншими продуктами в більш широких пакетах вимога розробки, яка робить ці браузери більш складними, ніж потрібно для єдиного завдання перегляду Web. Неначе б було недостатньо розгляду безлічі сильних і слабких сторін браузерів, але існує також питання помилок помилок системи безпеки, помилок компонентів, і, особливо, помилок візуалізації. Користувачі Safari 3.x виявили, що в певний момент документ демонстрації виявляє руйнівну помилку візуалізації в їх власному браузері. Кращим способом вирішення таких питань є визначення рівнів підтримки. Така практика була вперше проголошена командою розробки інтерфейсу в Yahoo!, які назвали її “Ранжированою підтримкою браузерів”.
Зазвичай рівні підтримки потрапляють в чотири широкі категорії:
Особливості процесу збору вимог, який формує визначення рівнів підтримки і розподіляє по них браузери, були б тривалими і нудними, і тому були виключені з цієї й так довгої теми.
Серед базових зауважень, наведених вище, стверджувалося, що демонстрація була представлена в порядку вихідного коду таблиці стилів, а не в тому порядку, в якому правила були фактично додані в таблицю стилів. Причини цього наступні:
Як агент користувача під час розробки використовувався браузер Opera 9.6 для OS X; з урахуванням цього застереження і зазначених вище інших зауважень, нижче представлений загальний порядок, в якому зміни і доповнення були зроблені в таблиці стилів:
Описаний безпосередньо вище процес починається з найбільш широко застосовуваних правил, і звужується в специфічності до розгляду індивідуальних особливостей окремих браузерів … здебільшого в порядку вихідного коду самої таблиці стилів. Однак, результати корелюють не точно. Це відбувається, тому що різні процесори візуалізації та особливості таких обєктів, як плаваючий контекст, приносять майже непередбачені наслідки, коли змішуються в загальновідому суміш, тому реальний процес вимагає більше, ніж невеликої зміни, підстроювання і перегляду.
Ця тема містить достатню підставу для оформлення і компонування форм, але можна піти ще далі. Труднощі, створювані операційними системами (компоненти яких запозичуються для створення елементів керування форми Web), і відмінності між процесорами візуалізації, створюють додаткові проблеми при постановці завдання перед оформлювачем, якому потрібно створити форму Web згідно специфікації. Ця глава відкриває двері до експериментування з безліччю особливостей, повязаних із завданням, і розяснює спосіб досягнення достатнього рівня майстерності в одному з найбільш важких аспектів розробки додатків Web.
У наступній таблиці цифри, що знаходяться в дужках із зірочкою після них, нескінченно повторюються; наприклад, 0.2 (6 *) еквівалентно 0.266666666666666 … (6 повторюється нескінченно).
Найближчі до нуля значення перебувають у таблиці ліворуч, і наближаються до одиниці в таблиці при русі зліва направо.
x |
1/x |
2/x |
3/x |
4/x |
5/x |
6/x |
7/x |
8/x |
9/x |
10/x |
11/x |
12/x |
13/x |
14/x |
15/x |
2 |
.5 |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
3 |
.(3*) |
.(6*) |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
4 |
.25 |
.5 |
.75 |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
5 |
.2 |
.4 |
.6 |
.8 |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
6 |
.1(6*) |
.(3*) |
.5 |
.(6*) |
.8(3*) |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
7 |
.(142857*) |
.(285714*) |
.(428571*) |
.(571428*) |
.(714285*) |
.(857142*) |
- |
- |
- |
- |
- |
- |
- |
- |
- |
8 |
.125 |
.25 |
.375 |
.5 |
.625 |
.75 |
.875 |
- |
- |
- |
- |
- |
- |
- |
- |
9 |
.(1*) |
.(2*) |
.(3*) |
.(4*) |
.(5*) |
.(6*) |
.(7*) |
.(8*) |
- |
- |
- |
- |
- |
- |
- |
10 |
.1 |
.2 |
.3 |
.4 |
.5 |
.6 |
.7 |
.8 |
.9 |
- |
- |
- |
- |
- |
- |
11 |
.(09*) |
.(18*) |
.(27*) |
.(36*) |
.(45*) |
.(54*) |
.(63*) |
.(72*) |
.(81*) |
.(90*) |
- |
- |
- |
- |
- |
12 |
.08(3*) |
.1(6*) |
.25 |
.(3*) |
.41(6*) |
.5 |
.58(3*) |
.(6*) |
.75 |
.8(3*) |
.91(6*) |
- |
- |
- |
- |
13 |
.(076923*) |
.(153846*) |
.(230769*) |
.(307692*) |
.(384615*) |
.(461538*) |
.(538461*) |
.(615383*) |
.(692307*) |
.(769230*) |
.(846153*) |
.(923076*) |
- |
- |
- |
14 |
.0(714285*) |
.(142857*) |
.2(142857*) |
.(285714*) |
.3(571428*) |
.(428571*) |
.5 |
.5(714285*) |
.6(428571*) |
.(714285*) |
.7(857142*) |
.(857142*) |
.9(285714*) |
- |
- |
15 |
.0(6*) |
.1(3*) |
.2 |
.2(6*) |
.(3*) |
.4 |
.4(6*) |
.5(3*) |
.6 |
.(6*) |
.7(3*) |
8 |
.8(6*) |
.9(3*) |
- |
16 |
.0625 |
.125 |
.1875 |
.25 |
.3125 |
.375 |
.4375 |
.5 |
.5625 |
.625 |
.6875 |
.75 |
.8125 |
.875 |
.9375 |
А также другие работы, которые могут Вас заинтересовать | |||
65534. | МАЛЕ ПІДПРИЄМНИЦТВО В СИСТЕМІ РЕГІОНАЛЬНОГО РОЗВИТКУ | 322 KB | |
Хоч протягом усього пeрiоду ринкових рeформ в eкономiчнiй лiтeртурi бгто увги придiлялося проблeмм розвитку в Укрїнi млого бiзнeсу лe його стн всe щe злишється нeздовiльним. Проблeм полягє нвiть нe в кiлькiсних прмeтрх функцiонувння цiєї сфeри якi поступово полiпшуються нсмпeрeд у структурi вiтчизняного... | |||
65535. | Інформаційна технологія синтезу моделей систем управління автоматизованими процесами | 1.05 MB | |
При створенні нових інформаційних технологій ІТ сучасні компютери та різні спеціалізовані математичні моделі слугують фундаментом побудови нових методів перетворення інформації для складних систем управління ССУ. | |||
65536. | РЕФРАКЦІЙНА КЕРАТОПЛАСТИКА АМЕТРОПІЙ (ВДОСКОНАЛЕННЯ ТЕХНОЛОГІЇ, ПРОГНОЗУВАННЯ РЕЗУЛЬТАТІВ, ПОПЕРЕДЖЕННЯ РОЗВИТКУ УСКЛАДНЕНЬ) | 389.5 KB | |
Тенденції світової офтальмохірургії за останні роки переконливо свідчать про бурхливий розвиток керато-рефракційної хірургії заснованої на моделюванні передньої поверхні рогівки шляхом пошарового її зрізання методом кератомільозу. | |||
65537. | АВТОМАТИЧНИЙ КОНТРОЛЬ СТУПЕНЯ ЗДРІБНЕННЯ РУДИ В ТЕХНОЛОГІЧНИХ КОМПЛЕКСАХ ФЛОТАЦІЙНОГО ТА МАГНІТНОГО ЗБАГАЧЕННЯ | 272.5 KB | |
Завданням автоматизації здрібнення перед флотаційним або магнітним збагаченням є розкриття руд зі змінними фізикомеханічними властивостями тобто здрібнення їх до такої оптимальної крупності при якій частки корисного мінералу дезінтегруються з порожньою породою... | |||
65538. | Етіопатогенетичне обґрунтування способу лікування карієсу у дітей молодшого шкільного віку | 156 KB | |
Карієс зубів обумовлений прогресуючою демінералізацією зубних тканин викликаною кислотоутворюючими автохтонними бактеріями ротової порожнини серед яких найбільший карієсогенний потенціал мають стрептококи. | |||
65539. | МІЦНІСТЬ ТА ДЕФОРМАЦІЇ ЗАЛІЗОБЕТОННИХ ЕЛЕМЕНТІВ З ВИСОКОМІЦНОГО БЕТОНУ З УРАХУВАННЯМ ТРИВАЛОСТІ НАВАНТАЖЕННЯ І НЕРІВНОМІРНОГО НАГРІВАННЯ ДО +200 С | 5.05 MB | |
Для даного часу характерна характерною тенденціэю тенденцією в будівельній галузі є інтенсивний розвиток висотного будівництва з монолітного залізобетону із застосуванням сучасних високоякісних бетонів які мають високі характеристики міцності... | |||
65540. | ЕФЕКТИВНІСТЬ ВІДНОВЛЕННЯ СИНУСОВОГО РИТМУ У ХВОРИХ З ТРІПОТІННЯМ ПЕРЕДСЕРДЬ МЕТОДОМ ЧЕРЕЗСТРАВОХІДНОЇ ЕЛЕКТРОКАРДІОСТИМУЛЯЦІЇ | 183.5 KB | |
Тріпотіння передсердь – одне з найбільш поширених порушень серцевого ритму, яке складає біля 10 % від всіх пароксизмальних надшлуночкових тахіаритмій. Воно є частим ускладненням гострого інфаркту міокарда і хірургічних втручань на відкритому серці. | |||
65541. | ПОЛІТИЧНІ ЦЕНТРИ ВПЛИВУ НА ЄВРОПЕЙСЬКОМУ КОНТИНЕНТІ: ВНУТРІШНЬОДЕРЖАВНІ ТА МІЖДЕРЖАВНІ ВИМІРИ | 172 KB | |
Прискорення глобалізаційних процесів у світі загалом та у Європі зокрема поставили перед сучасною політичною наукою питання актуалізації та перегляду існуючих моделей політики, владних відносин тощо. Головними проблемами в цьому аспекті стали питання гармонізації політики... | |||
65542. | РОЗРОБКА ТЕХНОЛОГІЧНИХ ТА ОРГАНІЗАЦІЙНИХ РІШЕНЬ РЕМОНТУ ТА ВІДНОВЛЕННЯ ВОДОПРОВІДНИХ ТРУБОПРОВОДІВ | 8.81 MB | |
Трубопровідні системи які транспортують воду для будьякого населеного пункту є найдорожчими і найуразливішими частинами інженерної інфраструктури. Як свідчать результати досліджень велика кількість водопровідних трубопроводів країн СНД у тому числі України... | |||