LessCSS incompatible avec IE6 et +

chok371 · 01/03/2011, 21h02

Bonjour,

J'ai récemment essayé le framework LessCSS (http://lesscss.org/) et j'ai remarqué qu'il ne fonctionne pas sur IE6 et plus, alors que sur le site il est écrit qu'il est justement compatible avec IE. Pire, le site officiel n'est lui même pas compatible avec les versions d'IE : http://img827.imageshack.us/i/pressepapiers1d.jpg/

Voici mon code complet :

HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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>Test de LessCSS</title>
 
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="less-1.0.41.min.js" type="text/javascript"></script>
 
</head>
<body>
 
<div class="test"> TEST TEST TEST TEST TEST TEST TEST</div>
<div id="test2">
	<h2>
		<blockquote>
			TEST TEST TEST TEST TEST <span>TEST</span> TEST TEST TEST TEST
		</blockquote>
	</h2>
</div>
 
<a href="test">test<a/>
 
</body>
</html>

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
.test {
	color: red;
}
 
@color : blue;
 
.test {
	color: @color;
}
 
.border {
	border: 2px solid blue;
	display: block;
}
 
.test {
	color: @color;
	.border;
}
 
@value : 5px;
 
#test2 {
	background: orange;
	h2 {
		color: red;
	}
	h2 {
		blockquote {
			border-left: @value + 50 solid green;
			span {
				border: 3px solid black;
			}
		}
	}
}
 
.bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
}
 
a {
	color: red;
	.bundle > .button;
}

Une idée ?

Merci.

Bisûnûrs · 02/03/2011, 09h24

Citation:

Envoyé par chok371

Une idée ?

Change de framework ?

NoSmoking · 02/03/2011, 18h54

Citation:

Envoyé par Bisûnûrs

Change de framework ?

ou abandonnes le simplement, rien de bien complexe concernant la hiérarchisation en CSS.

chok371 · 05/03/2011, 16h40

Bonjour,

Finalement j'ai trouvé LessPHP, pareil que lessCSS mais le fichier .less est généré en fichier CSS valide avec PHP, donc aucun risque de problème niveau client.

Citation:

ou abandonnes le simplement, rien de bien complexe concernant la hiérarchisation en CSS.

Ce framework ne sert pas qu'à ça, mais aussi à stocker des propriétés ou des classes dans des variables, à faire des fonctions, etc... vraiment tout ce qu'il manque au langage CSS (qui est trop 'statique'). Cela permet d'avoir un code plus souple et maintenable.

cavo789 · 22/09/2011, 22h24

Entièrement d'accord avec ton dernier post. lesscss est vraiment un superbe outil et permet d'avoir des css dynamiques, avec des variables et des fonctions.

Convertir le fichier via lessphp (http://leafo.net/lessphp/) est une excellente idée pour parer au problème du browser mais aussi faire gagner quelques microsecondes de traitement sur le client.

22/09/2011, 22h24	#5
cavo789 Membre chevronné Christophe Avonture Développeur Web Inscription : mai 2004 Messages : 649 Détails du profil Informations personnelles : Nom : Christophe Avonture Âge : 37 Localisation : Belgique Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : mai 2004 Messages : 649 Points : 774 Points : 774	Entièrement d'accord avec ton dernier post. lesscss est vraiment un superbe outil et permet d'avoir des css dynamiques, avec des variables et des fonctions. Convertir le fichier via lessphp (http://leafo.net/lessphp/) est une excellente idée pour parer au problème du browser mais aussi faire gagner quelques microsecondes de traitement sur le client. __________________ Christophe Développeur de l'extension AllEvents, gestionnaire d'évènements pour Joomla http://avonture.be/allevents - https://www.facebook.com/com.allevents - http://twitter.com/#!/avonture
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email