Емо Соколов

В миналото, css нинджите били войни, специално тренирани в различни стилове на xhtml и css техники и разбира се обичайно въоръжени с различни уеб дизайн / програмистки инструменти.

Ето и няколко от възмжните симптоми:

• 1. Първото нещо, което правиш, когато попаднеш на нов сайт, е да видиш сорс кода му.
• 2. Чувстваш, че си крайно обсебен от xhtml и css.
• 3. Некадърно написан код, те кара да изпитваш спешна нужда да го пренапишеш на момента, дори да знаеш, че сайта въобще не не е твой.
• 4. Живееш, според каноните на Семантичната библия.
• 5. Страстно мразиш Интернет Експлорър 5,6,7,8 ~, и искаш да го пратиш по дяволите, заедно с всичките му създатели и всички, които още го използват.
• 6. Неинтуитивен сайт с калпава навигация те кара да крещиш на ум и на глас проклинайки бездарния уеб дизайнер.
• 7. Имате толкова много уеб девелопърски допълнения инсталирани на браузъра си, че чак е заприличал на пулт на космически кораб.
• 8. Личната ти страница е пълна с линкове към уеб дизан / програмистки сайтове.
• 9. Не ти пука, че докато си работили върху някой проект, често ти се е случвало да усъмнеш в 4-5 часа сутринта.
• 10. Сънищата ти са свързани с CSS техники.
• 11. Можеш да пишеш CSS код по-бързо от колкото да хвърляте нинджа звезди.
• 12. Когато твоята „друга половинка“ отегчено повдига вежди, на вашите уеб/css шеги.
• 13. Когато твоята „друга половинка“ трябва да се конкурира с компютъра ти за твоето вниманието
• 14. Когато се усетите, че основните ви контакти в ICQ/Skype са други CSS нинджи, с които ежедневно обсъждате или критикувате чужди уеб сайтове.
• 15.Когато изпадате в истеричен смях или неубоздан гняв когато разглевдате този сайт.(Не пропоръчвам да гледате сорс кода ми, ако сте със слабо сърце или в напреднала бременност).
• 16. Прочете всичко до тук и си мислиш – От къде ме познава този тип, че и да пише за мен!

Можете да допълните списъка, оставяйки коментар по-долу.

Аз лично, не пишех CSS до скоро, но сега се налага. За това, спокойно мога да се определя като начинаещ. Съвсем начинаещ. В момента, всеки път, когато ми се налага да направя нещо ново свързано с CSS, откривам по една купчина неща, които улесняват живота ми в последствие .
Има някои полезни неща, които научих от уроци из нет-а или от приятели програмисти (Валери Бучински), и които искам да споделя тук, за останалите прохождащи в писането на CSS. Ето някои от тях:

1. Задайте размера на текста , без да използвате пиксели

Ако се чудите, как някои уеб дизайнери, успешно прилагат em като мярка вместо пиксели, не се чудете повече а продължете да четете. Има един начин да ресетнете размерите на фонтовете за целия сайт, в който случай ще се получи, че 1.0em се равнява на 10px.
body { font-size: 62.5% } Просто добавете font-size: 62.5% в body стила и сте готови. Сега като размер можете да използвате em-ове (хаха) като размер, вместо пиксели. Ето например как изглежда един параграф използвайки em:
p { font-size: 1.3em; line-height: 1.2em; } Може би вече сте си задали въпроса, защо пък да има значение, по какъв начин декларирам размера на фонтовете в сайта ми (даге)?. „Достъпен за всички възрасти“ или по-просто казано, за да направите сайта си, удобен за максимална част от аудиоторията ви. Объркахте се още повече ? :) хехе и аз така, тоя не можа да го напише с малко побългарени примери :) Идеята е, че сайта трябва да остане четлив, когато се използва вграденото в повечето браузери увеличаване на сайта. Възрастните хора или хората с нарушено зрение, често използват тази функция и ако сте сложили абсолютни стойности на шрифтовете, крайния резултат ще бъде неадекватно изглеждащи текстове (Това си е малко преувеличено, но съм съгласен , че ем вече се е наложило като стандарт в задаването на големината на текстовете в CSS за това и включих това във статията ми).

2. Направете кода си лесен за четене.

Когато съм се натъквал последните месеци на CSS, писан от някой от колегите ми, винаги ми е правило впечатление, как приятно за окото си разделят heading таговете (и не само тях разбира се, но с това ще дам пример). Мисля че изглеждаше такa:
h1 {}
    h1#logo { font-size: 2em; color: #000; }
