Retour à La Source • Tag: Webkit • RSS http://www.ab-d.fr/tag/Webkit/ Retour à La Source • Tag: Webkit • RSS http://www.ab-d.fr/tag/Webkit/ (c) 2010 fr Sat, 31 Jul 2010 14:52:55 +0100 Retour à La Source • Tag: Webkit • RSS • version 1.0 noreply@ab-d.fr ( Benoit Asselin ) http://www.ab-d.fr/images/rss.gif Retour à La Source • Tag: Webkit • RSS http://www.ab-d.fr/tag/Webkit/ 90 30 Détecter le navigateur Google Chrome ( Webkit, Safari, Javascript ) http://www.ab-d.fr/date/2008-09-02/ Tue, 02 Sep 2008 22:00:22 +0100 noreply@ab-d.fr ( Benoit Asselin ) 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/



]]> http://www.ab-d.fr/tag/Webkit/ http://www.ab-d.fr/date/2008-09-02/ The Acid3 Test 100% ! avec Webkit ( et Opera Browser ) http://www.ab-d.fr/date/2008-03-28/ Fri, 28 Mar 2008 06:06:06 +0100 noreply@ab-d.fr ( Benoit Asselin ) 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à.



]]> http://www.ab-d.fr/tag/Webkit/ http://www.ab-d.fr/date/2008-03-28/ Gérer window.orientation avec un iPhone / iPod Touch dans Safari (Webkit) http://www.ab-d.fr/date/2008-03-08/ Sat, 08 Mar 2008 18:31:13 +0100 noreply@ab-d.fr ( Benoit Asselin ) 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.



]]> http://www.ab-d.fr/tag/Webkit/ http://www.ab-d.fr/date/2008-03-08/ La peuso-classe :target en CSS3 Sélecteur W3C (World Wide Web Consortium) http://www.ab-d.fr/date/2008-02-18/ Mon, 18 Feb 2008 06:32:23 +0100 noreply@ab-d.fr ( Benoit Asselin ) 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



]]> http://www.ab-d.fr/tag/Webkit/ http://www.ab-d.fr/date/2008-02-18/ Comment détecter le navigateur iPhone ? (Safari, Webkit) http://www.ab-d.fr/date/2007-11-29/ Thu, 29 Nov 2007 00:00:00 +0100 noreply@ab-d.fr ( Benoit Asselin ) 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


]]> http://www.ab-d.fr/tag/Webkit/ http://www.ab-d.fr/date/2007-11-29/ Comment redimensionner un TEXTAREA en CSS 3 ? (Safari, Webkit) http://www.ab-d.fr/date/2007-08-12/ Sun, 12 Aug 2007 00:00:00 +0100 noreply@ab-d.fr ( Benoit Asselin ) 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



]]> http://www.ab-d.fr/tag/Webkit/ http://www.ab-d.fr/date/2007-08-12/ Problème de double "keypress" avec Safari 2 http://www.ab-d.fr/date/2007-02-25/ Sun, 25 Feb 2007 00:00:00 +0100 noreply@ab-d.fr ( Benoit Asselin ) 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;
	}
}
...


]]> http://www.ab-d.fr/tag/Webkit/ http://www.ab-d.fr/date/2007-02-25/