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

border: 1px solid transparent Sous Internet Explorer 6 ( css , hack )
17`09`2008

5 commentairesPoster un commentaire !
Tags: Internet Explorer CSS

Astuce du jour : Comment faire comprendre à ce bon Internet Explorer 6.0 la couleur transparent appliquée sur un border ?

Une réponse peut déjà vous passer par la tête : " baaaahhhh un padding: 1px;, non ?! "...
oui mais voilà, Internet Explorer a une petite tendance à bugguer avec le CSS ( quelle découverte ! ) et pour fixer ces petits soucis, un border: 1px solid #fff; règle parfois le problème aussi étrange que celui puisse paraître, et donc la réponse a ma question prend tout son sens...

<style type="text/css" media="screen">

div.mon-test {
	width: 100%; height: 100px;
	border: 1px solid transparent;
}

</style>

<!-- Propriété propre à Internet Explorer 6.0 -->
<!--[if IE 6]>
<style type="text/css" media="screen">

div.mon-test {
	border-color: pink;
	filter: chroma(color=pink);
}

</style>
<![endif]-->

Cette solution n'est pas sans modifier le comportement du div impliqué, j'ai notamment remarqué que les propriétés de l'overflow n'étaient plus les mêmes. En bref, cette solution pourra ( je l'espère) vous aider, mais risque aussi de vous recréer d'autres problèmes ultérieurement. Je serais personnellement plus adepte d'un div dans un div.

Mais n'oubliez jamais cet adage : " Trop de div, Tue le div ! ".

Source du hack : http://acidmartin.wordpress.com/

 

nice try


Cahiers de vacances pour vos méninges ( quiz, php, css, actionscript... )
28`07`2008

2 commentairesPoster un commentaire !
Tags: XHTML CSS ActionScript Detente

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.

 


Gérer les PNG transparents avec Internet Explorer 6 ( javascript, filter, CSS )
01`06`2008

Aucun commentairePoster un commentaire !
Tags: Internet Explorer Javascript CSS

Voici un petit javascript qui vous permettra de fixer la transparence des images au format PNG transparent 24 bits sous Microsoft Internet Explorer 6.

function fixPNG() {
	if(navigator.appName == 'Microsoft Internet Explorer') {
		var png = /\.png$/i;
		var imgs = document.getElementsByTagName('img');
		for(var i = 0, l = imgs.length; i < l; i++) {
			if(png.test(imgs.item(i).src)) {
				imgs.item(i).style.width = imgs.item(i).offsetWidth;
				imgs.item(i).style.height = imgs.item(i).offsetHeight;
				imgs.item(i).style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + imgs.item(i).src + '\',sizingMethod=\'image\')';
				imgs.item(i).src = 'empty.gif';
			}
		}
	}
}

Fonctionnement de la function :
Le PNG transparent est remplacé par un fichier GIF totalement transparent de 1px², puis le filter contenant le PNG est appliqué sur l'image GIF.
Pour activer cette fonction, il suffit de l'appeler dans un événement window.onload = function(){}.

Rappel des différentes écritures du filter en CSS :

img.image1 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image1.png', sizingMethod='image'); }
img.image2 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image2.png', sizingMethod='scale'); }
img.image3 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image3.png', sizingMethod='crop'); }


Effectuer une rotation d'image en CSS ( rotate balise canvas HTML5 )
18`05`2008

2 commentairesPoster un commentaire !
Tags: CSS Javascript Canvas HTML5

A l'heure où j'écris ces quelques lignes, il n'existe pas réellement de vraie solution pour effectuer une rotation sur une image (ou sur un élément) en CSS.

Sous Microsoft Internet Explorer, on peut effectuer une telle opération avec filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);. Toutefois, ceci ne permet pas d'effectuer une rotation au degré prêt.

Sous Apple Safari (Webkit), l'équipe de développement a proposé l'écriture suivante -webkit-transform: rotate(90deg);. Cette solution présente un très grand avantage, elle peut être appliquée sur tout type de balises et non simplement sur une image, mais cette propriété reste propre à Safari version 3.x...

Dans cette histoire, il reste toujours un navigateur sans réelle solution, notre cher Mozilla Firefox... on aurait pu espérer une commande du type -moz-rotate: 90;, mais il n'en est rien.


Voici donc la solution, utiliser la balise <canvas></canvas>.

