Книга «Секрети CSS. Ідеальні рішення щоденних задач»

Привіт, Хаброжители! Ми поповнили новинкою свою серію O'Reilly:

image Гнучкий легкий код, відповідний стандартам — його можна отримати, якщо підійти до проблеми аналітично. Леа Віру познайомить вас з недокументированными прийомами, що дозволяють знайти витончені рішення для самого широкого кола завдань веб-дизайну. В основу книги лягли доповіді автора на шістдесяти міжнародних конференціях веб-розробників, так що вона зачіпає найактуальніші теми — від взаємодії з користувачем до типографіки і візуальних ефектів. Безліч книг, доступних на сьогоднішньому ринку, документують можливості CSS від A до Я. Добре це чи погано, але «Секрети CSS» — не одна з них. Її призначення — заповнити прогалини в знаннях, що залишилися після того, як ви вже ознайомилися з довідковими матеріалами, відкрити ваш розум новим способам застосування функціональності, яка вам вже відома, а також познайомити вас з корисними можливостями CSS, які не так модні і популярні, але заслуговують не меншої любові. Головне завдання цієї книги — навчити вас вирішувати проблеми з допомогою CSS.


Для кого ця книга

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

— я припускаю, щоCSS 2.1 ви знаєте напам'ять і у вас за плечима кілька років розробки. Ви не мучитеся питанням, як же працює позиціонування. Ви використовуєте генерується вміст для прикраси дизайну, не вдаючись до допомоги зайвої розмітки або зображень. І ви не розвішуєте !important по всьому коду, так як дійсно розумієте специфічності, успадкування та каскадування. Ви знаєте складові частини блочної моделі і вас не здатне засмутити звуження полів. Вам знайомі різні одиниці виміру довжини, і ви знаєте, в якій ситуації яку з них краще застосувати;

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

— у вас є уявлення про формат SVG, і ви знаєте, для чого він використовується, навіть якщо файли в цьому форматі ви самостійно не створюєте;

— ви можете читати і розуміти найпростіший код JavaScript, такий, наприклад, який потрібен для створення елементів, маніпулювання їх атрибутами і додавання їх в документ;

— ви чули про препроцессорах CSS і знаєте, на що вони здатні, навіть якщо вирішили в своїй роботі їх не використовувати;

— ви не плаваєте в математики рівня середньої школи: квадратні корені, теорема Піфагора, синуси, косинуси і логарифми.

Однак для того, щоб читачі, що не задовольняють перерахованим вище вимогам, також могли насолоджуватися книгою, на початку деяких секретів я додала врізку «Попередні вимоги», в якій коротко переказую аспекти CSS або попередні секрети, з якими необхідно ознайомитися, щоб зрозуміти і навчитися застосовувати поточний секрет. (Сюди, звичайно, не входять можливості CSS 2.1, тому що в цьому випадку врізка стала б дуже довгою.) Вона виглядає так:

ПОПЕРЕДНІ ВИМОГИ
Знання властивості box-shadow, базове знання градієнтів CSS, секрет «Гнучкі еліпси»

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

Зверніть увагу, що я згадала про «розробників CSS» і що «навички дизайну» серед представлених вище припущень не значаться. Важливо пам'ятати, що це не книга про дизайн. Хоча вона неминуче зачіпає певні принципи дизайну і описує деякі поліпшення взаємодії з користувачем, «Секрети CSS» — це в першу чергу книга про вирішення проблем з кодом. CSS-код породжує якийсь візуальний результат, але це все ще код, точно такий же, як код SVG, WebGL/OpenGL або JavaScript Canvas API, а не дизайн. Для написання гарного гнучкого CSS потрібно таке ж аналітичне мислення, що і для програмування. Сьогодні, коли більшість людей використовують для свого CSS-коду препроцессоры з усіма їх змінними, математикою, умовними термінами і циклами, написання коду CSS вже практично неможливо відрізнити від програмування!

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

Форматування та умовні позначення

Ця книга складається з 47 «секретів», тематично згруповані в сім голів. Всі ці секрети більш-менш незалежні і — за умови, що всі попередні вимоги виконуються, — з ними можна знайомитися в будь-якому порядку. Демонстраційні приклади в кожному з секретів — це не готові веб-сайти і навіть не їх частини. Я навмисно робила їх як можна менше і простіше, для того щоб їх було зручніше вивчати. Я виходжу з припущення, що ви вже маєте уявлення про те, що маєте намір реалізувати. Мета цієї книги — надавати не дизайнерські ідеї, а рішення щодо їх реалізації.

