Asselin Benoit Développement - Création et conception de sites internet - Amiens Somme Picardie Paris France

Détecter le navigateur Google Chrome ( Webkit, Safari, Javascript )
02`09`2008

6 commentairesPoster un commentaire !
Tags: Google Actualites Internet Webkit

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 ?! ^^


Les coulisses de Google Chrome :

Télécharger Google Chrome :
http://www.google.com/chrome
http://code.google.com/chromium/


The Acid3 Test 100% ! avec Webkit ( et Opera Browser )
28`03`2008

Aucun commentairePoster un commentaire !
Tags: Actualites Internet Safari Webkit

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à.


Gérer window.orientation avec un iPhone / iPod Touch dans Safari (Webkit)
08`03`2008

6 commentairesPoster un commentaire !
Tags: iPhone Javascript Webkit

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.


La peuso-classe :target en CSS3 Sélecteur W3C (World Wide Web Consortium)
18`02`2008

Aucun commentairePoster un commentaire !
Tags: CSS Webkit

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


Comment détecter le navigateur iPhone ? (Safari, Webkit)
29`11`2007

Aucun commentairePoster un commentaire !
Tags: iPhone Safari Webkit

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


Comment redimensionner un TEXTAREA en CSS 3 ? (Safari, Webkit)
12`08`2007

Aucun commentairePoster un commentaire !
Tags: CSS Safari Webkit

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


Problème de double "keypress" avec Safari 2
25`02`2007

Aucun commentairePoster un commentaire !
Tags: Safari Webkit Javascript

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;
	}
}
...