Оглавление

Cross-browser coding..................................................................................................................................1
Same Markup: Core Guidelines...........................................................................................................1
Browser Detection...............................................................................................................................2
HTML5.........................................................................................................................................................3
CSS3 (code!)............................................................................................................................................3
SVG – scalable vector graphicks..............................................................................................................3
HTML5 Cross-Document Messaging....................................................................................................4
Links............................................................................................................................................................5
Misc.............................................................................................................................................................5
------------ http://www.modernizr.com/...............................................................................................5

Cross-browser coding
http://blogs.msdn.com/b/ie/archive/2010/04/14/same-markup-writing-cross-browser-code.aspx
Tony Ross. http://bit.ly/csLdGX http://live.visitmix.com/MIX10/Sessions/CL27
(same markup tony ross)

Download Internet Explorer 9 Beta or Platform Preview 6

http://beautyoftheweb.com/ or http://ietestdrive.com/
Get started developing on Internet Explorer 9
http://msdn.com/ie/
Keep up on the latest Internet Explorer news
http://blogs.msdn.com/ie/
Feature Detection Posts: 1, 2, 3

Same Markup: Core Guidelines

 DO
o Feature Detection
Test whether a browser supports a feature before using it.
o Behavior Detection
Test for known issues before applying a workaround.
 DON'T
o Detect Specific Browsers
Also known as browser detection. Don't use the identity of a browser (e.g.
navigator.userAgent) to alter page behavior.
o Assume Unrelated Features
 Don't perform feature detection for one feature, and then proceed to use a different
feature.
Browser Detection
1. Conditional Comments
<!—[if IE]><![endif]-->

// Good: Target legacy only

<!--[if IE lte 7]>
// Legacy browser-specific code
<[endif]-->

2. Unique Objects
if(document.all) …
if(window.attachEvent)…
if(window.ActiveXObject)…
3. Unique Behaviours (CSS Hacks, etc.)
* html {}
the problem: altering code based on a specific browser limits the adaptability of web pages.
// [TR] Different listeners added for illustration
function f1() { document.write("addEventListener was used"); }
function f2() { document.write("attachEvent was used"); }

// DON'T USE THIS: Detecting specific browsers

if(navigator.userAgent.indexOf("MSIE") == -1) {
window.addEventListener("load", f1, false);
} else {
window.attachEvent("onload", f2);
}
Running this in IE9 illustrates that addEventListener doesn't get used, even though it's supported.
Good:
// Use this: Feature Detection
if(window.addEventListener) {
window.addEventListener("load", f1, false);
} else if(window.attachEvent) {
window.attachEvent("onload", f2);
}
Support for postMessage was added in IE8, but addEventListener was not added until IE9
//Error in IE8:
if(window.postMessage) {
window.addEventListener("message", fn, false);
//Good:
if(window.postMessage) {
if(window.addEventListener) {
window.addEventListener("message", fn, false);
} else if(window.attachEvent) {
window.attachEvent("onmessage", fn);
}

Feature detection enables cross-browser code to "just work" without requiring you to know the
capabilities of each and every browser ahead of time. One framework which relies almost entirely on
feature detection is jQuery. In fact the jQuery.support documentation details how you can use jQuery's
feature detection in your own site.
Hiding in markup
<!-- Elements with fallback content -->
<video src="test.video">
<object src="test.video">
<a href="test.video"> Download Video </a>
</object>
</video>
Hiding in CSS
/* Unrecognized properties are ignored */
 .target
{
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

HTML5
 New doctype
o <! DOCTYPE html>
<html>…
 New structural elements (nav header footer…)
 New media elements
 New parsing rules
 New APIs

CSS3 (code!)

Background-color{rgba(255,0,0,0.5)} – с прозрачностью
Border-radius: 20px; - округляет рамку по углам
Border-radius: 20px 20px 0 0;

ul li:nth-of-type(1) {
1st element of the list
}
Ul li:nth-last-of-type(1){
…Last element of the list
}

Tr td {background-color: #ff0; } yellow

Tr:nth-child (2n+1) td { background-color: #0f0;} green
Начиная с первой строки чередование – зел-желт-зел-желт
2n+4 начиная с четвертой строки – чередование, а первые три – остаются желтыми
-n+4 – первые четыре – зел, остальные желт
Odd – нечетные
Even – четные

P::selection{ регулировка цвета выделяемого текстаЫ

Background-color:#ff0;
Color:#000;
}

Изменение цвета фона при изменении размеров окна браузера

Div {background-color:Green;}
@media (max-width:600px)
{div { background-color:Yellow;}
}
@media (max-width:300px)
{div { background-color:Red;}
}

JS
addEventListener
getElementsByClassName

SVG – scalable vector graphicks

<svg width=”400” height=”400”>
 <circle cx=”100” cy=”100” r=”40” />
<text x=”80” y=”80”>TechEd!</text>
</svg> - нарисует черный (по умулч.) круг радиусом 40 из точки с координатами
И текст над кругом
<circle cx=”100” cy=”100” r=”40”
Stroke=”red” stroke-width=”10”
Fill=”green”
/> - зеленый круг с красной рамкой в 10px

К Тексту в SVG можно применять CSS

<style>
text { font-size:400%;
text-transform: uppercase;
</style>

Debugging (F12)
alert(window.msPerformance.timing.domComplete);

Recognition
<meta http-equiv=”X-UA-Compatible” content=”IE=9” />

---------
contenttype=”application/xhtml+xml”

Imaging
International color consortium (ICC)

WOFF (Fonts) - подгрузка фонтов из файлов .wofff

@font-face{src:url(whimsy.woff); font-family: Whimsy;}

Div {font-family: Whimsy, webdings;}
===============
HTML5 Cross-Document Messaging
   
<script type="text/javascript"> 
 
  window.onload = function() { 
 
    document.getElementById('title').innerHTML = 'Domain: ' +
document.location.host; 
 
    window.document.onmousemove = function(e) { 
      var x = (window.Event) ? e.pageX : window.event.clientX; 
      var y = (window.Event) ? e.pageY : window.event.clientY; 
      window.parent.frames[0].postMessage('x = ' + x + ' y = ' + y, '*');       
    }; 
 
    var onmessage = function(e) { 
      var data = e.data; 
      var origin = e.origin; 
/*
if (e.domain == 'example.com') {
if (e.data == 'Hello World') {
e.source.postMessage('Hello');
} else {
alert(e.data);
}
}
*/
      document.getElementById('display').innerHTML = data; 
    }; 
 
    if (typeof window.addEventListener != 'undefined') { 
      window.addEventListener('message', onmessage, false); 
    } else if (typeof window.attachEvent != 'undefined') { 
      window.attachEvent('onmessage', onmessage); 
    } 
  }; 
 
</script> 

===================================================================
Links
http://tath.am

http://blog.tatham.oddie.com.au/

http://www.msteched.com/

http://net.tutsplus.com/category/tutorials/asp-net/ ???
http://net.tutsplus.com/tutorials/asp-net/asp-net-from-scratch-sql-server/
http://forums.tutorialized.com/web-design-development-articles-134/

===================================================================
Misc
var form = document.createElement("div");
var root = document.documentElement;
root.insertBefore( form, root.firstChild );

------------ http://www.modernizr.com/

Создание сайта с использованием скрипта Modernizr даёт значительное преимущество в работе с

HTML5 и CSS3 и упрощает для веб-дизайнера поддержку совместимости кода разных браузеров
посетителей сайта. - определяет, насколько браузер посетителя поддерживает CSS3 и различные
функции HTML5 (аудио, видео, локальное хранилище и другие). Modernizr также делает новые
элементы HTML5 доступными для изменения в Internet Explorer.
// As written in Modernizr
tests[canvas] = function() {
return !!doc.createElement( canvas ).getContext;
};
// Equivalent "if" statement
if(document.createElement("canvas").getContext) {
// Code for browsers with <canvas> support
}

----------------