Не знам дали сте обръщали внимание, но под всяка статия, показваща как могат да се използват новите възможности на HTML5 или CSS3 има поне един коментар от типа „ама то не работи в IE, ще трябва да почакаме“. Няма време за чакане, ако не искате да изпуснете влака, качвайте се сега, защото после догонването е трудно. Бъдещето идва и няма да чака вас!
Въпреки, че и двата стандарта са все още в различни фаза на незавършеност, отделни техни модули не само са придобили стабилен вид, но и вече имат широка поддръжка в различните браузъри. А ако толкова много държите на IE, много от нещата или деградират елегантно, или има има специфичен начин за постигане на ефекта. А и нали не вярвате, че сайтовете трябва да изглеждат еднакво във всеки браузър?
И така, да видим няколко неща от HTML5 и CSS3, които можем да използваме сега и веднага.
Нови типове input елементи
HTML5 дефинира една купчина нови типове елементи за вход от потребителя. Специални елементи за адрес на сайт или електронна поща, за въвеждане на числа чрез бутончета нагоре – дадолу или чрез плъзгач, за въвеждане на часове и дати. И няма ама абсолютно никакъв проблем да ги ползвате, защото старите браузъри вместо непознатите типове input ще използват поле за текст. Ако много държите, с малко JavaScript можете да оправите нещата. А предимствата са, че потребителите на съвременни браузъри ще имат по-добро потребителско преживяване. Например собственицитне на iPhone (може би и други) ще виждат клавиатура, състояща се само от позволени знаци за въвеждане на URL или пощенски адрес.
Елементите video и audio
Вече всички настолни браузъри освен един поддържат чудесно новите елементи за публикуване на видео или аудио в уеб-страници. Въпреки, че има различия в поддържаните формати, с много по-малко усилия можете да споделите последното забавно клипче от снощния купон. И да не забравяме, двата най-големи сайта за публикуване на видео – YouTube и Vimeo вече поддържат HTML5 видео, Vimeo дори са разработили плеър за вграждане на техните видеа в други сайтове.
data- атрибути
Един чудесен начин да добавите допълнителни данни към DOM елементите във вашето уеб приложение. Стандартът предлага възможността да добавите произволен брой атрибути, започващи с data- и дава възможност за достъп до данните, записани в тях чрез свойството dataset на DOM елемента. Вече няма нужда от безброй скрити и явни елементи и нестандартни атрибути, поставени само за да дадат достъп до някакви данни чрез JavaScript.
CSS3 selectors
CSS3 дефинира доста интересни начини за насочване на стилове към елементи от страницата. Особено интересни са новите псевдоелементи, чрез които можете да насочите стиловете не само към първия дъщерен елемент (:first-child), но и към последния (:last-child) и дори към всеки елемент, чийто индекс отговаря на израз от типа a*n+b (:nth-child()).
Светлосенки чрез text-shadow и box-shadow
Искате светлосенки? Няма проблем, CSS3 е насреща! Ама браузърите на някои потребители няма да ги изобразят? И какво от това, някои потребители нямат възможност да ги видят, но до скоро настоявахте да ги карате да си свалят картинките въпреки това.
Цветове в RGBa
Можете да направите фона на даден елемен полупрозрачен, или пък текста в него, или пък контура, както демонстрирах вече. Вместо PNG изображения, които да забавят зареждането на сайта, можете да постигнете невероятни ефекти само с помощта на RGBa.
Заоблени ъгли чрез border-radius
Стига вече с тези плъзгащи се врати, със CSS3 можете да постигнете същия ефект и много повече. По един или друг начин свойството се поддържа още от Firefox 1 и ако още не сте го използвали, вече е крайно време.
CSS3 Media queries
Пробвали ли сте как изглежда сайта ви на голям монитор? А на мобилен телефон или iPad? Не е както си го представяхте, нали? С помощта на CSS3 media queries можете да приложите различни стилове в зависимост от разделителната способност, ориентацията, или броя цветове, които поддържа екрана. Само с малко допълнителен CSS можете да пригодите сайта си за мобилни устройства и екрани с висока резолюция. Адаптивния дизайн е новото черно!
Шрифтове с @font-face
О, щях да забравя, @font-face! Това беше горещата тема преди половин или една година, нали не сте забравили? Все едно дали ще предпочетете удобството на някоя от многото услуги, предоставящи шрифтове за уеб или ще публикувате шрифтовете сами. Време е да се освободите от оковите на web-save шрифтовете и да покажете, че типографията в уеб има бъдеще.
След всичко това следва и задължителния списък с помощни материали:
Етикети: @font-face, audio, box-shadow, CSS, CSS3, HTML, HTML5, media queries, text-shadow, video
Добре описано. Само бих допълнил и едно от любимите ми неща (от много любими) в HTML5 – WebSockets.
Много добро описание на функциите си направил. Това си е почти цял онлайн урок. Поздравявам те за труда и благодаря! Мисля, че някои неща ще са ми от полза „сега и веднага“ :-)
От край време се каня да направя няколко полезни туториъла за HTML5 и CSS3. Последните ни няколко проекта масово използват новите спецификации, а и е много полезен! Колкото повече се използва, толкова по-бързо ще навлезе. А и след новият IE9 (който се държи доволно до момента), мисля че се задава лека полека края на една ера, в която всички се мъчихме с по-старите версии на IE :(
@Ангел, за съжаление практиката показва, че излизането на нова версия на IE (колкото и добра да е тя, а 9 е определено доста добра) не води след себе си изоставяне на по-старите. Въпреки това новата ера според мен вече е настъпила. Въпросът е ще използваме ли новите инстументи, или ще излезнем със сопите да трошим трактори ;-)
@Радослав Станков, не навлязох в по-дълбоките води на иначе съблазнителните откъм възможности API-та (и GeoLocation и разните начини за съхраняване на информация при клиента), че ще дойде в повече. А и те са интересни повече за уеб-приложенията и предполагам който се занимава с такива, следи по-отблизо развитието на нещата.
В днешно време вече не само, че IE поддържа CSS3, ами и то направо Chrome си е по-популярен от IE :) (според http://www.w3schools.com/browsers/browsers_stats.asp). Аз лично най-много се радвам на заоблянето на ъглите и пускането на сянка. Тях ги ползвам. Не ми пука ако няма да работят някъде, сайта ще си работи нормално без сянка и с остри ъгли. Тъкмо хората с по-нови браузъри ще имат предимство пред другите и така има малък шанс пък хора с по-стари ако узнаят за тази разлика да вземат да ъпдейтнат :D.
На мен IE8 въобще не ше да разчита ССS-а. Какъв е проблема и как да го реша?