Защо ще е прекрасно, когато всички браузъри поддържат CSS 3.0?

Преди да отговоря на този въпрос, нека да си припомним едни от най-често използваните и приятни техники в настоящият господар на форматирането HTML, а именно Cascade Style Sheet 2.0 (CSS2).

На първо място определено е позиционирането на div елементите. Центрирани сайтове, адаптиращи се дизайни, релативно позициониране на елементи, в които пък често слагаме абсолютно позиционирани.

Отиде си цяла една епоха на HTML лейаути изградени от таблици, вложени в други таблици, вложени в трети таблици… за щастие днес таблиците се използват само за истинското им семантично приложени, а именно таблици с данни.

Второ често срещано приложение, е стилизирането на списъци. Списъците се наложиха като основна част от навигацията. Например главното меню на един сайт, ако не бяха приложени css стилове към него, надали бихте го погледнали дори Благодарение на background: селектора и графичните дизайнери(техните картинки), главните менюта се превърнаха в удобна, бърза и атрактивна за ползване част.

Честно казано само за главни менюта, css hover-и, подменюта с дропдаун, мега дропдауни и тн.… спокойно може да се напише цяла статия, но да се върнем към основните готини неща, с които свикнахме в CSS2.

:hover макар и псевдо клас, благодарение на него огромна част от бутоните и банерите се освободиха от javascript-a и започнаха да подменят или премества фонови картинки при интеракция с курсора на мишката.

CSS2 предложи чудесната възможност за използване на image sprite-ове, която както и да бъде погледната е само, един голям плюс.

И последното нещо, на което ще обърна внимание преди да се прехвърлим към същинската тема: „Защо ще е прекрасно, когато всички браузъри подържат CSS 3.0“. CSS2 предложи много. Около 1/3 от фронт енд програмирането се състои в писане на css, все пак това е презентацията на сайта. * (разделяйки основно фронтенд-а на html, css, javascript).

И понеже писането не е малко, a броя на браузерите различен от един, разработчиците създадоха:

• CSS reset – стилове, нулиращи и уеднаквяващи разположението, размерите и тн. на HTML елементите, с цел на изгледа под различните браузери
• CSS Grids и CSS Frameworks – готови набори от стилове, които се прилагат или ръчно или директно към стандартни и често използвани елементи. Например тяло на сайта от 960px, и две колони за съдържанието в съотношение 1 към 1.6180339887 (http://en.wikipedia.org/wiki/Golden_ratio)

И така след тази кратка хвалебствена интродукция и ретроспекция, да приветстваме CSS3.

Кралят умря, да живее краля!

Преди да бъда нападнат от поданниците на CSS2, знам че не умрял, и знам че CSS3 не е коронясан, просто израза ми харесва. Още от декември 2005 се разработва третата версия на CSS, но чак в последно време се шуми толкова много и това определено е и заради неговият брат по оръжие HTML5… и все пак да вървим по нашата златна пътека.

CSS3 предлага много нови функции и възможности, като най-сигурният начин да ги усетите и пробвате е да си пуснете браузър, който подържа CSS3 – такава информация можете да намерите например тук: http://www.findmebyip.com/litmus . Не се притеснявайте, ако ползвате несъвместим браузър и при вас слънцето ще огрее скоро.

CSS3 Селектори

Това е първото, с което ще започна, защото все пак за да приложим дадени CSS свойства трябва изберем конкретен елемент или съвкупност от такива. Новите селектори намаляват нуждата от писане на специфични и допълнителните класове. Вече няма да създаваме класове за първи, последен, предишен, родителски, алтернативни редове в таблици, включен, изключен бутон и тн., а това ускорява значително времето за разработка. Понеже обичам код, ето няколко по интересни селектора, които със сигурност ще станат добра практика.

div[id^="nav"] – избира всеки елемент, чието id започва със низа от символи nav

div[id*="content"] – избира всеки елемент, чието id съдържа низа от символи content

li:nth-child(odd) и li:nth-child(even) – избира всеки нечетен или четен li елемент, които имат един и същи родителски елемент. Вместо ключовите думи odd и even можете да ползвате и числа и формули 3, 4n+1, което съответно ще селектира всеки 3,6,9,…; а формулата оказва да бъде избран 1 и след това 5,9,10

Div.newsText > p:first-child – избира първият параграфа от div с клас newsText, същото като :nth-child(1) (виж по нагоре)

Div.newsText > p: last-child – избира последният параграф от div с клас newsText, същото като :nth-child(1) (виж по нагоре)

Aко се чувствате леко главозамаяни, разгледайте на спокойствие официалната документация за този и други селектори:
http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

CSS3 Ефекти – сянка, радиус на контур, градиенти, фонове с картинки

Още една огромна стъпка към освобождаването на дизайна. Фонове с градиенти, обли ъгли, текстови ефекти за бутони, банери и какво ли още не… Всичко това, вече ще може да бъде динамично, без нужда от предварително подготвени картинки. По-лесна поддръжка, по-бърза и лека страница. Относно цветовете и градиентите, просто отидете и се позабавлявайте: http://gradients.glrzad.com/

Край на странните трикове, с по два текста един под друг за да постигнем сянка или бевъл ефект, вече имаме магическата сянка:

.ourCoolCSS3Class {
text-shadow: 2px 2px 2px #DD2200;
font-size: 2.2em;
color: #f5f5f5;
}

Аз съм текст със сянка. Приятно ми е да се запознаем.

Внимание! Сянката е сянка, само докато я възприемате като такава, ако обърнем посоката т.е. да е над буквите:

text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;


от сянка получаваме сияние наподобяващо пламъци. Отново за да се възползвате максимално е добре да имате опитен дизайнер, който да ви помогне с идеи и избор на цветове.

Нека да спомена и за възможността да слагате по няколко картинки за фон на един елемент и да ги позиционирате, където пожелаете. По този начин, отпада безумното създаване на вложени div-ове, ето и самата декларация:

div#coolCSS3Background {
background: url(Plains.gif) top left no-repeat,
url(imageBg2.png) bottom left no-repeat,
url(imageBg3.jpg) bottom right no-repeat;
}