Кожен секрет розбитий на два або більше розділу. Перший розділ, що має назву «Проблема», містить опис поширеної проблеми, яку ми будемо вирішувати з допомогою CSS. Іноді в такому введенні я описую популярні, але недостатньо хороші вирішення даної проблеми (наприклад, рішення, що вимагають об'ємної розмітки, жорстко закодованих значень тощо) і найчастіше завершую його однією з варіацій питання: чи існує кращий спосіб реалізувати те ж саме?

За описом проблеми випливає одне або декілька рішень. Натхненням для цієї книги послужили семінари з CSS, які я проводила на різних конференціях, тому я постаралася зберегти формат інтерактивної презентації, наскільки це можливо в книзі. Кожному рішенню супроводжують кілька ілюстрацій, демонструють візуальний результат кожного кроку рішення у разі, якщо він призводить до якихось видимих змін. Оскільки ілюстрації не завжди знаходяться поряд з текстом, що описує те, що відбувається на них, всі ілюстрації пронумеровані і я посилаюся на них за номерами.

Рядковий код виділяється моноширинним шрифтом, а назви та коди кольорів часто доповнюються невеликий кольоровою міткою (наприклад, #f06). Блокові фрагменти коду виглядають так:
background: url("http://adamcatlace.jpg");

або так:
HTML
<figure>
<img src="http://adamcatlace.jpg" />
<figcaption>Sir Adam Catlace</figcaption>
</figure>



Як ви помітили, у випадку, коли мова у фрагменті коду відрізняється від CSS, він вказаний в заголовку лістингу. Крім цього, якщо в прикладі задіяний тільки один елемент, без будь-яких псевдокласів або псевдоелемент, то зазвичай для стислості я опускаю в коді селектори і фігурні дужки ({}).

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

JS
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}


ЦІКАВА СТОРІНКА.
ВРІЗКА З ЦІКАВОЮ ІНФОРМАЦІЄЮ
Врізки, озаглавлені «Цікава сторінка», — це цікаві замітки, пов'язані з обговорюваною темою, наприклад, історична або технічна довідка про розглянутої можливості CSS. Їх не обов'язково читати, для того щоб зрозуміти або почати використовувати основний матеріал, і все ж вони можуть виявитися корисними допитливому читачеві.

До кожного секрету додається один або кілька інтерактивних прикладів, для доступу до яких використовуються короткі і легкі в запам'ятовуванні URL-адреси на сайті http://play.csssecrets.io. Посилання на них виглядають так:

СПРОБУЙТЕ САМІ!
http://play.csssecrets.io/polka

Я настійно рекомендую вам уважно вивчати приклади з врізок «Спробуйте самі!» особливо якщо ви заплуталися в описі техніки чи зайшли в глухий кут у спробі відтворити приклад самостійно.

МАЙБУТНЄ.
МАЙБУТНІ РІШЕННЯ
Врізання «Майбутнє» містять опис технік, для яких вже підготовлені робочі специфікації, але які на момент написання цієї книги ще не реалізовані. Читачеві слід завжди перевіряти, чи підтримуються ці техніки, так як цілком можлива ситуація, що вони були реалізовані вже після публікації книги. У випадках, коли можливість настільки маловідома, що згадки про неї може не бути навіть на веб — сайтах підтримки браузерів, ця врізка включає посилання на тест, який читач може завантажити, перейшовши за короткий, легко запам'ятовується URL-адресою, такого, як показано нижче в прикладі «Протестуйте!». Оформлення таких тестів зазвичай включає відтінки зеленого, коли можливість підтримується і відтінки червоного в іншому випадку. Точні інструкції наведено у коді у формі коментарів.

ПРОТЕСТУЙТЕ!
http://play.csssecrets.io/test-conic-gradient

В кінці майже всіх секретів ви знайдете список пов'язаних специфікацій, який виглядає так:

ПОВ'ЯЗАНІ СПЕЦИФІКАЦІЇ
CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
Selectors: http://w3.org/TR/selectors
Scalable Vector Graphics: http://w3.org/TR/SVG

Сюди входять посилання на всі специфікації, можливості яких були згадані в секреті. Однак так само як і врізка «Попередні вимоги», врізка «Пов'язані специфікації» не включає функціональність CSS 2.1 http://w3.org/TR/CSS21, інакше одні й ті ж можливості довелося б перераховувати після кожного секрету. Це означає, що ті кілька секретів, в яких ми обговорюємо тільки можливості CSS 2.1, не доповнюються врізкою «Пов'язані специфікації».

Підтримка браузерами і резервні рішення

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

Однак більшість представлених тут секретів або цілком пристойно підтримуються браузерами, або для них існують хороші резервні рішення. Якщо підтримка браузерами певної техніки знаходиться на дуже низькому рівні, ви побачите попереджувальний значок «Обмежена підтримка» поруч із заголовком відповідного рішення, як тут, поряд з цим абзацом. Цього повинно бути достатньо, для того щоб ви зрозуміли: не варто використовувати дане рішення, не перевіривши рівень підтримки браузерами, а також не подбавши про якісні резервних рішеннях.

Іноді ви будете виявляти, що певна можливість підтримується, але її реалізація в різних браузерах трохи відрізняється. Наприклад, вона може вимагати браузерного префікса або її синтаксис може бути дещо іншим. Приклади В цій книзі я використовую тільки синтаксис без префіксів, як він визначається в стандартах. Проте практично в будь-якій ситуації ви можете одночасно використовувати різні варіанти синтаксису, і тоді потрібний буде вибиратися автоматично в відповідності з правилами каскадування. З цієї причини стандартну версію завжди слід вказувати останньої. Наприклад, для отримання вертикального лінійного градієнта від кольору yellow до red у книзі я завжди буду використовувати тільки стандартну версію:
background: linear-gradient(90deg, yellow, red);

Однак якщо ви хочете забезпечити підтримку дуже старих браузерів, можливо, в результаті ваш код буде виглядати приблизно так:
background: -moz-linear-gradient(0deg, yellow, red);
background: -o-linear-gradient(0deg, yellow, red);
background: -webkit-linear-gradient(0deg, yellow, red);
background: linear-gradient(90deg, yellow, red);

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

При виборі такого кольору рекомендується зупинятися на середньому з двох кольорів (в даному випадку rgb(255, 128, 0)):
background: rgb(255, 128, 0);
background: -moz-linear-gradient(0deg, yellow, red);
background: -o-linear-gradient(0deg, yellow, red);
background: -webkit-linear-gradient(0deg, yellow, red);
background: linear-gradient(90deg, yellow, red);

Однак іноді каскадування не дозволяє забезпечити надійне резервне рішення. Тоді в якості останнього засобу можна вдатися до допомоги інструментів, подібних Modernizr, які додають класи начебто textshadow або no-textshadow до кореневого елемента (), щоб ви могли з допомогою них звертатися до елементів тільки в тому випадку, коли потрібні можливості дійсно підтримуються (або не підтримуються), наприклад:

h1 { color: gray; }
.textshadow h1 {
color: transparent;
text-shadow: 0 0 .3em gray;
}


Якщо можливість, для якої ви намагаєтеся створити резервне рішення, досить нова, то можна використовувати правило supports, «рідне» для Modernizr. Наприклад, попередній фрагмент коду перетвориться на такий:

h1 { color: gray; }
@supports (text-shadow: 0 0 .3em gray) {
h1 {
color: transparent;
text-shadow: 0 0 .3em gray;
}
}


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

І нарешті, завжди є варіант додати кілька рядків коду JavaScript ручної роботи, який буде визначати, чи підтримується можливість, і додавати класи в кореневий елемент так само, як це робить Modernizr. Основний спосіб, як перевірити, чи підтримується властивість, — подивитися, чи існує він, скориставшись об'єктом element.style будь-якого елемента:
JS
var root = document.documentElement; // <html>
if ('textShadow' in root.style) {
root.classList.add('textshadow');
}
else {
root.classList.add('no-textshadow');
}

Якщо нам потрібно перевірити кілька властивостей, попередню перевірку легко перетворити в функцію:
JS
function testProperty(property) {
var root = document.documentElement;
if (property in root.style) {
root.classList.add(property.toLowerCase());
return true;
}
root.classList.add('no-' + property.toLowerCase());
return false;
}

Для того, щоб протестувати значення, потрібно привласнити його властивості і перевірити, чи збереже його браузер. Оскільки тут ми модифікуємо стилі, а не просто перевіряємо їх існування, в тесті розумно використовувати елемент-заглушку:
JS
var dummy = document.createElement (p');
dummy.style.backgroundImage = 'linear-gradient(red,tan)';
if (dummy.style.backgroundImage) {
root.classList.add('lineargradients');
}
else {
root.classList.add('no-lineargradients');
}

Це також легко перетворюється у функцію:
JS
function testValue(id, value, property) {
var dummy = document.createElement (p');
dummy.style[property] = value;
if (dummy.style[property]) {
root.classList.add(id);
return true;
}
root.classList.add('no-' + id);
return false;
}


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

Більш докладно з книгою можна ознайомитися на сайті видавництва
Зміст
Уривок

Для Хаброжителей знижка 25% по купону — Віру
Купон діє на книгу, а також на всю серію O'Reilly
За фактом оплати паперової книги відправляємо на e-mail електронну версію книги.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.