La balise <canvas> est une extension non standard à la norme HTML qui permet d'effectuer des rendus dynamiques d'images bitmap via des scripts.
Cette balise est supportée par les derniers navigateurs Mozilla Firefox, Apple Safari, et Opera Browser. A noter que Microsoft Internet Explorer ne supporte pas nativement la balise <canvas>, pour ce faire, vous devez utiliser une sous couche excanvas ( disponible sur http://excanvas.sourceforge.net )


Exemple de script de rotation d'image compatible avec la plupart des navigateurs récents :

<!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>rotate()</title>
	
	<style type="text/css" media="screen">
	img, canvas { border: 1px solid black; }
	</style>


<script type="text/javascript">

function rotate(p_deg) {
	if(document.getElementById('canvas')) {
		/*
		Ok!: Firefox 2, Safari 3, Opera 9.5b2
		Non: Opera 9.27
		*/
		var image = document.getElementById('image');
		var canvas = document.getElementById('canvas');
		var canvasContext = canvas.getContext('2d');
		
		switch(p_deg) {
			default :
			case 0 :
				canvas.setAttribute('width', image.width);
				canvas.setAttribute('height', image.height);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, 0, 0);
				break;
			case 90 :
				canvas.setAttribute('width', image.height);
				canvas.setAttribute('height', image.width);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, 0, -image.height);
				break;
			case 180 :
				canvas.setAttribute('width', image.width);
				canvas.setAttribute('height', image.height);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, -image.width, -image.height);
				break;
			case 270 :
			case -90 :
				canvas.setAttribute('width', image.height);
				canvas.setAttribute('height', image.width);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, -image.width, 0);
				break;
		};
		
	} else {
		/*
		Ok!: MSIE 6 et 7
		*/
		var image = document.getElementById('image');
		switch(p_deg) {
			default :
			case 0 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
				break;
			case 90 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
				break;
			case 180 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
				break;
			case 270 :
			case -90 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
				break;
		};
		
	};
};


window.onload = function() {
	var image = document.getElementById('image');
	var canvas = document.getElementById('canvas');
	if(canvas.getContext) {
		image.style.visibility = 'hidden';
		image.style.position = 'absolute';
	} else {
		canvas.parentNode.removeChild(canvas);
	};
	
	rotate(0);
};

</script>

</head>

<body>


<p>
	rotate:
	<input type="button" value="0°" onclick="rotate(0);" />
	<input type="button" value="90°" onclick="rotate(90);" />
	<input type="button" value="180°" onclick="rotate(180);" />
	<input type="button" value="-90°" onclick="rotate(-90);" />
</p>


<p>
	<img id="image" src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" />
	<canvas id="canvas"></canvas>
</p>


</body>
</html>


Proposition d'écriture des Variables CSS - cssvariables (CSS, W3C)
13`04`2008

Aucun commentairePoster un commentaire !
Tags: CSS W3C

Peut-être comme moi, vous trouvez qu'il manque cruellement d'une fonctionnalité dans les feuilles de style CSS : La possibilité de créer des variables CSS.

Voici une proposition d'écriture sur la manière de déclarer les variables CSS selon Apple, Inc. et Disruptive Innovations. :

@variables {
	LogoCouleurDeFond: #ff6600;
}

div.logo {
	background-color: var(LogoCouleurDeFond);
}

@variables { } permet de définir les différentes variables avec leurs valeurs respectives, et var( ) permet d'appeler la variable dans la feuille de style.

 

@variables {
	myMargin1: 2em;
}
@variables print {
	myMargin1: 5em;
}

.class1, div.class2 {
	margin-left: 30px;
	margin-left: var(myMargin1);
}

L'exemple ci-dessus nous montre comment écrire la variable CSS tout en assurant une rétrocompatibilité avec les navigateurs qui ne supporteront pas les variables CSS.
Vous noterez aussi au passage le @variables print { } qui permet de définir les variables CSS selon le type de médias.

Source : http://disruptive-innovations.com/zoo/cssvariables/

Je rappelle que cet article est une présentation de proposition d'écriture pour les variables CSS. Cette écriture n'est donc supportée par aucun navigateur web. Toutefois, cette proposition ayant notamment été faite par Apple Inc., mon petit doigt me dit que l'on risque sûrement de retrouver cette écriture dans une prochaine version de Webkit ;-)


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


Rendre ''position: fixed'' compatible Internet Explorer 6 (CSS, expression)
11`02`2008

5 commentairesPoster un commentaire !
Tags: CSS Internet Explorer XHTML

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 !


Comment créer une variable CSS - Cascading Style Sheets ?
06`02`2008

4 commentairesPoster un commentaire !
Tags: CSS PHP XHTML

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


Include CSS Stylesheet en DOM (Document Object Model)
18`09`2007

Aucun commentairePoster un commentaire !
Tags: CSS Javascript DOM

function includeCSS(p_file) {
	var v_css  = document.createElement('link');
	v_css.rel = 'stylesheet'
	v_css.type = 'text/css';
	v_css.href = p_file;
	document.getElementsByTagName('head')[0].appendChild(v_css);
}

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


Internet Explorer ne supporte pas element.setAttritube('style')
02`08`2007

Aucun commentairePoster un commentaire !
Tags: CSS Javascript

if(navigator.appName == 'Microsoft Internet Explorer') {
	document.getElementById('test').style.cssText = 'background:gray; color:white;';
} else {
	/* document.getElementById('test').style.cssText = 'background:gray; color:white;'; */
	document.getElementById('test').setAttribute('style', 'background:gray; color:white;');
}