Архив за етикет: CSS

Добавяне на CSS само за Internet Explorer

Има поне два варианта да се справим с различното интерпретиране на стиловете(CSS) от страна на все още най-разпространения браузър – Internet Explorer. Единият е да се използват хакове, които да водят до приемането на различни стойности в стиловете за различните браузъри или техни версии. За целта се използва похват, при който се въвеждат 2 или 3  стойности за едно и също свойство:

div {
margin: 10px;
*margin: 9px; /* for IE 7 */
_margin: 8px; /* for IE6 or less*/
}

Този начин на изписване ще доведе до следния резултат: в по-добрите браузъри(Firefox, Opera, Safari) свойството „MARGIN“ на тагът „DIV“ ще приеме стойност 10px и ще игнорира следващите стойности, тъй като те не са изписани правилно. Версия 7 на IE ще приеме стойност 9px, тъй като по неведоми причини приема символа „*“ преди свойството на HTML елемента за коректно изписване, а същия елемент за верия 6 и по-ниска на IE ще присвои стойност 8px, поради това, че приема изписването със „_“ за правилно.

В следващия пост ще опиша и по-доброто решение – употребата на така наречените условни коментари (conditional comments) за зареждане на алтернативни стилове за проблемните браузъри.

За малките пропуски

Дисплеят на една колежка в работата ми е настроен на сив фон на приложенията по подразбиране и когато седна при нея да обсъждаме текущи проекти, вече на два пъти установявам елементарен пропуск в работата си, който е описан и от CSS гурото Джефри Зелдман. Става въпрос за това, че досега не съм обръщал внимание дали поставям задължително фон на тялото на HTML документа (body {background: #fff;}). Това се отнася основно за дизайните, които са с бял фон и дори и да не е зададен в стиловете, това не прави впечатление, докато не застанеш пред монитор с променени фонови настройки. Тогава обаче картинката става „интересна“ – дори може да не познаеш работата си.

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

още по темата:
Is your websites underwear showing – статията на Зелдман
Underwear showing (web design) – група във Flickr, споделяща как изглеждат сайтове без зададен фон на документа при променен фон на приложенията

CSS3 – поддръжка на @font-face

От Mozilla публикуваха информация, че стартират поддръжката на @font-face правилото, от версия 3.1 на браузъра. Това ще позволи на разработчиците да използват шрифтове без да се притесняват от това дали ги има на машината на посетителя. В момента за уеб се използват няколко шрифта (tahoma, verdana, arial и т.н.), които са включени в основните операционни системи.

Благодарение на @font-face, браузърът ще може да показва елементите със шрифтове, които са качени/инсталирани на друг хост, а не на PC-то на посетителя и така уеб дизайнерите ще се сдобият с още един инструмент за създаване на въздействащ и атрактивен дизайн.

Ето един пример как се използва това правило:

@font-face {
font-family: ‘MyFont’;
src: url(http://www.domain.com/fonts/newfont.otf) format(„opentype“);
}

div {
font-family:MyFont, Verdana, Arial, Helvetica, sans-serif;
}

Всъщност @font-face е включено и в CSS2 препоръките, но до момента поддръжката му не е включена в никой браузър, с изключение на IE от версия 4 и нагоре, но както може да се очаква там поддръжката е частична и недостатъчна. Към момента единствено със Safari 3.1 може да се види как работи това правило. А ето и информация за поддръжката сред по-масовите браузъри:

@font-face поддръжка
източник: Webfonts.info

Webkit/Safari

Opera

  • в процес на разработка
  • font formats:
    • TrueType/OpenType TT (.ttf)
    • OpenType PS (.otf)

Internet Explorer

Mozilla/Firefox

Google Chrome

  • не се поддържа в настоящата Beta версия

Netscape

  • от версия 4, спряна поддръжка от Netscape Navigator 6
  • font formats:
    • Portable Font Resource (.pfr)
  • допълнителна информация: http://en.wikipedia.org/wiki/TrueDoc

Още по темата:
http://www.webfonts.info/wiki/index.php?title=Main_Page
http://www.css3.info
http://opentype.info/demo/webfontdemo.html – демонстрация на @font-face (за момента може да видите ефекта от използването на правилото само ако имате Apple Safari версия 3.1 или по-нова).

Дизайн или кодиране?

Настоящата ми длъжност е HTML/CSS developer. В общи линии характеристиките и се припокриват с длъжността CSS дизайнер, за която става дума в поста на Alen Grakalic, в който и той си задава въпроса „Дизайн или кодиране?“. По-долу съм се опитал да преведа неговите разсъждения, а също и съм добавил някои мои такива.

CSS дизайнерът е човек занимаващ се с уеб дизайн, който е в състояние да доведе готовия дизайн до стандартен документ в HTML формат. Основните изисквания към длъжността са добри познания при работа с графични приложения(Фотошоп) и отлично познаване на уеб технологиите и стандартите. Такъв човек би бил идеалният вариант за компания, която има ограничен бюджет и не може на си позволи да наеме екип от специалисти за същата работа. В ежедневната работа на CSS дизайнерът се налага да се справя с разнообразни задачи и проблеми – изграждане на структури(layouts), цветови схеми(color schemes), CSS хакове и др. Най-големият плюс на тази професия, е че имаш пълен контрол върху целия процес по изграждането на сайта и си зависим единствено от клиента. Ако сте един от тези хора знаете за какво говоря.
В големи компании политиката е да се изграждат екипи и хората в тях да се специализират в по-тясна област. В такива моменти се налага да се направи избор. В случая той е между дизайна и писането на код. Затова ще се опитам да посоча част от положителните и отрицателните аспекти на това да се концентрираш върху една от двете дейности.

Дизайн

При проектирането на дизайн за уеб има някои особености, които не се оценяват от един графичен дизайнер, но биха улеснили цялостния процес на дизайна и последващото писане на код. Въпреки това креативността в работата е най-високо цененото качество и е основната разлика между добрия и посредствения дизайнер. Ето и основните плюсове за дизайна:

icon

  • винаги може да си направиш и добавиш нов дизайн към порфолиото, дори и да не е за реален клиент.
  • може да направиш нещо наистина интересно и сложно като дизайн, което обаче не би го направил ако се налага в последствие го режеш на HTML-и ти самия.
  • ако работиш достатъчно бързо, почасовото заплащане може да бъде доста високо.
  • можеш да предлагаш и други услуги свързани с графичния дизайн, като печатна реклама (визитки, брошури и т.н.) или лого дизайн.
  • като покажеш твоят последен дизайн на майка си и тя ще каже: „Браво! На мама златото!!!“.

icon

  • клиентите понякога имат лош вкус и искат да сложите неща, които не бихте си позволили да уронват репутацията ви сред колеги и клиенти и едва ли бихте посочили в портфолиото си.
  • налага ви се да работите с некачествени материали, предоставени от клиентите, като лога, изображения и снимки и очакват от вас да направите чудо с тези материали за да получат мечтания дизайн.
  • безкрайни срокове, породени от това, че без значение какво е било уговорено в началото, впоследствие променят до последно голяма част от изискванията си.
  • независимо колко добре си се справил с дизайна има голяма вероятност той да бъде отхвърлен.
  • повечето клиенти искат нещо оригинално и очакват за минимално време да им се предложи нещо уникално. Както ми каза един клиент: „Искам сайта ми да е като жив.“, каквото и да означава това в неговите представи, но той очаква да го получи „като жив“.

Код (XHTML/CSS)

За всеки CSS дизайнер или Front-end разработчик е голяма гордост и удовлетворение, когато създава страници с напълно валиден (x)HTML и CSS код, при които валидатора на W3C ги озарява със зелена светлина. Но по-важното е, че плодът на техният труд отговаря на условията за достъпност и е еднакво добре видим във всички браузъри, а също така и при печат. За един такъв човек е трудно да си представи, че все още съществуват хора, които използват таблици за разположението на елементите, без да осъзнават колко грешно е това. Основните плюсове на уеб кодера са:

icon

  • ако си достатъчно добър няма начин работата ти да бъде отхвърлена
  • лесно може да пресметнеш колко време ще ти отнеме един проект
  • получаваш статут на експерт ако страниците ти изглеждат еднакво под всички браузъри
  • понякога не ти е нужно вдъхновение за да си вършиш добре работата, а може да го правиш и на „автопилот“
  • клиента никога не се бърка в работата ти
  • можеш и е препоръчително да използваш повторно, код който вече е използван
  • причисляваш се към програмистите, които са по ценени като труд и имаш възможност да се развиваш в посока към уеб програмирането (Java Script, Ajax, PHP, ASP.Net, Python)

icon

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

Ще се радвам ако споделите и вашето мнение по темата!