IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Générer vos classes CSS automatiquement


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Expert confirmé

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    Mars 2011
    Messages
    3 179
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : Mars 2011
    Messages : 3 179
    Par défaut Générer vos classes CSS automatiquement
    Faites générer votre code CSS automatiquement
    A partir de vos éléments HTML

    Je vous propose un petit générateur de CSS très simple.

    En effet, le générateur fournit par css-tr.com vous permet de générer votre code CSS (uniquement les définitions bien sûr) en parsant votre code HTML.
    Ainsi, pour chaque élément le générateur regarde s'il trouve un attribut id ou un attribut class et ajoute le code CSS correspondant.

    Pour le code HTML suivant :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div id="header">
    	<a class="logo"></a>
    </div>
    <div id="content">
    	<div class="main">
    		<h1 class="title">HTML to CSS Class</h1>
    		<p class="info">Welcome to my website!</p>
    	</div>
    </div>	
    <div id="footer">
    	<a class="footer-link-a">Homepage</a>
    </div>

    Nous obtenons avec le générateur le code CSS suivant :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    #header {} 
    #content {} 
    #footer {} 
    .logo {} 
    .main {} 
    .title {} 
    .info {} 
    .footer-link-a {}

    À vous de tester !

    Générateur de code CSS.

    Source : css-tr.com

    Et vous ?

    Utilisez-vous un outil du même genre pour simplifier l'écriture de votre code CSS ?
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  2. #2
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Par défaut
    C'est pas mal et pratique.

    Mais en général je fais mon CSS en même temps que je déclare mes id ou class dans mon HTML. Donc au final, je n'ai pas besoin de ce genre d'outil.

    Ce qui pourrait être pas mal à rajouter sur leur outil, c'est de pouvoir hiérarchiser le CSS.

    En reprenant ton exemple :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div id="header">
    	<a class="logo"></a>
    </div>
    <div id="content">
    	<div class="main">
    		<h1 class="title">HTML to CSS Class</h1>
    		<p class="info">Welcome to my website!</p>
    	</div>
    </div>	
    <div id="footer">
    	<a class="footer-link-a">Homepage</a>
    </div>

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #header {} 
    #header .logo {}
     
    #content {} 
    #content .main {}
    #content .main .title {} 
    #content .main .info {} 
     
    #footer {}
    #footer .footer-link-a {}
    Et pourquoi pas en fonction d'un certain niveau de hiérarchie.
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  3. #3
    Membre averti Avatar de RhoManu
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    Août 2013
    Messages
    18
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Août 2013
    Messages : 18
    Par défaut
    Intéressant.

    Perso je bosse sur Dreamweaver, qui a le bon goût de faire quelque chose du même genre.

    Par contre, ton idée de hiérarchie est excellente Torgar ! Je vais voir si y a pas moyen d'en faire une extension DW.

  4. #4
    Candidat au Club
    Homme Profil pro
    Webmaster
    Inscrit en
    Mars 2015
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aude (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2015
    Messages : 2
    Par défaut Eliminer les ID et Classes inutiles
    Bonjour,

    Merci pour cet outil.
    Je recherche pour ma part un outil capable de supprimer les id ou classe inutile d'une feuille CSS si ces dernières ne sont pas utilisé dans le HTML.

    C'est dans le cadre de recyclage et d'optimisation des feuilles de styles d'un site à un autre...

    Si quelqu'un connait ça...

Discussions similaires

  1. [Taglibs] Utiliser les classes css ?
    Par PeteMitchell dans le forum Struts 1
    Réponses: 4
    Dernier message: 05/05/2007, 01h31
  2. Appeler une classe CSS avec Javascript
    Par p0Kep0K dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 13/02/2006, 14h50
  3. [débutante]utiliser les classes css pour surligner des liens
    Par Mitaka dans le forum Général JavaScript
    Réponses: 18
    Dernier message: 06/01/2006, 09h37
  4. [JavaScript] Changer la class CSS via l'id
    Par Romalafrite dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 25/11/2005, 15h30
  5. [POO] Class Défilementa automatique d'images avec animation
    Par rakoto.n dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 14/01/2005, 18h21

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo