HTML5 Professor - ACSS converter

Tutoriels > ACSS converter

ACSS converter

Sommaire :

Présentation


ACSS Converter (Active Cascading Style Sheets) est une petite merveille qui va vous permettre de vous simplifier grandement la vie dans l'écriture de code CSS.

L'installation est ultra simple et fonctionne en toute transparence sur n'importe quel serveur. Une fois les scripts mis en place, tout se fait automatiquement, vous n'avez plus à vous soucier de quoi que ce soit et il devient alors impossible de s'en séparer !

Parmi les fonctionnalités disponibles :

  • Introduction automatique des préfixes -moz-, -webkit-, -o-, -ms- pour les propriétés CSS3
  • Support d’arbres CSS
  • Prise en charge de variables permettant de changer instantanément une couleur par exemple
  • Support d'extension d'éléments



acssConverter-1.0.zip


Prenons un petit exemple :

Secret
Code : css
  1. /*
  2. *       Auto change CSS 3 attributes
  3. */
  5. body { 
  6.         background: linear-gradient(
  7.                 bottom,
  8.                 #1590b2,
  9.                 #28b6d6
  10.         );
  11.        
  12.         width: 100%;
  13.        
  14.         user-select: none;
  15. }
  18. /*
  19. *       CSS tree
  20. */
  22. ul {
  23.         width: 100%;
  24.        
  25.         li, lo {
  26.                 background: red;
  27.         }
  28.        
  29.         :hover {
  30.                 width: 50%;
  31.         }
  32.        
  33.         &.liste {
  34.                 width: 75%;
  35.         }
  36. }
  38. /*
  39. *       Variables
  40. */
  42. $black = '#111111';
  44. div {
  45.         background: $black;
  46.        
  47.         $redBorder = '1px solid red';
  48.        
  49.         border: $redBorder;
  50. }
  52. /*
  53. *       Extend
  54. */
  56. div {
  57.         width: 100%;
  58.         extend: '.gradient';
  59. }
  61. .gradient {
  62.         background: #1590b2;
  63.         background: linear-gradient(
  64.                 bottom,
  65.                 #1590b2,
  66.                 #28b6d6
  67.         );
  68. }


Donnera un code CSS compatible CSS 2 :

Code : css
  1. body {
  2.         background: -webkit-linear-gradient(bottom,#1590b2,#28b6d6);
  3.         background: -moz-linear-gradient(bottom,#1590b2,#28b6d6);
  4.         background: -o-linear-gradient(bottom,#1590b2,#28b6d6);
  5.         background: -ms-linear-gradient(bottom,#1590b2,#28b6d6);
  6.         background: linear-gradient(bottom,#1590b2,#28b6d6);
  7.         width: 100%;
  8.         -webkit-user-select: none;
  9.         -moz-user-select: none;
  10.         -o-user-select: none;
  11.         -ms-user-select: none;
  12.         user-select: none;
  13. }
  15. ul {
  16.         width: 100%;
  17. }
  19. ul li, ul lo {
  20.         background: red;
  21. }
  23. ul:hover {
  24.         width: 50%;
  25. }
  27. ul.liste {
  28.         width: 75%;
  29. }
  31. div {
  32.         background: #111111;
  33.         border: 1px solid red;
  34. }
  36. div {
  37.         width: 100%;
  38.        
  39. }
  41. .gradient, div {
  42.         background: #1590b2;
  43.         background: -webkit-linear-gradient(bottom,#1590b2,#28b6d6);
  44.         background: -moz-linear-gradient(bottom,#1590b2,#28b6d6);
  45.         background: -o-linear-gradient(bottom,#1590b2,#28b6d6);
  46.         background: -ms-linear-gradient(bottom,#1590b2,#28b6d6);
  47.         background: linear-gradient(bottom,#1590b2,#28b6d6);
  48. }


Installation



Télécharger le zip et extrayez le dans le répertoire de votre site web (de préférence à la racine de celui-ci).
Si vous possédez déjà un fichier .htaccess, il suffit de copier le contenu de l'un dans l'autre.

Ensuite ouvrez acssConverter.php et repérez la 1ère ligne $root = '../..';.
Modifiez cette variable pour qu'elle pointe la racine de votre site web par rapport à la page acssConverter.php (par exemple, si celle-ci est située dans /css/ => $root = '..';).

Pour tester si tout marche bien, ouvrez la page style.acss depuis votre navigateur web et vous devriez obtenir un code CSS valide.

Attention : Le fichier .htaccess doit être situé à la racine de votre site web !

Voilà c'est tout.

Créer un fichier acss



Pour utiliser un fichier acss rien de plus simple : commencez par créer un fichier avec l'extension .acss que vous pouvez placer n'importe où.

Attention : Si vos fichiers sont encodées en utf-8, enregistrez les en utf-8 sans BOM !


Ensuite pour l’intégrer à une de vos page HTML : <link rel="stylesheet" type="text/css" href="css/style.acss" />
Bref rien de plus simple car tout est automatique.

Documentation


Les attributs CSS 3



Quand on code en CSS, on se retrouve souvent face à un problème important : la compatibilité du CSS3 ! Par exemple la syntaxe CSS 3 pour un dégradé est la suivante :

Code : css
  1. background: linear-gradient(
  2.         bottom,
  3.         #1590b2,
  4.         #28b6d6
  5. );


Sauf que sans préfixes ( -moz-, -webkit-, -o-, -ms- ) et bien ça na marchera tout simplement pas ! Il va donc falloir réécrire 5 fois ce code... Avec accsConverter pas de problème car les préfixes sont ajoutés automatiquement à tous les attributs CSS 3 (comme par exemple : box-shadow, transition, ...)

Les arbres CSS



Une autre fonctionnalité majeure et indispensable de assConverter et la gestion de arbres.
On en a souvent marre en CSS d'écrire :

Code : css
  1. #menu ul li .line .text h1 {
  2.         font-size: 24px;
  3. }
  5. #menu ul li .line .text h2 {
  6.         font-size: 16px;
  7. }


Grâce à accsConverter, on peut imbriquer des éléments dans d'autres éléments :

Code : css
  1. div {
  2.         font-size: 16px;
  4.         h1 {
  5.                 font-size: 24px;
  7.                 .title {
  8.                         color: red;
  9.                 }
  10.         }
  11. }


Par exemple le code si dessus affiche les div en vert et lorsque la souris est dessus en rouge :

Code : css
  1. div {
  2.         background: green;
  3.         :hover {
  4.                 background: red;
  5.         }
  6. }


Finalement, on nouveau sélecteur fait son apparition : &. Ce signe sert à indiquer qu'il faut que les deux éléments de part et d'autre soient réunis pour que la règle CSS s’applique :

Code : css
  1. .box & .red {
  2.         background : red;
  3. }
  5. /* ou */
  7. .box {
  8.         &.red {
  9.                 background : red;
  10.         }
  11. }
  13. /* equivaut à */
  15. .box.red {
  16.         background : red;
  17. }


Les variables



Les variables sont un moyen simple de stoquer des données et de les réutiliser plus tard.
Elle s'initialisent de cette façon : $variable = 'valeur'; n'importe où dans le code et peuvent être utilisées après n'importque quel attributs css : border: $variable;

Par exemple, si vous avez 20 fois la même valeur de couleur pour une bordure plutôt que d'écrire border: 1px solid #123456;, écrivez plutôt :

Code : css
  1. $boderColor = '#123456;'
  3. div {
  4.         border: 1px solid $boderColor;
  5. }


De ce fait, si vous voulez changer la valeur de la couleur de vos bordures, il ne faudra pas le faire 20 fois.

L'attribut extend



Dernier point : acssConverter ajoute l'attibut extend. Celui ci permet à un élément d'hériter des propriétés d'un autre élément.
La syntaxe est la suivante : extend : 'element existant';

Code : css
  1. div {
  2.         width: 100%;
  3.         extend: '.gradient';
  4. }
  6. .gradient {
  7.         background: #1590b2;
  8.         background: linear-gradient(
  9.                 bottom,
  10.                 #1590b2,
  11.                 #28b6d6
  12.         );
  13. }


Avec ce code, toutes les div hériteront des attributs présents dans .gradient

Voilà c'est fini, n'hésitez pas à posez des questions si vous en avez !


Tutoriels > ACSS converter
[remonter]
[form method="POST" id="connexion" class="logForm"] [label for="pseudo"]Pseudo :[/label][input type="text" name="pseudo" id="pseudo" required="required"] [br] [label for="password"]Code :[/label][input type="password" name="password" id="password" required="required"] [br] [button]Se connecter[/button] [/form]
[form method="POST" id="inscription" class="logForm"] [label for="pseudo"]Pseudo :[/label][input type="text" name="pseudo" id="pseudo" required="required" maxlength="16"] [br] [label for="password"]Code :[/label][input type="password" name="password" id="password" required="required" maxlength="16"] [br] [label for="email"]Email :[/label][input type="email" name="email" id="email" required="required"] [br] [button]S'inscrire[/button] [/form]