Розуміння CSS і сучасного Вебу

17

Від автора: Важливо, що Веб сьогодні залишається тим же, чим був завжди—доступною інформацією. На відміну, однак, від своїх ранніх днів, коли він був всього лише підбіркою текстових файлів—сучасний Веб доріс до підтримки численних медіаформатів і зараз, більш ніж коли-небудь, багатьох різних способів доступу до інформації.

Ви більше не сидите біля настільного комп’ютера для того, щоб увійти в мережу. Сьогодні ви валяєтеся на пляжі, читаючи новини з планшета, йдете з лептопом в руках в кафе поговорити з друзями з різних країн і намагаєтеся втриматися від сміху при вигляді кішок, які грають на клавіатурі, дивлячись в смартфон під час поїздки на поїзді. Інформації в мережі практично нескінченна кількість (створюється набагато більше вмісту, ніж ви зможете коли-небудь освоїти), і способи отримання доступу до неї продовжують збільшуватися.

Перебувати в середовищі сучасного Вебу – хвилююча справа. Він постійно росте, а за ним ледве встигають технології.

Що таке CSS?

Каскадні таблиці стилів (CSS) – це проста мова, визначає стилі, які можна застосувати до HTML. Там, де HTML описує структуру веб-сторінки, CSS описує її подання.
Міжнародне співтовариство під назвою World Wide Web Consortium (W3C) створює і підтримує специфікації CSS, в яких визначається і стандартизується спосіб, яким ви повинні писати мова CSS, і браузерні вендори (ті, хто робить веб-браузери) повинні забезпечувати його виконання. Так як CSS специфікація з моменту її подання в 1996р. сильно підросла, то її остання версія, CSS3, була розбита на модулі з тим, щоб кожен з них визначав частина CSS, полегшуючи підтримку всієї специфікації.

Специфікації CSS можна знайти на www.w3.org/Style/CSS/. Так як вони написані дуже технічною мовою та дуже докладні, то можуть збити вас з пантелику. Я знаю, про що кажу! Хоча час від часу до них корисно звертатися, вам ні в якому разі не обов’язково їх читати. У книзі «Принципи CSS3» прийнятий набагато більш спрощений і дружній підхід до розуміння CSS3.

Перед тим, як детальніше розглянути те, що може запропонувати нам CSS, слід зрозуміти їх поточний стан. Ви помітили, що я говорю як про CSS, так і про CSS3. В чому різниця?

CSS відноситься до всіх трьох рівнів специфікації: CSS рівня 1 (CSS1), CSS Рівень 2 (CSS2) і CSS Рівень 3 (CSS3). Кожен рівень CSS збудований на базі свого попередника. Початок шляху CSS2 було хитким і виявилося безліч проблем, що призвело до перегляду цієї специфікації та випуску CSS2.1. Тому CSS3 містить аспекти свого попередника CSS2.1, а CSS2.1 – аспекти CSS2 і CSS1.
Хоча кожен CSS заснований на попередньому, рекомендується не застосовувати окремі властивості попереднього рівня там, де це суттєво. Іншими словами, при зверненні до CSS3 ви насправді звертаєтеся до будь-яких властивостей, доступним у всіх CSS, крім нерекомендовані.

З «Принципів CSS3» ви дізнаєтеся про таке CSS3, який включає не тільки нові можливості, але і властивості попередніх рівнів CSS, на які досвідчені дизайнери і розробники покладалися роками.

Роль CSS

Основна мета CSS складається у відділенні структури (HTML) від її подання (CSS). На малюнку 1-1 показана веб-сторінка, що складається з одного HTML, без CSS.

Розуміння CSS і сучасного Вебу

На малюнку 1-2 показана та ж сторінка застосованим до неї CSS—видна величезна різниця, від якої сторінка стає набагато привабливішою.

Розуміння CSS і сучасного Вебу