Не забравяйте!
Редът, в който въвеждате картинките е реда, в който се показват по нива, т.е. най-отдолу са последните по реда на въвеждане.

Естествено отново доброто въображението и умелата дизайнерската ръка, ще играят огромна роля за постигането на по-забележителни неща.

CSS3 @font face

Една от може би любимите добавки на всички дизайнери. Край на въртенето на Verdana, Arial и Tahoma. Край на рязането на картинки, които съдържат само текст или дори и вторият стейт на текста, ако желаем той да бъде линк. С въвеждането @font face ** в употреба, получаваме възможността да качим шрифта и да опишем всичко просто така:

@font-face {
font-family: Orbitron-Black;
src: url(‘Orbitron-Black.ttf’);
}
.OrbitronCSS3 {
font-family: 'Orbitron-Black';
font-size: 2em;
}


That’s one ICE Calipers!

Чудесно е нали ? Да се чуди човек, защо им трябваше толкова много време.

Естествено трябва да споменем, че със въвеждането на новите шрифтовете, както при картинките и другите типове медия. Трябва да проверите как стоят нещата с авторските права, и с правата за употребата им въобще. Все пак използвайки го на сайта си, шрифта ще е достъпен, за всички.

CSS3 анимация

Анимацията беше запазена марка на Flash и JavaScript… вече и CSS 3 се включва в забавата. Кодовите думички са: Transitions, 2D и 3D Transform и Animation. Границите за анимациите, са безгранични… Да! Просто си представете всички неща, които досега правехме с JavaScript: галерии с преливане от картинка в картинка, анонси, скролване на текстове и картинки и тн. Можете да разгледате тези примери: http://css3.bradshawenterprises.com и ще си опресните идеите за това къде и какво по сайта можем да раздвижим.
CSS3 навсякъде

Преди да завършим темата. Ако сте от хората „задължени“ да ползват IE 6,7,8 и все пак имате огромното желание да се порадвате на CSS3. Обърнете внимание на следните проекти:

PIE – Progressive Internet Explorer
http://css3pie.com е JavaScript базиран и има единствената цел, да добави поддръжка на декоративните функции на CSS3 под Internet Explorer 6 до 8. PIE (progressive internet explorer) следва пряко спецификациите на WC3, така че да е нужно да пишете css само веднъж и той да „проработи“ под всички браузери.

Modernizr
http://www.modernizr.com е отново JavaScript библиотека като разликата с PIE е, че modernizr ви помага да отчетете, какъв е браузъра, който ви посещава и каква част от CSS3 подържа (например rgba(), border-radius, CSS Transitions и др.) Modernizr ви дава възможност да използвате css3 и html5 и да засечете, кога даден браузър не подържа използваните от вас техника, като в тези случаи да подготвите алтернативно представяне.

Последно изречение, което надявам се ще запомните и предадете на останалите:

„CSS носи само плюсове, използвайте го възможно най-много.“

Благодарности на World Wide Web Consortium.

---

Бележки:

 

* CSS2 предлага наистина много възможности и за тези, които все пак са любопитни да чуят още и още ще нахвърлям само ключови неща, които да потърси и видите: CSS Rollover buttons, CSS Rounded Cornenrs, CSS Sticky Footer, CSS Accordion Effect, CSS Line Graph, Advanced CSS Menu, CSS Sliding Sprite Window

** Много любопитно е, че @font-face е бил предложен още по времето на CSS2 и въведен в употреба в IE5, НО … IE са единствените, които го приемат използвайки Embedded Open Type (.eot) формат. Никой от другите браузери, не желае да го ползва. С релийза на Safari 3.1 обаче се включва поддръжката на TrueType (.ttf) или OpenType (.otf) и от тук всичко започва да изглежда по-добре.

*** По пример от частта за CSS2 ето още малко неща, за които ще ви е интересно да разгледате: Multiple Column, Text-overflow, Background-size, Теxt-Stroke, CSS3 Buttons, HSL, HSLA, RGBA colors