Corriger du code css à la volée

**nicerico** · 16/05/2017, 09h19

Bonjour

je recherche une solution pour corriger du code css via une api ou un webservice

en effet j'ai des templates qui sont traitées avec un système de dynamic content
qui gère des tags délimité par {}
du coup si j'ai du css dans le code, les {} sont retirés par le système de dynamic content et le css n'est plus valide

(je n'ai pas accès aux sources qui gère le dynamic content)

Merci
Bonne journée

**badaze** · 16/05/2017, 19h57

Peux tu donner un exemple ?

**badaze** · 16/05/2017, 20h57

Eventuellement comme ça.

Code php :

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
 
<?php
$pattern = "/(<\s*style\s+type\s*=\s*\"text\/css\"\s*>.*?<\/\s*style\s*>)/msi";
// Chargement du fichier
$html = file_get_contents('test9255b.php');
preg_match_all($pattern,$html,$array);
$replacement = array();
foreach($array[0] as $key => $value) {
 // chaine peu proobable -> on peut mettre ce qu'on veut
 $replacement[$key] = "<!--h____________h_________i$key-->";
}
// on remplace par une chaine peu probable
$html = str_replace($array[0],$replacement,$html);
// ----> on fait ce qu'on veut sur le code
//print $html; // $html contient les données remplacées
// on fait le remplacement inverse
$html = str_replace($replacement,$array[0],$html);
print $html;

test9255b.php

Code html :

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
 
<!DOCTYPE html>
<html>
        <head>
  <style type="text/css">
  h3 {color:red}
  h4 {color:blue}
  </style>
 
  <style type="text/css">
  div {color:green}
  p {color:yellow}
  </style>
 
        </head>
 
        <body>
            <h2>Calcul</h2>
        </body>
</html>

Source test9255b.php

Nom : 20170516_003A.JPG
Affichages : 159
Taille : 25,8 Ko

Après le remplacement
Nom : 20170516_003B.JPG
Affichages : 152
Taille : 17,7 Ko

Après la remise à l'état initial
Nom : 20170516_003C.JPG
Affichages : 171
Taille : 24,9 Ko

**nicerico** · 17/05/2017, 08h09

Bonjour,

Merci pour votre réponse
je vous donne un exemple de code css invalide (car il manque les {}) qu'il faut retoucher :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
@media only screen and (max-width : 600px) 
table, tr, tbody, td
display : block;
width:100% !important;
.col
padding:10px 0 0 !important;
.col2
padding:0 0 10px !important;
.col3
padding:0 !important;
.boutons
width:90% !important;
</style>

**badaze** · 17/05/2017, 08h38

Salut.

A la vue de ce que tu as posté, il suffit que tu fasses un str_replace("<style>","<style> {",$chaine); et un autre avec str_replace("</style>","} </style>",$chaine);
$chaine contient le code html.

**nicerico** · 17/05/2017, 08h43

pas tout à fait
il faudrait après traitement obtenir :

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
<style>
@media only screen and (max-width : 600px) {
table, tr, tbody, td{
display : block;
width:100% !important;
}
.col{
padding:10px 0 0 !important;
}
.col2{
padding:0 0 10px !important;
}
.col3{
padding:0 !important;
}
.boutons{
width:90% !important;
}
}
</style>

c'est à dire remettre les { et } pour tous les styles
car sans elles le style n'est pas interprété

**badaze** · 17/05/2017, 10h02

Oopppss. Je n'étais pas bien réveillé.
Essaie le code que j'ai posté.

**badaze** · 17/05/2017, 10h11

J'ai oublié de préciser que mon code reconnait la balise <style type="text/css">

**badaze** · 17/05/2017, 18h31

Version qui gère aussi le <style>

Code php :

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
 
<?php
//$pattern = "/(<\s*style\s+type\s*=\s*\"text\/css\"\s*>.*?<\/\s*style\s*>)/msi";
$pattern = "/(<\s*style(\s+type\s*=\s*\"text\/css\"){0,1}\s*>.*?<\/\s*style\s*>)/msi";
// Chargement du fichier
$html = file_get_contents('test9255b.php');
preg_match_all($pattern,$html,$array);
$replacement = array();
foreach($array[0] as $key => $value) {
 // chaine peu proobable -> on peut mettre ce qu'on veut
 $replacement[$key] = "<!--h____________h_________i$key-->";
}
// on remplace par une chaine peu probable
$html = str_replace($array[0],$replacement,$html);
file_put_contents('toto_01.txt',$html); // mis seulement pour avoir une trace du changement
// ----> on fait ce qu'on veut sur le code
 
// on fait le remplacement inverse
$html = str_replace($replacement,$array[0],$html);
file_put_contents('toto_02.txt',$html); // mis seulement pour avoir une trace du changement
print $html;

test9255b.php :

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
 
<!DOCTYPE html>
<html>
        <head>
  <style type="text/css">
  h3 {color:red}
  h4 {color:blue}
  </style>
 
  <style type="text/css">
  div {color:green}
  p {color:yellow}
  </style>
 
  <style>
  @media only screen and (max-width : 600px) {
   table, tr, tbody, td{
   display : block;
   width:100% !important;
   }
   .col{
   padding:10px 0 0 !important;
   }
   .col2{
   padding:0 0 10px !important;
   }
   .col3{
   padding:0 !important;
   }
   .boutons{
   width:90% !important;
   }
  }
  </style>
 
        </head>
 
        <body>
            <h2>Calcul</h2>
        </body>
</html>

toto_01.txt :

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
 
<!DOCTYPE html>
<html>
        <head>
  <!--h____________h_________i0-->
 
  <!--h____________h_________i1-->
 
  <!--h____________h_________i2-->
 
        </head>
 
        <body>
            <h2>Calcul</h2>
        </body>
</html>

toto_02.txt :

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
 
<!DOCTYPE html>
<html>
        <head>
  <style type="text/css">
  h3 {color:red}
  h4 {color:blue}
  </style>
 
  <style type="text/css">
  div {color:green}
  p {color:yellow}
  </style>
 
  <style>
  @media only screen and (max-width : 600px) {
   table, tr, tbody, td{
   display : block;
   width:100% !important;
   }
   .col{
   padding:10px 0 0 !important;
   }
   .col2{
   padding:0 0 10px !important;
   }
   .col3{
   padding:0 !important;
   }
   .boutons{
   width:90% !important;
   }
  }
  </style>
 
        </head>
 
        <body>
            <h2>Calcul</h2>
        </body>
</html>

Corriger du code css à la volée

Langage PHP

Discussions similaires

Partager

Partager