Google vient de lancer son nouveau navigateur Google Chrome. J'en entends déjà raller dans leur coin : " Encore un navigateur dont il va falloir contrôler le rendu avant de mettre mon site en production. "
Sachez que ce navigateur se base sur le moteur de Apple Webkit ( Safari sur Mac OS X ) comme le montre la ligne ci-dessous :
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13
Pour résumé, si votre site est compatible avec Safari, vous ne devriez pas rencontrer de problèmes particuliers.
Pour ceux qui n'ont jamais essayé Webkit ( Safari ), sachez que Webkit se comporte "pratiquement" de la même manière que Mozilla Firefox au niveau du HTML et du CSS. En ce qui concerne le Javascript, l'affaire est quelque peu différente notamment dans le support du DOM W3C ou encore du designMode, toutefois les développeurs de Google Chrome semblent avoir beaucoup retravaillés le moteur Javascript (nom de code V8) donc...
Affaire à suivre, il n'en reste pas moins qu'une éternelle question subsiste :
Quand pourra-t-on abandonner Microsoft Internet Explorer 6.0 ?! ^^
Télécharger Google Chrome :
http://www.google.com/chrome
http://code.google.com/chromium/
Le Webkit, version de développement de Safari, est, dans sa toute dernière version, 100 % compatible avec le test Acid3, censé vérifier la conformité d'un navigateur par rapport aux "standards" du web.
Opera se prévaut également d'un tel taux de succès au test Acid3, toutefois Webkit est le seul navigateur téléchargeable sur lequel vous pourrez vérifier la compatibilité du test Acid3. La version publique téléchargeable de Opera ne devrait sortir que d'ici une semaine...
Chose amusante, les développeurs du Webkit ont annoncé avoir trouver un bug dans le test Acid3 qui conduirait à un non respect de la norme SVG 1.1 pour ceux qui auraient passé le test à 100/100 jusque là.
Ce script vous permet de déterminer et de gérer l'orientation d'un iPhone ou d'un iPod Touch grâce à la variable window.orientation et à l'évènement window.onorientationchange.
Exemple page-iphone-orientation.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> window.onorientationchange & window.orientation </title>
<script type="text/javascript">
window.onorientationchange = function() {
if(window.orientation !== undefined) {
document.getElementById('value-1').innerHTML = window.orientation;
switch(window.orientation) {
case 0 :
document.getElementById('value-2').innerHTML = 'Portrait - Normal';
break;
case 90 :
document.getElementById('value-2').innerHTML = 'Paysage - Dans le sens <strong>contraire<\/strong> des aiguilles d\'une montre.';
break;
case -90 :
document.getElementById('value-2').innerHTML = 'Paysage - Dans le sens des aiguilles d\'une montre.';
break;
case 180 :
document.getElementById('value-2').innerHTML = 'Portrait - Renversé';
break;
}
} else {
/* Vous n'utilisez ni un iPhone, ni un iPod Touch... */
alert('Votre navigateur web ne supporte pas window.orientation');
}
}
window.onload = window.onorientationchange;
</script>
</head>
<body>
<h1>window.onorientationchange & window.orientation</h1>
<p>window.orientation = <span id="value-1"></span> // <span id="value-2"></span></p>
<p>Cette page ne fonction qu'avec les iPhone et les iPod Touch.</p>
</body>
</html>
Ce script pourrait aussi servir à détecter si le navigateur utilisé est bien un navigateur Safari iPhone / iPod Touch.
Certains URIs se réfèrent à un point déterminé dans la page HTML par un identificateur d'ancre www.ab-d.fr/page.html#ancre.
L'élément cible peut être représenté par la pseudo-classe :target en CSS level 3 (Cascading Style Sheets).
Exemple page-css3-target.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>CSS3 *:target</title>
<style type="text/css" media="screen">
h1:hover { text-decoration: underline; } /* CSS 1 et 2 */
h1:target { background-color: #ff6600; } /* CSS 3 */
</style>
</head>
<body>
<h1 id="title-1">Titre n°1</h1>
<p>CSS 3...</p>
<p>CSS 3...</p>
<p>CSS 3...</p>
<hr />
<h1 id="title-2">Titre n°2</h1>
<p>CSS 3...</p>
<p>CSS 3...</p>
<p>CSS 3...</p>
<hr />
<p><a href="#title-1">Titre n°1</a> | <a href="#title-2">Titre n°2</a></p>
</body>
</html>
Le sélecteur :target fonctionne pour le moment sur Mozilla Firefox 2, Safari 3, et Opera Browser 9.50
Voici le navigateur Safari d'un iPhone Français
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; fr) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3B48b Safari/419.3
Avec Safari 3, vous pouvez redimensionner un TEXTAREA, mais vous pouvez aussi contrôler cette propriété en CSS 3.
<textarea cols="30" rows="5" style="resize:both;">Amiens ...</textarea>
<textarea cols="30" rows="5" style="resize:horizontal;">Amiens ...</textarea>
<textarea cols="30" rows="5" style="resize:vertical;">Amiens ...</textarea>
<textarea cols="30" rows="5" style="resize:none;">Amiens ...</textarea>
Liens:
• http://www.apple.com/safari/
• http://www.w3.org/TR/css3-ui/#resize
Ce script permet de fixer un bug dans Safari 2 (Mac OS X) lors d'un événement keypress, Safari a tendance à doubler la saisie.
var v_fixDblKey = 0;
function fixDblKey() {
if(v_fixDblKey != 0) {
return true;
} else {
v_fixDblKey = setTimeout('v_fixDblKey = 0;', 10);
return false;
}
}
Exemple :
...
inputOnkeyup : function(event) {
if(fixDblKey()) { return; }
switch(event.keyCode) {
case 38 : /* up */
break
case 40 : /* down */
break;
case 37 : /* left */
break;
case 39 : /* right */
break;
case 9 : /* tab */
break;
case 13 : /* enter */
break;
}
}
...
