CSS3 для початківців

17

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

CSS3 для початківців

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

Чому зараз можливо користуватися CSS3

Аргументи за те, чому ми не можемо користуватися CSS3, включають такі речі, як незавершену специфікацію, або те, що деякі елементи CSS3 погано підтримуються або не підтримуються взагалі. Все це вірно, але не причина, щоб не користуватися CSS3. Якщо б ці аргументи були вагомими, ми досі чекали появи CSS2.1.

Характеристикою доступності подібних технологій є те, підтримують їх браузери чи ні, а у випадку з CSS3 досягається достатня підтримка браузерами деякої кількості властивостей, щоб можна було почати використовувати їх для поліпшення своїх вебсайтів. Ключове слово тут — поліпшення дизайну. Будь освоєний вами CSS3 повинен бути зроблений так, щоб не погіршити враження від сайту в старих браузерах.

Не має значення, називаєте ви це системами Progressive Enhancement (прогресивне поліпшення), Graceful Degradation (поетапна деградація) або Hardboiled, поки ви приймаєте той факт, що сайт не потрібно виглядати однаково у всіх браузерах. Якщо прийняти цю просту істину, то ви побачите, що CSS3 сьогодні може застосовуватися без негативного впливу на враження користувачів, які користуються старими браузерами.

Префікси, що визначаються фірмою-розробником

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

Використовувані зараз префікси:

-moz- : Firefox

-webkit- : Браузери Webkit, такі як Safari і Chrome

-o- : Opera

-ms- : Internet Explorer

При кодуванні CSS3 за допомогою префіксів добре, коли це можливо, розміщувати варіант без префікса після будь-якого з префіксом, щоб гарантувати сумісність вашого вебсайту з майбутніми стандартами.

Приступаємо до вивчення CSS3 з нуля

Border Radius (закруглені кути)

Нашу статтю CSS3 для початківців, ми почнемо з вивчення закруглених кутів. Border radius, або, як деякі називають його «закруглені кути» (‘Rounded Corners’), можливо, самий широко використовуваний з усіх елемент CSS3, так як він менше всіх впливає на користувачів зі старими браузерами. Спірне твердження про те, що він самий виграшний, так як гнучка реалізація закруглених кутів завжди вимагає деякої кількості додаткових div ів і зображень.

Здебільшого основні закруглені кути можна написати трьома способами:

border-radius: [ | ];
border-radius: [top-left] [top-right] [bottom-right] [bottom-left];
border-top-left-radius: [ | ];

Як свідчить вищенаведений код, border radius можна написати так, щоб всі кути можна було задати індивідуально або скорочено. Однак, при використанні префіксів, визначених фірмою-розробником, є пара проблем:

Webkit

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

Mozilla

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

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;

Приклади CSS3

CSS3 для початківців

#1 {border-radius:10px;}
#2 {border-radius:50%;}
#3 {border-radius:25px 5px;}
#4 {border-radius:40px 30px 20px 10px;}

Підтримка

IE9+, Safari 3.2+[-webkit — prefix], Safari 5+, Chrome 4+, Firefox 3.0+ [-moz — prefix], Opera 10.5+

Кольори

Поряд з CSS3 йде підтримка rgba (Red, Green, Blue, Alpha – червоний, зелений, синій, альфа) і # hsla-color hsla (Hue, Saturation, Lightness, Alpha — тон, насиченість, яскравість). В обох «альфа» означає прозорість кольору, дозволяючи нам визначати непрозорість індивідуальних властивостей даного елемента, такого як фон, рамка і текст. Раніше було можливо застосовувати непрозорість тільки до цілого елементу або користуватися замість того зображеннями.

color: rgba([],[],[],[]);
color: # hsla-color hsla([],[],[],[]);

Обидва типи визначення кольору можна використовувати без альфа-каналу, опустивши ‘a’ до ‘rgba’ або ‘# hsla-color hsla’ і видаливши останнє число властивості. У такому вигляді rgb ширше підтримується старими браузерами, але hsl все ще така новинка, як і # hsla-color hsla.

Ці властивості кольору також можна безпечно використовувати в будь-якому іншому властивості CSS3, вимагає кольору, такому як box-shadow і градієнти, але при використанні їх у більш старих властивості важливо забезпечити альтернативний варіант.

color:rgb(0,0,0); color: rgba(0,0,0,0.5);

Запасний колір може бути у будь-якому підтримуваному вигляді, такому як rgb і hex.

Приклади CSS3

CSS3 для початківців

#1 {background:rgba(255,255,255,0.3);}
#2 {background:rgba(45,35,200,0.5);}
#3 {background: # hsla-color hsla(225,90%,10%,0.2);}
#4 {background: # hsla-color hsla(125,100%,50%,0.5);}

Підтримка

IE9+, Safari 3.2+, Chrome 5+, Firefox 3.0+, Opera 10.1+

Text-Shadow (тінь тексту)

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

text-shadow: [x coordinate] [y coordinate] [blur radius];
text-shadow: #000000 10px -5px 3px;

Ви можете призначити колір текстової тіні яким завгодно способом, включаючи rgba і # hsla-color hsla. Координата Х – це позиція тіні по відношенню до тексту по горизонталі, координата У – те ж саме, але по вертикалі. В обох можуть бути позитивні або негативні значення.

Радіус розмиття – це призначений тіні розмір розмивання, не має верхньої межі. Його нижня межа – нуль (0) і так забезпечується попіксельне схожість з текстом і без розмивання.

Текстова тінь була спочатку запропонована в CSS2, а останнім часом займає видне положення в CSS3, і, хоча вона поки не вказана в превью як підтримувана попередниками IE9, сподіваємося, це скоро зміниться.

Приклади CSS3

CSS3 для початківців

#1 {text-shadow:rgba(0,0,0,0.5) 1px 1px 0;}
#2 {text-shadow:rgba(0,0,0,0.7) 5px 5px 3px;}
#3 {text-shadow:rgba(45,35,200,0.7) -10px -10px 3px;}

Підтримка

Safari 3.2+, Chrome 4+, Firefox 3.0+, Opera 10.1+

Box-Shadow (тінь блоку)

Тінь блоку не так вже відрізняється від тіні тексту, але застосовується до всього елементу як div у, а не тільки тексту в ньому.

box -shadow: [x coordinate] [y coordinate] [blur radius] ;
box -shadow: 10px -5px 3px #000000;
box -shadow: inset 10px -5px 3px #000000;

Вищенаведений код показує оголошення, аналогічне текстової тіні, крім додавання вкладки inset у третьому рядку. Використання вкладки дозволяє нам розташувати тінь усередині рамки елемента, а не зовні його.

З box-shadow, крім того, можна комбінувати множинні тіні блоків, як показано в коді внизу:

box -shadow: inset 10px -5px 3px #000000, 10px -5px 3px #000000;

Приклади CSS3

CSS3 для початківців

#1 {box-shadow:10px 10px 0 #666666;}
#2 {box-shadow:-10px -10px 5px #666666;}
#3 {box-shadow:inset -5px -5px 0 rgba(255,255,255,0.5);}
#4 {box-shadow:5px 5px 5px #666666, inset 5px 5px 5px rgba(255,255,255,0.5);}

Підтримка

IE9+, Safari 3.2+[-webkit — prefix], Safari 5+, Chrome 4+, Firefox 3.5+ [-moz — prefix], Opera 10.5+

Множинні фони

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

background: url([image]) [position] [repeat], url([image]) [position] [repeat];

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

Приклади CSS3

CSS3 для початківців

#1 {background:url(lollipop.png) 10px 10px no-repeat, url(stripes.png) left bottom repeat-x, url(diagonal-pattern.jpg), #FFFFFF;}

Підтримка

IE9+, Safari 3.2+, Chrome 4+, Firefox 3.6+, Opera 10.5+

