Разработка
27.12.2010
Защо ще е прекрасно, когато всички браузъри поддържат 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;
}

Този div има цели 7 картинки за фон + един горящ текст.

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

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

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

Вашата оценка:

Достигнат рейтинг: / 5. Гласувания: