Слесарю слесарево

Слесарю слесарево

Новый подход к обратной совместимости вёрстки.

Суровая реальность

• Законы общества
• Жизненные циклы
• Постоянное развитие

На одном языке с браузером

Развесистый код

					function ChangeLayerBgColor( id, color ) {
					    if( type=='IE' ) document.all[id].style.background…
					    if( type=='NN' ) document.layer['id'].bgColor…
					    if( type=='MO' || type=='OP' )
					    document.getElementById( id ).style.background…
					}
				

Развесистый код

					<!--[if lte IE 6]><table><tr><td><![endif]-->
					    <ul class="submenu">
					        <li><a href="">Item</a></li>
					        <li><a href="">Item</a></li>
					    </ul>
					<!--[if lte IE 6]></td></tr></table></a><![endif]-->
				

Развесистый код

					<!--[if lte IE 6]><table><tr><td><![endif]-->
					    <ul class="submenu">
					        <li><a href="">Item</a></li>
					        <li><a href="">Item</a></li>
					    </ul>
					<!--[if lte IE 6]></td></tr></table></a><![endif]-->
				

Развесистый код

					#box {
					    -o-text-overflow:ellipsis;
					    display:-moz-inline-box;
					    -ms-filter:'progid:DXImageTransform.Microsoft…
					    _width:302px;
					    expression( function(t){ t.runtimeStyle…
					    }
				

Упакованный код

					(function(A,w){function ma(){if(!c.isReady){try{s.
					documentElement.doScroll("left")}catch(a){setTimeo
					ut(ma,1);return}c.ready()}}function Qa(a,b){b.src?
					c.ajax({url:b.src,async:false,dataType:"script"}):
					c.globalEval(b.text||b.textContent||b.innerHTML||"
					");b.parentNode&&b.parentNode.removeChild(b)}funct
					ion X(a,b,d,f,e,j){var i=a.length;if(typeof b==="o…
				

Байткод Яндекса

					<table class="v3"><tr>
					   <td class="v4">
					         <table class="a"><tr>
					            <td class="b"><i class="i" style="…
					            <td class="d">
					                <div class="j">
					                <div class="k">
				

Уровни абстракции

1. HTML — разметка данных
2. CSS — представление данных
3. JavaScript — обработка данных

Обратная совместимость

Обратная совместимость

					<ul>
					    <li><a href="/wp-login.php?action=register"
					         rel="register">Регистрация</a></li>
					    <li><a href="/wp-login.php?action=lostpassword"
					         rel="recover">Забыли пароль?</a></li>
					</ul>
				

Обратная совместимость

					document.documentElement.id = 'js';
				

					#js .faq LI {
					    display:none;
					    }
				

Ценность информации

Адаптация

Только не IE

					<!--[if ! lte IE 6]><!-->
					    <link rel="stylesheet" href="main.css">
					<!--<![endif]-->
				

• Universal Internet Explorer 6 CSS
• Google Code: universal-ie6-css

Только IE

					<!--[if lte IE 6]>
					    <link rel="stylesheet" href="ie.css">
					<![endif]-->
				

• Universal Internet Explorer 6 CSS
• Google Code: universal-ie6-css

Do websites need to look
exactly the same in every browser?

http://dowebsitesneedtolookexactlythesameineverybrowser.com/