28172 sujets

CSS et mise en forme, CSS3

Optimisation des border

Bonjour à vous,

J'aurais voulu avoir des info concernant l'optimisation d'un code Css

Le code en question:

border-top:1px solid #e8d593;
border-right:1px solid #aaa36c;
border-bottom:1px solid #aaa36c;
border-left:1px solid #e8d593;


Y-a-t-il une façon de réduire encore ce code en le mettant sur une seule ligne (border:1px solid #aaa36c;) mais en gardant les couleurs différentes.

et aussi :
Et ce qu'il y a un ordre pour les cotés (top- left- etc...)

Merci d'avance.
Bonjour,
Pour les spécifications de la propriété 'border', un petit tour sur mediabox peut être très utile.
Concernant le présent exemple, et si le but n'est que de gagner quelques octets, voici une proposition qui allège le code :
border:1px solid #aaa36c;
border-top-color:#e8d593;
border-left-color:#e8d593;
Bonjour,

La version la plus courte que je vois est la suivante (en remplaçant les couleurs par des mots-clefs dans cet exemple, mais tu peux bien sûr mettre les mêmes couleurs que dans ton code):
border: 1px solid;
border-color: gray black black gray;


Un exemple qui illustre ceci:
<!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="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test page</title>
	<style type="text/css">
		div {
			float: left;
			font-size: 3em;
			margin: 2em;
			padding: 2em;
			border-style: solid dashed dotted double;
			border-width: 5px 10px 15px 20px;
			border-color: blue red green purple;
		}
	</style>
</head>

<body>

<div> Test </div>

</body>
</html>


Par contre, la propriété border n'accepte qu'une seule valeur pour chaque propriété concernée (border-style, border-width et border-color). Si tu écris ceci:
border: 1px 2px 1px 2px solid gray black black gray;
Eh bien ce code ne sera pas pris en compte.

PS: ai testé le code de mon exemple ci-dessus avec Firefox et Opera, mais il faudrait tester avec IE (6 et 7) et Safari pour s'assurer que cette syntaxe est bien comprise.
Modifié par Florent V. (19 Aug 2008 - 15:37)
Merci pour la précision sur border-color, je ne savais pas, et surtout n'avais jamais pensé à vérifier, que l'on pouvait définir des couleurs différentes pour chaque bord avec cette propriété.

EDIT : je confirme que ce code fonctionne pour Internet Explorer 6 et 7 ainsi que pour Safari.
Modifié par Shunkin (19 Aug 2008 - 15:45)
Merci beaucoup pour vos réponses et la rapidité.

Le code fonctionne bien, même avec IE6 et IE7
Shunkin a écrit :
Pour les spécifications de la propriété 'border', un petit tour sur mediabox peut être très utile.

Le wiki de documentation CSS de Mediabox est utile, effectivement. Pour ma part, je me dirige plutôt vers les spécifications HTML 4.01 et CSS 2.1 quand j'ai un doute. C'est ce que j'ai fait ici, et je ne connaissais pas la syntaxe border-color: color1 color2 color3 color4; avant de vérifier. Smiley cligne
Modifié par Florent V. (19 Aug 2008 - 17:53)
Sujet clos
Aller à