Retour à La Source • Tag: CSS • RSS http://www.ab-d.fr/tag/CSS/ Retour à La Source • Tag: CSS • RSS http://www.ab-d.fr/tag/CSS/ (c) 2010 fr Sat, 31 Jul 2010 15:00:19 +0100 Retour à La Source • Tag: CSS • RSS • version 1.0 noreply@ab-d.fr ( Benoit Asselin ) http://www.ab-d.fr/images/rss.gif Retour à La Source • Tag: CSS • RSS http://www.ab-d.fr/tag/CSS/ 90 30 border: 1px solid transparent Sous Internet Explorer 6 ( css , hack ) http://www.ab-d.fr/date/2008-09-17/ Wed, 17 Sep 2008 20:06:06 +0100 noreply@ab-d.fr ( Benoit Asselin ) 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



]]> http://www.ab-d.fr/tag/CSS/ http://www.ab-d.fr/date/2008-09-17/ 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/CSS/ http://www.ab-d.fr/date/2008-07-28/ Gérer les PNG transparents avec Internet Explorer 6 ( javascript, filter, CSS ) http://www.ab-d.fr/date/2008-06-01/ Sun, 01 Jun 2008 13:33:33 +0100 noreply@ab-d.fr ( Benoit Asselin ) 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'); }


]]> http://www.ab-d.fr/tag/CSS/ http://www.ab-d.fr/date/2008-06-01/ Effectuer une rotation d'image en CSS ( rotate balise canvas HTML5 ) http://www.ab-d.fr/date/2008-05-18/ Sun, 18 May 2008 17:18:19 +0100 noreply@ab-d.fr ( Benoit Asselin ) 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>


]]> http://www.ab-d.fr/tag/CSS/ http://www.ab-d.fr/date/2008-05-18/ Proposition d'écriture des Variables CSS - cssvariables (CSS, W3C) http://www.ab-d.fr/date/2008-04-13/ Sun, 13 Apr 2008 00:30:31 +0100 noreply@ab-d.fr ( Benoit Asselin ) 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 ;-)



]]> http://www.ab-d.fr/tag/CSS/ http://www.ab-d.fr/date/2008-04-13/ 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/CSS/ http://www.ab-d.fr/date/2008-02-18/ 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/CSS/ 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/CSS/ http://www.ab-d.fr/date/2008-02-06/ Include CSS Stylesheet en DOM (Document Object Model) http://www.ab-d.fr/date/2007-09-18/ Tue, 18 Sep 2007 00:00:00 +0100 noreply@ab-d.fr ( Benoit Asselin ) 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); }


]]> http://www.ab-d.fr/tag/CSS/ http://www.ab-d.fr/date/2007-09-18/ 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/CSS/ http://www.ab-d.fr/date/2007-08-12/ Internet Explorer ne supporte pas element.setAttritube('style') http://www.ab-d.fr/date/2007-08-02/ Thu, 02 Aug 2007 00:00:00 +0100 noreply@ab-d.fr ( Benoit Asselin ) 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;'); }


]]> http://www.ab-d.fr/tag/CSS/ http://www.ab-d.fr/date/2007-08-02/