inspiremedia.kz сайтындағыдай меню жасаймыз. Кроссбраузерлілендіру (үшінші бөлім)

Біраз жырқыл әңгімелерді былай ысыпып қойып, бастаған жазбамды соңына жеткізіп тастайын, ия ия жүн нәски біраз естен тандырып жіберді. :)

Бірінші бөлімі мұнда

Екінші бөлімі мұнда

Үшінші бөлімі осы.
Бұл бөлімде біз осы жазған стильдеріміздің, тегтеріміздің ескі браузерде де адекватты көрінуін қамтамасыз ететін боламыз, енді сұмдық кроссбаузерлы дей алмаймын, әйтеуір шашам жеткенше.

Сонымен біздің HTML құжатымыздың коды мынадай болды

<a href="#" class="link">
	<div class="shenber_1">
		<div class="shenber_2">
			<o bject data="icon.svg" width="30" height="30" class="svg"></object>
			<div class="text">Бірінші</div>
			<div class="shenber_3"></div>
		</div>
	</div>
</a>

CSS-коды тым ұзақ, сондықтан көрсетпеймін.

Біздің менюіміздіңдің қазіргі түрі мынау, хромда бәрі жақсы, ал IE7-дегі көрінісі тіптен қайғылы :(


Енбі бұны бірдеңе қылу керек, алдымен ең оңайынан бастайық, ең алдымен мәтіндегі қажет емес көк сызықты алып тастаймыз Мынаны :)

Бұл енді мәтінді сілтеме қоршап тұрғандықтан, IEнің осылай көрсеткен әдемірек ау деп ойлап астын сызып бергендегі түрі. Мәтіннен барлық сызық, шекара, қырт шырттардың бәрінен арылу үшін сілтеме тегіне яғни .link классына төмендегі қасиеттерді сипаттап шығамыз.

.link {
	outline: none;
	border: none;
	text-decoration: none;
}

Бұны болдық, енді бордер радиустарды шығаруымыз керек, ол үшін арнайы мына қосымша балдақты қолданатын боламыз, өзі бір ғажап қосымша. CSS3-тің біршама мүмкіндіктерін IE-ге түсіндіріп береді. Ол қосымша туралы жеке тоқталып өткендіктен, мұнда тек жалпы айтып кетем.

Мына сілтемеден өтіп, скрипттің соңғы нұсқасын жүктеп аламыз да, архив ішінен тек PIE.htc құжатты алып, манасы html құжатымыз орналасқан жерге апарып қоямыз.

Бордер радиус, градиент қолданылған барлық класстарды жинап аламыз ба, барлығын жаңағы скриптке сілтеп жібереміз.

.shenber_1, .shenber_2, .shenber_3, .box, .link:hover .shenber_2 {
	behavior: url(PIE.htc); // құжат тіке сілтейміз
}

Енді біздің менюісіз IE браузерінде мылай көрінетін болды, түрі кіріп келе жатыр аздап.)


Негізі PIE қосымшасы, қарапайым градиетннерді де қолдайды, бірақ біз қолданған градентіміз бірнеше түстен құралып, күрделі болғандықтан оны көрсете алмаймын дейді енді. Ни че, IE браузері үшін қарапайым градиенттерді қосымша жаза қоямыз, IEге түсінікті қылып градиент жазудың сұмдың тәсілі бар IE фильтрлері арқылы, бірақ ол әдіске тоқталмаймын, PIE қосымшасын қосып қойғандықтан, соның берер мүмкіндіктерін барынша кеңінен қолданып алайық.

PIEде градиент -pie-background синтаксисі арқылы сипатталады. Қарапайым бірінші түстен екінші түске ауысып тұратын түзу градиент жазамыз арнайы IE үшін.
Сонымен shenber_1 классына

.shenber_1 {
	-pie-background: linear-gradient(#ffffff,#949494);
}

shenber_2 классына

.shenber_2 {
	-pie-background: linear-gradient(#4976E7,#2A4A9B);
}

деп қарапайым градиент түрін жазып шығамыз.
Енді біздің меню IE браузерінде былай көрінетін болды


Тамаша, IE қолданушыларына бұл артық негізі :))

Ендііііі, соңында, соңындаааа, анау ортадағы svg суретті көрсету ғана қалды ((( Бұл енді сұмдық, әрі тарттым, бері тарттым, әртүрлі нұсқаларымен де жазып көрдім, бірақ осы векторды IEде жөнді көрсете алмадым, анау скролдарды жасыра алғаныммен, суреттегі прозрачный аумақтар IEде сұр түсті болып тұрады ((((

Сосын бардым да, ең оңай жолымен басжвердім .))) IEнің шартты пікірлеу (Условные комментарии) конструкциясын қолданып, егер IE браузері болса қарапайым png суретті шығар, егер IE браузер болмаса кәдімгі svg суретті шығар деп жазып жібердім :)))
Жаңағы svg иконкамыздың png нұсқасы міне


Бұл html-да былай сипатталып жазылды

<a href="#" class="link">
	<div class="shenber_1">
		<div class="shenber_2">
			<![if !IE]><o bject data="icon.svg" width="30" height="30" class="svg"></object><![endif]> // егер браузер <strong>IE</strong> болмаса
			<!--[if lt IE 9]><img src="icon.png" class="svg" /><![endif]--> // егер браузер <strong>IE</strong> болса
			<div class="text">Бірінші</div>
			<div class="shenber_3"></div>
		</div>
	</div>
</a>

Боооолды ))) Енді IE жетінші нұсқасында біздің менюіміз былай көрінетін болды )))


Осымен бүгінгі сабағымызды аяқтайық, IEнің шартты пікірлеу конструкциясы жайлы кейін бір жазба арнап жазармын. Сау болыңыздар

Айтпақшы нәтижесі мына жерде орналасқан

Мына жерден жүктеп ала аласыз