14.07.2010

Новы метад Clearfix

Развітайцеся з векавым і старым метадам clearfix і скажыце прывітанне новаму і палепшанаму метаду clearfix.

Метад Clearfix ці метад “лёгкай ачысткі” уяўляе сабой карысны метад выдалення непатрэбнай інфармацыі. Я пісаў пра гэты арыгінальны метад і нават прапанаваў некалькі яго паляпшэнняў. Арыгінальны метад clearfix выдатна працуе, але браўзары, што страцілі мэты або састарэлі, таксама на яго шляху. У прыватнасці, Internet Explorer 5 для Mac зараз ужо гісторыя, так што няма ніякіх падстаў турбавацца пры карыстанні метада clearfix ў працэсе ачысткі.

Арыгінальныя метады clearfix выглядаюць наступным чынам:

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

Так, гэта брыдка, але працуе вельмі добра, дазваляючы дызайнерам прыбраць усе непатрэбнае, не хаваючы перапаўненні і налады шырыні (амаль) усё, каб атрымаць працу. Логіка гэтага метаду гучыць прыкладна так:

Мэтавая сумяшчальнасць браўзараў з першым блокам дэкларацыі (калі ўсе браўзары былі стандартамі, гэта было б менавіта тое, што трэба) можа стварыць утоены блок ачысткі пасля ўтрымання мэтавых элементаў.
Другая заява ставіцца да inline-tableуласнасці дысплея, вылучнага ў інтарэсах IE / Mac.
На дадзены момант мы выкарыстоўваем зваротную касую рысу каментар-метада, каб схаваць пакінутую частку правіл з IE / Mac. Гэта дае нам магчымасць рабіць наступнае:
Ужыванне1%росту толькі IE 6 для паказу hasLayout (што патрабуецца для метаду)
Ужыцьdisplay:blockда ўсяго, акрамя IE / Mac
Апошні радок з’яўляецца каментаром, які служыць для вызначэння метаду для IE / Mac

Як вы можаце бачыць, узнікае шмат шуму з-за браўзара, які не працаваў прынамсі апошнія тры ці чатыры гады.Ніхто больш не выкарыстоўвае IE / Mac, так што надышоў час адмовіцца ад clearfix. Вынікам з’яўляецца значна чысцейшы і больш эфектыўны кавалак CSS:

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Трэба адзначыць таксама, што IE / Mac чысціць рэчы проста выдатна. Звярніце ўвагу, што мы яшчэ больш палепшыць clearfix, дадаўшы падтрымку IE 7. IE 6 ці IE 7 падтрымка :after псеўда-класа выкарыстоўваюцца ў першай дэкларацыі, таму мы павінны шукаць альтэрнатыўны метад нанясення clearfix. Ужываючы zoom:1 любы вэб-аглядальнік, які выклікаецца IE, з’яўляецца ўласнасцю кампаніі hasLayout механізмаў, якая таксама працуе добра ў галіне ачысткі. Дзеля дасягнення мэтазгоднасці, вам неабходна зрабіць гэта з двума сапраўднымі браўзарамі, але вы павінны мець на ўвазе, што умоўныя каментары могуць паказываць рэкамендуемы шлях.

IE 8 таксама падтрымлівае :after псеўда-клас, так што гэты новы метад clearfix толькі стане больш простым, як IE6 , у канчатковым рахунку IE 7, нарэшце, адміраюць.

Вынік: новы спосаб ачысткі, які ўжываецца clearfix, кіруе стандартамі браўзараў, якія выкарыстоўваюць :after псеўда-клас. Для IE 6 і IE 7 новы метад clearfix выклікае hasLayout, характэрныя для CSS. Такім чынам, новы метад Clearfix таксама эфектыўна выконвае аперацыі ачысткі.

Comments are closed.