28220 sujets

CSS et mise en forme, CSS3

[Résolu] Emuler le moz-border-radius

Pages :
(reprise du message précédent)

Salut, ben justement je réagis à ce vieux post.

Je voulais (bien qu'étant débutant) faire des sites conformes aux Standards W3C.
Sur ce site (le texte est bidon par pas encore vraiment officialisé !) je voulais utiliser le fameux -moz-border-radius mais comme dit plus haut ma page CSS ne peux alors être validée.
Du coup j'ai mis cette propirété en /**/

J'attends donc l'implémentation de CSS3 car je trouve cette propriété interressante (même si certains parlent de "frime" Smiley langue ) comme le sont les propriétés de border ...
Modifié par Damino (10 Aug 2005 - 09:04)
Damino a écrit :
je voulais utiliser le fameux -moz-border-radius mais comme dit plus haut ma page CSS ne peux alors être validée.
Du coup j'ai mis cette propirété en /**/

J'attends donc l'implémentation de CSS3 car je trouve cette propriété interressante (même si certains parlent de "frime" Smiley langue ) comme le sont les propriétés de border ...


Inutile d'attendre CSS3 : cette propriété CSS2.1 est valide. Voir http://forum.alsacreations.com/topic.php?fid=4&tid=5368#p46740
Laurent Denis a écrit :


Inutile d'attendre CSS3 : cette propriété CSS2.1 est valide. Voir http://forum.alsacreations.com/topic.php?fid=4&tid=5368#p46740


CSS3 ou 2.1, peut importe, ie ne gère pas cette MAGNIFIQUE propriété.
Si c'est juste pour dire je passe le validateur, je suis pas sur que ce soit vraiement utile, enfin bon Smiley rolleyes .
Par contre quid du border-radius sur ie7, d'après ce que j'ai lu, ie7 ne sera même pas complétement compatible css2 donc css3 on peut réver Smiley bawling
Void a écrit :

Si c'est juste pour dire je passe le validateur, je suis pas sur que ce soit vraiement utile, enfin bon Smiley rolleyes .


Comme toutes les extentions CSS, elle n'est évidement utile que dans le navigateur concerné, c'est à dire Mozilla / Firefox Smiley cligne .
hey c'est pas mal çà !!
en tout cas çà marche sour IE 5.5 Win95

j'ai fait 2 fichiers :

test.html
<?xml version="1.0"?>
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>A simple test page</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<style type="text/css">
.class-1{
	background: #CFD8E6;
	border: 1px solid #9197A1;
	width: 250px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	behavior: url(test.htc);
}
</style>
</head>
<body>
<div class="class-1">coucou<br />test</div>
</body>
</html>


test.htc
<public:attach event="oncontentready" onevent="border()" />  
<script type="text/javascript">  
function border(offset) 
{
	innerHTML = '<v:roundrect\ arcsize="' + Math.min(parseInt(currentStyle['moz-border-radius']) / Math.min(offsetWidth, offsetHeight), 1) + '"\ strokecolor="' + currentStyle.borderColor + '"\ strokeweight="' + (offset = currentStyle.borderWidth) + '"\ style="\ behavior:url(#default#VML);width:99%;height:99%;antialias:true;\ padding-left:' + (parseInt(currentStyle.paddingLeft) + parseInt(offset)) + 'px;\ padding-right:' + (parseInt(currentStyle.paddingRight) + parseInt(offset)) + 'px;\ padding-top:' + (parseInt(currentStyle.paddingTop) + parseInt(offset)) + 'px;\ padding-bottom:' + (parseInt(currentStyle.paddingBottom) + parseInt(offset)) + 'px;\"><v:fill\ color="' + currentStyle.backgroundColor + '"\      src="' + currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1')+ '"  type="tile" style="behavior:url(#default#VML)" />' + innerHTML + '</v:roundrect>';
	style.background = 'transparent'; 
	style.border = 'none'; 
	style.padding = '0';  
}  
</script>


le fichier htc , je l'ai trouvé dans le lien que Void a donné

donc ca marche bien , mais si on augmente le border en 2 à 5px par ex. c'est pas très joli joli

mais sinon çà reste un hack mais sans image, je trouve ca sympa !
je ne sais pas trop sur quoi çà marche par contre

<edit> je fouine , et donc pour augmenter le radius , il suffit de modifier le nombre de px du -moz-border pour que sous IE cela augmente
le border-radius: 10px; ne sert pas à grand chose apparement

c'est quand même super interessant si on a un border à 1px, c'est pas trop moche et c'est sans images,
une alternative ? .....
Modifié par sane79 (10 Aug 2005 - 13:24)
sane79 a écrit :
h
<
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">


Hors sujet: tu n'a jamais songé à passer à SVG ? C'est un petit peu périmé, le VML Smiley cligne
j'ai trouvé comment rendre la bordure plus joli
juste en décorticant la propriété border :
.class-1{
	background: #CFD8E6;
	border-widht : 1px;
	border-color : red;
	border-style : solid;
	width: 550px;
	-moz-border-radius: 20px;
	behavior: url(test.htc);
}


now cela s'affiche comme sous Fx

<edit> lol Smiley biggrin en fait j'ai fait une faute : border-widht : 1px; au lieu de border-width : 1px;
du coup Fx déconne mais sous IE c'est nickel (à peu près)
Modifié par sane79 (10 Aug 2005 - 13:43)
bon ca y est pour que ce soit comme sous Firefox
suffit de mettre l'antialiasing à false et le width et height à 100%
dans le test.htc
+ '"\ style="\ behavior:url(#default#VML);width:100%;height:100%;antialias:false;\ padding-left:'


et là c'est nickel

Laurent Denis , il me semble pas que IE comprenne le SVG ? non ? en tout cas VML est compris et ca marche bien

Est ce bien une bonne solution ? en tout cas c'est nickel

je remet donc les fichiers modifiés pour les interessés :

test.html
<?xml version="1.0"?>
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>A simple test page</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<style type="text/css">
.class-1{
	background: #CFD8E6;
/*	border : 1px solid red;*/
	border-width : 1px !important; 
	border-color : red;
	border-style : solid;
	width: 550px;
	-moz-border-radius: 20px;
	behavior: url(test.htc);
}
</style>
</head>
<body>
<div class="class-1">coucou<br />test<br />test<br />test<br />test<br />test</div>
</body>
</html>


test.htc
<script type="text/javascript">  
function border(offset) 
{
	innerHTML = 
		'<v:roundrect\ arcsize="'
		+ Math.min(parseInt(currentStyle['moz-border-radius']) / Math.min(offsetWidth, offsetHeight), 1)
		+ '"\ strokecolor="'
		+ currentStyle.borderColor
		+ '"\ strokeweight="'
		+ (offset = currentStyle.borderWidth)
		+ '"\ style="\ behavior:url(#default#VML);width:100%;height:100%;antialias:false;\ padding-left:'
		+ (parseInt(currentStyle.paddingLeft)
		+ parseInt(offset))
		+ 'px;\ padding-right:'
		+ (parseInt(currentStyle.paddingRight)
		+ parseInt(offset))
		+ 'px;\ padding-top:'
		+ (parseInt(currentStyle.paddingTop)
		+ parseInt(offset))
		+ 'px;\ padding-bottom:'
		+ (parseInt(currentStyle.paddingBottom)
		+ parseInt(offset))
		+ 'px;\"><v:fill\ color="'
		+ currentStyle.backgroundColor
		+ '"\      src="'
		+ currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1')
		+ '"  type="tile" style="behavior:url(#default#VML)" />'
		+ innerHTML
		+ '</v:roundrect>';
	style.background = 'transparent'; 
	style.border = 'none'; 
	style.padding = '0';  
}  
</script>
Pour mon problème ca venait effectivement de mon doctype : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ne marche pas.
Void a écrit :
Pour mon problème ca venait effectivement de mon doctype : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ne marche pas.


ah ben moi sous IE 5.5 Win95 , ca marche ton doctype Smiley biggol
sane79 a écrit :


ah ben moi sous IE 5.5 Win95 , ca marche ton doctype Smiley biggol


Je viens de rajouter 
<?xml version="1.0"?>
et là ca marche, ca correspond a quoi, et surtout ca sert a quoi ??? (a part a faire marcher ce hack Smiley cligne )
moi je trouve que c'est une astuce vraiment interressante pour les gens qui souhaitent mettre des coins arrondis dans IE sans s'embetter avec des images plus tous les div qui vont avec.
Il faudrait mette plus en avant cette solution !
peut être un sujet dans le blog communautaire ? non ?
donnez la chance à cette solution de vivre !

Y a t-il des utilisateurs qui l'ont testé sous IE 6 ?
hey il ne faut pas que cette solution parte dans les oubliettes

faîtes nous par de vos réactions fasse à cette solution des coins arrondis !
Cette solution présente le défaut non négligeable d'obliger à basculer IE6.0 en mode quirks, ici avec le prologue XML:

- IE5.5 ne connaît que ce mode, c'est pourquoi tu n'as pas besoin dans celui-ci du prologue XML

- Mais IE6.0 bascule du mode strict de rendu au mode quirks en fonction de la présence de ce prologue. C'est pourquoi Void en a besoin.

Et travailler en mode Quirks est un choix très discutable.

(Void : le le rôle du prologue XML, voir les commentaires dans le lien ci-dessus, ainsi que http://blog-and-blues.org/weblog/2004/08/16/275-encodage-caracteres-xhtml )

D'autre part, j'avoue que, personnellement, cela fait beaucoup à faire pour un simple arrondi dont les utilisateurs d'IE se passeront aisément.

<edit>Un détail sur ton code ci-dessus:

<meta http-equiv="content-type" content="[b]application/xhtml+xml; [/b] charset=ISO-8859-1" />


...est inutile et inaproprié :
- IE ne sait pas traiter ce type de contenu et reçoit de toute façon du text/html : ta méta est donc en contradiction avec le type de contenu réel du document.
- spécifié uniquement via une <meta...> , application/xhtml+xm est ignoré par les navigateurs conformes XHTML (Firefox, Opera)
- enfin, cette meta ne doit pas être utilisée lorsque le document est vraiment servi en application/xhtml+xml : elle est alors remplacée par le prologue XML, justement.

Puisque tu fais du text/html, écris-le simplement :

<meta http-equiv="Content-Type" content="[b]text/html; [/b]charset=iso-8859-1" />

Modifié par Laurent Denis (12 Aug 2005 - 08:42)
PsychoMessiah a écrit :
Faut boycotter IE un jour les gens se rendront compte qu'il est obsolète...


Excellente idée : du coup, tu boycotteras la plus grande partie des utilisateurs de lecteurs d'écran (sans compter de nombreux autres outils d'aide), et cela m'évitera de lire ces inepties puisque je serais boycotté.

Pourquoi ineptie ? Parce que le but de tout ce que nous essayons de faire à travers les standards et les navigateurs modernes est de donner à chacun la plus grande liberté de choix possible. Ce qui inclut le choix d'IE comme navigateur, au même titre que n'importe quel autre.

Merci de ne pas polluer ce forum avec des trolls de bas-étage. C'est à se demander pourquoi on tente d'expliquer les choses...
Modifié par Laurent Denis (16 Aug 2005 - 18:51)
<modération>

Merci de l'intention. Mais le troll est clot. Inutile d'y revenir, svp.

</modération>
Modifié par Laurent Denis (16 Aug 2005 - 22:42)
Pages :
Sujet clos
Aller à