Merci Mark : Je Rame sur Real World

Problème du Traducteur !

Lien de référence

ndt : si vous avez une idée pour retrouver comment mettre le goéland au milieu de la page comme sur le lien original. et ici via en fonction import... :
mais impossible de copier-coller ce code dans le gabarit citydesk ?

Rien à faire, le gabarit ne veut pas fonctionner, ici c'est juste une page isolé HTML sans la variable {$.body$}... 

• La feuille de style que j'utilise est pourtant identique sur les deux éléments...
• Retour a la page qui valide mais avec un oiseau sur la gauche.

Traduction en cours

Les gens me demandent si souvent comment structurer leurs feuilles CSS. La réponse, bien sûr, est que tant qu'elle valide, il n'y a pas de bonne ou mauvaise méthode. La vérité est que cet état de fait est du aux fichiers CSS qui ont vraiment besoin d'être compréhensibles par des hommes et pas seulement par des machines. Et il y a quelques trucs avec le chemin de la cascade à régler qui peuvent modifier la façon de faire fonctionner votre style et comment les éléments jouent une fois rendus dans votre navigateur.

The answer, of course, is that as long as it validates, there is no right or wrong way. The truth of that statement belies the fact that CSS files really need to be readable and understandable by humans, not just machines. And there are some issues with the way the cascade is set up that can change the way you might expect your styles to work, and how things actually play out once rendered in a browser.

Ce que je fais

Sans vous suggérer un moyen dogmatique de régler vos feuilles de style, je veux présenter une technique qui fonctionne bien pour moi. Cette technique est étroitement liée à la manière dont vous balisez les documents HTML qui sont couplés avec les feuilles de style.

Je l'appelle "Environmental Style". Pas parce que c'est quelquechose de plus "vert" que d'autres techniques, mais parce que c'est basé sur des éléments de style à l'intérieur d'un envrionnement donné sur une page.

Breaking it down

Dès que je commence à concevoir ma page je réfléchis à quoi chaque partie fonctionne ensemble pour constituer un plus grand ensemble, mais aussi comment les élements à l'intérieur de chaque partie (ou chaque environnement) fonctionnera. Par exemple, une page typique contient un Titre (Header), quelque Navigation, le Contenu Principal (Main Content), et un PieddePage (Footer).

Le "Header" pourrait se heurter plus tard à un en-tête ou un titre, quelque sorte (comme une têtière), ou quelque "breadcrumbing".

La Navigation est typiquement et principalement une liste de liens.

Le Contenu Principal est ce qui est attendu là par le visiteur, et comprend la majorité de la page.

Le Piedde Page "footer" peut contenir de l'information, des dates de modification ou mises à jour, des avertissements ou autres mentions légales. Il est souvent encapsulé dans le site tout entier.

Ainsi j'ai défini 4 à 5 sections principales dans une page. Chacune de ces sections pourrait aussi contenir des sous-sections qui auraient besoin d'être définies.

Une fois que j'ai compris à quoi les sections et sous-sections dont j'ai besoin, je les définis comme des DIV avec des ID spécifiques. Par exemple :

#header

#navigation

#content

#footer

Sélecteurs Descendants

Maitenant, vous pouvez vouloir des liens qui se comportent d'une certaine façon dans l'environnement du Contenu Principal, et d'une manière différente dans l'environnement de Navigaiton. Cela peut être réalisé en utilisant quelquechose appelé le Sélecteur Descendant. Ce qui veut dire que nous lui définissons des règles pour des éléments apparaissant à l'intérieur d'un de ces environnements. Voilà un exemple utilisant des liens : 

#navigation a:link, #navigation a:visited {
  color: red;
  text-decoration: none;
  font-weight: bold;
  }
  
#navigation a:hover {
  color: blue;
  text-decoration: underline;
  }
  
#navigation a:active {
  background-color: #ccc;
  }

L'espace entre le #navigation et le lien des pseudoclasses est le sélecteur desencdant. Cela signifie que n'importe quelle ancre (A) qui est descendante de l'élément de #navigation doit se comporter selon les règles ci-dessus (gras, non souligné excepté pour le liens, et un petit rayon léger en fond quand il est cliqué).

Seuls les liens à l'intérieur de #navigation adopteront ces comportements. Les liens dans d'autres DIVs s'afficheront par défaut, ou tout autre commande qui aura pu lui être assignée.

Chaud et froid

Les sélecteurs descendants peuvent être emboîtés à plus deux crans de profondeur. Cela offre des sortes de comportements très spécifiques à régler.

#navigation .hot li a:link {color: red;}

#navigation .cool li a:link {color: blue;}

Bénéfices

Dans votre HTML, vous pourriez avoir une liste de liens "chauds" qui sont d'importance courantes. Quand ces liens deviennent moins pertinents, ils pourraient se déplacer dans une section "froide" de l'environnement de #navigation. En coupant et collant simplement le lien à partir du containe .hot vers le container .cool, fait passer le lien du rouge au bleu..

Si nous avions assigné des classes à ces liens, nous n'aurions pas seulement été obligés de déménager ces liens dans le HTML, mais aussi souvenu de changer leurs noms de classes. Une fois réglé, ces styles d'environnement rendent les choses beaucoup plus faciles à maintenir.

