Retour à La Source • Tag: XHTML • RSS http://www.ab-d.fr/tag/XHTML/ Retour à La Source • Tag: XHTML • RSS http://www.ab-d.fr/tag/XHTML/ (c) 2010 fr Sat, 31 Jul 2010 15:02:16 +0100 Retour à La Source • Tag: XHTML • RSS • version 1.0 noreply@ab-d.fr ( Benoit Asselin ) http://www.ab-d.fr/images/rss.gif Retour à La Source • Tag: XHTML • RSS http://www.ab-d.fr/tag/XHTML/ 90 30 Internet Explorer 8, la nouvelle croix du développeur web ( EmulateIE7 ) http://www.ab-d.fr/date/2009-03-24/ Tue, 24 Mar 2009 19:00:00 +0100 noreply@ab-d.fr ( Benoit Asselin ) Peut-être comme moi, vous venez de découvrir Internet Explorer 8 et que ce dernier est un " peu " plus compatible que Internet Explorer 7... Toutefois, certaines pages fonctionnent mal vu la quantité de patch CSS appliqués pour fixer les soucis de IE7, IE6, etc...

Microsoft a donc pensé à tout ! Il nous a sorti une balise META qui permet d'indiquer à Internet Explorer 8 la version du moteur graphique à utiliser. Pour forcer un rendu IE7 et non IE8, il suffit d'injecter la META ci-dessous : 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Chose assez amusante, on pourrait croire que le site officiel de Microsoft est parfaitement compatible Internet Explorer 8, et qu'il n'a pas du tout besoin de cette META... et bien il n'en est rien, leur code source contient aussi la dite balise ! " Vive Microsoft ! "

Pendant ce temps, on doit toujours faire attention à Internet Explorer 6, utilisé par environ 1/4 des surfeurs du Web... Heureusement, ce chiffre baisse de mois en mois.

Documentation MSDN :
• http://msdn.microsoft.com/en-us/library/cc817574.aspx



]]> http://www.ab-d.fr/tag/XHTML/ http://www.ab-d.fr/date/2009-03-24/ Cahiers de vacances pour vos méninges ( quiz, php, css, actionscript... ) http://www.ab-d.fr/date/2008-07-28/ Mon, 28 Jul 2008 09:09:09 +0100 noreply@ab-d.fr ( Benoit Asselin ) Les vacances sont là,
Les plages sont pleines de monde,
Les glaces fondent trop vite,
Les bières sont chaudes... ( vous sentez le stress monter ? )
Et y faut faire les cahiers de vacances de vos chers petits, ( encore et toujours )
Mais vous, avez-vous pensez aux vôtres ?
Heureusement, votre humble serviteur, Oui ! ( en bon tortionnaire que je suis ;-)

Voici une liste de liens avec des petits Quiz sur vos langages de programmation préférées.

 



]]> http://www.ab-d.fr/tag/XHTML/ http://www.ab-d.fr/date/2008-07-28/ Firefox 3 et input type=file Nouvelle Formule ! ( upload, path, nsIDOMFile ) http://www.ab-d.fr/date/2008-07-12/ Sat, 12 Jul 2008 08:40:04 +0100 noreply@ab-d.fr ( Benoit Asselin ) De bon matin, je me lève, j'arrive sur une de mes applications en ligne, et là horreur ! cette dernière ne fonctionne plus sous Mozilla Firefox 3... Après analyse des petits messages d'erreurs, je me rends à l'évidence le formulaire <input type="file" /> ne se comporte plus de la même façon...

Les développeurs de Firefox 3 ont corrigé une petite faille de sécurité : Lorsque vous cliquez sur le bouton Parcourir le value de votre zone input type="file" contenait le nom du fichier ainsi que son chemin sur le disque dur, et bien aujourd'hui cela n'est plus, vous n'aurez plus que le nom du fichier.
D'ailleurs, Opera Browser se comporte aussi de la sorte, pour le moment Microsoft Internet Explorer et Apple Safari retournent toujours le chemin complet du fichier.

Une très bonne nouvelle s'accompagne de ce petit changement, vous pouvez à présent accéder aux données du fichier sélectionné par l'utilisateur en Javascript sans poster le formulaire grâce à l'objet FileList.

Un exemple vaut mieux qu'un long discours, voici une page qui vous permettra d'essayer cette nouvelle fonctionnalité (qui je le rappelle, ne fonctionne que sur Mozilla Firefox 3) : 

<!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>input type=file & Firefox 3</title>
</head>

<body>
	
<h1>input type=file & Firefox 3</h1>
	
<script type="text/javascript">
// <![CDATA[

function inputFileOnChange() {
	var v_console = '';
	v_console += 'value: ' + document.getElementById('fichier').value;
	v_console += '<br \/>';
	
	if(document.getElementById('fichier').files) {
		// Support: nsIDOMFile, nsIDOMFileList
		v_console += 'files.length: ' + document.getElementById('fichier').files.length;
		v_console += '<br \/>';
		
		v_console += 'fileName: ' + document.getElementById('fichier').files.item(0).fileName;
		v_console += '<br \/>';
		
		v_console += 'fileSize: ' + document.getElementById('fichier').files.item(0).fileSize;
		v_console += '<br \/>';
		
		v_console += 'data: ' + document.getElementById('fichier').files.item(0).getAsDataURL();
//		v_console += 'data: ' + document.getElementById('fichier').files.item(0).getAsBinary();
//		v_console += 'data: ' + document.getElementById('fichier').files.item(0).getAsText();
		v_console += '<br \/>';
	};
	
	document.getElementById('console').innerHTML = v_console;
};

// ]]>
</script>
	
<div>
	<input type="file" name="fichier" id="fichier" onchange="inputFileOnChange();" />
	<br /><br />
	<code id="console">...console...</code>
</div>
	
</body>
</html>

Documentation officielle :
• http://developer.mozilla.org/en/docs/nsIDOMFile
• http://developer.mozilla.org/en/docs/nsIDOMFileList
• http://www.w3.org/TR/file-upload/



]]> http://www.ab-d.fr/tag/XHTML/ http://www.ab-d.fr/date/2008-07-12/ Désactiver la saisie semi-automatique dans un input text ( autocomplete ) http://www.ab-d.fr/date/2008-06-14/ Sat, 14 Jun 2008 00:07:08 +0100 noreply@ab-d.fr ( Benoit Asselin ) Votre site comporte peut être des formulaires avec des zones <input type="text" />, mais le navigateur soucieux d'assister l'utilisateur, pollue vos formulaires avec de la saisie semi-automatique...

Comment remédier à ce problème et surtout comment désactiver cette saisie semi-automatique ? Il "suffit" d'utiliser l'attribut autocomplete. 

<input type="text" name="zone_texte" value="" autocomplete="off" />

J'ai pu testé avec succès cet attribut sur les différents navigateurs du moment : Microsoft Internet Explorer, Mozilla Firefox, et Apple Safari (webkit). Toutefois, cet attribut autocomplete écrit de manière brute dans le code source de votre page n'est ni valide en HTML, ni valide en XHTML. Pour fixer ce petit soucis, vous pouvez initialiser l'attribut avec du Javascript au moyen de la méthode setAttribute.

Voici un exemple de code Javascript qui désactivera totalement la saisie semi-automatique dans vos formulaires HTML : 

<script type="text/javascript">

window.onload = function() {
	for(var i = 0, l = document.getElementsByTagName('input').length; i < l; i++) {
		if(document.getElementsByTagName('input').item(i).type == 'text') {
			document.getElementsByTagName('input').item(i).setAttribute('autocomplete', 'off');
		};
	};
};

<script>


]]> http://www.ab-d.fr/tag/XHTML/ http://www.ab-d.fr/date/2008-06-14/ Créer / convertir des adresses de sites internet HTTP en liens cliquables http://www.ab-d.fr/date/2008-03-23/ Sun, 23 Mar 2008 04:03:02 +0100 noreply@ab-d.fr ( Benoit Asselin ) La fonction ci-dessous vous permet par l'intérmédiaire des expressions régulières de convertir automatiquement les adresses de sites internet http://www.ab-d.fr/ en lien actif avec la balise <a href="http://www.ab-d.fr/" onclick="window.open(this.href); return false;">http://www.ab-d.fr/</a>.

Accessoirement, la fonction convertit aussi les adresses emails... libre à vous de rajouter d'autres fonctionnalités de remplacement grâce à la fonction preg_replace().

function texte2url($texte) {
	$patterns[0] = '/(https?:\/\/\S+)/i';
	$replacements[0] = '<a href="$1" onclick="window.open(this.href); return false;">$1</a>';
	
	$patterns[1] = '/(\S+@\S+\.\S+)/i';
	$replacements[1] = '<a href="mailto:$1">$1</a>';
	
	return preg_replace($patterns, $replacements, $texte);
}


]]> http://www.ab-d.fr/tag/XHTML/ http://www.ab-d.fr/date/2008-03-23/ $_SERVER['PHP_SELF'] et injection de code HTML (création site internet) http://www.ab-d.fr/date/2008-03-02/ Sun, 02 Mar 2008 04:24:24 +0100 noreply@ab-d.fr ( Benoit Asselin ) Cette faille de sécurité n'est pas nouvelle en soit, mais il est parfois bon de faire un petit rappel. De manière générale, ne faites jamais confiance aux variables $_SERVER, $_COOKIE, mais aussi, $_GET, $_POST, $_REQUEST, $_FILES...