Множинні фони – ще одна частина CSS3, вимагає запасного варіанту, так як більш старі браузери переглянуть всі оголошення, а не просто візьмуть перше зображення. Тому пам’ятайте про те, що якщо ваш дизайн вимагає цього, потрібно спочатку встановити фон як зазвичай.

Розмір фону

Наступна за множинними фонами – можливість встановити розмір фону:

background-size: [ | | ] [ | | ];
background-size: 100% auto;
background-size: 100% auto, 10px 10px;

Як видно з коду, ви можете забезпечити ширину, так і висоту зображення, при цьому ширина заявляється першої. Третій рядок також показує, як використовувати розмір фону в поєднанні з множинними фонами.

Підтримка

IE9+, Safari 3.2+, Chrome 4+, Firefox 3.6[-moz — prefix], Firefox 4+, Opera 10.5+

Обрізка фону і точка відліку фону

Говорячи простими словами, це дозволяє вам краще керувати розташуванням фону.

background-origin: [ | | ];
background-clip: [ | | ];

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

CSS3 для початківців

Border-box: значення за замовчуванням, де в будь-які розрахунки включають фон, так що зображення виходить за межі рамки.

Padding-box: зрушує кордон, так що будь фонове зображення або колір не з’являться за межами рамки.

Content-box: зміщує всі за вміст, зменшує як ширину рамки, так і будь-який відступ, застосований при розрахунку розташування рамки.

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

Підтримка

IE9+, Safari 3.2+[-webkit — prefix], Chrome 4+[-webkit — prefix], Firefox 4+, Opera 10.5+

*не всі властивості вимагають префікса –webkit, за більш повною класифікацією зверніться до Quirksmode.

Рамки-зображення

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

border-image: CSS3 для початківців [slice] [ | | ];
border-top-image: CSS3 для початківців [slice] [ | | ];
border-corner-image: CSS3 для початківців [slice] [ | | ];
border-top-left-image: CSS3 для початківців [slice] [ | | ];

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

При створенні зображення для рамок вам потрібно створити зображення на зразок цього:

CSS3 для початківців

Таким чином, ваше зображення дійсно показує рамку. Зріз потім використовується для визначення області рамки і видалення наповнення з центру. При визначенні зрізу ви встановлюєте від 1 до 4 значень у відсотковому співвідношенні, або в пікселях (дивно, але без px) в наступному порядку: верх, право, низ, ліво. Якщо ви визначаєте єдине число, це означає, що ви берете, скажімо, 5 пікселів рамки заданого зображення.

Існують, крім того, опції для зміни того, яким чином повторюється рамка-зображення — repeat, stretch або round (повтор, розтягнення або округлення). Розтягнення легко пояснити, так як воно розтягує зображення на краях рамки, повтор діє так, як це очікується і може призвести до появи половинок зображення на рамці. Округлення – дійсно корисна опція, вона діє таким же чином, як повтор, але масштабує для того, щоб половинок зображень не було видно.

Приклади CSS3

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

CSS3 для початківців

#1 {border-image:url(border.jpg) 15 15 15 15 round;}
#2 {border-width:15px; border-image:url(border.jpg) 15 15 15 15 round;}
#3 {border-width:15px; border-image:url(border.jpg) 15 15 15 15 stretch;}
#4 {border-width:20px; border-image:url(border.jpg) 15 15 15 15 repeat;}

Як бачите, визначати ширину рамки теж необхідно.

Підтримка

Safari 3.2+[-webkit — prefix], Chrome 5+[-webkit — prefix], Firefox 3.5+ [-moz — prefix], Opera 10.5+

Множинні колонки

Єдине, чим друк завжди перевершувала мережу, це розмітка тексту в декількох колонках. Звичайно, ми могли б зімітувати той же вигляд, але це ніколи не було гнучким рішенням, і не застосовувалося для чогось іншого, ніж статичний контент. Але в CSS3 розроблено керування вмістом, дозволяючи нам визначати не тільки кількість колонок, але і розміри межстолбцовых щілин і зазорів.