h2 {}
    h2.title { font-size: 1.8em; font-weight: normal; }Това се е много удобно, ако искате бързо да намерите точно този heading , който ви трябва точно сега, на момента, без да се налага да изчетете половината си CSS. Също така, е полезно, и ако работите върху по-голям проект, където използвате един и същ heading таг (да кажем h2) на много места в сайта, защото както знаем (или не!), можем да му даваме различни стойности в отделните класове, всеки път, когото го използваме, без да се притесняваме, че ще вземе стойности от първоначалното му деклариране. Аз лично използвам такова подреждане и за параграф таговете, Anchor таговете и всички останали тагове, които изискват различни класове, за да изглеждат както трябва във даден случай.

3.Подреждайте кода си на секции

Аз до скоро не го правех. И много други програмисти уеб дизайнери също не го правят. Защо? Мм… ми честно казано незнам., но е факт, че ако искаме да редактираме някакъв код след няколко месеца или години, ще бъде много, ама много по-лесно да намирате класове и елементи, които искате да редактирате в същия този код.
Ето как аз структорирам моя код:
/* Structure */Тук слагам основните дивове и класове
/* Typography */Тук описвам параграфите, Headings и другите дребни неща свързани с форматирането на текста, като strong, code и други.
/* Links */Това си говори само за себе си ( не, че другите не го правят де, но това си е класика ). Тук слагам всички anchor тагове.
/* Lists, images, etc. */ Тук слагам стиловете за картинки, списъци и всички останали елементи които не се вписват в останалите секции. Ако например обаче имам неподреден списък за менюто на сайта ми, ще си направя съвсем нова секция (/* Navigation*/ примерно) и ще сложа всички елементи, които са свързани по някакъв начин с тази част от кода в нея. По този начин ако след време ми се наложи да преправя само навигацията на сайта ми, ще ми бъде много по-лесно да го направя.

4. Не използвайте div-вове за щяло и нещяло

Аз лично, нямам нищо против използването на повече div елементи, но само, когато е обоснована нуждата от такива. Всеки път ми идва да се напия, да си разкъсам ризата и да се махна от тоя живот, когато видя някой, който задава стил на заглавиятa на своите статии, използвайки div елемент. Опитвайте се, когато е възможно, да изпозвате по често span или някакъв друг подходящ за случая елемент примерно, вместо div. Не бързайте, просто обмисляйте всяко свое действие. Това може да ви донесе само плюсове.

5. Задайте стил само веднъж

Не че много се замислям по принцип, но напоследък забелязах, че пиша „margin:0; padding:0″ във почти всеки елемент. Наскоро открих как колегата ми Елин е разрешил този си проблем, използвайки *, за да зададе дадена стойност, на всички елементи по страницата наведнъж. Първото нещо което ми дойде на ум, беше, че е безсмислено да пиша margin и pading с едни и същи параметри във всеки таг, след като мога да ги задам за всички тагове, само веднъж:
* { margin: 0; padding: 0; } Сега вече използвам margin и padding, само в случаите, когато се налага .
Надявам се, че съм бил полезен за някой.

За никого не е тайна, че използването на CSS за прозрачност на картинки, е едно от нещата, което не се възприема по един и същ начин от различните браузери. За да успеете да го направите съвмeстимо с всички браузери, трябва да използвате специфични за тези браузери CSS атрибути. За щастие, те не си пречат помежду си, и за това могат да се сложат под един калпак, и така използвайки един и същ клас, когато искате да добавите прозрачност, ще сте сигурни че работи под всички браузери. Ето един примерен клас със прозрачност зададена за 70%:

А ето и, за какво точно, са тези CSS атрибути:

• opacity: 0.7; Това е „На-важния“ атрибут, защото това е CSS стандарта в момента. Използвайки този атрибут, прозрачноста, ще „работи“ при почти всички версии на Firefox, Safari, и Opera. По-принцип, това щеше да е всичко, от което, ще имате нужда при използване на прозрачност с CSS, но само ако всички браузери поддържаха текущия стандарт. За съжелние това не е така в момента, точно за това е и тази статия :)
• filter:alpha(opacity=70); Единствено по този начин, можете да накарате „Негово Нищожество“ Internet Explorer да ви послуша.
• -moz-opacity:0.7; Този атрибут ви трябва, за да подържате наистина старите браузери от семейството на Mozzila (Netscape Navigator).
• -khtml-opacity: 0.7; А това е за също много стара версия на Safari (1.x)

И не на последно място, искам да препоръчам на всички, никога да не използват прозрачност, директно на картинката, а да сложат класа в див-а, който съдържа картинката. Всичко това е за съвместим и оптимизиран код :)