Corriger du code css à la volée

Version imprimable

16/05/2017, 10h19
nicerico

Corriger du code css à la volée

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
16/05/2017, 20h57
badaze

Peux tu donner un exemple ?

3 pièce(s) jointe(s)

Eventuellement comme ça.

Code:

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:

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

Pièce jointe 276185

Après le remplacement
Pièce jointe 276189

Après la remise à l'état initial
Pièce jointe 276194

Bonjour,

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

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>

17/05/2017, 09h38
badaze

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.

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

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é

17/05/2017, 11h02
badaze

Oopppss. Je n'étais pas bien réveillé.
Essaie le code que j'ai posté.
17/05/2017, 11h11
badaze

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

Version qui gère aussi le <style>

Code:

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:

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:

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:

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>