У початковий період призначення стилів веб-сторінок структура і уявлення були змішані. Подання безпосередньо додавалося до структурі, а отже, технічна підтримка сторінок була складним завданням. Якщо, приміром, хтось вирішував, що основний заголовок кожної сторінки потрібно змінити з чорного на синій, а сайт складався з десяти сторінок, вам доводилося міняти стиль цього заголовку 10 разів.

У відділенні структури від подання криється безліч переваг:

Каскадну таблицю стилів можна спільно використовувати для безлічі веб-сторінок.

Сайти простіше підтримувати і вони стають більш гнучкими.

Застосовані до сторінки стилі можна перекроювати так, щоб ті підходили до безлічі пристроїв/умов.

У сучасному Вебі роль CSS ще важливіше, ніж коли-небудь. Так як технології просунулися, а способи отримання доступу до мережі стали більш різноманітними, CSS повинен розвиватися так, щоб відповідати як бажанням користувачів, що хочуть отримувати доступ до інформації, так і розробників, які хочуть представляти цю інформацію певним способом. Я кажу «розробники», а насправді маю на увазі «хто завгодно». Веб – не тільки для технарів. Відкрита інформація призначена для всіх, і CSS намагається бути якомога легшим і відкритим у вживанні, дозволяючи будь визначати стилі інформації.

Найважливіший аспект CSS – зворотна сумісність. Так як кожен новий рівень специфікації ґрунтується на попередньому, він продовжує гарантувати повну сумісність з попередніми версіями. Хоча властивості іноді стають нерекомендуемыми, в нинішніх браузерах вони все одно працюють, тому що нові рівні тільки додають функціональність або покращують існуючу. При роботі в зворотному напрямку в першу чергу, у специфікації є шанс прокласти собі міцний шлях у майбутнє.

Для розвитку мережі, збільшення доступності та поліпшення показу інформації CSS3 пропонує багато нових можливостей. При назрілої потреби в різних способах входу в мережу, одним з найбільш важливих властивостей CSS3 став модуль медиазапросов Media Queries, який ґрунтується на типах пристроїв.

Коли був розроблений CSS2, стало ясно, що надавати різні стилі слід на базі доступу до веб-сторінками, так як виникли типи пристроїв. Вони дали можливість визначати різні стилі для різних пристроїв, таких як монітор (призначених для кольорових комп’ютерних дисплеїв), роздруківка (призначених для принтерів і друкованих документів) і портативних (призначених для пристроїв з маленькими екранами з обмеженою шириною смуги пропускання).

Сьогодні при такому кількостей переносних пристроїв у продажу визначення тих, які входять в категорію портативних, звичайно, недостатньо описово. Точно так само дисплеї десктопів теж сильно відрізняються за своїми характеристиками.

Модуль медиазапросов CSS3 ґрунтується на типах пристроїв, даючи розробнику можливість з’ясовувати певні аспекти (такі як ширина і висота) пристрою і оточення, в якому проглядається веб-сторінка, і призначати застосовані стилі тільки тоді, коли вони відповідають певним умовам.

Крім того, специфікацією додаються нові характеристики відображення сторінок, такі як градієнти і закруглені кути, полегшують виконання завдань, над якими роками билися розробники, більша кількість способів вибору елементів, яким слід призначити стилі званих селекторами), і веб-шрифти, що дозволяє збільшити кількість безпечних у застосуванні шрифтів з десятків до тисяч—якщо не десятків тисяч!

Робочий проект і процес CSS

На час написання цього тексту повна специфікація CSS3 ще не закінчена. Для полегшення читання і застосування вона розбита на модулі. Тоді як одні модулі закінчені, інші все ще пишуться або тестуються. Модулі проходять різні стадії, визначають, наскільки ті далекі від завершення, а також службовці індикатором, потрібно чи вам їх застосовувати:

Working Draft — Незавершений модуль, все ще знаходиться в роботі.

Last Call — Модуль вважається завершеним. Перейде в стадію Candidate Recommendation, якщо не виявляться значні проблеми.

Candidate Recommendation — Всі відомі проблеми усунені, і можливості модуля готові до виконання в веб-браузерах.

