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

HTML Discussion :

A propos de l'utilisation de !important


Sujet :

HTML

  1. #1
    Membre à l'essai
    Homme Profil pro
    Infographiste
    Inscrit en
    Janvier 2017
    Messages
    43
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Infographiste
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Janvier 2017
    Messages : 43
    Points : 20
    Points
    20
    Par défaut A propos de l'utilisation de !important
    Bonjour à vous tous,

    J'ai un dilemme ! J'ai découvert la déclaration !important et je le trouve très utile dans les CSS pour échapper à la cascade des styles en appliquant la nouvelle valeur tout en ignorant les précédentes. Mais quelqu'un de chez vous dit qu'il ne faut l'utiliser qu'en cas d'extrême nécessité car son utilisation fréquente dénote un code délaissé et mal réfléchi (https://christophe-f.developpez.com/...ion-important/).

    Pourtant, je suis confronté à un cas concret.

    Voici le code HTML :
    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
    <!DOCTYPE html>
    <html lang="fr" >
         <head>
              <meta charset="utf-8">
              <link href="styles2.css" type="text/css" rel="stylesheet">
    	  <link href="reset.css" type="text/css" rel="stylesheet">
              <title>Titre de la fenêtre</title>
         </head>
    <body>
    	<section>
    		<div class="classDiv">
    			<h1>Ceci est un titre</h1>
    			<p>Le tramway jaune avance lentement dans le brouillard laiteux et surchauffé de cette fin d’après midi d’été. Le trafic s’écoule sous la canicule, se disperse et se répand dans les mille recoins de Budapest. La ville piétine et les enfants assiègent les marchands de glace. La voiture passe au loin, tourne sur les grands boulevards, longe une avenue et débouche sur le pont Elisabeth. Suspendu dans le vide, acrobate au fil des ans et de l’eau qui passent, le monument traverse le fleuve en une enjambée majestueuse, rétablissant le lien séculaire entre la ville bourgeoise de Pest et les collines royales de Buda. Sous le pont passe un hydroglisseur, il arrive de Vienne enrobé d’un cocon d’argent, milliards de gouttes d’eau qui brillent dans l’air surchauffé, d’où émergent en virevoltant les mouettes du Danube. Le Saint-Cloud de la Hongrie est plus haut, plus aride et plus difficile d’accès que celui de Paris. Bientôt la voiture est obligée de s’arrêter et on continue à pied pour arriver au point le plus culminant du mont Gellért, à cinq cents mètres d’altitude au cœur de la citadelle. On découvre alors la Ville, avec comme seul garde-fou les remparts de la fortification. Tout Budapest est là, séparée en deux par le large ruban argenté du Danube. Au nord, on devine l’île Marguerite, ses palaces et ses piscines.</p>
    		</div>
    	</section>
    </body>
    </html>
    Et voici le
    Code CSS : 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
    .classDiv {
    	width: 400px;
    	background-color: green;
    	padding: 35px;
    }
     
    h1 {
    	text-align: center;
    	background-color: yellow;
    	text-transform: uppercase;
    	font-size: 1.5em;
    	padding: 15px !important;
    	margin: -35px !important;
    	margin-bottom: 35px !important;
    }
     
    p {
    	font-size: 1.3em;
    	color: white;
    	line-height: 1.3em;
    }

    J'obtiens ce résultat :
    Nom : Capture.PNG
Affichages : 108
Taille : 97,6 Ko

    J'ai utilisé 3 fois !important dans le titre h1. C'est parce qu'il a hérité des valeurs de padding et margin placées dans la classe "maDiv" de la div verte qui est son parent. Si je ne mets pas la déclaration !important, il n'y aucun changement étant donné que ces trois propriétés héritent des valeurs de leur parent.

    Alors, voici ma question. S'il est effectivement important de ne pas utiliser la déclaration !important, comment faire alors dans ce cas concret ?

    Merci pour votre aide.

  2. #2
    Expert confirmé
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 477
    Détails du profil
    Informations personnelles :
    Âge : 54
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 477
    Points : 4 688
    Points
    4 688
    Par défaut
    Citation Envoyé par Obi Juan Kenobi Voir le message
    Mais quelqu'un de chez vous dit qu'il ne faut l'utiliser qu'en cas d'extrême nécessité
    et il a tout a fait raison. pour moi, le !important ne doit etre utilise que pour ecraser le style d'une autre librairie dont on n'a pas le controle, et seulement pour des valeures precies
    Citation Envoyé par Obi Juan Kenobi Voir le message
    J'ai utilisé 3 fois !important dans le titre h1. C'est parce qu'il a hérité des valeurs de padding et margin placées dans la classe "maDiv" de la div verte qui est son parent
    c'est que ta logique de "cascading" a ete mal pensee
    Code css : 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
    .classDiv {
    	width: 470px;
    	background-color: green;
    }
     
    h1 {
    	text-align: center;
    	background-color: yellow;
    	text-transform: uppercase;
    	font-size: 1.5em;
    	padding: 15px;
    	margin-bottom: 35px;
    }
     
    p {
      padding: 35px 50px 50px 50px;
    	font-size: 1.3em;
    	color: white;
    	line-height: 1.3em;
    }

  3. #3
    Membre confirmé
    Homme Profil pro
    OoW
    Inscrit en
    Juin 2019
    Messages
    140
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : Ukraine

    Informations professionnelles :
    Activité : OoW

    Informations forums :
    Inscription : Juin 2019
    Messages : 140
    Points : 498
    Points
    498
    Par défaut
    \ô/
    C'est parce qu'il a hérité des valeurs de padding et margin placées dans la classe "maDiv" de la div verte qui est son parent.
    Les propriétés paddinget marginne sont pas des propriétés héritées par les éléments.



    Si je ne mets pas la déclaration !important, il n'y aucun changement étant donné que ces trois propriétés héritent des valeurs de leur parent.
    C'est quelles ne servent à rien dans ton cas mais pas pour une question d'héritage.



    S'il est effectivement important de ne pas utiliser la déclaration !important, comment faire alors dans ce cas concret ?
    Voir réponse de Doksuri et il est même parfois nécessaire de reprendre la structure HTML pour arriver à ses fins.

Discussions similaires

  1. Réponses: 0
    Dernier message: 27/11/2008, 12h53
  2. Réponses: 3
    Dernier message: 09/12/2007, 18h32
  3. utilisation des imports
    Par Danyel dans le forum VB.NET
    Réponses: 6
    Dernier message: 16/08/2007, 21h32
  4. Utiliser n'importe quel objet comme un tableau
    Par Lethal dans le forum Collection et Stream
    Réponses: 3
    Dernier message: 22/03/2006, 12h38
  5. [Fichier Texte] Est-ce utilisable pour importation données ?
    Par avantoux dans le forum Décisions SGBD
    Réponses: 4
    Dernier message: 15/12/2005, 18h55

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