CSS : Différence entre versions

De Vulgum Techus
Aller à : Navigation, rechercher
(→‎Articles Vulgum Techus)
 
(16 révisions intermédiaires par un utilisateur sont masquées)
Ligne 1 : Ligne 1 :
−
 
+
<!-- Links checked  08/03/19 -->
 +
[[Catégorie:Langages de programmation]]
 +
[[Catégorie:Normes]]
 +
[[Catégorie:Sites Internet]]
 +
'''[[Lien court]]''' vers cette page : https://vt.cx/CSS
 +
'''[[QR code]]''' vers cette page : https://vt.cx/CSS.qr
 +
<html>
 +
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 +
<!-- VT2 -->
 +
<ins class="adsbygoogle"
 +
    style="display:inline-block;width:468px;height:60px"
 +
    data-ad-client="ca-pub-3341840374417340"
 +
    data-ad-slot="6349432125"></ins>
 +
<script>
 +
(adsbygoogle = window.adsbygoogle || []).push({});
 +
</script>
 +
</html>
  
 
= Générateur de CSS =
 
= Générateur de CSS =
−
== En ligne ==
+
== [[Programmes]] ==
 +
* [https://www.hostm.com/simplecss-download hostm.com] '''Simple CSS''' : un générateur de '''feuilles de style''' complet pour [[Windows]] et [[OS X]]
 +
 
 +
== Générateurs en ligne ==
 
* [http://css.mammouthland.net/generateur-de-css.php css.mammouthland.net] Génère une '''page de style''' assez basique à partir d'un formulaire en ligne
 
* [http://css.mammouthland.net/generateur-de-css.php css.mammouthland.net] Génère une '''page de style''' assez basique à partir d'un formulaire en ligne
 +
* [https://pagedraw.io pagedraw.io] '''PageDraw''' : générateur open source
 +
 +
== Validateur de code CSS ==
 +
Pour être valide et compatible avec le plus grand nombre de '''[[navigateurs]]''', le code '''CSS''' doit suivre des règles imposées par le '''World Wide Web Consortium (W3C)''' (. Il est possible de tester tout code '''CSS''', compacté ou non (voir plus bas) en passant par un validateur en ligne situé à :
 +
https://jigsaw.w3.org/css-validator/
 +
Celui-ci accepte des sources à partir d'une '''[[URL]]''', d'un upload de fichier ou d'un copié/collé. Les codes validés par le '''W3C''' autorisent l'ajout d'une bannières prouvant la validation :
 +
'''Bannières W3C''' : https://jigsaw.w3.org/css-validator/images/vcss.gif ou https://jigsaw.w3.org/css-validator/images/vcss-blue.gif
  
 
= Compactage de CSS =
 
= Compactage de CSS =
−
Le compactage ou compression en anglais est l'opération qui consiste à supprimer tous les codes inutiles d'un source '''CSS''' pour le rendre plus difficilement lisible. Les codes concernés sont en priorités les tabulations de l'identation (/t), les fins de ligne (/n), les backslash (\), les point-virgules (;), les codes redondants, les codes couleurs, les unités pixel ('''0''' plutôt que '''0px''' par exemple) , redondance d'unités ('''5px 8px''' au lieu de '''5px 8px 5px 8px''' par exemple), les commentaires, etc.<br.>
+
Le compactage ou compression en anglais est l'opération qui consiste à supprimer tous les codes inutiles d'un source '''CSS''' pour le rendre plus difficilement lisible. Les codes concernés sont en priorités :
−
Les gains dépendent du source mais la moyenne est aux alentours de 20%.
+
* les tabulations de l'identation ('''/t''')
−
== En ligne ==
+
* les fins de ligne ('''/n''' et ''';''')
−
* [http://www.csscompressor.com/ csscompressor.com] '''css compressor''' : 3 niveaux de compression et de nombreuses options disponibles
+
* les backslash ('''\''') et les espaces
 +
* les codes couleurs ('''#fff''' plutôt que '''#ffffff''' par exemple)
 +
* les unités pixel ('''0''' plutôt que '''0px''' ou '''font-weight:400''' plutôt que '''font-weight:normal''' par exemple)
 +
* la redondance d'unités ('''5px 8px''' au lieu de '''5px 8px 5px 8px''' par exemple)
 +
* les commentaires (suppression de ce qui est compris entre '''/*''' et '''*/''')
 +
Les gains dépendent du source mais la moyenne est aux alentours de 20%.<br/>
 +
Les compacteurs ne valident pas le code qui leur est fourni. Cette opération peut-être effectuée par le W3C (voir validateur plus haut) en préalable à tout compactage.
  
−
== Décompactage et mise en forme ==
+
== Compacteurs en ligne ==
 +
* [https://www.cleancss.com cleancss.com] '''Clean CSS''' : de nombreux utilitaires pour CSS, JSON, [[regex]] et plus encore
 +
* [https://www.csscompressor.com/ csscompressor.com] '''css compressor''' : 4 niveaux de compression et de nombreuses options disponibles
 +
* [https://cssminifier.com cssminifier.com] CSS Minifier : compression maximale sans paramètre
 +
 
 +
= Décompactage et mise en forme de CSS =
 
Le décompactage est l'opération qui consiste à redonner une forme lisible a des fichiers CSS compactés. Cela consiste prioritairement à remettre une indentation par tabulation, à séparer les longues lignes d'instructions en plusieurs lignes, à séparer les blocs d'instructions par des sauts de ligne et, le cas échéant, introduire des commentaires.
 
Le décompactage est l'opération qui consiste à redonner une forme lisible a des fichiers CSS compactés. Cela consiste prioritairement à remettre une indentation par tabulation, à séparer les longues lignes d'instructions en plusieurs lignes, à séparer les blocs d'instructions par des sauts de ligne et, le cas échéant, introduire des commentaires.
−
== En ligne ==
+
 
−
*[http://cssbeautify.com cssbeautify.com] '''CSS Beautify : remet en forme du code '''CSS''' compacté avec mise en couleur et indentation paramétrable
+
== Décompacteurs en ligne ==
−
*[http://csslisible.com csslisible.com] '''CSS Lisible''' : remet en forme du code '''CSS''' compacté (accepte copier/coller pour upload de fichiers)
+
* [https://csslisible.com csslisible.com] '''CSS Lisible''' : remet en forme du code CSS compacté (accepte copier/coller pour upload de fichiers)
−
*[http://cssunpacker.com cssunpacker.com] '''CSSunpacker''' : remet en forme du code '''CSS''' compacté
+
* [http://cssunpacker.com cssunpacker.com] '''CSSunpacker''' : remet en forme du code CSS compacté
 +
 
 +
= Articles externes =
 +
* [https://web.developpez.com/actu/260619/Un-chercheur-trouve-une-methode-CSS-pour-suivre-les-mouvements-de-la-souris-qui-pourrait-servir-a-pister-les-internautes-avec-JS-desactive/ developpez.com - 10/05/19] Un chercheur trouve une méthode CSS pour suivre les mouvements de la '''[[souris]]'''
 +
 
 +
= Articles [[Vulgum Techus]] =
 +
* [[Directives gestion des modules responsive sur Joomla]]
 +
* [[Modifier titre et signature de la collection dans B2Evolution]]
 +
* [[expressions régulières]]
 +
* [[balise hr]]
  
 
= Commentaires =  
 
= Commentaires =  

Version actuelle en date du 23 juin 2019 à 00:29

Lien court vers cette page : https://vt.cx/CSS
QR code vers cette page : https://vt.cx/CSS.qr

Générateur de CSS

Programmes

Générateurs en ligne

Validateur de code CSS

Pour être valide et compatible avec le plus grand nombre de navigateurs, le code CSS doit suivre des règles imposées par le World Wide Web Consortium (W3C) (. Il est possible de tester tout code CSS, compacté ou non (voir plus bas) en passant par un validateur en ligne situé à : 

https://jigsaw.w3.org/css-validator/

Celui-ci accepte des sources à partir d'une URL, d'un upload de fichier ou d'un copié/collé. Les codes validés par le W3C autorisent l'ajout d'une bannières prouvant la validation : 

Bannières W3C : vcss.gif ou vcss-blue.gif

Compactage de CSS

Le compactage ou compression en anglais est l'opération qui consiste à supprimer tous les codes inutiles d'un source CSS pour le rendre plus difficilement lisible. Les codes concernés sont en priorités :

  • les tabulations de l'identation (/t)
  • les fins de ligne (/n et ;)
  • les backslash (\) et les espaces
  • les codes couleurs (#fff plutôt que #ffffff par exemple)
  • les unités pixel (0 plutôt que 0px ou font-weight:400 plutôt que font-weight:normal par exemple)
  • la redondance d'unités (5px 8px au lieu de 5px 8px 5px 8px par exemple)
  • les commentaires (suppression de ce qui est compris entre /* et */)

Les gains dépendent du source mais la moyenne est aux alentours de 20%.
Les compacteurs ne valident pas le code qui leur est fourni. Cette opération peut-être effectuée par le W3C (voir validateur plus haut) en préalable à tout compactage.

Compacteurs en ligne

  • cleancss.com Clean CSS : de nombreux utilitaires pour CSS, JSON, regex et plus encore
  • csscompressor.com css compressor : 4 niveaux de compression et de nombreuses options disponibles
  • cssminifier.com CSS Minifier : compression maximale sans paramètre

Décompactage et mise en forme de CSS

Le décompactage est l'opération qui consiste à redonner une forme lisible a des fichiers CSS compactés. Cela consiste prioritairement à remettre une indentation par tabulation, à séparer les longues lignes d'instructions en plusieurs lignes, à séparer les blocs d'instructions par des sauts de ligne et, le cas échéant, introduire des commentaires.

Décompacteurs en ligne

  • csslisible.com CSS Lisible : remet en forme du code CSS compacté (accepte copier/coller pour upload de fichiers)
  • cssunpacker.com CSSunpacker : remet en forme du code CSS compacté

Articles externes

Articles Vulgum Techus

Commentaires

blog comments powered by Disqus

Récupérée de « https://www.vulgumtechus.com/index.php?title=CSS&oldid=47359 »