Proposed Recommendation — Властивості виконуються щонайменше у двох веб-браузерах, сам модуль в останній раз перевірений членами W3C.

Recommendation — Модуль готовий.

При впровадженні можливостей модулів Working Draft або Last Call, їх слід застосовувати з вендорным префіксом; таким чином для запобігання несумісності забезпечується використання експериментальних властивостей, якщо в майбутньому в модулях відбудуться зміни.

В 5 Розділі ви дізнаєтеся, що таке вендорные префікси і як їх застосовувати. Додатково інформацію про процесі CSS можна знайти на www.w3.org/Style/2011/CSS-process#rectrack.

У загальному і цілому, CSS3 полегшує створення веб-сторінок і робить цей процес більш захоплюючим, ніж коли-небудь. Отже, якщо специфікація перебуває в статусі Working Draft, чи можна її застосовувати?
Звичайно! Сучасні браузери вже відмінно підтримують CSS3, і чим швидше ви почнете його застосовувати, тим швидше зможете забезпечити зворотну реакцію і тим удосконалити CSS. W3C складається не тільки з організацій-членів і постійних співробітників, але й громадськості. Застосовуючи CSS3 сьогодні, ви можете внести свій внесок у його майбутнє. Просте використання властивості CSS3 ставить на ньому штамп «схвалено».

Ви навчитеся застосовувати принципи CSS3 безпечним способом, сумісним як з існуючими браузерами, які мають або не мають підтримки CSS3, і майбутніми браузерами, коли справа доходить до властивостей, переопределяемых згідно попередньої специфікації по досягненні ними статусу Recommendation.

Сучасні браузери

Веб-браузер за своєю суттю – це рушійний механізм, який передає HTML, CSS та інші технології, перетворюючи їх у функціонуючу веб-сторінку. Також браузери пропонують такі властивості, як установка закладок, управління історією, інструменти розробки і безліч інших, включаючи підтримку доповнень, що дозволяють розширити можливості.

Отже, яким браузером слід користуватися для створення свого web-сайту? Всіма! Звичайно, прямо зараз не потрібно їх все скачувати, але важливо тестувати створювані вами вебсайти в широкому діапазоні браузерів (і пристроїв).

Основні сучасні браузери

Зараз ми маємо в своєму розпорядженні п’ятьма основними браузерами. Вони створені організаціями—часто званими браузерних вендорами, або коротко вендорами—і надаються безкоштовно для скачування і використання.

Google Chrome

Apple Safari

Mozilla Firefox

Opera (і браузер, і вендор називаються Opera)

Microsoft Internet Explorer

Особисто я люблю створювати вебсайти в Chrome. Думаю, його інструменти розробки – найпридатніші для методів моєї роботи, і часто при впровадженні останніх властивостей CSS випереджають інші браузери.

У цій книзі в якості основного браузера я скрізь використовую Chrome (і тестую інші браузери в Главі 15). Для застосування при створенні веб-сторінки раджу уникати Microsoft Internet explorer’а версій 7-9, тому що його можливості не настільки стабільні, як у інших перерахованих, але можете при бажанні спокійно користуватися Safari, Firefox ом або Opera. Інструменти розробки, що застосовуються мною і до яких я роблю відсилання, схожі у всіх браузерах, і я не користуюся тими властивостями, яких не існує в інших браузерах.

Під час написання книги став доступний для превью, але офіційно ще не випущений Microsoft Internet Explorer 10.

Браузерні движки (движки розмітки)

Корисно знати, які движки підтримують ці браузери:

WebKit — Цим механізмом з відкритим вихідним кодом користуються і Google Chrome, Apple Safari. Однак, застосовуючи один движок, здійснювати виконання ці браузери можуть трохи по-різному, тому не чекайте від одного з них в точності такого ж відображення сторінки, як у іншого. Для спокою завжди робіть тестування в обох. При всьому цьому узгодженість цих браузерів дуже хороша. Браузер Android теж використовує WebKit, що разом з Safari (застосовуваний у продуктах Apple’а – iphone’ов е, ipad е і ipod е) робить його самим використовуваним браузерних движком мобільних пристроїв.