Un autre exemple qui pourrait être ce que vous appelez un lien dans la  #content DIV que vous voulez aussi inclure dans la #navigation. A nouveau un simple copier-coller fera se comporter le lien de la manière dont il se doit dans l'ensemble des environnements, mais sans modifier quoi que ce soit dans les balises HTML.

Plus que des liens

Cela fonctionne pour d'autres choses que des simples liens. Mettons que vous ayez des listes dans #navigation et des listes à l'intérieur de  #content. Dans #navigation vous pourriez désirer limiter leurs longueurs et leurs marges, en les forçant vers le bord gauche de la DIV. Dans le l'environnement  #content vous voudriez que la liste se comporte normalement.

En utilisant la même technique vous pouvez forcer les listes à se comporter différemment selon l'environnement dans lequel elles sont basées, sans vous soucier de cela dans le balisage. Et vous vous épargnez de créer des tonnes de cas de classes exceptionnelles qui ne seraient appliquées qu'à des élements isolés dans le HTML. Il y a des fois ou quand cela s'impose, mais en utilisant la techique de style environnement vous fait gagner du temps et des cheveux en essayant de vous souvenir quelle et ou est la CSS créée pour le petit effet que votre client trouve désormais ennuyeux ( ou veut implémenter plus largement).

Puissant et Pratique

Cette technique est beaucoup plus puissante que les exemples simples mentionnés ici. Et à moins que la plupart des autres sélecteurs  (child: > and adjacent sibling: + ne me viennent immédiatement à l'esprit), les sélecteurs descendants fonctionnent dans toutes les versions 4 et plus des navigateurs de Netscape à Internet Explorer.

Environmental Style

Every so often someone will ask about how they should structure their CSS files. The answer, of course, is that as long as it validates, there is no right or wrong way. The truth of that statement belies the fact that CSS files really need to be readable and understandable by humans, not just machines. And there are some issues with the way the cascade is set up that can change the way you might expect your styles to work, and how things actually play out once rendered in a browser.

What I do

Without suggesting a dogmatic way of setting up your style sheets, I want to present a technique that works for me. This technique is closely tied with the way you mark up the HTML documents that are paired with the style sheets.

I call it Environmental Style. Not because it is somehow more "green" than other techniques, but because it is based on styling elements within a given environment on a page.

Breaking it down

As I begin to design my page I think about how each part works together to form a greater whole, but also how elements within each part (or each environment) will work. For example, a basic page typically contains a Header, some Navigation, the Main Content of the page, and a Footer.

The Header could be further broken down into a heading or title, some sort of attribution (like a masthead), and some breadcrumbing.

The Navigation is typically, and most basically, a list of links.

The Main Content is what the visitor is there to see, and comprises the largest part of the page.

The footer may contain contact information, last modified dates, copyright information, disclaimers, and other legalese. This is often boiler plate for an entire site.

So far I've defined four or five main sections of a page. Each of these sections might also contain subsections that would need to be defined.

Once I understand what sections and subsections I need, I define them as DIVs with specific IDs. For example:

#header

#navigation

#content

#footer

Descendant Selectors

Now, you may want links to behave a certain way in the Main Content environment, and a different way in the Navigation environment. This can be accomplished by using something called a Descendant Selector. What this means is we are defining rules for elements based on it appearing inside of one of these environments. Here is an example using links.

#navigation a:link, #navigation a:visited {
	color: red;
	text-decoration: none;
	font-weight: bold;
	}
	
#navigation a:hover {
	color: blue;
	text-decoration: underline;
	}
	
#navigation a:active {
	background-color: #ccc;
	}

The space between the #navigation and the link pseudoclasses is the descendant selector. It means that any anchor (A) that is a descendant of the #navigation element should behave according to the rules above (bold, no underline except on hover, and a light gray background when it is clicked).

Only links within #navigation will have those behaviors. Links in other DIVs will display the default behavior, or whatever has been assigned to them.

Hot and cold

Descendant selectors can be nested more than two deep. This allows for some very specific behavior patterns to be set up.

#navigation .hot li a:link {color: red;}

#navigation .cool li a:link {color: blue;}

Benefits

In your HTML you might have a list of "hot" links that are of current importance. As these links become less relevant, they might move to a "cool" section of the #navigation environment. Simply cutting and pasting the link from the .hot container to the .cool container (likely to be DIVs), makes the link change from red to blue.

If we had assigned classes to these links, we would not only have to move the links in the HTML, but also remember to change their class names. Once set up, these environmental styles make things much easier to maintain.

Another example might be that you have a link in the #content DIV that you also want to include in the #navigation. Again a simple copy and paste will make the link behave the way it should in both environments, but without changing any of the markup in the HTML.

More than links

This works for more than just links. Say you have lists in #navigation and lists in #content. In #navigation you might want to limit their padding and margins, forcing them to the left side of the DIV. In the #content environment you want the list to behave normally.

Using the same technique you can force lists to behave differently based on the environment they are in, without having to worry about it in the markup. And you also save yourself from creating lots of special case classes that are applied to individual elements in the HTML. There may be times when that is appropriate, but using the environmental style technique usually ends up saving time and lost hair from trying to remember what and where the CSS is that created that little effect that your client now finds annoying (or wants to apply more globally).

Powerful and practical

This technique is much more powerful than the simple examples I have given here. And, unlike most of the other selectors (child: > and adjacent sibling: + come immediately to mind), descendant selectors work in all version 4 and greater browsers from Netscape to Internet Explorer.