Exemple de faille avec <?php echo $_SERVER['PHP_SELF']; ?> dans la page php suivante : 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>$_SERVER['PHP_SELF']</title>
</head>
<body>
	<form action="<?php echo $_SERVER['PHP_SELF']; ?>" action="post">
		<fieldset>
			<legend>Ma FORM</legend>
			<p><input type="submit"></p>
		</fieldset>
	</form>
</body>
</html>

Si vous appelez la page ci-dessus avec le lien suivant :

http://www.monsite.com/page.php/"><script>alert('Injection!');</script>

vous verrez une belle fenêtre de dialogue Javascript "Injection!" ...

Pour remédier à cette faille de sécurité, pensez à toujours sécuriser vos variables avec une fonction du type htmlentities().



]]> http://www.ab-d.fr/tag/XHTML/ http://www.ab-d.fr/date/2008-03-02/ Rendre ''position: fixed'' compatible Internet Explorer 6 (CSS, expression) http://www.ab-d.fr/date/2008-02-11/ Mon, 11 Feb 2008 18:50:05 +0100 noreply@ab-d.fr ( Benoit Asselin ) Ce code a pour but de rendre compatible le fameux position : fixed sur Internet Explorer 6 à l'aide de la propriété expression() propre à ce dernier. Cette propriété permet de recalculer dynamiquement le contenu de l'expression expression(...) durant la manipulation de la page, en l'occurrence lors d'un évènement window.onscroll, sans code Javascript additionnel.


Page page-position.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>Rendre "position: fixed" compatible Microsoft Internet Explorer 6</title>
	
	
	<!-- Code CSS pour Firefox, Safari, Opera, Internet Explorer 7... -->
	
	<style type="text/css" media="screen">
		
	#fixed {
		position: fixed;
		left: 0; top: 0; right: 0;
		width: 100%;
		padding: 10px; background: gray;
	}
	
	</style>
	
	
	<!-- Code CSS pour Internet Explorer 6 -->
	
	<!--[if lte IE 6]>
	<style type="text/css" media="screen">
	
	#fixed {
		position: absolute;
		top: expression((document.documentElement.scrollTop || document.body.scrollTop) + this.offsetHeight - this.offsetHeight);
	}
	
	</style>
	<![endif]-->
	
	
</head>

<body>
	
	<div id="fixed">DIV en position: fixed;</div>
	
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	<p>Contenu du site internet ...</p>
	
</body>

</html>

UPDATE : Il est important de copier l'intégralité du code avec les balises commentaires propres à Internet Explorer, sinon le fix ne fonctionnera pas !



]]> http://www.ab-d.fr/tag/XHTML/ http://www.ab-d.fr/date/2008-02-11/ Comment créer une variable CSS - Cascading Style Sheets ? http://www.ab-d.fr/date/2008-02-06/ Wed, 06 Feb 2008 18:43:34 +0100 noreply@ab-d.fr ( Benoit Asselin ) La solution consiste n'ont pas à créer une variable CSS, mais à utiliser PHP pour créer des variables dans le code CSS. Pour ce faire, nous allons utiliser l'écriture simplifiée de
<?php echo $variable_css; ?>   en   <?= $variable_css ?> .


Page page.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>Variable CSS - Cascading Style Sheets</title>
	<link rel="stylesheet" type="text/css" href="style.php" />
</head>

<body>


<h1>Variable CSS - Cascading Style Sheets</h1>

<p class="color-1">Bloc de couleur n°1 - Variable CSS Cascading Style Sheets</p>

<p class="color-2">Bloc de couleur n°2 - Variable CSS Cascading Style Sheets</p>

<p class="color-3">Bloc de couleur n°3 - Variable CSS Cascading Style Sheets</p>


</body>

</html>


Page style.php et non style.css

<?php
header('Content-Type: text/css');

$color_0 = '#000000';
$color_1 = '#ff0000';
$color_2 = '#ff3300';
$color_3 = '#ff6600';

?>

* { font-family: sans-serif; }

h1 {
	padding: 5px;
	color: <?= $color_0 ?>;
	border: 5px solid <?= $color_2 ?>;
	background-color: <?= $color_3 ?>;
}

p.color-1 { color: <?= $color_1 ?>; }
p.color-2 { color: <?= $color_2 ?>; font-weight: bold; }
p.color-3 { color: <?= $color_3 ?>; font-style: italic; }


]]> http://www.ab-d.fr/tag/XHTML/ http://www.ab-d.fr/date/2008-02-06/ Comment rendre l'attribut target="_blank" valide en XHTML ? http://www.ab-d.fr/date/2007-07-26/ Thu, 26 Jul 2007 00:00:00 +0100 noreply@ab-d.fr ( Benoit Asselin ) Voici une autre manière d'écrire l'attribut "target" et valide pour la norme XHTML.

<a href="http://www.ab-d.fr/" onclick="window.open(this.href); return false;">


]]> http://www.ab-d.fr/tag/XHTML/ http://www.ab-d.fr/date/2007-07-26/