Gecko — Mozilla Firefox застосовує Gecko, ще один проект з відкритим вихідним кодом.

Presto — Доступний тільки як частина продукції Opera.

Trident — Доступний тільки як частина продукції microsoft ‘ а.

Ці механізми застосовуються не тільки в настільних і мобільних браузерах, але і інших продуктах, таких як поштові клієнти і редакторська програмне забезпечення.

Статистика застосування браузерів

Хоча браузери викачуються і використовуються безкоштовно, ринок веб-браузерів – дуже конкурентна містечко. Як вже згадувалося, всі вендори намагаються сприяти просуванню Веба, але крім того, вони намагаються багато чого отримати від користувачів свого конкретного браузера. У деяких вендорів є інші, прибуткові продукти. Чим більшу частину ринку вони займають, тим більше можуть продавати своїх продуктів і послуг.

У таблицях 1-1 і 1-2 представлена статистика застосування браузерів, надана www.netmarketshare.com у липні 2012р. (час написання даного тексту).

Розуміння CSS і сучасного Вебу

Старі браузери в сучасному Інтернеті

На жаль, сучасна Мережа—з усіма її чудовими новими можливостями—тягне на собі зайвий багаж у вигляді все ще застосовуються сьогодні старих веб-браузерів. Хоча W3C, браузерні вендори і веб-індустрія працюють над просуванням вперед, існує безліч користувачів, які або не знають, або не можуть прийняти зміни. До того, як розглянути, які з ще використовуваних браузерів можна вважати застарілими, в Таблиці 1-3 показано розподіл часток ринку окремо.

Розуміння CSS і сучасного Вебу

Як і для мене, ця статистика може виявитися для вас несподіваною. У Internet explorer’а 8 найбільша частка ринку, більш 25%? На те є кілька причин. Internet Explorer йде в пакеті з Microsoft Windows, яка є найбільш використовуваною операційною системою. Багато заходять в Мережу за допомогою Internet explorer’а, навіть не знаючи, що існують інші браузери. Крім того, вони не оновлюють свій браузер, тому що або не знають, що таке можливо, або використовують надто стару техніку, та зробити цього не можна. Слід звернути увагу, що Internet Explorer 9 доступний тільки користувачам Windows Vista і Windows 7. Багато користувачів все ще користуються Windows XP, яка обмежена Internet explorer’ом 8. Це пояснює, чому він став веб-браузером номер один, незважаючи на те, що Internet Explorer 9 знаходиться на ринку з 2011р.

А зараз сенсація: Internet Explorer 6, 7 і 8 – старі браузери, незважаючи на те, що займають значну частку ринку. Хоча кожен з них перевершує попередній, підтримка стандартизованого CSS у них погана. Версії 6 і 7 виконують CSS 2.1, але не надто добре. У версії 8 хороша підтримка CSS 2.1, але погана — CSS3.

Однак і в кінці цього тунелю з’явилося світло. Хоча в Internet explorer’а 6 згідно з цією статистикою, приблизно 6% частка, багато хто з користувачів, що знаходяться в Азії, тому якщо ваш сайт не призначений для даної аудиторії, то можете анулювати цю статистику. Internet Explorer 6 – настільки старий браузер, і такий проблемний для майбутнього Мережі, що навіть Microsoft намагається за допомогою сайту www.ie6countdown.com повідомити своїх користувачів, що його можна оновити. На цьому сайті також підтверджується, що Азія (зокрема, Китай зі своєю 22,4% часток) вносить величезний внесок у 7% світової статистики.