column-width: [width];
column-gap: [width];
column-count: [number];
column-rule: [width] [style] ;

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

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

Приклади CSS3

#1 {column-count:3; column-gap:3%; column-rule:3px double #999999;}

Підтримка

Safari 3.2+[-webkit — prefix], Chrome 4+[-webkit — prefix], Firefox 3.0+ [-moz — prefix], Opera 11+

Градієнти

Останніми йдуть градієнти, які в даний момент є найбільш складним елементом CSS3. Чому? Тому що не існує жодного префікса, не визначеного фірмою-розробником, та реалізація версій Mozilla і webkit сильно розрізняється:

background-image:-moz-linear-gradient(#CC0000, #1A82F7);
background-image:-webkit-gradient(linear, left, top, left bottom, color-stop(0, #CC0000), color-stop(1, #1A82F7));

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

Підтримка

Safari 4+[-webkit — prefix], Chrome 4+[-webkit — prefix], Firefox 3.6+ [-moz — prefix]

І ще…

На горизонтах CSS3 є ще багато чого, включаючи перетворення, переходи та анімацію, і якщо хочете, можете все це теж використовувати. Здебільшого те, що не було порушено в цій статті, менш широко підтримується, а у випадку з анімацією CSS, то встигає за нею тільки webkit. У випадку з менш підтримуваними досягненнями слід вирішити, чи варті того ваші час і зусилля. Повинні ви проводити годинник, реалізуючи анімацію, якщо на сайт заходять всього 10 користувачів webkit в місяць? Я сказав би, що немає, але ви можете думати по-іншому.

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

Селектори

Нижче наведена вибірка нових селекторів, доступних завдяки CSS3 і маленьке опис кожного:

X[att^=»val»] — Будь-який елемент X зі значенням атрибута, що починаються з ‘val’;

X [att$=»val»] — Будь-який елемент X зі значенням атрибута, що закінчується на ‘val’;

X [att*=»val»] — Будь-який елемент X зі значенням атрибута з ‘val’, що містяться десь всередині значення атрибута;

X:checked — Управління будь перевіреною формою X;

X:disabled — Управління будь непрацездатною формою X;

X:enabled — Управління будь-активованої формою X;

X:empty — Будь-який елемент X, порожній або не має дочірніх записів;

X:first-of-type — Елемент X, який є першим елементом одного рівня свого виду;

X:last-child — Остання дочірня запис елемента X свого початкового елемента;

X:last-of-type — Елемент X, який є останнім елементом одного рівня свого виду;

X:nth-child(n) — Будь-який елемент X, який є певною N-ної дочірньої записом свого початкового елемента;

X:nth-last-child(n) — Будь-який елемент X, який є певною N-ної дочірньої записом свого початкового елемента, але відраховується від останньої дочірньої запису;

X:nth-of-type(n) — Будь-який елемент X, який є певним N-вим елементом одного рівня свого виду;

X:nth-last-of-type(n) — Будь-який елемент X, який є певним N-вим елементом одного рівня свого виду, але відраховується від останньої дочірньої запису;

X:not(s) — Будь-який елемент X, не рівний селектору s;

X:only child — Елемент X, який є єдиною дочірньої записом свого початкового елемента;

X:only-of-type — Елемент X, який є єдиною дочірньої записом свого початкового елемента і даного виду;

X:selection — Будь-яка частина X, яка вибирається або підсвічується користувачем;

X:target — Будь-який елемент X, який є метою посилається ДО а;

X ~ Y — Будь-який елемент Y, передує елементом одного рівня X.

Media Queries

Media Queries дає нам можливість забезпечити чуйний дизайн, заснований на вигляді пристрою, де користувач дивиться вебсайт. Щоб повністю віддати належне Media Queries, буде потрібно ціла статтю, але для початку ось вам короткий огляд:

Media Queries може бути двох видів, перший – для використання їх усередині свого CSS. Наступний приклад показує, як це відбувається по відношенню до браузеру, що знаходиться на екрані і має максимальну ширину 800px.

@media screen and (max-width: 800px) {
body {background: #000000;}
}

Крім того, можна встановлювати Media Queries у своєму html, щоб можна було послатися на окрему таблицю стилів виключно для даного запиту. У наступному прикладі запит націлений окремо на iPhone 4.

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

Підтримка

IE9+, Safari 3.2+, Chrome 5+, Firefox 3.5+, Opera 10.1+

@font-face

Це, строго кажучи, не зовсім CSS3, просто так вийшло, що всі деталі пазла лягли по своїх місцях в той самий час, коли отримав розвиток CSS3. Font-face дає нам можливість додавати на свій сайт нестандартні шрифти, видимі усіма користувачами, без застосування обхідних маневрів, таких як Cufon і sIFR.

Font-face все ще є до чого прагнути, п’ять оголошень шрифту – це занадто багато, але необхідно для гарантії повної підтримки.

@font-face {font-family:’ComfortaaBold’;
src:url(‘/fonts/Comfortaa_Bold-webfont.eot’);
src:local(‘☺’),
url(‘/fonts/Comfortaa_Bold-webfont.woff’) format(‘woff’),
url(‘/fonts/Comfortaa_Bold-webfont.ttf’) format(‘truetype’),
url(‘/fonts/Comfortaa_Bold-webfont.svg#webfontPdgofT1X’) format(‘svg’);
font-weight:normal;
font-style:normal;}

За винятком користування платними сервісами на зразок покращення якості її роботи і Fontdeck вищенаведений код вважається кращим способом встановити свої оголошення @font-face. 5 оголошень шрифту повністю охоплюють кожен браузер, а також шрифти svg для iPhone і iPad.

Для більш вичерпного опису @font-face, безкоштовних шрифтів, фантастичного генератора @font-face і способу уникнути нестилизованного контенту Firefox Flash відвідайте Font Squirrel.

Підтримка

IE6+, Safari 3.2+, Chrome 5+, Firefox 3.5+, Opera 10.1+

Найкраще з CSS3

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

Neography

CSS3 для початківців

Colly

CSS3 для початківців

24ways

CSS3 для початківців

Hardboiled

CSS3 для початківців

Ryanmerrill

CSS3 для початківців

Eyestylesllc

CSS3 для початківців

Переваги CSS3

Багаті інтерфейси — Маючи таке управління своїми вебсайтами, є можливість створювати розкішні користувальницькі інтерфейси. Хоча в минулому ми могли досягти того ж ефекту, використавши зображення, ми їх не обов’язково використовували, CSS3 дає нам більше свободи для реалізації подібних речей.

Реалізація — Досить ясно, що застосування закруглених кутів border radius займає при реалізації набагато менше часу, ніж створення чотирьох зображень кутів і div ів для їх розташування. Багато створене в CSS3 зроблено так, щоб дати нам можливість перевести створене з використанням зображень код або скоротити код, що використовується для реалізації більш складних інтерфейсів. Так ми отримуємо можливість будувати сайти швидше і легше.

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

Зручність супроводу — Робити зміни у своєму вебсайті тепер стане набагато простіше. Уявіть собі, що ви створили кнопку з градієнтами і тінями як зображення. Якщо потрібно змінити будь-яку з цих речей або зробити кнопку ширше, вам довелося б зробити вимірювання в зображенні і експортувати його в мережу. У CSS3 ви могли б зробити ті ж самі зміни за частки часу.

CSS3: чого варто остерігатися

При правильному використанні CSS3 не повинен робити занадто багато помилок, але остерігайтеся наступного:

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

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

Потворні сайти — На щастя, більшість читають OXP (onextrapixel.com) повинні вже добре розуміти, що роблять, і ніколи не піддадуться спокусі використовувати занадто багато CSS3. Але багато хто тільки починають вживати CSS3, в результаті чого неминуче з’являться потворні вебсайти. При вивченні CSS3 краще почати з малого, чим відразу все змішати в одну купу.

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

Закінчення статті «CSS3 для початківців»

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

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