Le responsive avec le css

Bonjour tout le monde
SVP quelqu'un peut-il m'expliquer le suivant je viens de le trouvé sur un tuto:
D’autre part, il nous arrive souvent de mettre du CSS inline dans notre html. Malheureusement, il peut arriver que ce ne soit pas adapté à un affichage sur mobile. Afin de résoudre ceci, vous pouvez le surcharger dans vos fichiers CSS à l’aide de l’attribut !important, comme ceci :

 .mesCommentaires { margin-left: 0px !important; } 

j'ai pas compris l'utilité de important dans tout ca
Merci d'avance

Bonjour,

tuto a écrit :
D’autre part, il nous arrive souvent de mettre du CSS inline dans notre html. Malheureusement, il peut arriver que ce ne soit pas adapté à un affichage sur mobile. Afin de résoudre ceci, vous pouvez le surcharger dans vos fichiers CSS à l’aide de l’attribut !important, comme ceci :

 .mesCommentaires { margin-left: 0px !important; } 

Il ne nous arrive pas "souvent" de mettre du CSS inline. Le moins on en met et mieux c'est !
Idem pour les !important : je les utilise dans des cas très spécifiques en sachant ce que je fais mais en général c'est une mauvaise pratique.

Je relis une 2e fois ta question et je me rend compte que ça n'a rien à voir avec le Responsive (RWD). Il se trouve qu'une instruction CSS en ligne :
placée dans un attribut style="propriete: valeur" donc, et pas dans une feuille de style ou dans un élément <style>.selecteur { propriete: valeur; }</style>
a plus de "poids" (de spécificité) qu'une instruction dans une feuille de style À MOINS que cette instruction ait un modificateur !important. Dans ce dernier cas, l'instruction l'emporte même sur une CSS inline.

Un article de référence : http://openweb.eu.org/articles/cascade_css
Et en image lol la spécificité des sélecteurs (aucun rapport avec !important mais ça vaut le coup) http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
Modifié par Felipe (17 Feb 2015 - 16:29)

Bonsoir Felipe merci de prendre un temps pour me répondre
oui en faite y'a pas ici la relation de la responsive, mais le paragraphe je l'extrait d'un article parlant de la responsive voici le lien / http://blog.soat.fr/2013/04/introduction-au-responsive-design-comment-rendre-son-site-responsive-sans-trop-defforts/

mais moi le problème c'est que j'ai pas bien compris le css inline et le !important

Merci pour les liens je vais les consulter

Hello,

Le !important te permet d'afficher quoi qu'il arrive une règle, c'est surtout utilisé pour éviter des bugs lié à IE par exemple ce code

.maclass {   
 border:1px solid #F00 !important;   
 border: 5px outset #00F; 
}

Cela va affiché une bordure de 5px sur Firefox, cependant ce n'est pas géré sous IE donc il va prendre en compte la première règle lié à la bordure soit 1px, grâce au !important.

Voilà j'espère que tu as compris

la regle !important est brutale , elle permet d’écraser un style quelque soit le poids des autres selecteurs utilisées dans les styles (entête, autre feuilles/fichiers CSS), en ligne(via l'attribut style) ou injectée via JavaScript. Comme déjà dit, a utilisé en connaissance de cause et d'effets.

Pour IE, il y avait un usage devenu obsolète aujourd'hui. Une regle incomprise par un navigateur est zappé tout simplement, même si la dernière prévaut, la derniere est toujours celle comprise par le navigateur

Bonjour
Merci GameTag votre réponse est très très claire merci pour l'aide
et Merci aussi gc-nomade vous m'avez éclaircir le fonctionnement des navigateurs vis-a-vis des sélecteurs
Cordiale salutations