Крім Internet explorer’а версій 6, 7 і 8, єдиним застарілим браузером з часткою більше 1% є Mozilla Firefox 3.6. У нього хороша підтримка CSS2.1 і CSS3, і він ні в якому разі не проблемний браузер, але до часу написання цього тексту версії Firefox – вже двозначні, остання – 14-я. Ви можете пробачити визнати, що не потрібно тоді тестуватися у версії 3.6 із-за того, що вона така несучасна, але я дуже рекомендую це робити в Firefox 3.6 тому, що його частка ринку займає більше 1% (зазвичай браузер з часткою менше 1% вже вважається зайвим), і вам потрібно це робити до закінчення принципів CSS3.

Так як же ви справляєтеся зі старими браузерами, які все ще є значною частиною сучасного Вебу? Важливо пам’ятати, що мережа – це відкрита інформація, і зробити її доступною для якомога більшої кількості людей – ваша робота. Не можна ігнорувати користувачів старих браузерів, але і забезпечити їм той же рівень можливостей, які ви гарантували б користувачеві сучасного веб-браузера, нереально. І все ж хотілося б показати красу створеної вами сторінки хоча б на тому рівні, який здатний підтримувати їх браузер.

Скажімо, ви застосували якісь властивості CSS3, такі як закруглені кути і фонові градієнти. Застарілий браузер їх не розуміє, отже, не може відобразити. Замість цього він показує просто квадратні кути і щільний фон, як видно на Рисунках 1-3 і 1-4.

Розуміння CSS і сучасного Вебу

Розуміння CSS і сучасного Вебу

Це явище відоме як поступова деградація. Браузер не підтримує CSS3, просто відкочує властивість назад до того рівня, який в ньому підтримується. Його користувач бачить веб-сторінку з красивими стилями, і ще не факт, що в сучасному браузері вона краще, навіть можуть відображатися додаткові тонкощі. Нічого не зіпсовано, і ніщо не впливає на спосіб взаємодії користувача з сторінкою.

Є ще одна подібна техніка, відома як прогресивне поліпшення, але в чому їх різниця? Поступова деградація розрахована в першу чергу на сучасні браузери, а потім вже забезпечує обхідні маневри для застарілих, тоді як прогресивне поліпшення діє зворотнім чином: починає зі старих браузерів, а потім додає нові характеристики для сучасних.
Який з підходів вибрати? Соромно даремно витратити весь праця, витрачена на просування мережі. Застосовуючи поступову деградацію, ви поставите на перше місце її майбутнє, гарантуючи при цьому підтримку відсталої частини Веба.

Що стосується Internet explorer’а 6, ви може вирішити його повністю проігнорувати, просто тому, що він занадто старий і проблемний браузер, щоб возитися з ним. Замість витрати енної кількості часу на виправлення, як описано в Главі 15, застосуйте до Internet Explorer у 6 основні принципи CSS, при яких вміст веб-сторінки буде ідеально доступно, просто не буде занадто багато стилів. Це заощадить ваш праця (а якщо ви створюєте веб-сторінку для свого клієнта, то і гроші), а користувач зможе побачити всю представлену на сторінці інформацію тому, що, зрештою, CSS – це просто її подання.

Звичайно, якщо зараз або в майбутньому веб-сторінка створюється для платоспроможного клієнта, вам доведеться обговорювати браузерну підтримку. Аналізуючи останню статистику застосування браузерів, а також існуючу статистику клієнта з його власного вебсайту (якщо він таку веде), можна визначити, які браузери використовують користувачі сайту вашого клієнта для його перегляду і намагатися підтримувати їх на створюваному сайті.

Згідно з принципами CSS3, коли властивість відсутня у застарілому браузері, в Розділі 15 раджу вам навчитися тестувати і розглядати для них альтернативи.

Інструменти побудови та призначення стилів сучасного Вебу

У міру розростання мережі збільшується кількість доступних інструментів її побудови. Будучи поставленим перед вибором, можна легко впасти в ступор, але слід пам’ятати, що по своїй суті мережа – це просто текст. Щоб почати створювати веб-сторінку, вам потрібен лише браузер і текстовий редактор.

Інструменти розрізняються своєю вартістю – від повністю безкоштовних до декількох сотень доларів, але ні в якому разі не обов’язково найдорожчі з них є найкращими. Почати можна з відмінних інструментів, не витративши взагалі ніяких грошей.

