Art is like masturbation.

Design is like sex.

 
opacity: 0.5; - "ти валиден ли си?" :)

моля разгледайте една иновативна идея: "Аз мога - тук и сега!"

Пиша тази мини статия и урок само с една цел...Неотдавна бях жури в поредното издание на Националната Олимпиада по ИТ в гр. Монтана.
Проектите няма да ги коментирам, а самият факт, че няма първо място много, много ясно говори за позицията ми и на останалата част от журито.

Статията се породи от въпроса на един добър ajax проект и неговото НЕубедително представяне и при коментара на класирането и пропуските от участниците бе зададен въпроса "как да валидирам opacity"...тъй, като съм отдавна в it и поддържам мотото "няма невъзможни неща" или пък изказа на Росен Иванов - просто ще ми отнеме малко повече време :)

Ще дам отговор и на този въпрос с идеята, че това ще помогне и на други разработчици. Аз самият рядко давам коментар на нещо видяно - в БГ да изкажеш мнение е убийствено лошо.

Проблема не е само на онези младежи от състезанието, а на маса народ. Тук лирично отклонение за това, че навика да се валидира един код било то xhtml & css (или напише по стандарт - php, ruby, perl etc.) трябва да се придобива още в началото на кариерата, защото впускайки се в големите проекти и задачи всеки си казва "е, голяма работа нали работи и се вижда добре под различните браузери", но не е така!

Започвам малко по-оттам...под IE 6 § 7 има проблем с прозрачността на изображенията и по-конкретно на PNG, които много често се използват за различни ефекти. Но на помощ идва CSS със свойството opacity и неговите стойности.

От своя страна за да бъде работещо свойството за въпросните селектори то се "подлага" на hack/tip за различните браузери:

  • opacity: 0.5;
    Това е официалният CSS3 метод, който работи на повечето нови браузери
  • -moz-opacity: 0.5;
    Този метод работи на повечето стари версии на Mozilla и Phoenix/FireBird/FireFox.
  • -khtml-opacity: 0.5;
    Този метод се използва от браузерите, които имат KHTML енджин за рендване на изходящия код (Konquerer под Linux и Safari под MacOS.)
  • filter: alpha(opacity=50);
    Този метод се използва единствено и само от браузерите на Майкрософт - MSIE

Защо всъщост не се валидира кода, когато включим opacity в стиловете ни? Причината, е че все още не е приет за официален стандарт на CSS. Рано или късно това няма да е проблем, както ако си спомняте за position и неговите стойности за бокс модел...

Но ние разработчиците (дизайнери и програмисти), които искаме кода ни да бъде по абсолютните правила нямам време да чакаме, както и клиентите ни. За това създаваме "фиксове", но не от ония за вечеря :))

Единствения начин е да използваме JavaScript:

 
	if (document.getElementById('SomeID')){
		var oe = document.getElementById('SomeID');
                // Set transparency to 50%
                oe.setAttribute("style", "opacity:0.5;")
		if (oe.style.setAttribute) //For IE
		oe.style.setAttribute("filter", "alpha(opacity=50);")
         }

Да, това не е най-интелигентната практика (само за да си валидирате кода да ползвате JS, който пък би могъл да бъде забранен от страна на потребителя), но за момента това е перфектното решение за проблема.

В случая CSS и xHTML валидтора ще блестят в зелени отенъци.

Едно уточнение, че getElementById се отнася до избора на елементи по ID, което означава, че няма да можете да използвате този трик за класови селектори.

Съответно за да е интелигетно добавяме:

document.write('<link  rel="stylesheet" type="text/css" 
media="screen" href="../css/opacity.css" />');

 

Някои полезни линкове:

http://www.456bereastreet.com/archive/200702/validation_alone_is_not_enough/
http://www.thesitewizard.com/webdesign/htmlvalidation.shtml
http://www.artadmires.com/eng/resources/articles/article03/
http://www.webdesign.org/html-and-css/articles/why-is-validation-important.16126.html

В заключение искам на всички да кажа, че извинения няма. Искам от Вас креативност, търсене, решаване, безсънни нощи...

 
Аз видях, погледни през моите очи
 фотогалерия на кристалин чавдаров  пейзажи от цяла българия  Снимки на българската природа - планини, море, забележителности. Фотогалерия и фотобанка.  фотография, пейзажи, снимки, сток, България, природа, забележителности, изкуство, тракове, пътешествия, истории, разкази, услуги  снимки от сватби, сватбен фотограф, сватбено заснемане, сватбена фотография  Информация относно фотозаснемането на вашата сватба от сватбен фотограф
Чурилик
Себеизлеяния
"Аз мога - тук и сега"