Migrer du CSS1 pour ie5 a CSS3 pour edge/chrome/safari/ie11

**nid4mail** · 06/02/2017, 15h33

bonjour,

je maintiens en vie un site intranet fait en asp.net pour ie5. Les dirigeants de ma boites ont decidé de le rendre compatible aux dernières versions des navigateurs pour les tablettes et les ordis, et tout ca pour hier. si je réussis a me dépatouiller avec le code HTML, je ne comprends rien du tout avec les webkit, les hacks pour le css. pourriez vous m'aider?

On me demande un rendu correct avec chrome et safari (donc je pense utiliser des webkit mais j'ai pas du tout compris comment ca marche, les inserer etc...) et si possible ie11 sans le mode de compatibilité activé (ou mode enterprise)

voici mon css actuel qui marche sous ie11 avec le mode de compatibilité activé:

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
 
a:link
{
	font-family:verdana, sans-serif;
	font-size:11px;
	color:#333333;
	background-color:transparent;
	text-decoration:none;
}
a:visited
{
	font-family:verdana, sans-serif;
	font-size:11px;
	color:#333333;
	background-color:transparent;
	text-decoration:none;
}
a:hover
{
	font-family:verdana, sans-serif;
	font-size:11px;
	color:#BB0012;
	background-color:transparent;
	text-decoration:none;
}
body 
{
	background-color: #EFEFEF;
	font-family: Verdana;
	font-size: 10px;
	text-align: left;
	margin-top: 0;
	margin-left: 0;
	margin-bottom: 0;
	margin-right: 0;
}
hr
{
	color:#485764;
}
p
{
	font-family:verdana, sans-serif;
	font-size:11px;
	color:#000000;
	background-color:transparent;
	margin-left:0px;
	margin-right:0px;
}
.accordionContent
{
	padding: 1px;
	border: 1px solid #3667A1;
    background-color: #DDDDDD;
    text-align: left;
}
.accordionHeader
{
    border: 1px solid #3667A1;
    color: white;
    background-color: #3667A1;
	font-size: 12px;
	font-weight: bold;
	text-align:left;
    padding: 3px;
    margin-top: 5px;
    cursor: pointer;
}
.actualite
{
	font-family:verdana, sans-serif;
	font-size:11px;
	font-weight:normal;
	color:#333333;
	background-color:transparent;
}
.auteur
{
	font-size:10pt;
	font-style:italic;
	font-weight:bold;
}
.bordersolidbleu
{
	border-left:1px solid #3667A1; 
	border-right:1px solid #3667A1; 
	border-top:1px solid #3667A1;
	border-bottom:1px solid #3667A1; 
}
.bordersolidfondgris
{
	border-left:1px solid #3667A1; 
	border-right:1px solid #3667A1; 
	border-top:1px solid #3667A1;
	border-bottom:1px solid #3667A1;
	background-color:#DDDDDD; 
}
.bordersolidfondgrissondage
{
	border-left:1px solid #4F4F4F; 
	border-right:1px solid #4F4F4F; 
	border-top:1px solid #4F4F4F;
	border-bottom:1px solid #4F4F4F;
	background-color:#DDDDDD;
	font-weight:normal;
	text-align:left; 
}
.bordersolidgris
{
	border-left:1px solid #888888; 
	border-right:1px solid #888888; 
	border-top:1px solid #888888;
	border-bottom:1px solid #888888; 
}
.bordersolidrouge
{
	border-left:1px solid #ca0f00; 
	border-right:1px solid #ca0f00; 
	border-top:1px solid #ca0f00;
	border-bottom:1px solid #ca0f00; 
}
.boutonbleu
{
	COLOR : #FFFFFF;
	FONT-FAMILY : Arial;
	font-size : 12px;
	font-weight : bold;
	background-color : #3667A1;
	width : 102px;
	height : 24px;
	border : 1px solid #3667A1;
	cursor: pointer;
}
.boutonbleuinverse
{
	COLOR : #3667A1;
	FONT-FAMILY : Arial;
	font-size : 12px;
	font-weight : bold;
	background-color : #FFFFFF;
	width : 102px;
	height : 24px;
	border : 1px solid #3667A1;
	cursor: pointer;
}
.boutonbleucourt
{
	COLOR : #FFFFFF;
	FONT-FAMILY : Arial;
	font-size : 12px;
	font-weight : bold;
	background-color : #3667A1;
	width : 70px;
	height : 24px;
	border : 1px solid #3667A1;
	cursor: pointer;
}
.boutonbleulong
{
	COLOR : #FFFFFF;
	FONT-FAMILY : Arial;
	font-size : 12px;
	font-weight : bold;
	background-color : #3667A1;
	width : 120px;
	height : 24px;
	border : 1px solid #3667A1;
	cursor: pointer;
}
.boutonbleumoinshaut
{
	COLOR : #FFFFFF;
	FONT-FAMILY : Arial;
	font-size : 12px;
	font-weight : bold;
	background-color : #3667A1;
	width : 72px;
	height : 19px;
	border : 1px solid #3667A1;
	cursor: pointer;
}
.boutonbleutreslong
{
	COLOR : #FFFFFF;
	FONT-FAMILY : Arial;
	font-size : 12px;
	font-weight : bold;
	background-color : #3667A1;
	width : 150px;
	height : 24px;
	border : 1px solid #3667A1;
	cursor: pointer;
}
.boutonrouge
{
	COLOR : #FFFFFF;
	FONT-FAMILY : Arial;
	font-size : 12px;
	font-weight : bold;
	background-color : #CD6580;
	width : 102px;
	height : 24px;
	border : 1px solid #911E35;
	cursor: pointer;
}
.celluleTableau
{
	background-color: #DDDDDD;
}
.celluleAlterneeTableau
{
	background-color: #C7D7E4;
}
.contact
{
	font-size: smaller;
}
.data
{
	color: #3667A1;
	font-weight: bold;
}
.dataTextarea
{
	color: #3667A1;
	font-weight: bold;
	font-family: Verdana;
	font-size: 11px;
}
.dataInput
{
	color: #3667A1;
	font-weight: bold;
	font-family: Verdana;
	font-size: 11px;
}
.dataSelect
{
	color: #3667A1;
	font-weight: bold;
	font-family: Verdana;
	font-size: 11px;
}
.dernieresPagesModif
{
}
.dernieresPagesModifHover
{
	background-color: #C7D7E4;
}
.divFakefile
{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}
.divFileinputs
{
	position: relative;
}
.enteteTableau
{
	background-color: #888888;
	color: #FFFFFF;
	font-weight: bold;
}
.fondbleu
{
	background-color: #c7d7e4;
}
.fondbleufonce
{ 
	background-color: #3667A1;
}
.fondgris
{
	background-color:#DDDDDD;
	/*filter:alpha(opacity=80);*/
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.fondrose
{
	background-color: #ffe1dd;
}
.inputFile
{
	position: relative;
	-moz-opacity:0 ;
	/*filter:alpha(opacity: 0);*/
	z-index: 2;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.li
{
	font-family:verdana, sans-serif;
	font-size:11px;
	color:#333333;
	background-color:transparent;
	text-align:left;
	margin-left:0px;
	margin-right:0px;
	margin-top:3px;
}
.maintenance
{
	font-size:40px;
	color:#6699CC;
}
.maintenancepetit
{
	font-size:30px;
	color:#6699CC;
}
.menutitle
{
	cursor:pointer;
	margin-top: 0px;
	margin-left : 0px;
	color:#ffffff;
	width:190px;
	padding:5px;
	text-align:left;
	font-family:verdana, sans-serif;
	font-size:11px;
	font-weight:bold;
	border-left:1px solid #efefef;
	border-right:1px solid #efefef;
	border-top:1px solid #efefef;
	border-bottom:1px solid #efefef;
	background-color:#3667A1;
}
.menutitleinverse
{
	cursor:pointer;
	margin-top: 0px;
	margin-left : 0px;
	color:#3667A1;
	width:190px;
	padding:5px;
	text-align:left;
	font-family:verdana, sans-serif;
	font-size:11px;
	font-weight:bold;
	border-left:1px solid #3667A1;
	border-right:1px solid #3667A1;
	border-top:1px solid #3667A1;
	border-bottom:1px solid #3667A1;
	background-color:#ffffff;
}
.plusinfos
{
	font-family:verdana;
	font-size:10px;
	font-weight:normal;
	color:#BB0012;
	background-color:transparent;
}
.retourblanc
{
	font-family:verdana, sans-serif;
	font-size:10px;
	font-weight:normal;
	color:#FFFFFF;
	text-align:right;
	background-color:transparent;
}
.signature
{
	font-size:8pt;
	font-style:italic;
	font-weight:bold;
}
.span
{
	font-size: 11px;
}
.sondage
{
	font-family:verdana, sans-serif;
	font-size:10px;
	font-weight:normal;
	text-align:left;
}
.sondageprincipal
{
	font-family:verdana, sans-serif;
	font-size:10px;
	font-weight:bold;
	text-align:left;
}
.sondageprincipalfond
{
	font-family:verdana, sans-serif;
	font-size:11px;
	font-weight:bold;
	color:#000000;
	background-color:#B8B8B8;
	text-align:center;
	vertical-align:top;
}
.submenu
{
	margin-left: 0px;
	margin-bottom: 0px;
}
.tetiere
{
	font-family:verdana, sans-serif;
	font-size:11px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#888888;
	text-align:center;
}
.textepetit
{
	font-family:verdana, sans-serif;
	font-size:10px;
	font-weight:bold;
	color:#333333;
	background-color:transparent;
}
.textemoyen
{
	font-family:verdana, sans-serif;
	font-size:11px;
	font-weight:bold;
}
.td
{
	font-family:verdana, sans-serif;
	font-weight:bold;
	color:#333333;
	background-color:transparent;
}
.titreactu
{
	font-family:verdana, sans-serif;
	font-size:11px;
	font-weight:bold;
	color:#333333;
	text-align:left;
}
.titreblanc
{
	font-family:verdana, sans-serif;
	font-size:11px;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
}
.titreblancsurrouge
{
	font-family:verdana, sans-serif;
	font-size:11px;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
	background-color:#EE3333;
	/*filter:alpha(opacity=80);*/
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.titrebleusurblanc
{
	font-family:verdana, sans-serif;
	font-size:11px;
	font-weight:bold;
	color:#3667A1;
	text-align:center;
	background-color:#FFFFFF;
	/*filter:alpha(opacity=80);*/
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.titreblancsurbleu
{
	font-family:verdana, sans-serif;
	font-size:11px;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
	background-color:#3667A1;
	/*filter:alpha(opacity=80);*/
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.titrenormal
{
	font-family:verdana, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#333333;
	background-color:transparent;
}
.titrepage
{
    font-weight: bold;
    font-size: 10pt;
    color: #FFFFFF;
    font-family: Verdana;
    text-align: center;
    background-color: #6699CC;
    height: 25px;
}
.titreProfil
{
	color: #EE3333;
	font-weight: bold;
	font-size: 11pt;
}
.txtnormal
{
	font-family:verdana, sans-serif;
	font-size:11px;
	font-weight:normal;
	color:#333333;
	background-color:transparent;
}
.txtpetit
{
	font-family:verdana, sans-serif;
	font-size:11px;
	font-weight:normal;
}
.validator
{
	color: #FF0000;
	font-weight: bold;
	font-size: 8pt;
}

Bref un gros pavé A l'aide ^_^

Merci

**friendofweb** · 06/02/2017, 16h05

Bonjour,

Pour info, il faudrait peut-être proposer aux responsables de mettre à jour leur système ? Fin du support des ancienne versions de IE_Migration vers IE11 ?. Est-ce que les OS sont récents ?

**nid4mail** · 06/02/2017, 16h17

oui mais le probleme c que certains de nos logiciels ne sont pas compatibles avec une versions superieure a XP (on change pas de logiciel comme de chemise qd 5000 employés en dependent). mais là, les 3/4 des utilisateurs sont sous windows 7... d'ou l'utilité de passé a ie 11 et d'autres vont passer sous chrome.

on a meme prevu de changer le site web d'ici la fin de l'annee.

Mais la portabilité du site actuel doit etre faite le plus rapidement possible...

**friendofweb** · 06/02/2017, 16h31

(donc je pense utiliser des webkit mais j'ai pas du tout compris comment ca marche, les inserer etc...)

Pour ce qui est de "webkit" etc.. il s'agit de préfixes permettant aux différents navigateurs d’interpréter les propriétés que tu déclares..

Voici déjà une explication des préfixes..
D'une façon plus générale : cours css
Sans oublier : Les cours html

J'ai mis les 3 liens de bases, car je ne sais pas ce que tu connais ou pas...

**friendofweb** · 06/02/2017, 16h35

J'ajoute ceci pour ton info :

les-selecteurs-en-css3
les sélecteur - MDN

**nid4mail** · 06/02/2017, 16h44

merci pour les liens mais je nage trop... aurais tu un css d'exemple qui puisse me servir a modifier le mien a defaut d'un lien qui explique comment passer de ie 7 a chrome ^^'

ou un css complet qui soit compatible avec tout... (j'ai un browser detector qui m'aide a faire le tri ie 5 / ie 11 et webkit a present donc un css d'exemple pourrait etre facilment adapté...)

**friendofweb** · 06/02/2017, 17h13

Je veux bien essayer de "nettoyer" ton code, en fonction de mes capacités, d'autres personnes sur ce forum le feront mieux que moi.

Questions:

Est-ce que ton code css est complet ?
Pourrais-tu partager un code html, pour se rendre compte de ce que tu veux faire ?

Sinon, je pense déjà pouvoir simplifier quelques propriétés et gagner quelques octets...

Par contre, pour ce qui est des 25% des machines qui tournent sous Win XP, je me demande s'il est possible de updrader les navigateurs en installant Chrome par exemple.
Car, si le navigateur est trop ancien (ie5), ça n'ira pas je pense.

**nid4mail** · 06/02/2017, 17h50

mon code css sert a alimenter 3250 pages html... donc on va dire qu'il est complet...

comme je ne tiens pas a repandre mon code sur le site je vais essayer de t'envoyer en prive le rendu visuel que le css fournit au debut permet d'obtenir...

**friendofweb** · 06/02/2017, 18h47

Salut, je suppose que tu l'as déjà fait, mais pense à faire un backup en cas de souci ...
Sinon, 3250 pages ok, j'imagine que tu n'as pas trop envie de toucher à la structure html. Pourtant, sauf erreur, la structure des pages est très importantes ici se trouve une brève description d'une structure html4.

Le DOCTYPE peut influencer le comportement des navigateurs ! Le navigateur doit savoir s'il s'agit de html, xhtml ou html5
Comme tu reprends un ancien projet, je me demande s'il n'est n'est pas mieux de refaire le tout, avec une structure html5 comme ceci :
Pourquoi tout, car j'imagine que le développement à été fait avec d'anciennes techniques, comme celle du tableau...

Face à ces questions que je me pose, je pense qu'il serait préférable qu'une autre personne (qui a de la bouteille) de ce forum te conseil.

Code html5 :

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

1
2
3
4
5
6
7
8
 
<!DOCTYPE html>
<html>
 <head>
   <title></title>
</head>
<body></body>
</html>

**NoSmoking** · 06/02/2017, 19h24

Bonjour,

On me demande un rendu correct avec chrome et safari (donc je pense utiliser des webkit mais j'ai pas du tout compris comment ca marche, les inserer etc...)

Ceci veux à peux près rien dire

Le mieux que tu ais à faire dans un premier temps est de tester sous les différents navigateurs que vous devez utiliser et de faire le constat des éventuels dégâts, et oui certaines pages conçues pour IE5/6 présentent encore d'excellent rendus.

Pour prendre l'ampleur du CSS à modifier, tu compares ta page avec une page pour laquelle tu auras changé le DOCTYPE en <!DOCTYPE html>, c'est souvent un bon indicateur.
Ajoute également dans l'entête <meta http-equiv="X-UA-Compatible" content="IE=edge"> cela pourrait aider.

Pour vérifier ton CSS tu peux le passer à la moulinette du validateur, pour info le CSS de ton premier post est conforme

Faire un point zéro cela me paraît indispensable.

**nid4mail** · 13/02/2017, 15h14

j'ai resolu mon souci.

Mon probleme venait tout simplement du fait que lorsque je "reniflais" le navigateur pour charger le css adapté, le cas de chrome n'etait pas traité... pour les gens interessé (et moi aussi si je retombe sur ce sujet voici le code qui me pezrmet de chargé le css adequat

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
 
    string strBrowser = Request.Browser.Browser.ToString(); // détection du type de navigateur
    int iVersion = Request.Browser.MajorVersion;
 
    if (strBrowser == "IE")
    {
        if (iVersion <= 7)
        {
            string strLien7 = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd' /><html xmlns='http://www.w3.org/1999/xhtml' ><head runat='server'><title>Code 1</title>";
            Response.Write(strLien7);
            strLien7 = "<link rel='stylesheet' type='text/css' href='" + ConfigurationManager.AppSettings["cheminStyle"] + "Code1.css' />";
            Response.Write(strLien7);
        }
        else
        {
            string strLien11 = "<!DOCTYPE html><html lang='fr'><head runat='server'><meta charset='utf-8'><title>Code 2</title>";
            Response.Write(strLien11);
            strLien11 = "<link rel='stylesheet' type='text/css' href='" + ConfigurationManager.AppSettings["cheminStyle"] + "Code 2.css' media='all'/>";
            Response.Write(strLien11);
            strLien11 = "<meta http-equiv='X-UA-Compatible' content='IE=edge' >";
            Response.Write(strLien11);
        }
    }
    else
    {
        string strLien11 = "<!DOCTYPE html><html lang='fr'><head runat='server'><meta charset='utf-8'><title>Code 2</title>";
        Response.Write(strLien11);
        strLien11 = "<link rel='stylesheet' type='text/css' href='" + ConfigurationManager.AppSettings["cheminStyle"] + "Code2.css' media='all'/>";
        Response.Write(strLien11);
        strLien11 = "<meta http-equiv='X-UA-Compatible' content='IE=edge' >";
        Response.Write(strLien11); 
    }

a ceux qui copient le code : attention aux acolades, c'est un extrait ici...

**NoSmoking** · 14/02/2017, 19h08

Je trouve que cela fait bien compliqué là où l'on pourrait mettre un commentaire conditionnel.

Code html :

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

1
2
3
4
<link rel="stylesheet" type="text/css" href="css_pour_tous.css" />
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="css_pour_IE7_et_moins.css" />
<![endif]-->

Migrer du CSS1 pour ie5 a CSS3 pour edge/chrome/safari/ie11

CSS

Discussions similaires

Partager

Partager