Discussion :

[redah75]

Bonjour a tous et a toutes,


j'ai un fichier css qui contient tout a la fin des media queries pour ecran iphone et tablettes....

afin d'eviter de traiter les responsive css de chaque page separement, j'ai voulu utiliser des classes generiques, ci-dessou un exemple:

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
18
 
<div id="news">
	<div class="news column">contenu 1</div>
	<div class="news column">contenu 2</div>
	...
</div>
 
#news .news {
	float: left;
	width: 50%;
}
 
@media only screen and (max-width: 767px) {
	.column {
		clear: both;
		width: 100%;
	}
}

le css du media query n'est pas pris en compte. les 2 solution que j'ai en tete sont:
1- Utiliser !important, mais j'en sui pas convaincu
2- utiliser le nom exact de la class css original, a savoir "#news .news"

auriez vous une autre solution qui simplifie la maintenance du code?

Merci par avance

[Muchos]

Vous ciblez deux classes différentes !

Si vous aviez cibler la même classe, il aurait fallu prendre en compte la priorité de traitement des règles CSS : une règle ID + CLASS prend le dessus sur une règle CLASS uniquement.

Vous auriez alors pu en effet utiliser !important, mais en utilisant simplement une classe, votre règle la plus basse dans le fichier CSS prendra naturellement le dessus.

Dans tous les cas, il faut éviter d'utiliser ID (et supérieurs) comme marqueur, car on perd radicalement en souplesse

[EDIT] Dans le cas présent, peu importe que les classes soient différentes! C'est simplement un problème de priorité des règles CSS. Désolé pour cette confusion.

[redah75]

Merci Muchos pour votre reponse.

en gros, je suis obligé de remettre dans media query exactement la meme chose que dans le css par default??

Dans tous les cas, il faut éviter d'utiliser ID

je ne vois pas trop ce que vous voulez dire par cela, auriez vous un cas concret pour meixu vous comprendre??

MErci

[Muchos]

en gros, je suis obligé de remettre dans media query exactement la meme chose que dans le css par default??

Désolé, je me suis mal exprimé . En enlevant #news de la règle CSS ou en l'ajoutant dans les deux cas, le problème devrait être réglé.

Maintenant, pourquoi utiliser deux classes différentes alors que, d'après la CSS, il s'agit de faire flotter vos "news" sur grande résolution et de les superposer sur petite? À votre place, j'utiliserais simplement .news, sans identifiant. Ça fait moins de code et c'est a priori plus logique.

Dans tous les cas, il faut éviter d'utiliser ID

Là encore, ma formulation est malheureuse. Les identifiants (ID), c'est très utile dans le HTML, pour les ancres. En CSS, c'est plus ennuyeux car :

• l'ID ne cible qu'un élément (puisqu'il est unique). Imaginons que vous vouliez une seconde boîte "news" : il faut créer un second identifiant.
• l'ID pèse lourd : 100 points contre 10 points pour une classe. Avec la règle des priorités CSS, ça peut devenir compliqué…

En outre, les textes des classes sont aujourd'hui utilisés par les moteurs de recherche, contrairement aux ID. Votre boîte #news pourrait ainsi s'appeler .newsfeed, ça lui donne du sens.

Maintenant, s'il n'y a qu'une seule boîte NEWS par page et qu'elle sert d'ancre, alors utilisez ID

[redah75]

Maintenant, pourquoi utiliser deux classes différentes alors que, d'après la CSS, il s'agit de faire flotter vos "news" sur grande résolution et de les superposer sur petite? À votre place, j'utiliserais simplement .news, sans identifiant. Ça fait moins de code et c'est a priori plus logique.

Moi aussi je n'ai pas ete tres concis dans ma question
je redonne un exemple plus complet:

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
// page news
<div id="news">
	<div class="news column">contenu 1</div>
	<div class="news column">contenu 2</div>
	...
</div>
 
// page articles
 <div id="articles">
	<div class="article column">contenu 1</div>
	<div class="article column">contenu 2</div>
	...
</div>
 
// CSS
#news .news {
	float: left;
	width: 50%;
}
 
#articles .articles {
	float: left;
	width: 33.333%;
}
 
@media only screen and (max-width: 767px) {
	.column {
		clear: both;
		width: 100%;
	}
}

la j'ai 2 pages diffentes (articles et news ou plus) avec 2 presentations differentes, seulement dans les petites ecrans, il y aura toujours la meme presentation. et c'est pour cette raison que j'ai voulu avec une class commune qui est .column

Là encore, ma formulation est malheureuse. Les identifiants (ID), c'est très utile dans le HTML, pour les ancres. En CSS, c'est plus ennuyeux car :

au fait j'utilise rarement les ID, je l'utilise uniquement pour <div id="header"> le footer et aussi dans <body> pour nommer une page: comme <body id="news">

En enlevant #news de la règle CSS ou en l'ajoutant dans les deux cas, le problème devrait être réglé

c'est bien ce que j'ai fait et ca marche bien

[Muchos]

c'est pour cette raison que j'ai voulu avec une class commune qui est .column

En effet, ça se tient
Vous pouvez aussi faire une règle

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.article, .news {/* style pour media query */}