Інструменти веб-розробки

У кожного з останніх браузерів є власні версії інструментів веб-розробки, які полегшують створення сайтів і роблять його більш ефективним.

Інструменти розробки дають вам можливість швидко переглянути елементи HTML і застосований до них CSS. Також всередині браузерних інструментів можна вносити швидкі зміни в CSS, що часто є більш швидким способом експериментування зі стилями. На Малюнку 1-5 показано інструменти розробки Google Chrome.

Пізніше ви застосуєте ці інструменти, а зараз можна познайомитися з ними, відкривши їх у вибраному вами веб-браузері.

Розуміння CSS і сучасного Вебу

Відкриття інструментів розробки в браузерах десктопів

Розуміння CSS і сучасного Вебу

До версії 10 до Firefox не додавалися вбудовані інструменти для веб-розробки. Я дуже рекомендую додаток під назвою Firebug як при відсутності інструментів до версії 10, так і замість вбудованих, доступних починаючи з неї. У Firebug більше можливостей, ніж у вбудованих інструментів, і вони більш сумісні з запропонованими в інших браузерах.
Для установки Firebug клацніть Firefox Tools ➜ Add-Ons, щоб відкрити адміністратор доповнень. Відшукайте Firebug, потім натисніть кнопку установки. Після його закачування для завершення інсталяції натисніть кнопку «Перезавантажити зараз» (або вручну закрийте і знову відкрийте Firefox).

Текстові редактори

Текстовий редактор – це інструмент, застосовуваний для написання CSS. У них також можна писати HTML, JavaScript і багато інші мови, складові Веб. Текстові редактори дають вам можливість редагувати текст. Можливо, ви очікуєте, що всі вони дуже схожі, але насправді текстові редактори випускаються з безліччю різних властивостей. Більшість – з тими, які прискорюють написання вами CSS (і інших веб-технологій). У деяких є клієнти протоколів передачі даних (FTP) і редактори «Що бачиш, те й отримуєш» (WYSIWYG).

Редактор WYSIWYG дозволяє вам побудувати вебсайт, не маючи ніякого уявлення про код. Хоча ідея здається класної, насправді це не так! При використанні таких інструментів—перетягування елементів на потрібні вам місця—редактор зобов’язаний згенерувати за вас код. Редактори такого типу рідко йдуть в ногу з останніми стандартами кодування, і ні за що не зможуть зробити його так само добре, як можете ви або я. Згенерований код майже завжди роздутий (виходить більше коду, ніж потрібно) і не здійснює на практиці відомих вам найкращих методик, що веде до поганого враженню від відвідувачів вашого сайту. Якщо у вашому текстовому редакторі є WYSIWYG (такий як в Adobe Dreamweaver), це добре; просто ігноруйте його і замість цього скористайтесь властивостями редактора тексту.

Якщо у вас поки що нічого немає, я рекомендую почати з застосування базового текстового редактора. TextEdit (для користувачів повне mac ‘ а) або Notepad (для Windows) вже вбудовані в ваш комп’ютер і ідеально прийнятні для використання. Крім редагування тексту, у них немає інших властивостей, але для початку це все, що вам потрібно.

У всій книзі «Принципи CSS3» я користуюся текстовим редактором для повне mac ‘ а під назвою Espresso.

Резюме

Веб міг би прожити і без CSS, але ніколи не став би таким доступним і красивим, як зараз. Його значення особливо нових властивостей CSS3—значно зростає по мірі зміни способів отримання доступу до мережі. CSS продовжує розвиватися, надаючи нам безліч дивовижних можливостей. Зараз відмінний час почати його вивчення.

Володіючи необхідними інструментами створення CSS і веб-сторінок, з наступної глави «Принципів CSS3» ви почнете будувати файли проектів. Взявши сторінку з Малюнка 1-1, ви перетворите її в станицю зі стилями, наведену на Малюнку 1-2.